commit 048e080b771760b2b818fb533ae06b14345460a1 Author: Tim Chamberlain Date: Mon Jun 27 13:29:42 2022 -0500 Initial checkin diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..5a19e8a --- /dev/null +++ b/.eslintignore @@ -0,0 +1,3 @@ +node_modules +dist +coverage \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..d89e3b5 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,43 @@ +{ + "env": { + "browser": true, + "es2021": true + }, + "extends": ["plugin:react/recommended", "airbnb", "prettier"], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaFeatures": { + "jsx": true + }, + "ecmaVersion": "latest", + "sourceType": "module" + }, + "plugins": ["react", "@typescript-eslint", "prettier"], + "rules": { + "prettier/prettier": [ + "error", + { + "endOfLine": "auto" + } + ], + "react/prop-types": "off", + "no-shadow": "off", + "react/jsx-props-no-spreading": "off", + "react/react-in-jsx-scope": "off", + "import/extensions": [ + "error", + "ignorePackages", + { "ts": "never", "tsx": "never", "js": "never" } + ], + "react/jsx-filename-extension": ["warn", { "extensions": [".tsx"] }], + "import/no-extraneous-dependencies": ["error", { "devDependencies": true }] + }, + "settings": { + "import/resolver": { + "typescript": {} + } + }, + "globals": { + "JSX": true + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..0011aaa --- /dev/null +++ b/.gitignore @@ -0,0 +1,31 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +**/.idea* +*.iml +.yalc* +yalc.lock + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +package-lock.json +yarn.lock diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..40fa8e5 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,8 @@ +{ + "printWidth": 100, + "trailingComma": "es5", + "tabWidth": 2, + "semi": true, + "singleQuote": false, + "endOfLine": "auto" +} diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..78367a4 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,5 @@ +# Change Log + +## [1.0.0] 2022-02-14 + +### Original Release diff --git a/ISSUE_TEMPLATE.md b/ISSUE_TEMPLATE.md new file mode 100644 index 0000000..5600359 --- /dev/null +++ b/ISSUE_TEMPLATE.md @@ -0,0 +1,13 @@ + + + diff --git a/README.md b/README.md new file mode 100644 index 0000000..136b0b8 --- /dev/null +++ b/README.md @@ -0,0 +1,259 @@ +# [Material Dashboard 2 PRO React TS](http://demos.creative-tim.com/material-dashboard-2-pro-react-ts/#/dashboards/analytics?ref=readme-mdpr) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?url=https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts&text=Check%20Material%20Dashboard%202%20Pro%React%20made%20by%20@CreativeTim%20#webdesign%20#dashboard%20#materialdesign%20#react%20https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts) + +![version](https://img.shields.io/badge/version-1.0.0-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/ct-material-dashboard-pro-react.svg)](https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/ct-material-dashboard-pro-react.svg)](https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues?q=is%3Aissue+is%3Aclosed) + +![Image](https://s3.amazonaws.com/creativetim_bucket/products/594/original/material-dashboard-pro-react-typescript.jpg) + +Material Dashboard 2 PRO React TS is our newest premium MUI Admin Template based on React & TypeScript. If you’re a developer looking to create an admin dashboard that is developer-friendly, rich with features, and highly customisable, here is your match. Our innovative MUI + React + TypeScript dashboard comes with a beautiful design inspired by Google's Material Design and it will help you create stunning websites & web apps to delight your clients. + +**Fully Coded Elements** +Material Dashboard 2 PRO React TS is built with over 200 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining. All components can take variations in color, which you can easily modify using MUI styled() API and sx prop. You will save a lot of time going from prototyping to full-functional code because all elements are implemented. + +This Premium MUI + React + TypeScript Dashboard is coming with prebuilt design blocks, so the development process is seamless, +switching from our pages to the real website is very easy to be done. + +View [all components here](https://www.creative-tim.com/learning-lab/react/alerts/material-dashboard/). + +**Documentation built by Developers** + +Each element is well presented in very complex documentation. + +You can read more about the [documentation here](https://www.creative-tim.com/learning-lab/react/overview/material-dashboard/). + +**Example Pages** + +If you want to get inspiration or just show something directly to your clients, you can jump-start your development with our pre-built example pages. You will be able to quickly set up the basic structure for your web project. + +View [example pages here](https://demos.creative-tim.com/material-dashboard-2-pro-react-ts/#/dashboards/analytics). + +**HELPFUL LINKS** + +- View [Github Repository](https://github.com/creativetimofficial/ct-material-dashboard-pro-react) +- Check [FAQ Page](https://www.creative-tim.com/faq) + +#### Special thanks + +During the development of this dashboard, we have used many existing resources from awesome developers. We want to thank them for providing their tools open source: + +- [MUI](https://mui.com/) - The React UI library for faster and easier web development. +- [React Table](https://react-table.tanstack.com/) - Lightweight and extensible data tables for React. +- [React Flatpickr](https://github.com/haoxins/react-flatpickr) - Useful library used to select date. +- [React ChartJS 2](http://reactchartjs.github.io/react-chartjs-2/#/) - Simple yet flexible React charting for designers & developers. +- [Full Calendar](https://fullcalendar.io/) - Full-sized drag & drop event calendar. +- [Dropzone](https://www.dropzonejs.com/) - An open source library that provides drag & drop file uploads with image previews. +- [React Kanban](https://github.com/asseinfo/react-kanban) - Kanban/Trello board lib for React. +- [React Images Viewer](https://guonanci.github.io/react-images-viewer/) - A simple, responsive images viewer component for ReactJS. +- [React Quill](https://github.com/zenoamaro/react-quill) - A free, open source WYSIWYG editor built for the modern web. +- [Formik](https://formik.org/) - Formik is the world's most popular open source form library for React and React Native. +- [ChromaJS](https://gka.github.io/chroma.js/) - A small-ish zero-dependency JavaScript library for all kinds of color conversions and color scales. +- [UUID](https://github.com/uuidjs/uuid) - JavaScript library for generating random id numbers. +- [HTML React Parser](https://github.com/remarkablemark/html-react-parser) - A utility for converting HTML strings into React components. + +Let us know your thoughts below. And good luck with development! + +## Table of Contents + +- [Versions](#versions) +- [Demo](#demo) +- [Quick Start](#quick-start) +- [Documentation](#documentation) +- [File Structure](#file-structure) +- [Browser Support](#browser-support) +- [Resources](#resources) +- [Reporting Issues](#reporting-issues) +- [Technical Support or Questions](#technical-support-or-questions) +- [Licensing](#licensing) +- [Useful Links](#useful-links) + +## Versions + +[](https://www.creative-tim.com/product/material-dashboard-pro-react?ref=readme-mdpr) +[](https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts?ref=readme-mdpr) + +| React | TypeScript | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [![Material Dashboard 2 PRO React](https://s3.amazonaws.com/creativetim_bucket/products/80/thumb/material-dashboard-pro-react.jpg)](http://demos.creative-tim.com/material-dashboard-pro-react/#/dashboards/analytics?ref=readme-mdpr) | [![Material Dashboard 2 PRO React TS](https://s3.amazonaws.com/creativetim_bucket/products/594/thumb/material-dashboard-pro-react-typescript.jpg)](http://demos.creative-tim.com/material-dashboard-2-pro-react-ts/#/dashboards/analytics?ref=readme-mdpr) | + +## Demo + +- [Dashboard](http://demos.creative-tim.com/material-dashboard-2-pro-react-ts/#/dashboards/analytics?ref=readme-mdpr) +- [Sales](http://demos.creative-tim.com/material-dashboard-2-pro-react-ts/#/dashboards/sales?ref=readme-mdpr) +- [Profile](https://demos.creative-tim.com/material-dashboard-2-pro-react-ts/#/pages/profile/profile-overview?ref=readme-mdpr) +- [Account](https://demos.creative-tim.com/material-dashboard-2-pro-react-ts/#/pages/account/settings?ref=readme-mdpr) +- [RTL](https://demos.creative-tim.com/material-dashboard-2-pro-react-ts/#/pages/rtl?ref=readme-mdpr) +- [Applications](https://demos.creative-tim.com/material-dashboard-2-pro-react-ts/#/applications/kanban?ref=readme-mdpr) +- [Ecommerce](https://demos.creative-tim.com/material-dashboard-2-pro-react-ts/#/ecommerce/products/product-page?ref=readme-mdpr) +- [Sign In](https://demos.creative-tim.com/material-dashboard-2-pro-react-ts/#/authentication/sign-in/basic?ref=readme-mdpr) +- [Sign Up](https://demos.creative-tim.com/material-dashboard-2-pro-react-ts/#/authentication/sign-up/cover?ref=readme-mdpr) + +[View More](https://demos.creative-tim.com/material-dashboard-2-pro-react-ts/#/dashboards/analytics?ref=readme-mdpr). + +## Quick start + +Quick start options: + +- Buy React Version from [Creative Tim](https://www.creative-tim.com/product/material-dashboard-pro-react?ref=readme-mdpr). +- Buy React + TypeScript Version from [Creative Tim](https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts?ref=readme-mdpr). + +## Terminal Commands + +1. Download and Install NodeJs LTS version from [NodeJs Official Page](https://nodejs.org/en/download/). +2. Navigate to the root ./ directory of the product and run `yarn install` or `npm install` to install our local dependencies. + +## Documentation + +The documentation for the Material Dashboard is hosted at our [website](https://www.creative-tim.com/learning-lab/react/overview/material-dashboard/?ref=readme-mdpr). + +### What's included + +Within the download you'll find the following directories and files: + +``` +material-dashboard-2-pro-react-ts + ├── public + │   ├── apple-icon.png + │   ├── favicon.png + │   ├── index.html + │   ├── manifest.json + │   └── robots.txt + ├── src + │   ├── assets + │ │   ├── images + │ │   ├── theme + │ │ │ ├── base + │ │ │  ├── components + │ │ │  ├── functions + │ │ │  ├── index.ts + │ │ │ └── theme-rtl.ts + │ │   └── theme-dark + │ │  ├── base + │ │  ├── components + │ │  ├── functions + │ │  ├── index.ts + │ │ └── theme-rtl.ts + │   ├── components + │ │   ├── MDAlert + │ │   ├── MDAvatar + │ │   ├── MDBadge + │ │   ├── MDBadgeDot + │ │   ├── MDBox + │ │   ├── MDButton + │ │   ├── MDDatePicker + │ │   ├── MDDropzone + │ │   ├── MDEditor + │ │   ├── MDInput + │ │   ├── MDPagination + │ │   ├── MDProgress + │ │   ├── MDSnackbar + │ │   ├── MDSocialButton + │ │   └── MDTypography + │   ├── context + │   ├── examples + │ │   ├── Breadcrumbs + │ │   ├── Calendar + │ │   ├── Cards + │ │   ├── Charts + │ │   ├── Configurator + │ │   ├── Footer + │ │   ├── Items + │ │   ├── LayoutContainers + │ │   ├── Lists + │ │   ├── Navbars + │ │   ├── Sidenav + │ │   ├── Tables + │ │   └── Timeline + │   ├── layouts + │ │   ├── applications + │ │ │  ├── calendar + │ │ │  ├── data-tables + │ │ │  ├── kanban + │ │ │ └── wizard + │ │   ├── authentication + │ │ │  ├── components + │ │ │  ├── reset-password + │ │ │  ├── sign-in + │ │ │ └── sign-up + │ │   ├── dashboards + │ │ │  ├── analytics + │ │ │ └── sales + │ │   ├── ecommerce + │ │ │  ├── orders + │ │ │ └── products + │ │   └── pages + │ │  ├── account + │ │  ├── charts + │ │  ├── notifications + │ │  ├── pricing-page + │ │  ├── profile + │ │  ├── projects + │ │  ├── rtl + │ │  ├── users + │ │ └── widgets + │   ├── types + │   ├── App.tsx + │   ├── index.tsx + │   ├── page.routes.tsx + │   └── routes.tsx + ├── .eslintignore + ├── .eslintrc.json + ├── .prettierrc.json + ├── CHANGELOG.md + ├── ISSUE_TEMPLATE.md + ├── package.json + ├── README.md + └── tsconfig.json +``` + +## Browser Support + +At present, we officially aim to support the last two versions of the following browsers: + + + +## Resources + +- [Live Preview](https://demos.creative-tim.com/material-dashboard-2-pro-react-ts/#/dashboards/analytics?ref=readme-mdpr) +- [Buy Page](https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts?ref=readme-mdpr) +- Documentation is [here](https://www.creative-tim.com/learning-lab/react/overview/material-dashboard/?ref=readme-mdpr) +- [License Agreement](https://www.creative-tim.com/license?ref=readme-mdpr) +- [Support](https://www.creative-tim.com/contact-us?ref=readme-mdpr) +- Issues: [Github Issues Page](https://github.com/creativetimofficial/ct-material-dashboard-pro-react/issues) + +## Reporting Issues + +We use GitHub Issues as the official bug tracker for the Material Dashboard 2 PRO React. Here are some advices for our users that want to report an issue: + +1. Make sure that you are using the latest version of the Material Dashboard 2 PRO React. Check the CHANGELOG from your dashboard on our [website](https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts?ref=readme-mdpr). +2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed. +3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help. + +## Technical Support or Questions + +If you have questions or need help integrating the product please [contact us](https://www.creative-tim.com/contact-us?ref=readme-mdpr) instead of opening an issue. + +## Licensing + +- Copyright 2022 [Creative Tim](https://www.creative-tim.com?ref=readme-mdpr) +- Creative Tim [license](https://www.creative-tim.com/license?ref=readme-mdpr) + +## Useful Links + +- [More products](https://www.creative-tim.com/templates?ref=readme-mdpr) from Creative Tim + +- [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w) + +- [Freebies](https://www.creative-tim.com/bootstrap-themes/free?ref=readme-mdpr) from Creative Tim + +- [Affiliate Program](https://www.creative-tim.com/affiliates/new?ref=readme-mdpr) (earn money) + +##### Social Media + +Twitter: + +Facebook: + +Dribbble: + +Google+: + +Instagram: diff --git a/dist/assets/images/apple-icon.png b/dist/assets/images/apple-icon.png new file mode 100644 index 0000000..a20470f Binary files /dev/null and b/dist/assets/images/apple-icon.png differ diff --git a/dist/assets/images/bg-player.jpeg b/dist/assets/images/bg-player.jpeg new file mode 100644 index 0000000..179a34e Binary files /dev/null and b/dist/assets/images/bg-player.jpeg differ diff --git a/dist/assets/images/bg-pricing.jpg b/dist/assets/images/bg-pricing.jpg new file mode 100644 index 0000000..94470d2 Binary files /dev/null and b/dist/assets/images/bg-pricing.jpg differ diff --git a/dist/assets/images/bg-profile.jpeg b/dist/assets/images/bg-profile.jpeg new file mode 100644 index 0000000..2a1df5f Binary files /dev/null and b/dist/assets/images/bg-profile.jpeg differ diff --git a/dist/assets/images/bg-reset-cover.jpeg b/dist/assets/images/bg-reset-cover.jpeg new file mode 100644 index 0000000..b2151d4 Binary files /dev/null and b/dist/assets/images/bg-reset-cover.jpeg differ diff --git a/dist/assets/images/bg-sign-in-basic.jpeg b/dist/assets/images/bg-sign-in-basic.jpeg new file mode 100644 index 0000000..2564849 Binary files /dev/null and b/dist/assets/images/bg-sign-in-basic.jpeg differ diff --git a/dist/assets/images/bg-sign-in-cover.jpeg b/dist/assets/images/bg-sign-in-cover.jpeg new file mode 100644 index 0000000..cc5ae7e Binary files /dev/null and b/dist/assets/images/bg-sign-in-cover.jpeg differ diff --git a/dist/assets/images/bg-sign-up-cover.jpeg b/dist/assets/images/bg-sign-up-cover.jpeg new file mode 100644 index 0000000..576ae5b Binary files /dev/null and b/dist/assets/images/bg-sign-up-cover.jpeg differ diff --git a/dist/assets/images/bg-smart-home-1.jpg b/dist/assets/images/bg-smart-home-1.jpg new file mode 100644 index 0000000..b9f051c Binary files /dev/null and b/dist/assets/images/bg-smart-home-1.jpg differ diff --git a/dist/assets/images/bg-smart-home-2.jpg b/dist/assets/images/bg-smart-home-2.jpg new file mode 100644 index 0000000..13b82a0 Binary files /dev/null and b/dist/assets/images/bg-smart-home-2.jpg differ diff --git a/dist/assets/images/bruce-mars.jpg b/dist/assets/images/bruce-mars.jpg new file mode 100644 index 0000000..335cf58 Binary files /dev/null and b/dist/assets/images/bruce-mars.jpg differ diff --git a/dist/assets/images/down-arrow-dark.svg b/dist/assets/images/down-arrow-dark.svg new file mode 100644 index 0000000..11bb8d8 --- /dev/null +++ b/dist/assets/images/down-arrow-dark.svg @@ -0,0 +1,11 @@ + + + down-arrow + + + + + + + + diff --git a/dist/assets/images/down-arrow-white.svg b/dist/assets/images/down-arrow-white.svg new file mode 100644 index 0000000..f13dc2f --- /dev/null +++ b/dist/assets/images/down-arrow-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/assets/images/down-arrow.svg b/dist/assets/images/down-arrow.svg new file mode 100644 index 0000000..8a5fb42 --- /dev/null +++ b/dist/assets/images/down-arrow.svg @@ -0,0 +1,11 @@ + + + down-arrow + + + + + + + + \ No newline at end of file diff --git a/dist/assets/images/drake.jpg b/dist/assets/images/drake.jpg new file mode 100644 index 0000000..b2f8318 Binary files /dev/null and b/dist/assets/images/drake.jpg differ diff --git a/dist/assets/images/ecommerce/adidas-hoodie.jpeg b/dist/assets/images/ecommerce/adidas-hoodie.jpeg new file mode 100644 index 0000000..a45a7a8 Binary files /dev/null and b/dist/assets/images/ecommerce/adidas-hoodie.jpeg differ diff --git a/dist/assets/images/ecommerce/alchimia-chair.jpeg b/dist/assets/images/ecommerce/alchimia-chair.jpeg new file mode 100644 index 0000000..bbefb5a Binary files /dev/null and b/dist/assets/images/ecommerce/alchimia-chair.jpeg differ diff --git a/dist/assets/images/ecommerce/bang-sound.jpeg b/dist/assets/images/ecommerce/bang-sound.jpeg new file mode 100644 index 0000000..345a55a Binary files /dev/null and b/dist/assets/images/ecommerce/bang-sound.jpeg differ diff --git a/dist/assets/images/ecommerce/black-chair.jpeg b/dist/assets/images/ecommerce/black-chair.jpeg new file mode 100644 index 0000000..c1543ef Binary files /dev/null and b/dist/assets/images/ecommerce/black-chair.jpeg differ diff --git a/dist/assets/images/ecommerce/black-mug.jpeg b/dist/assets/images/ecommerce/black-mug.jpeg new file mode 100644 index 0000000..d607afe Binary files /dev/null and b/dist/assets/images/ecommerce/black-mug.jpeg differ diff --git a/dist/assets/images/ecommerce/blue-shoe.jpeg b/dist/assets/images/ecommerce/blue-shoe.jpeg new file mode 100644 index 0000000..d78c464 Binary files /dev/null and b/dist/assets/images/ecommerce/blue-shoe.jpeg differ diff --git a/dist/assets/images/ecommerce/burberry.jpeg b/dist/assets/images/ecommerce/burberry.jpeg new file mode 100644 index 0000000..112db61 Binary files /dev/null and b/dist/assets/images/ecommerce/burberry.jpeg differ diff --git a/dist/assets/images/ecommerce/chair-pink.jpeg b/dist/assets/images/ecommerce/chair-pink.jpeg new file mode 100644 index 0000000..b368b12 Binary files /dev/null and b/dist/assets/images/ecommerce/chair-pink.jpeg differ diff --git a/dist/assets/images/ecommerce/chair-steel.jpeg b/dist/assets/images/ecommerce/chair-steel.jpeg new file mode 100644 index 0000000..4733aa1 Binary files /dev/null and b/dist/assets/images/ecommerce/chair-steel.jpeg differ diff --git a/dist/assets/images/ecommerce/chair-wood.jpeg b/dist/assets/images/ecommerce/chair-wood.jpeg new file mode 100644 index 0000000..7fe757a Binary files /dev/null and b/dist/assets/images/ecommerce/chair-wood.jpeg differ diff --git a/dist/assets/images/ecommerce/d&g-skirt.jpeg b/dist/assets/images/ecommerce/d&g-skirt.jpeg new file mode 100644 index 0000000..2e7e6c7 Binary files /dev/null and b/dist/assets/images/ecommerce/d&g-skirt.jpeg differ diff --git a/dist/assets/images/ecommerce/fendi-coat.jpeg b/dist/assets/images/ecommerce/fendi-coat.jpeg new file mode 100644 index 0000000..486e1aa Binary files /dev/null and b/dist/assets/images/ecommerce/fendi-coat.jpeg differ diff --git a/dist/assets/images/ecommerce/gold-glasses.jpeg b/dist/assets/images/ecommerce/gold-glasses.jpeg new file mode 100644 index 0000000..1baf7f4 Binary files /dev/null and b/dist/assets/images/ecommerce/gold-glasses.jpeg differ diff --git a/dist/assets/images/ecommerce/green-sofa.jpeg b/dist/assets/images/ecommerce/green-sofa.jpeg new file mode 100644 index 0000000..9563dcd Binary files /dev/null and b/dist/assets/images/ecommerce/green-sofa.jpeg differ diff --git a/dist/assets/images/ecommerce/heron-tshirt.jpeg b/dist/assets/images/ecommerce/heron-tshirt.jpeg new file mode 100644 index 0000000..05f2761 Binary files /dev/null and b/dist/assets/images/ecommerce/heron-tshirt.jpeg differ diff --git a/dist/assets/images/ecommerce/living-chair.jpeg b/dist/assets/images/ecommerce/living-chair.jpeg new file mode 100644 index 0000000..1aa7d9c Binary files /dev/null and b/dist/assets/images/ecommerce/living-chair.jpeg differ diff --git a/dist/assets/images/ecommerce/macbook-pro.jpeg b/dist/assets/images/ecommerce/macbook-pro.jpeg new file mode 100644 index 0000000..4504016 Binary files /dev/null and b/dist/assets/images/ecommerce/macbook-pro.jpeg differ diff --git a/dist/assets/images/ecommerce/mcqueen-shirt.jpeg b/dist/assets/images/ecommerce/mcqueen-shirt.jpeg new file mode 100644 index 0000000..1debf7e Binary files /dev/null and b/dist/assets/images/ecommerce/mcqueen-shirt.jpeg differ diff --git a/dist/assets/images/ecommerce/metro-chair.jpeg b/dist/assets/images/ecommerce/metro-chair.jpeg new file mode 100644 index 0000000..0bdeff3 Binary files /dev/null and b/dist/assets/images/ecommerce/metro-chair.jpeg differ diff --git a/dist/assets/images/ecommerce/off-white-jacket.jpeg b/dist/assets/images/ecommerce/off-white-jacket.jpeg new file mode 100644 index 0000000..51713f5 Binary files /dev/null and b/dist/assets/images/ecommerce/off-white-jacket.jpeg differ diff --git a/dist/assets/images/ecommerce/orange-sofa.jpeg b/dist/assets/images/ecommerce/orange-sofa.jpeg new file mode 100644 index 0000000..1b5928e Binary files /dev/null and b/dist/assets/images/ecommerce/orange-sofa.jpeg differ diff --git a/dist/assets/images/ecommerce/photo-tools.jpeg b/dist/assets/images/ecommerce/photo-tools.jpeg new file mode 100644 index 0000000..1b8c3b5 Binary files /dev/null and b/dist/assets/images/ecommerce/photo-tools.jpeg differ diff --git a/dist/assets/images/ecommerce/undercover.jpeg b/dist/assets/images/ecommerce/undercover.jpeg new file mode 100644 index 0000000..6a7b451 Binary files /dev/null and b/dist/assets/images/ecommerce/undercover.jpeg differ diff --git a/dist/assets/images/ecommerce/wooden-table.jpeg b/dist/assets/images/ecommerce/wooden-table.jpeg new file mode 100644 index 0000000..98ace3b Binary files /dev/null and b/dist/assets/images/ecommerce/wooden-table.jpeg differ diff --git a/dist/assets/images/ecommerce/yellow-chair.jpeg b/dist/assets/images/ecommerce/yellow-chair.jpeg new file mode 100644 index 0000000..81d526e Binary files /dev/null and b/dist/assets/images/ecommerce/yellow-chair.jpeg differ diff --git a/dist/assets/images/ecommerce/yohji-yamamoto.jpeg b/dist/assets/images/ecommerce/yohji-yamamoto.jpeg new file mode 100644 index 0000000..25ecff0 Binary files /dev/null and b/dist/assets/images/ecommerce/yohji-yamamoto.jpeg differ diff --git a/dist/assets/images/favicon.png b/dist/assets/images/favicon.png new file mode 100644 index 0000000..7d8b7d0 Binary files /dev/null and b/dist/assets/images/favicon.png differ diff --git a/dist/assets/images/home-decor-1.jpg b/dist/assets/images/home-decor-1.jpg new file mode 100644 index 0000000..3469eb2 Binary files /dev/null and b/dist/assets/images/home-decor-1.jpg differ diff --git a/dist/assets/images/home-decor-2.jpg b/dist/assets/images/home-decor-2.jpg new file mode 100644 index 0000000..3ffb21a Binary files /dev/null and b/dist/assets/images/home-decor-2.jpg differ diff --git a/dist/assets/images/home-decor-3.jpg b/dist/assets/images/home-decor-3.jpg new file mode 100644 index 0000000..3e3539a Binary files /dev/null and b/dist/assets/images/home-decor-3.jpg differ diff --git a/dist/assets/images/home-decor-4.jpeg b/dist/assets/images/home-decor-4.jpeg new file mode 100644 index 0000000..de22614 Binary files /dev/null and b/dist/assets/images/home-decor-4.jpeg differ diff --git a/dist/assets/images/icons/flags/AU.png b/dist/assets/images/icons/flags/AU.png new file mode 100644 index 0000000..13fd089 Binary files /dev/null and b/dist/assets/images/icons/flags/AU.png differ diff --git a/dist/assets/images/icons/flags/BR.png b/dist/assets/images/icons/flags/BR.png new file mode 100644 index 0000000..91e3862 Binary files /dev/null and b/dist/assets/images/icons/flags/BR.png differ diff --git a/dist/assets/images/icons/flags/DE.png b/dist/assets/images/icons/flags/DE.png new file mode 100644 index 0000000..5029361 Binary files /dev/null and b/dist/assets/images/icons/flags/DE.png differ diff --git a/dist/assets/images/icons/flags/GB.png b/dist/assets/images/icons/flags/GB.png new file mode 100644 index 0000000..b2f1b3b Binary files /dev/null and b/dist/assets/images/icons/flags/GB.png differ diff --git a/dist/assets/images/icons/flags/US.png b/dist/assets/images/icons/flags/US.png new file mode 100644 index 0000000..5b42a56 Binary files /dev/null and b/dist/assets/images/icons/flags/US.png differ diff --git a/dist/assets/images/illustrations/illustration-lock.jpg b/dist/assets/images/illustrations/illustration-lock.jpg new file mode 100644 index 0000000..cd3cb14 Binary files /dev/null and b/dist/assets/images/illustrations/illustration-lock.jpg differ diff --git a/dist/assets/images/illustrations/illustration-reset.jpg b/dist/assets/images/illustrations/illustration-reset.jpg new file mode 100644 index 0000000..6eb7826 Binary files /dev/null and b/dist/assets/images/illustrations/illustration-reset.jpg differ diff --git a/dist/assets/images/illustrations/illustration-verification.jpg b/dist/assets/images/illustrations/illustration-verification.jpg new file mode 100644 index 0000000..5216168 Binary files /dev/null and b/dist/assets/images/illustrations/illustration-verification.jpg differ diff --git a/dist/assets/images/illustrations/pattern-tree.svg b/dist/assets/images/illustrations/pattern-tree.svg new file mode 100644 index 0000000..970acbb --- /dev/null +++ b/dist/assets/images/illustrations/pattern-tree.svg @@ -0,0 +1,20 @@ + + + pattern-2 + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/dist/assets/images/ivana-square.jpg b/dist/assets/images/ivana-square.jpg new file mode 100644 index 0000000..f6308ce Binary files /dev/null and b/dist/assets/images/ivana-square.jpg differ diff --git a/dist/assets/images/ivana-squares.jpg b/dist/assets/images/ivana-squares.jpg new file mode 100644 index 0000000..a63739f Binary files /dev/null and b/dist/assets/images/ivana-squares.jpg differ diff --git a/dist/assets/images/ivancik.jpg b/dist/assets/images/ivancik.jpg new file mode 100644 index 0000000..9b808c8 Binary files /dev/null and b/dist/assets/images/ivancik.jpg differ diff --git a/dist/assets/images/kal-visuals-square.jpg b/dist/assets/images/kal-visuals-square.jpg new file mode 100644 index 0000000..1f1bf08 Binary files /dev/null and b/dist/assets/images/kal-visuals-square.jpg differ diff --git a/dist/assets/images/logo-ct-dark.png b/dist/assets/images/logo-ct-dark.png new file mode 100644 index 0000000..4c2b251 Binary files /dev/null and b/dist/assets/images/logo-ct-dark.png differ diff --git a/dist/assets/images/logo-ct.png b/dist/assets/images/logo-ct.png new file mode 100644 index 0000000..5f9cf4a Binary files /dev/null and b/dist/assets/images/logo-ct.png differ diff --git a/dist/assets/images/logos/gray-logos/logo-coinbase.svg b/dist/assets/images/logos/gray-logos/logo-coinbase.svg new file mode 100644 index 0000000..1854688 --- /dev/null +++ b/dist/assets/images/logos/gray-logos/logo-coinbase.svg @@ -0,0 +1,16 @@ + + + Logos + + + + + + + + + + + + + \ No newline at end of file diff --git a/dist/assets/images/logos/gray-logos/logo-nasa.svg b/dist/assets/images/logos/gray-logos/logo-nasa.svg new file mode 100644 index 0000000..282f50f --- /dev/null +++ b/dist/assets/images/logos/gray-logos/logo-nasa.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/dist/assets/images/logos/gray-logos/logo-netflix.svg b/dist/assets/images/logos/gray-logos/logo-netflix.svg new file mode 100644 index 0000000..9579c0d --- /dev/null +++ b/dist/assets/images/logos/gray-logos/logo-netflix.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/dist/assets/images/logos/gray-logos/logo-pinterest.svg b/dist/assets/images/logos/gray-logos/logo-pinterest.svg new file mode 100644 index 0000000..734ffb1 --- /dev/null +++ b/dist/assets/images/logos/gray-logos/logo-pinterest.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/dist/assets/images/logos/gray-logos/logo-spotify.svg b/dist/assets/images/logos/gray-logos/logo-spotify.svg new file mode 100644 index 0000000..eb7862f --- /dev/null +++ b/dist/assets/images/logos/gray-logos/logo-spotify.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/dist/assets/images/logos/gray-logos/logo-vodafone.svg b/dist/assets/images/logos/gray-logos/logo-vodafone.svg new file mode 100644 index 0000000..b22cbe7 --- /dev/null +++ b/dist/assets/images/logos/gray-logos/logo-vodafone.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/dist/assets/images/logos/mastercard.png b/dist/assets/images/logos/mastercard.png new file mode 100644 index 0000000..1057c90 Binary files /dev/null and b/dist/assets/images/logos/mastercard.png differ diff --git a/dist/assets/images/logos/visa.png b/dist/assets/images/logos/visa.png new file mode 100644 index 0000000..8d3a35e Binary files /dev/null and b/dist/assets/images/logos/visa.png differ diff --git a/dist/assets/images/marie.jpg b/dist/assets/images/marie.jpg new file mode 100644 index 0000000..ad0b807 Binary files /dev/null and b/dist/assets/images/marie.jpg differ diff --git a/dist/assets/images/meeting.jpg b/dist/assets/images/meeting.jpg new file mode 100644 index 0000000..3ba178c Binary files /dev/null and b/dist/assets/images/meeting.jpg differ diff --git a/dist/assets/images/office-dark.jpg b/dist/assets/images/office-dark.jpg new file mode 100644 index 0000000..923d753 Binary files /dev/null and b/dist/assets/images/office-dark.jpg differ diff --git a/dist/assets/images/product-12.jpg b/dist/assets/images/product-12.jpg new file mode 100644 index 0000000..43f3013 Binary files /dev/null and b/dist/assets/images/product-12.jpg differ diff --git a/dist/assets/images/products/product-1-min.jpg b/dist/assets/images/products/product-1-min.jpg new file mode 100644 index 0000000..2f7777d Binary files /dev/null and b/dist/assets/images/products/product-1-min.jpg differ diff --git a/dist/assets/images/products/product-11.jpg b/dist/assets/images/products/product-11.jpg new file mode 100644 index 0000000..df459b8 Binary files /dev/null and b/dist/assets/images/products/product-11.jpg differ diff --git a/dist/assets/images/products/product-2-min.jpg b/dist/assets/images/products/product-2-min.jpg new file mode 100644 index 0000000..dc4c8c4 Binary files /dev/null and b/dist/assets/images/products/product-2-min.jpg differ diff --git a/dist/assets/images/products/product-3-min.jpg b/dist/assets/images/products/product-3-min.jpg new file mode 100644 index 0000000..8b7dd63 Binary files /dev/null and b/dist/assets/images/products/product-3-min.jpg differ diff --git a/dist/assets/images/products/product-4-min.jpg b/dist/assets/images/products/product-4-min.jpg new file mode 100644 index 0000000..015a9f1 Binary files /dev/null and b/dist/assets/images/products/product-4-min.jpg differ diff --git a/dist/assets/images/products/product-5-min.jpg b/dist/assets/images/products/product-5-min.jpg new file mode 100644 index 0000000..7f48d17 Binary files /dev/null and b/dist/assets/images/products/product-5-min.jpg differ diff --git a/dist/assets/images/products/product-6-min.jpg b/dist/assets/images/products/product-6-min.jpg new file mode 100644 index 0000000..68e5995 Binary files /dev/null and b/dist/assets/images/products/product-6-min.jpg differ diff --git a/dist/assets/images/products/product-7-min.jpg b/dist/assets/images/products/product-7-min.jpg new file mode 100644 index 0000000..6b1d37d Binary files /dev/null and b/dist/assets/images/products/product-7-min.jpg differ diff --git a/dist/assets/images/products/product-details-1.jpg b/dist/assets/images/products/product-details-1.jpg new file mode 100644 index 0000000..99a47f2 Binary files /dev/null and b/dist/assets/images/products/product-details-1.jpg differ diff --git a/dist/assets/images/products/product-details-2.jpg b/dist/assets/images/products/product-details-2.jpg new file mode 100644 index 0000000..571b770 Binary files /dev/null and b/dist/assets/images/products/product-details-2.jpg differ diff --git a/dist/assets/images/products/product-details-3.jpg b/dist/assets/images/products/product-details-3.jpg new file mode 100644 index 0000000..0f39a0d Binary files /dev/null and b/dist/assets/images/products/product-details-3.jpg differ diff --git a/dist/assets/images/products/product-details-4.jpg b/dist/assets/images/products/product-details-4.jpg new file mode 100644 index 0000000..1c3a344 Binary files /dev/null and b/dist/assets/images/products/product-details-4.jpg differ diff --git a/dist/assets/images/products/product-details-5.jpg b/dist/assets/images/products/product-details-5.jpg new file mode 100644 index 0000000..9399999 Binary files /dev/null and b/dist/assets/images/products/product-details-5.jpg differ diff --git a/dist/assets/images/shapes/pattern-lines.svg b/dist/assets/images/shapes/pattern-lines.svg new file mode 100644 index 0000000..3292387 --- /dev/null +++ b/dist/assets/images/shapes/pattern-lines.svg @@ -0,0 +1,91 @@ + + + pattern-lines + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/dist/assets/images/shapes/waves-white.svg b/dist/assets/images/shapes/waves-white.svg new file mode 100644 index 0000000..b2f04fd --- /dev/null +++ b/dist/assets/images/shapes/waves-white.svg @@ -0,0 +1,324 @@ + + + Artboard + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/dist/assets/images/small-logos/bootstrap.svg b/dist/assets/images/small-logos/bootstrap.svg new file mode 100644 index 0000000..030c53e --- /dev/null +++ b/dist/assets/images/small-logos/bootstrap.svg @@ -0,0 +1,9 @@ + + + bootstrap + + + + + + \ No newline at end of file diff --git a/dist/assets/images/small-logos/creative-tim.svg b/dist/assets/images/small-logos/creative-tim.svg new file mode 100644 index 0000000..83bebb9 --- /dev/null +++ b/dist/assets/images/small-logos/creative-tim.svg @@ -0,0 +1,7 @@ + + + creative-tim + + + + \ No newline at end of file diff --git a/dist/assets/images/small-logos/devto.svg b/dist/assets/images/small-logos/devto.svg new file mode 100644 index 0000000..51fa2ce --- /dev/null +++ b/dist/assets/images/small-logos/devto.svg @@ -0,0 +1,9 @@ + + + devto + + + + + + \ No newline at end of file diff --git a/dist/assets/images/small-logos/github.svg b/dist/assets/images/small-logos/github.svg new file mode 100644 index 0000000..bfa7a11 --- /dev/null +++ b/dist/assets/images/small-logos/github.svg @@ -0,0 +1,10 @@ + + + github + + + + + + + \ No newline at end of file diff --git a/dist/assets/images/small-logos/google-webdev.svg b/dist/assets/images/small-logos/google-webdev.svg new file mode 100644 index 0000000..5bc9d2e --- /dev/null +++ b/dist/assets/images/small-logos/google-webdev.svg @@ -0,0 +1,11 @@ + + + google-webdev + + + + \ No newline at end of file diff --git a/dist/assets/images/small-logos/icon-bulb.svg b/dist/assets/images/small-logos/icon-bulb.svg new file mode 100644 index 0000000..2d7bdaf --- /dev/null +++ b/dist/assets/images/small-logos/icon-bulb.svg @@ -0,0 +1,37 @@ + + + icon-bulb + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/dist/assets/images/small-logos/icon-sun-cloud.png b/dist/assets/images/small-logos/icon-sun-cloud.png new file mode 100644 index 0000000..25643d6 Binary files /dev/null and b/dist/assets/images/small-logos/icon-sun-cloud.png differ diff --git a/dist/assets/images/small-logos/logo-asana.svg b/dist/assets/images/small-logos/logo-asana.svg new file mode 100644 index 0000000..c37d9bf --- /dev/null +++ b/dist/assets/images/small-logos/logo-asana.svg @@ -0,0 +1,16 @@ + + + Logos + + + + + + + + + + + \ No newline at end of file diff --git a/dist/assets/images/small-logos/logo-atlassian.svg b/dist/assets/images/small-logos/logo-atlassian.svg new file mode 100644 index 0000000..6df6825 --- /dev/null +++ b/dist/assets/images/small-logos/logo-atlassian.svg @@ -0,0 +1,16 @@ + + + Logos + + + + + + + + + + + + + \ No newline at end of file diff --git a/dist/assets/images/small-logos/logo-invision.svg b/dist/assets/images/small-logos/logo-invision.svg new file mode 100644 index 0000000..44e72b6 --- /dev/null +++ b/dist/assets/images/small-logos/logo-invision.svg @@ -0,0 +1,10 @@ + + + Logos + + + + + + + \ No newline at end of file diff --git a/dist/assets/images/small-logos/logo-jira.svg b/dist/assets/images/small-logos/logo-jira.svg new file mode 100644 index 0000000..dac3ddb --- /dev/null +++ b/dist/assets/images/small-logos/logo-jira.svg @@ -0,0 +1,21 @@ + + + Logos + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/dist/assets/images/small-logos/logo-slack.svg b/dist/assets/images/small-logos/logo-slack.svg new file mode 100644 index 0000000..6b8eba6 --- /dev/null +++ b/dist/assets/images/small-logos/logo-slack.svg @@ -0,0 +1,12 @@ + + + Logos + + + + \ No newline at end of file diff --git a/dist/assets/images/small-logos/logo-spotify.svg b/dist/assets/images/small-logos/logo-spotify.svg new file mode 100644 index 0000000..1c930b3 --- /dev/null +++ b/dist/assets/images/small-logos/logo-spotify.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/dist/assets/images/small-logos/logo-xd.svg b/dist/assets/images/small-logos/logo-xd.svg new file mode 100644 index 0000000..5cd1bd4 --- /dev/null +++ b/dist/assets/images/small-logos/logo-xd.svg @@ -0,0 +1,11 @@ + + + Logos + + + + + + + + \ No newline at end of file diff --git a/dist/assets/images/team-1.jpg b/dist/assets/images/team-1.jpg new file mode 100644 index 0000000..8f95305 Binary files /dev/null and b/dist/assets/images/team-1.jpg differ diff --git a/dist/assets/images/team-2.jpg b/dist/assets/images/team-2.jpg new file mode 100644 index 0000000..976c115 Binary files /dev/null and b/dist/assets/images/team-2.jpg differ diff --git a/dist/assets/images/team-3.jpg b/dist/assets/images/team-3.jpg new file mode 100644 index 0000000..324ad7d Binary files /dev/null and b/dist/assets/images/team-3.jpg differ diff --git a/dist/assets/images/team-4.jpg b/dist/assets/images/team-4.jpg new file mode 100644 index 0000000..abfa43f Binary files /dev/null and b/dist/assets/images/team-4.jpg differ diff --git a/dist/assets/images/team-5.jpg b/dist/assets/images/team-5.jpg new file mode 100644 index 0000000..8b7f184 Binary files /dev/null and b/dist/assets/images/team-5.jpg differ diff --git a/dist/index.es.js b/dist/index.es.js new file mode 100644 index 0000000..1afffef --- /dev/null +++ b/dist/index.es.js @@ -0,0 +1,10405 @@ +import { jsx, jsxs, Fragment } from 'react/jsx-runtime'; +import ReactDOM from 'react-dom'; +import { useLocation, NavLink, Link as Link$1, Routes, Route, Navigate, BrowserRouter } from 'react-router-dom'; +import { forwardRef, createContext, useReducer, useMemo, useContext, useState, useEffect, Fragment as Fragment$1 } from 'react'; +import { styled, createTheme as createTheme$1, ThemeProvider } from '@mui/material/styles'; +import CssBaseline from '@mui/material/CssBaseline'; +import Icon from '@mui/material/Icon'; +import Box from '@mui/material/Box'; +import List from '@mui/material/List'; +import Divider from '@mui/material/Divider'; +import Link from '@mui/material/Link'; +import Typography from '@mui/material/Typography'; +import Collapse from '@mui/material/Collapse'; +import ListItem from '@mui/material/ListItem'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; +import Drawer from '@mui/material/Drawer'; +import GitHubButton from 'react-github-btn'; +import Switch from '@mui/material/Switch'; +import IconButton from '@mui/material/IconButton'; +import TwitterIcon from '@mui/icons-material/Twitter'; +import FacebookIcon from '@mui/icons-material/Facebook'; +import Button from '@mui/material/Button'; +import { createTheme, Breadcrumbs as Breadcrumbs$1 } from '@mui/material'; +import chroma from 'chroma-js'; +import Fade from '@mui/material/Fade'; +import rtlPlugin from 'stylis-plugin-rtl'; +import { CacheProvider } from '@emotion/react'; +import createCache from '@emotion/cache'; +import Grid from '@mui/material/Grid'; +import Tooltip from '@mui/material/Tooltip'; +import AppBar from '@mui/material/AppBar'; +import Toolbar from '@mui/material/Toolbar'; +import Menu from '@mui/material/Menu'; +import TextField from '@mui/material/TextField'; +import Badge from '@mui/material/Badge'; +import MenuItem from '@mui/material/MenuItem'; +import { Bar, Line, Pie } from 'react-chartjs-2'; +import Card from '@mui/material/Card'; +import { VectorMap } from '@react-jvectormap/core'; +import { worldMerc } from '@react-jvectormap/world'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableContainer from '@mui/material/TableContainer'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; +import TableCell$1 from '@mui/material/TableCell'; +import US from 'assets/images/icons/flags/US.png'; +import DE from 'assets/images/icons/flags/DE.png'; +import GB from 'assets/images/icons/flags/GB.png'; +import BR from 'assets/images/icons/flags/BR.png'; +import booking1 from 'assets/images/products/product-1-min.jpg'; +import booking2 from 'assets/images/products/product-2-min.jpg'; +import booking3 from 'assets/images/products/product-3-min.jpg'; +import { useTable, useGlobalFilter, useSortBy, usePagination, useAsyncDebounce } from 'react-table'; +import Autocomplete from '@mui/material/Autocomplete'; +import AU from 'assets/images/icons/flags/AU.png'; +import Avatar from '@mui/material/Avatar'; +import nikeV22 from 'assets/images/ecommerce/blue-shoe.jpeg'; +import businessKit from 'assets/images/ecommerce/black-mug.jpeg'; +import blackChair from 'assets/images/ecommerce/black-chair.jpeg'; +import wirelessCharger from 'assets/images/ecommerce/bang-sound.jpeg'; +import tripKit from 'assets/images/ecommerce/photo-tools.jpeg'; +import InstagramIcon from '@mui/icons-material/Instagram'; +import CardMedia from '@mui/material/CardMedia'; +import Tabs from '@mui/material/Tabs'; +import Tab from '@mui/material/Tab'; +import burceMars from 'assets/images/bruce-mars.jpg'; +import backgroundImage from 'assets/images/bg-profile.jpeg'; +import kal from 'assets/images/kal-visuals-square.jpg'; +import marie from 'assets/images/marie.jpg'; +import ivana from 'assets/images/ivana-square.jpg'; +import team3 from 'assets/images/team-3.jpg'; +import team4 from 'assets/images/team-4.jpg'; +import homeDecor1 from 'assets/images/home-decor-1.jpg'; +import homeDecor2 from 'assets/images/home-decor-2.jpg'; +import homeDecor3 from 'assets/images/home-decor-3.jpg'; +import homeDecor4 from 'assets/images/home-decor-4.jpeg'; +import team1 from 'assets/images/team-1.jpg'; +import team2 from 'assets/images/team-2.jpg'; +import logoSlack from 'assets/images/small-logos/logo-slack.svg'; +import logoSpotify from 'assets/images/small-logos/logo-spotify.svg'; +import logoAtlassian from 'assets/images/small-logos/logo-atlassian.svg'; +import logoAsana from 'assets/images/small-logos/logo-asana.svg'; +import GitHubIcon from '@mui/icons-material/GitHub'; +import GoogleIcon from '@mui/icons-material/Google'; +import Popper from '@mui/material/Popper'; +import Grow from '@mui/material/Grow'; +import Container from '@mui/material/Container'; +import bgImage from 'assets/images/bg-sign-in-basic.jpeg'; +import { QController } from 'qqq-frontend-core/lib/controllers/QController'; +import brandWhite from 'assets/images/logo-ct.png'; +import brandDark from 'assets/images/logo-ct-dark.png'; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +var MDBoxRoot = styled(Box)(({ theme, ownerState }) => { + const { palette, functions, borders, boxShadows } = theme; + const { variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow } = ownerState; + const { gradients, grey, white } = palette; + const { linearGradient } = functions; + const { borderRadius: radius } = borders; + const { colored } = boxShadows; + const greyColors = { + "grey-100": grey[100], + "grey-200": grey[200], + "grey-300": grey[300], + "grey-400": grey[400], + "grey-500": grey[500], + "grey-600": grey[600], + "grey-700": grey[700], + "grey-800": grey[800], + "grey-900": grey[900], + }; + const validGradients = [ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "dark", + "light", + ]; + const validColors = [ + "transparent", + "white", + "black", + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + "text", + "grey-100", + "grey-200", + "grey-300", + "grey-400", + "grey-500", + "grey-600", + "grey-700", + "grey-800", + "grey-900", + ]; + const validBorderRadius = ["xs", "sm", "md", "lg", "xl", "xxl", "section"]; + const validBoxShadows = ["xs", "sm", "md", "lg", "xl", "xxl", "inset"]; + // background value + let backgroundValue = bgColor; + if (variant === "gradient") { + backgroundValue = validGradients.find((el) => el === bgColor) + ? linearGradient(gradients[bgColor].main, gradients[bgColor].state) + : white.main; + } + else if (validColors.find((el) => el === bgColor)) { + backgroundValue = palette[bgColor] ? palette[bgColor].main : greyColors[bgColor]; + } + else { + backgroundValue = bgColor; + } + // color value + let colorValue = color; + if (validColors.find((el) => el === color)) { + colorValue = palette[color] ? palette[color].main : greyColors[color]; + } + // borderRadius value + let borderRadiusValue = borderRadius; + if (validBorderRadius.find((el) => el === borderRadius)) { + borderRadiusValue = radius[borderRadius]; + } + // boxShadow value + let boxShadowValue = "none"; + if (validBoxShadows.find((el) => el === shadow)) { + boxShadowValue = boxShadows[shadow]; + } + else if (coloredShadow) { + boxShadowValue = colored[coloredShadow] ? colored[coloredShadow] : "none"; + } + return { + opacity, + background: backgroundValue, + color: colorValue, + borderRadius: borderRadiusValue, + boxShadow: boxShadowValue, + }; +}); + +const MDBox = forwardRef(({ variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow, ...rest }, ref) => (jsx(MDBoxRoot, { ...rest, ref: ref, ownerState: { variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow } }))); +// Declaring default props for MDBox +MDBox.defaultProps = { + variant: "contained", + bgColor: "transparent", + color: "dark", + opacity: 1, + borderRadius: "none", + shadow: "none", + coloredShadow: "none", +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +var MDTypographyRoot = styled(Typography)(({ theme, ownerState }) => { + const { palette, typography, functions } = theme; + const { color, textTransform, verticalAlign, fontWeight, opacity, textGradient, darkMode } = ownerState; + const { gradients, transparent, white } = palette; + const { fontWeightLight, fontWeightRegular, fontWeightMedium, fontWeightBold } = typography; + const { linearGradient } = functions; + // fontWeight styles + const fontWeights = { + light: fontWeightLight, + regular: fontWeightRegular, + medium: fontWeightMedium, + bold: fontWeightBold, + }; + // styles for the typography with textGradient={true} + const gradientStyles = () => ({ + backgroundImage: color !== "inherit" && color !== "text" && color !== "white" && gradients[color] + ? linearGradient(gradients[color].main, gradients[color].state) + : linearGradient(gradients.dark.main, gradients.dark.state), + display: "inline-block", + WebkitBackgroundClip: "text", + WebkitTextFillColor: transparent.main, + position: "relative", + zIndex: 1, + }); + // color value + let colorValue = color === "inherit" || !palette[color] ? "inherit" : palette[color].main; + if (darkMode && (color === "inherit" || !palette[color])) { + colorValue = "inherit"; + } + else if (darkMode && color === "dark") + colorValue = white.main; + return { + opacity, + textTransform, + verticalAlign, + textDecoration: "none", + color: colorValue, + fontWeight: fontWeights[fontWeight] && fontWeights[fontWeight], + ...(textGradient && gradientStyles()), + }; +}); + +// The Material Dashboard 2 PRO React TSUI Dashboard PRO Material main context +const MaterialUI = createContext(null); +// Setting custom name for the context which is visible on react dev tools +MaterialUI.displayName = "MaterialUIContext"; +// Material Dashboard 2 PRO React reducer +function reducer(state, action) { + switch (action.type) { + case "MINI_SIDENAV": { + return { ...state, miniSidenav: action.value }; + } + case "TRANSPARENT_SIDENAV": { + return { ...state, transparentSidenav: action.value }; + } + case "WHITE_SIDENAV": { + return { ...state, whiteSidenav: action.value }; + } + case "SIDENAV_COLOR": { + return { ...state, sidenavColor: action.value }; + } + case "TRANSPARENT_NAVBAR": { + return { ...state, transparentNavbar: action.value }; + } + case "FIXED_NAVBAR": { + return { ...state, fixedNavbar: action.value }; + } + case "OPEN_CONFIGURATOR": { + return { ...state, openConfigurator: action.value }; + } + case "DIRECTION": { + return { ...state, direction: action.value }; + } + case "LAYOUT": { + return { ...state, layout: action.value }; + } + case "DARKMODE": { + return { ...state, darkMode: action.value }; + } + default: { + throw new Error(`Unhandled action type: ${action.type}`); + } + } +} +// Material Dashboard 2 PRO React context provider +function MaterialUIControllerProvider({ children }) { + const initialState = { + miniSidenav: false, + transparentSidenav: false, + whiteSidenav: false, + sidenavColor: "info", + transparentNavbar: true, + fixedNavbar: true, + openConfigurator: false, + direction: "ltr", + layout: "dashboard", + darkMode: false, + }; + const [controller, dispatch] = useReducer(reducer, initialState); + const value = useMemo(() => [controller, dispatch], [controller, dispatch]); + return jsx(MaterialUI.Provider, { value: value, children: children }); +} +// Material Dashboard 2 PRO React custom hook for using context +function useMaterialUIController() { + const context = useContext(MaterialUI); + if (!context) { + throw new Error("useMaterialUIController should be used inside the MaterialUIControllerProvider."); + } + return context; +} +// Context module functions +const setMiniSidenav = (dispatch, value) => dispatch({ type: "MINI_SIDENAV", value }); +const setTransparentSidenav = (dispatch, value) => dispatch({ type: "TRANSPARENT_SIDENAV", value }); +const setWhiteSidenav = (dispatch, value) => dispatch({ type: "WHITE_SIDENAV", value }); +const setSidenavColor = (dispatch, value) => dispatch({ type: "SIDENAV_COLOR", value }); +const setTransparentNavbar = (dispatch, value) => dispatch({ type: "TRANSPARENT_NAVBAR", value }); +const setFixedNavbar = (dispatch, value) => dispatch({ type: "FIXED_NAVBAR", value }); +const setOpenConfigurator = (dispatch, value) => dispatch({ type: "OPEN_CONFIGURATOR", value }); +const setLayout = (dispatch, value) => dispatch({ type: "LAYOUT", value }); +const setDarkMode = (dispatch, value) => dispatch({ type: "DARKMODE", value }); + +const MDTypography = forwardRef(({ color, fontWeight, textTransform, verticalAlign, textGradient, opacity, children, ...rest }, ref) => { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + return (jsx(MDTypographyRoot, { ...rest, ref: ref, ownerState: { + color, + textTransform, + verticalAlign, + fontWeight, + opacity, + textGradient, + darkMode, + }, children: children })); +}); +// Declaring default props for MDTypography +MDTypography.defaultProps = { + color: "dark", + fontWeight: undefined, + textTransform: "none", + verticalAlign: "unset", + textGradient: false, + opacity: 1, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function collapseItem(theme, ownerState) { + const { palette, transitions, breakpoints, boxShadows, borders, functions } = theme; + const { active, transparentSidenav, whiteSidenav, darkMode } = ownerState; + const { white, transparent, dark, grey } = palette; + const { md } = boxShadows; + const { borderRadius } = borders; + const { pxToRem, rgba } = functions; + return { + background: () => { + let backgroundValue; + if (transparentSidenav && darkMode) { + backgroundValue = active ? rgba(white.main, 0.2) : transparent.main; + } + else if (transparentSidenav && !darkMode) { + backgroundValue = active ? grey[300] : transparent.main; + } + else if (whiteSidenav) { + backgroundValue = active ? grey[200] : transparent.main; + } + else { + backgroundValue = active ? rgba(white.main, 0.2) : transparent.main; + } + return backgroundValue; + }, + color: (transparentSidenav && !darkMode) || whiteSidenav ? dark.main : white.main, + display: "flex", + alignItems: "center", + width: "100%", + padding: `${pxToRem(8)} ${pxToRem(16)}`, + margin: `${pxToRem(1.5)} ${pxToRem(16)}`, + borderRadius: borderRadius.md, + cursor: "pointer", + userSelect: "none", + whiteSpace: "nowrap", + boxShadow: active && !whiteSidenav && !darkMode && !transparentSidenav ? md : "none", + [breakpoints.up("xl")]: { + transition: transitions.create(["box-shadow", "background-color"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.shorter, + }), + }, + "&:hover, &:focus": { + backgroundColor: transparentSidenav && !darkMode + ? grey[300] + : rgba(whiteSidenav ? grey[400] : white.main, 0.2), + }, + }; +} +function collapseIconBox(theme, ownerState) { + const { palette, transitions, borders, functions } = theme; + const { transparentSidenav, whiteSidenav, darkMode } = ownerState; + const { white, dark } = palette; + const { borderRadius } = borders; + const { pxToRem } = functions; + return { + minWidth: pxToRem(32), + minHeight: pxToRem(32), + color: (transparentSidenav && !darkMode) || whiteSidenav ? dark.main : white.main, + borderRadius: borderRadius.md, + display: "grid", + placeItems: "center", + transition: transitions.create("margin", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + "& svg, svg g": { + color: transparentSidenav || whiteSidenav ? dark.main : white.main, + }, + }; +} +const collapseIcon = ({ palette: { white, gradients } }, { active }) => ({ + color: active ? white.main : gradients.dark.state, +}); +function collapseText(theme, ownerState) { + const { typography, transitions, breakpoints, functions } = theme; + const { miniSidenav, transparentSidenav, active } = ownerState; + const { size, fontWeightRegular, fontWeightLight } = typography; + const { pxToRem } = functions; + return { + marginLeft: pxToRem(10), + [breakpoints.up("xl")]: { + opacity: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : 1, + maxWidth: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : "100%", + marginLeft: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : pxToRem(10), + transition: transitions.create(["opacity", "margin"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + }, + "& span": { + fontWeight: active ? fontWeightRegular : fontWeightLight, + fontSize: size.sm, + lineHeight: 0, + }, + }; +} +function collapseArrow(theme, ownerState) { + const { palette, typography, transitions, breakpoints, functions } = theme; + const { noCollapse, transparentSidenav, whiteSidenav, miniSidenav, open, active, darkMode } = ownerState; + const { white, dark } = palette; + const { size } = typography; + const { pxToRem, rgba } = functions; + return { + fontSize: `${size.lg} !important`, + fontWeight: 700, + marginBottom: pxToRem(-1), + transform: open ? "rotate(0)" : "rotate(-180deg)", + color: () => { + let colorValue; + if (transparentSidenav && darkMode) { + colorValue = open || active ? white.main : rgba(white.main, 0.25); + } + else if (transparentSidenav || whiteSidenav) { + colorValue = open || active ? dark.main : rgba(dark.main, 0.25); + } + else { + colorValue = open || active ? white.main : rgba(white.main, 0.5); + } + return colorValue; + }, + transition: transitions.create(["color", "transform", "opacity"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.shorter, + }), + [breakpoints.up("xl")]: { + display: noCollapse || (transparentSidenav && miniSidenav) || miniSidenav + ? "none !important" + : "block !important", + }, + }; +} + +function SidenavCollapse({ icon, name, children, active, noCollapse, open, ...rest }) { + const [controller] = useMaterialUIController(); + const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller; + return (jsxs(Fragment, { children: [jsx(ListItem, { component: "li", children: jsxs(MDBox, { ...rest, sx: (theme) => collapseItem(theme, { active, transparentSidenav, whiteSidenav, darkMode }), children: [jsx(ListItemIcon, { sx: (theme) => collapseIconBox(theme, { transparentSidenav, whiteSidenav, darkMode }), children: typeof icon === "string" ? (jsx(Icon, { sx: (theme) => collapseIcon(theme, { active }), children: icon })) : (icon) }), jsx(ListItemText, { primary: name, sx: (theme) => collapseText(theme, { + miniSidenav, + transparentSidenav, + whiteSidenav, + active, + }) }), jsx(Icon, { sx: (theme) => collapseArrow(theme, { + noCollapse, + transparentSidenav, + whiteSidenav, + miniSidenav, + open, + active, + darkMode, + }), children: "expand_less" })] }) }), children && (jsx(Collapse, { in: Boolean(open), unmountOnExit: true, children: children }))] })); +} +// Declaring default props for SidenavCollapse +SidenavCollapse.defaultProps = { + active: false, + noCollapse: false, + children: false, + open: false, +}; + +function SidenavList({ children }) { + return (jsx(List, { sx: { + px: 2, + my: 0.3, + }, children: children })); +} + +/* eslint-disable prefer-destructuring */ +function item(theme, ownerState) { + const { palette, borders, functions, transitions } = theme; + const { active, color, transparentSidenav, whiteSidenav, darkMode } = ownerState; + const { transparent, white, grey } = palette; + const { borderRadius } = borders; + const { rgba } = functions; + return { + pl: 3, + mt: 0.375, + mb: 0.3, + width: "100%", + borderRadius: borderRadius.md, + cursor: "pointer", + backgroundColor: () => { + let backgroundValue = transparent.main; + if ((active === "isParent" && !transparentSidenav && !whiteSidenav) || + (active === "isParent" && transparentSidenav && darkMode)) { + backgroundValue = rgba(white.main, 0.2); + } + else if (active === "isParent" && transparentSidenav) { + backgroundValue = grey[300]; + } + else if (active === "isParent" && whiteSidenav) { + backgroundValue = grey[200]; + } + else if (active) { + backgroundValue = palette[color].main; + } + return backgroundValue; + }, + transition: transitions.create("background-color", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.shorter, + }), + "&:hover, &:focus": { + backgroundColor: !active && + rgba((transparentSidenav && !darkMode) || whiteSidenav ? grey[400] : white.main, 0.2), + }, + }; +} +function itemContent(theme, ownerState) { + const { palette, typography, transitions, functions } = theme; + const { miniSidenav, name, active, transparentSidenav, whiteSidenav, darkMode } = ownerState; + const { white, dark } = palette; + const { size, fontWeightRegular, fontWeightLight } = typography; + const { pxToRem } = functions; + return { + display: "flex", + alignItems: "center", + justifyContent: "space-between", + width: "100%", + padding: `${pxToRem(12)} ${pxToRem(16)}`, + marginLeft: pxToRem(18), + userSelect: "none", + position: "relative", + "& span": { + color: ((transparentSidenav && !darkMode) || whiteSidenav) && (active === "isParent" || !active) + ? dark.main + : white.main, + fontWeight: active ? fontWeightRegular : fontWeightLight, + fontSize: size.sm, + opacity: miniSidenav ? 0 : 1, + transition: transitions.create(["opacity", "color"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + }, + "&::before": { + content: `"${name[0]}"`, + color: ((transparentSidenav && !darkMode) || whiteSidenav) && (active === "isParent" || !active) + ? dark.main + : white.main, + fontWeight: fontWeightRegular, + display: "flex", + alignItems: "center", + position: "absolute", + top: "50%", + transform: "translateY(-50%)", + left: pxToRem(-15), + opacity: 1, + borderRadius: "50%", + fontSize: size.sm, + }, + }; +} +function itemArrow(theme, ownerState) { + const { palette, typography, transitions, breakpoints, functions } = theme; + const { noCollapse, transparentSidenav, whiteSidenav, miniSidenav, open, active, darkMode } = ownerState; + const { white, dark } = palette; + const { size } = typography; + const { pxToRem, rgba } = functions; + return { + fontSize: `${size.lg} !important`, + fontWeight: 700, + marginBottom: pxToRem(-1), + transform: open ? "rotate(0)" : "rotate(-180deg)", + color: () => { + let colorValue; + if (transparentSidenav && darkMode) { + colorValue = open || active ? white.main : rgba(white.main, 0.25); + } + else if (transparentSidenav || whiteSidenav) { + colorValue = open || active ? dark.main : rgba(dark.main, 0.25); + } + else { + colorValue = open || active ? white.main : rgba(white.main, 0.5); + } + return colorValue; + }, + transition: transitions.create(["color", "transform", "opacity"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.shorter, + }), + [breakpoints.up("xl")]: { + display: noCollapse || (transparentSidenav && miniSidenav) || miniSidenav + ? "none !important" + : "block !important", + }, + }; +} + +function SidenavItem({ color, name, active, nested, children, open, ...rest }) { + const [controller] = useMaterialUIController(); + const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller; + return (jsxs(Fragment, { children: [jsx(ListItem, { ...rest, component: "li", sx: (theme) => item(theme, { active, color, transparentSidenav, whiteSidenav, darkMode }), children: jsxs(MDBox, { sx: (theme) => itemContent(theme, { + active, + miniSidenav, + name, + open, + nested, + transparentSidenav, + whiteSidenav, + darkMode, + }), children: [jsx(ListItemText, { primary: name }), children && (jsx(Icon, { component: "i", sx: (theme) => itemArrow(theme, { open, miniSidenav, transparentSidenav, whiteSidenav, darkMode }), children: "expand_less" }))] }) }), children && (jsx(Collapse, { in: open, timeout: "auto", unmountOnExit: true, ...rest, children: children }))] })); +} +// Declaring default props for SidenavItem +SidenavItem.defaultProps = { + color: "info", + active: false, + nested: false, + children: false, + open: false, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +var SidenavRoot = styled(Drawer)(({ theme, ownerState }) => { + const { palette, boxShadows, transitions, breakpoints, functions } = theme; + const { transparentSidenav, whiteSidenav, miniSidenav, darkMode } = ownerState; + const sidebarWidth = 250; + const { transparent, gradients, white, background } = palette; + const { xxl } = boxShadows; + const { pxToRem, linearGradient } = functions; + let backgroundValue = darkMode + ? background.sidenav + : linearGradient(gradients.dark.main, gradients.dark.state); + if (transparentSidenav) { + backgroundValue = transparent.main; + } + else if (whiteSidenav) { + backgroundValue = white.main; + } + // styles for the sidenav when miniSidenav={false} + const drawerOpenStyles = () => ({ + background: backgroundValue, + transform: "translateX(0)", + transition: transitions.create("transform", { + easing: transitions.easing.sharp, + duration: transitions.duration.shorter, + }), + [breakpoints.up("xl")]: { + boxShadow: transparentSidenav ? "none" : xxl, + marginBottom: transparentSidenav ? 0 : "inherit", + left: "0", + width: sidebarWidth, + transform: "translateX(0)", + transition: transitions.create(["width", "background-color"], { + easing: transitions.easing.sharp, + duration: transitions.duration.enteringScreen, + }), + }, + }); + // styles for the sidenav when miniSidenav={true} + const drawerCloseStyles = () => ({ + background: backgroundValue, + transform: `translateX(${pxToRem(-320)})`, + transition: transitions.create("transform", { + easing: transitions.easing.sharp, + duration: transitions.duration.shorter, + }), + [breakpoints.up("xl")]: { + boxShadow: transparentSidenav ? "none" : xxl, + marginBottom: transparentSidenav ? 0 : "inherit", + left: "0", + width: pxToRem(96), + overflowX: "hidden", + transform: "translateX(0)", + transition: transitions.create(["width", "background-color"], { + easing: transitions.easing.sharp, + duration: transitions.duration.shorter, + }), + }, + }); + return { + "& .MuiDrawer-paper": { + boxShadow: xxl, + border: "none", + ...(miniSidenav ? drawerCloseStyles() : drawerOpenStyles()), + }, + }; +}); + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function sidenavLogoLabel(theme, ownerState) { + const { functions, transitions, typography, breakpoints } = theme; + const { miniSidenav } = ownerState; + const { pxToRem } = functions; + const { fontWeightMedium } = typography; + return { + ml: 0.5, + fontWeight: fontWeightMedium, + wordSpacing: pxToRem(-1), + transition: transitions.create("opacity", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + [breakpoints.up("xl")]: { + opacity: miniSidenav ? 0 : 1, + }, + }; +} + +function Sidenav$1({ color, brand, brandName, routes, ...rest }) { + const [openCollapse, setOpenCollapse] = useState(false); + const [openNestedCollapse, setOpenNestedCollapse] = useState(false); + const [controller, dispatch] = useMaterialUIController(); + const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller; + const location = useLocation(); + const { pathname } = location; + const collapseName = pathname.split("/").slice(1)[0]; + const items = pathname.split("/").slice(1); + const itemParentName = items[1]; + const itemName = items[items.length - 1]; + let textColor = "white"; + if (transparentSidenav || (whiteSidenav && !darkMode)) { + textColor = "dark"; + } + else if (whiteSidenav && darkMode) { + textColor = "inherit"; + } + const closeSidenav = () => setMiniSidenav(dispatch, true); + useEffect(() => { + setOpenCollapse(collapseName); + setOpenNestedCollapse(itemParentName); + }, []); + useEffect(() => { + // A function that sets the mini state of the sidenav. + function handleMiniSidenav() { + setMiniSidenav(dispatch, window.innerWidth < 1200); + setTransparentSidenav(dispatch, window.innerWidth < 1200 ? false : transparentSidenav); + setWhiteSidenav(dispatch, window.innerWidth < 1200 ? false : whiteSidenav); + } + /** + The event listener that's calling the handleMiniSidenav function when resizing the window. + */ + window.addEventListener("resize", handleMiniSidenav); + // Call the handleMiniSidenav function to set the state with the initial value. + handleMiniSidenav(); + // Remove event listener on cleanup + return () => window.removeEventListener("resize", handleMiniSidenav); + }, [dispatch, location]); + // Render all the nested collapse items from the routes.js + const renderNestedCollapse = (collapse) => { + const template = collapse.map(({ name, route, key, href }) => href ? (jsx(Link, { href: href, target: "_blank", rel: "noreferrer", sx: { textDecoration: "none" }, children: jsx(SidenavItem, { name: name, nested: true }) }, key)) : (jsx(NavLink, { to: route, style: { textDecoration: "none" }, children: jsx(SidenavItem, { name: name, active: route === pathname, nested: true }) }, key))); + return template; + }; + // Render the all the collpases from the routes.js + const renderCollapse = (collapses) => collapses.map(({ name, collapse, route, href, key }) => { + let returnValue; + if (collapse) { + returnValue = (jsx(SidenavItem, { color: color, name: name, active: key === itemParentName ? "isParent" : false, open: openNestedCollapse === key, onClick: ({ currentTarget }) => openNestedCollapse === key && currentTarget.classList.contains("MuiListItem-root") + ? setOpenNestedCollapse(false) + : setOpenNestedCollapse(key), children: renderNestedCollapse(collapse) }, key)); + } + else { + returnValue = href ? (jsx(Link, { href: href, target: "_blank", rel: "noreferrer", sx: { textDecoration: "none" }, children: jsx(SidenavItem, { color: color, name: name, active: key === itemName }) }, key)) : (jsx(NavLink, { to: route, style: { textDecoration: "none" }, children: jsx(SidenavItem, { color: color, name: name, active: key === itemName }) }, key)); + } + return jsx(SidenavList, { children: returnValue }, key); + }); + // Render all the routes from the routes.js (All the visible items on the Sidenav) + const renderRoutes = routes.map(({ type, name, icon, title, collapse, noCollapse, key, href, route }) => { + let returnValue; + if (type === "collapse") { + if (href) { + returnValue = (jsx(Link, { href: href, target: "_blank", rel: "noreferrer", sx: { textDecoration: "none" }, children: jsx(SidenavCollapse, { name: name, icon: icon, active: key === collapseName, noCollapse: noCollapse }) }, key)); + } + else if (noCollapse && route) { + returnValue = (jsx(NavLink, { to: route, children: jsx(SidenavCollapse, { name: name, icon: icon, noCollapse: noCollapse, active: key === collapseName, children: collapse ? renderCollapse(collapse) : null }) }, key)); + } + else { + returnValue = (jsx(SidenavCollapse, { name: name, icon: icon, active: key === collapseName, open: openCollapse === key, onClick: () => (openCollapse === key ? setOpenCollapse(false) : setOpenCollapse(key)), children: collapse ? renderCollapse(collapse) : null }, key)); + } + } + else if (type === "title") { + returnValue = (jsx(MDTypography, { color: textColor, display: "block", variant: "caption", fontWeight: "bold", textTransform: "uppercase", pl: 3, mt: 2, mb: 1, ml: 1, children: title }, key)); + } + else if (type === "divider") { + returnValue = (jsx(Divider, { light: (!darkMode && !whiteSidenav && !transparentSidenav) || + (darkMode && !transparentSidenav && whiteSidenav) }, key)); + } + return returnValue; + }); + return (jsxs(SidenavRoot, { ...rest, variant: "permanent", ownerState: { transparentSidenav, whiteSidenav, miniSidenav, darkMode }, children: [jsxs(MDBox, { pt: 3, pb: 1, px: 4, textAlign: "center", children: [jsx(MDBox, { display: { xs: "block", xl: "none" }, position: "absolute", top: 0, right: 0, p: 1.625, onClick: closeSidenav, sx: { cursor: "pointer" }, children: jsx(MDTypography, { variant: "h6", color: "secondary", children: jsx(Icon, { sx: { fontWeight: "bold" }, children: "close" }) }) }), jsxs(MDBox, { component: NavLink, to: "/", display: "flex", alignItems: "center", children: [brand && jsx(MDBox, { component: "img", src: brand, alt: "Brand", width: "2rem" }), jsx(MDBox, { width: !brandName && "100%", sx: (theme) => sidenavLogoLabel(theme, { miniSidenav }), children: jsx(MDTypography, { component: "h6", variant: "button", fontWeight: "medium", color: textColor, children: brandName }) })] })] }), jsx(Divider, { light: (!darkMode && !whiteSidenav && !transparentSidenav) || + (darkMode && !transparentSidenav && whiteSidenav) }), jsx(List, { children: renderRoutes })] })); +} +// Declaring default props for Sidenav +Sidenav$1.defaultProps = { + color: "info", + brand: "", +}; + +/* eslint-disable prefer-destructuring */ +var MDButtonRoot = styled(Button)(({ theme, ownerState }) => { + const { palette, functions, borders, boxShadows } = theme; + const { color, variant, size, circular, iconOnly, darkMode } = ownerState; + const { white, text, transparent, gradients, grey } = palette; + const { boxShadow, linearGradient, pxToRem, rgba } = functions; + const { borderRadius } = borders; + const { colored } = boxShadows; + // styles for the button with variant="contained" + const containedStyles = () => { + // background color value + const backgroundValue = palette[color] ? palette[color].main : white.main; + // backgroundColor value when button is focused + const focusedBackgroundValue = palette[color] ? palette[color].focus : white.focus; + // boxShadow value + const boxShadowValue = colored[color] + ? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow([0, 3], [1, -2], palette[color].main, 0.2)}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}` + : "none"; + // boxShadow value when button is hovered + const hoveredBoxShadowValue = colored[color] + ? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow([0, 4], [23, 0], palette[color].main, 0.15)}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}` + : "none"; + // color value + let colorValue = white.main; + if (!darkMode && (color === "white" || color === "light" || !palette[color])) { + colorValue = text.main; + } + else if (darkMode && (color === "white" || color === "light" || !palette[color])) { + colorValue = grey[600]; + } + // color value when button is focused + let focusedColorValue = white.main; + if (color === "white") { + focusedColorValue = text.main; + } + else if (color === "primary" || color === "error" || color === "dark") { + focusedColorValue = white.main; + } + return { + background: backgroundValue, + color: colorValue, + boxShadow: boxShadowValue, + "&:hover": { + backgroundColor: backgroundValue, + color: colorValue, + boxShadow: hoveredBoxShadowValue, + }, + "&:focus:not(:hover)": { + backgroundColor: focusedBackgroundValue, + color: colorValue, + boxShadow: palette[color] + ? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5) + : boxShadow([0, 0], [0, 3.2], white.main, 0.5), + }, + "&:disabled": { + backgroundColor: backgroundValue, + color: focusedColorValue, + }, + }; + }; + // styles for the button with variant="outlined" + const outlinedStyles = () => { + // background color value + const backgroundValue = color === "white" ? rgba(white.main, 0.1) : transparent.main; + // color value + const colorValue = palette[color] ? palette[color].main : white.main; + // boxShadow value + const boxShadowValue = palette[color] + ? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5) + : boxShadow([0, 0], [0, 3.2], white.main, 0.5); + // border color value + let borderColorValue = palette[color] ? palette[color].main : rgba(white.main, 0.75); + if (color === "white") { + borderColorValue = rgba(white.main, 0.75); + } + return { + background: backgroundValue, + color: colorValue, + border: `${pxToRem(1)} solid ${borderColorValue}`, + "&:hover": { + background: transparent.main, + color: colorValue, + borderColor: colorValue, + opacity: 0.85, + }, + "&:focus:not(:hover)": { + background: transparent.main, + color: colorValue, + boxShadow: boxShadowValue, + }, + "&:active:not(:hover)": { + backgroundColor: colorValue, + color: white.main, + opacity: 0.85, + }, + "&:disabled": { + color: colorValue, + borderColor: colorValue, + }, + }; + }; + // styles for the button with variant="gradient" + const gradientStyles = () => { + // background value + const backgroundValue = color === "white" || !gradients[color] + ? white.main + : linearGradient(gradients[color].main, gradients[color].state); + // boxShadow value + const boxShadowValue = colored[color] + ? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow([0, 3], [1, -2], palette[color].main, 0.2)}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}` + : "none"; + // boxShadow value when button is hovered + const hoveredBoxShadowValue = colored[color] + ? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow([0, 4], [23, 0], palette[color].main, 0.15)}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}` + : "none"; + // color value + let colorValue = white.main; + if (color === "white") { + colorValue = text.main; + } + else if (color === "light") { + colorValue = gradients.dark.state; + } + return { + background: backgroundValue, + color: colorValue, + boxShadow: boxShadowValue, + "&:hover": { + boxShadow: hoveredBoxShadowValue, + color: colorValue, + }, + "&:focus:not(:hover)": { + boxShadow: boxShadowValue, + color: colorValue, + }, + "&:disabled": { + background: backgroundValue, + color: colorValue, + }, + }; + }; + // styles for the button with variant="text" + const textStyles = () => { + // color value + const colorValue = palette[color] ? palette[color].main : white.main; + // color value when button is focused + const focusedColorValue = palette[color] ? palette[color].focus : white.focus; + return { + color: colorValue, + "&:hover": { + color: focusedColorValue, + }, + "&:focus:not(:hover)": { + color: focusedColorValue, + }, + }; + }; + // styles for the button with circular={true} + const circularStyles = () => ({ + borderRadius: borderRadius.section, + }); + // styles for the button with iconOnly={true} + const iconOnlyStyles = () => { + // width, height, minWidth and minHeight values + let sizeValue = pxToRem(38); + if (size === "small") { + sizeValue = pxToRem(25.4); + } + else if (size === "large") { + sizeValue = pxToRem(52); + } + // padding value + let paddingValue = `${pxToRem(11)} ${pxToRem(11)} ${pxToRem(10)}`; + if (size === "small") { + paddingValue = pxToRem(4.5); + } + else if (size === "large") { + paddingValue = pxToRem(16); + } + return { + width: sizeValue, + minWidth: sizeValue, + height: sizeValue, + minHeight: sizeValue, + padding: paddingValue, + "& .material-icons": { + marginTop: 0, + }, + "&:hover, &:focus, &:active": { + transform: "none", + }, + }; + }; + return { + ...(variant === "contained" && containedStyles()), + ...(variant === "outlined" && outlinedStyles()), + ...(variant === "gradient" && gradientStyles()), + ...(variant === "text" && textStyles()), + ...(circular && circularStyles()), + ...(iconOnly && iconOnlyStyles()), + }; +}); + +const MDButton = forwardRef(({ color, variant, size, circular, iconOnly, children, ...rest }, ref) => { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + return (jsx(MDButtonRoot, { ...rest, ref: ref, ownerState: { color, variant, size, circular, iconOnly, darkMode }, children: children })); +}); +// Declaring default props for MDButton +MDButton.defaultProps = { + color: "white", + variant: "contained", + size: "medium", + circular: false, + iconOnly: false, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +var ConfiguratorRoot = styled(Drawer)(({ theme, ownerState }) => { + const { boxShadows, functions, transitions } = theme; + const { openConfigurator } = ownerState; + const configuratorWidth = 360; + const { lg } = boxShadows; + const { pxToRem } = functions; + // drawer styles when openConfigurator={true} + const drawerOpenStyles = () => ({ + width: configuratorWidth, + left: "initial", + right: 0, + transition: transitions.create("right", { + easing: transitions.easing.sharp, + duration: transitions.duration.short, + }), + }); + // drawer styles when openConfigurator={false} + const drawerCloseStyles = () => ({ + left: "initial", + right: pxToRem(-350), + transition: transitions.create("all", { + easing: transitions.easing.sharp, + duration: transitions.duration.short, + }), + }); + return { + "& .MuiDrawer-paper": { + height: "100vh", + margin: 0, + padding: `0 ${pxToRem(10)}`, + borderRadius: 0, + boxShadow: lg, + overflowY: "auto", + ...(openConfigurator ? drawerOpenStyles() : drawerCloseStyles()), + }, + }; +}); + +function Configurator() { + const [controller, dispatch] = useMaterialUIController(); + const { openConfigurator, miniSidenav, fixedNavbar, sidenavColor, transparentSidenav, whiteSidenav, darkMode, } = controller; + const [disabled, setDisabled] = useState(false); + const sidenavColors = ["primary", "dark", "info", "success", "warning", "error"]; + // Use the useEffect hook to change the button state for the sidenav type based on window size. + useEffect(() => { + // A function that sets the disabled state of the buttons for the sidenav type. + function handleDisabled() { + return window.innerWidth > 1200 ? setDisabled(false) : setDisabled(true); + } + // The event listener that's calling the handleDisabled function when resizing the window. + window.addEventListener("resize", handleDisabled); + // Call the handleDisabled function to set the state with the initial value. + handleDisabled(); + // Remove event listener on cleanup + return () => window.removeEventListener("resize", handleDisabled); + }, []); + const handleCloseConfigurator = () => setOpenConfigurator(dispatch, false); + const handleTransparentSidenav = () => { + setTransparentSidenav(dispatch, true); + setWhiteSidenav(dispatch, false); + }; + const handleWhiteSidenav = () => { + setWhiteSidenav(dispatch, true); + setTransparentSidenav(dispatch, false); + }; + const handleDarkSidenav = () => { + setWhiteSidenav(dispatch, false); + setTransparentSidenav(dispatch, false); + }; + const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav); + const handleFixedNavbar = () => setFixedNavbar(dispatch, !fixedNavbar); + const handleDarkMode = () => setDarkMode(dispatch, !darkMode); + // sidenav type buttons styles + const sidenavTypeButtonsStyles = ({ functions: { pxToRem }, palette: { white, dark, background }, borders: { borderWidth }, }) => ({ + height: pxToRem(39), + background: darkMode ? background.sidenav : white.main, + color: darkMode ? white.main : dark.main, + border: `${borderWidth[1]} solid ${darkMode ? white.main : dark.main}`, + "&:hover, &:focus, &:focus:not(:hover)": { + background: darkMode ? background.sidenav : white.main, + color: darkMode ? white.main : dark.main, + border: `${borderWidth[1]} solid ${darkMode ? white.main : dark.main}`, + }, + }); + // sidenav type active button styles + const sidenavTypeActiveButtonStyles = ({ functions: { pxToRem, linearGradient }, palette: { white, gradients, background }, }) => ({ + height: pxToRem(39), + background: darkMode ? white.main : linearGradient(gradients.dark.main, gradients.dark.state), + color: darkMode ? background.sidenav : white.main, + "&:hover, &:focus, &:focus:not(:hover)": { + background: darkMode ? white.main : linearGradient(gradients.dark.main, gradients.dark.state), + color: darkMode ? background.sidenav : white.main, + }, + }); + return (jsxs(ConfiguratorRoot, { variant: "permanent", ownerState: { openConfigurator }, children: [jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "baseline", pt: 4, pb: 0.5, px: 3, children: [jsxs(MDBox, { children: [jsx(MDTypography, { variant: "h5", children: "Material UI Configurator" }), jsx(MDTypography, { variant: "body2", color: "text", children: "See our dashboard options." })] }), jsx(Icon, { sx: ({ typography: { size }, palette: { dark, white } }) => ({ + fontSize: `${size.lg} !important`, + color: darkMode ? white.main : dark.main, + stroke: "currentColor", + strokeWidth: "2px", + cursor: "pointer", + transform: "translateY(5px)", + }), onClick: handleCloseConfigurator, children: "close" })] }), jsx(Divider, {}), jsxs(MDBox, { pt: 0.5, pb: 3, px: 3, children: [jsxs(MDBox, { children: [jsx(MDTypography, { variant: "h6", children: "Sidenav Colors" }), jsx(MDBox, { mb: 0.5, children: sidenavColors.map((color) => (jsx(IconButton, { sx: ({ borders: { borderWidth }, palette: { white, dark, background }, transitions, }) => ({ + width: "24px", + height: "24px", + padding: 0, + border: `${borderWidth[1]} solid ${darkMode ? background.sidenav : white.main}`, + borderColor: () => { + let borderColorValue = sidenavColor === color && dark.main; + if (darkMode && sidenavColor === color) { + borderColorValue = white.main; + } + return borderColorValue; + }, + transition: transitions.create("border-color", { + easing: transitions.easing.sharp, + duration: transitions.duration.shorter, + }), + backgroundImage: ({ functions: { linearGradient }, palette: { gradients } }) => linearGradient(gradients[color].main, gradients[color].state), + "&:not(:last-child)": { + mr: 1, + }, + "&:hover, &:focus, &:active": { + borderColor: darkMode ? white.main : dark.main, + }, + }), onClick: () => setSidenavColor(dispatch, color) }, color))) })] }), jsxs(MDBox, { mt: 3, lineHeight: 1, children: [jsx(MDTypography, { variant: "h6", children: "Sidenav Type" }), jsx(MDTypography, { variant: "button", color: "text", children: "Choose between different sidenav types." }), jsxs(MDBox, { sx: { + display: "flex", + mt: 2, + mr: 1, + }, children: [jsx(MDButton, { color: "dark", variant: "gradient", onClick: handleDarkSidenav, disabled: disabled, fullWidth: true, sx: !transparentSidenav && !whiteSidenav + ? sidenavTypeActiveButtonStyles + : sidenavTypeButtonsStyles, children: "Dark" }), jsx(MDBox, { sx: { mx: 1, width: "8rem", minWidth: "8rem" }, children: jsx(MDButton, { color: "dark", variant: "gradient", onClick: handleTransparentSidenav, disabled: disabled, fullWidth: true, sx: transparentSidenav && !whiteSidenav + ? sidenavTypeActiveButtonStyles + : sidenavTypeButtonsStyles, children: "Transparent" }) }), jsx(MDButton, { color: "dark", variant: "gradient", onClick: handleWhiteSidenav, disabled: disabled, fullWidth: true, sx: whiteSidenav && !transparentSidenav + ? sidenavTypeActiveButtonStyles + : sidenavTypeButtonsStyles, children: "White" })] })] }), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, lineHeight: 1, children: [jsx(MDTypography, { variant: "h6", children: "Navbar Fixed" }), jsx(Switch, { checked: fixedNavbar, onChange: handleFixedNavbar })] }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", lineHeight: 1, children: [jsx(MDTypography, { variant: "h6", children: "Sidenav Mini" }), jsx(Switch, { checked: miniSidenav, onChange: handleMiniSidenav })] }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", lineHeight: 1, children: [jsx(MDTypography, { variant: "h6", children: "Light / Dark" }), jsx(Switch, { checked: darkMode, onChange: handleDarkMode })] }), jsx(Divider, {}), jsxs(MDBox, { mt: 3, mb: 2, children: [jsx(MDBox, { mb: 2, children: jsx(MDButton, { component: Link, href: "https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts", target: "_blank", rel: "noreferrer", color: "info", variant: "gradient", fullWidth: true, children: "buy now" }) }), jsx(MDBox, { mb: 2, children: jsx(MDButton, { component: Link, href: "https://www.creative-tim.com/product/material-dashboard-pro-react", target: "_blank", rel: "noreferrer", color: "dark", variant: "gradient", fullWidth: true, children: "buy javascript version" }) }), jsx(MDButton, { component: Link, href: "https://www.creative-tim.com/learning-lab/react/quick-start/material-dashboard/", target: "_blank", rel: "noreferrer", color: darkMode ? "light" : "dark", variant: "outlined", fullWidth: true, children: "view documentation" })] }), jsx(MDBox, { display: "flex", justifyContent: "center", children: jsx(GitHubButton, { href: "https://github.com/creativetimofficial/ct-material-dashboard-pro-react", "data-icon": "octicon-star", "data-size": "large", "data-show-count": "true", "aria-label": "Star creativetimofficial/ct-material-dashboard-pro-react on GitHub", children: "Star" }) }), jsxs(MDBox, { mt: 2, textAlign: "center", children: [jsx(MDBox, { mb: 0.5, children: jsx(MDTypography, { variant: "h6", children: "Thank you for sharing!" }) }), jsxs(MDBox, { display: "flex", justifyContent: "center", children: [jsx(MDBox, { mr: 1.5, children: jsxs(MDButton, { component: Link, href: "//twitter.com/intent/tweet?text=Check%20Material%20Dashboard%202%20PRO%20React%20made%20by%20%40CreativeTim%20%23webdesign%20%23dashboard%20%23react%20%mui&url=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fmaterial-dashboard-2-pro-react-ts", target: "_blank", rel: "noreferrer", color: "dark", children: [jsx(TwitterIcon, {}), "\u00A0 Tweet"] }) }), jsxs(MDButton, { component: Link, href: "https://www.facebook.com/sharer/sharer.php?u=https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts", target: "_blank", rel: "noreferrer", color: "dark", children: [jsx(FacebookIcon, {}), "\u00A0 Share"] })] })] })] })] })); +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const colors$1 = { + background: { + default: "#f0f2f5", + }, + text: { + main: "#7b809a", + focus: "#7b809a", + }, + transparent: { + main: "transparent", + }, + white: { + main: "#ffffff", + focus: "#ffffff", + }, + black: { + light: "#000000", + main: "#000000", + focus: "#000000", + }, + primary: { + main: "#e91e63", + focus: "#e91e63", + }, + secondary: { + main: "#7b809a", + focus: "#8f93a9", + }, + info: { + main: "#1A73E8", + focus: "#1662C4", + }, + success: { + main: "#4CAF50", + focus: "#67bb6a", + }, + warning: { + main: "#fb8c00", + focus: "#fc9d26", + }, + error: { + main: "#F44335", + focus: "#f65f53", + }, + light: { + main: "#f0f2f5", + focus: "#f0f2f5", + }, + dark: { + main: "#344767", + focus: "#2c3c58", + }, + grey: { + 100: "#f8f9fa", + 200: "#f0f2f5", + 300: "#dee2e6", + 400: "#ced4da", + 500: "#adb5bd", + 600: "#6c757d", + 700: "#495057", + 800: "#343a40", + 900: "#212529", + }, + gradients: { + primary: { + main: "#EC407A", + state: "#D81B60", + }, + secondary: { + main: "#747b8a", + state: "#495361", + }, + info: { + main: "#49a3f1", + state: "#1A73E8", + }, + success: { + main: "#66BB6A", + state: "#43A047", + }, + warning: { + main: "#FFA726", + state: "#FB8C00", + }, + error: { + main: "#EF5350", + state: "#E53935", + }, + light: { + main: "#EBEFF4", + state: "#CED4DA", + }, + dark: { + main: "#42424a", + state: "#191919", + }, + }, + socialMediaColors: { + facebook: { + main: "#3b5998", + dark: "#344e86", + }, + twitter: { + main: "#55acee", + dark: "#3ea1ec", + }, + instagram: { + main: "#125688", + dark: "#0e456d", + }, + linkedin: { + main: "#0077b5", + dark: "#00669c", + }, + pinterest: { + main: "#cc2127", + dark: "#b21d22", + }, + youtube: { + main: "#e52d27", + dark: "#d41f1a", + }, + vimeo: { + main: "#1ab7ea", + dark: "#13a3d2", + }, + slack: { + main: "#3aaf85", + dark: "#329874", + }, + dribbble: { + main: "#ea4c89", + dark: "#e73177", + }, + github: { + main: "#24292e", + dark: "#171a1d", + }, + reddit: { + main: "#ff4500", + dark: "#e03d00", + }, + tumblr: { + main: "#35465c", + dark: "#2a3749", + }, + }, + badgeColors: { + primary: { + background: "#f8b3ca", + text: "#cc084b", + }, + secondary: { + background: "#d7d9e1", + text: "#6c757d", + }, + info: { + background: "#aecef7", + text: "#095bc6", + }, + success: { + background: "#bce2be", + text: "#339537", + }, + warning: { + background: "#ffd59f", + text: "#c87000", + }, + error: { + background: "#fcd3d0", + text: "#f61200", + }, + light: { + background: "#ffffff", + text: "#c7d3de", + }, + dark: { + background: "#8097bf", + text: "#1e2e4a", + }, + }, + coloredShadows: { + primary: "#e91e62", + secondary: "#110e0e", + info: "#00bbd4", + success: "#4caf4f", + warning: "#ff9900", + error: "#f44336", + light: "#adb5bd", + dark: "#404040", + }, + inputBorderColor: "#d2d6da", + tabs: { + indicator: { boxShadow: "#ddd" }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +/** + * The base breakpoints for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material. + * You can add new breakpoints using this file. + * You can customized the breakpoints for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file. + */ +const breakpoints$1 = { + values: { + xs: 0, + sm: 576, + md: 768, + lg: 992, + xl: 1200, + xxl: 1400, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +/** + The pxToRem() function helps you to convert a px unit into a rem unit, + */ +function pxToRem$1(number, baseNumber = 16) { + return `${number / baseNumber}rem`; +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { dark: dark$e } = colors$1; +const baseProperties$1 = { + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeightLighter: 100, + fontWeightLight: 300, + fontWeightRegular: 400, + fontWeightMedium: 600, + fontWeightBold: 700, + fontSizeXXS: pxToRem$1(10.4), + fontSizeXS: pxToRem$1(12), + fontSizeSM: pxToRem$1(14), + fontSizeMD: pxToRem$1(16), + fontSizeLG: pxToRem$1(18), + fontSizeXL: pxToRem$1(20), + fontSize2XL: pxToRem$1(24), + fontSize3XL: pxToRem$1(30), +}; +const baseHeadingProperties$1 = { + fontFamily: baseProperties$1.fontFamily, + color: dark$e.main, + fontWeight: baseProperties$1.fontWeightBold, +}; +const baseDisplayProperties$1 = { + fontFamily: baseProperties$1.fontFamily, + color: dark$e.main, + fontWeight: baseProperties$1.fontWeightLight, + lineHeight: 1.2, +}; +const typography$1 = { + fontFamily: baseProperties$1.fontFamily, + fontWeightLighter: baseProperties$1.fontWeightLighter, + fontWeightLight: baseProperties$1.fontWeightLight, + fontWeightRegular: baseProperties$1.fontWeightRegular, + fontWeightMedium: baseProperties$1.fontWeightMedium, + fontWeightBold: baseProperties$1.fontWeightBold, + h1: { + fontSize: pxToRem$1(48), + lineHeight: 1.25, + ...baseHeadingProperties$1, + }, + h2: { + fontSize: pxToRem$1(36), + lineHeight: 1.3, + ...baseHeadingProperties$1, + }, + h3: { + fontSize: pxToRem$1(30), + lineHeight: 1.375, + ...baseHeadingProperties$1, + }, + h4: { + fontSize: pxToRem$1(24), + lineHeight: 1.375, + ...baseHeadingProperties$1, + }, + h5: { + fontSize: pxToRem$1(20), + lineHeight: 1.375, + ...baseHeadingProperties$1, + }, + h6: { + fontSize: pxToRem$1(16), + lineHeight: 1.625, + ...baseHeadingProperties$1, + }, + subtitle1: { + fontFamily: baseProperties$1.fontFamily, + fontSize: baseProperties$1.fontSizeXL, + fontWeight: baseProperties$1.fontWeightLight, + lineHeight: 1.625, + }, + subtitle2: { + fontFamily: baseProperties$1.fontFamily, + fontSize: baseProperties$1.fontSizeMD, + fontWeight: baseProperties$1.fontWeightLight, + lineHeight: 1.6, + }, + body1: { + fontFamily: baseProperties$1.fontFamily, + fontSize: baseProperties$1.fontSizeXL, + fontWeight: baseProperties$1.fontWeightRegular, + lineHeight: 1.625, + }, + body2: { + fontFamily: baseProperties$1.fontFamily, + fontSize: baseProperties$1.fontSizeMD, + fontWeight: baseProperties$1.fontWeightLight, + lineHeight: 1.6, + }, + button: { + fontFamily: baseProperties$1.fontFamily, + fontSize: baseProperties$1.fontSizeSM, + fontWeight: baseProperties$1.fontWeightLight, + lineHeight: 1.5, + textTransform: "uppercase", + }, + caption: { + fontFamily: baseProperties$1.fontFamily, + fontSize: baseProperties$1.fontSizeXS, + fontWeight: baseProperties$1.fontWeightLight, + lineHeight: 1.25, + }, + overline: { + fontFamily: baseProperties$1.fontFamily, + }, + d1: { + fontSize: pxToRem$1(80), + ...baseDisplayProperties$1, + }, + d2: { + fontSize: pxToRem$1(72), + ...baseDisplayProperties$1, + }, + d3: { + fontSize: pxToRem$1(64), + ...baseDisplayProperties$1, + }, + d4: { + fontSize: pxToRem$1(56), + ...baseDisplayProperties$1, + }, + d5: { + fontSize: pxToRem$1(48), + ...baseDisplayProperties$1, + }, + d6: { + fontSize: pxToRem$1(40), + ...baseDisplayProperties$1, + }, + size: { + xxs: baseProperties$1.fontSizeXXS, + xs: baseProperties$1.fontSizeXS, + sm: baseProperties$1.fontSizeSM, + md: baseProperties$1.fontSizeMD, + lg: baseProperties$1.fontSizeLG, + xl: baseProperties$1.fontSizeXL, + "2xl": baseProperties$1.fontSize2XL, + "3xl": baseProperties$1.fontSize3XL, + }, + lineHeight: { + sm: 1.25, + md: 1.5, + lg: 2, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function hexToRgb$1(color) { + return chroma(color).rgb().join(", "); +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function rgba$1(color, opacity) { + return `rgba(${hexToRgb$1(color)}, ${opacity})`; +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function boxShadow$1(offset, radius, color, opacity, inset = "") { + const [x, y] = offset; + const [blur, spread] = radius; + return `${inset} ${pxToRem$1(x)} ${pxToRem$1(y)} ${pxToRem$1(blur)} ${pxToRem$1(spread)} ${rgba$1(color, opacity)}`; +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { black: black$7, white: white$x, tabs: tabs$3, coloredShadows: coloredShadows$1 } = colors$1; +const boxShadows$1 = { + xs: boxShadow$1([0, 2], [9, -5], black$7.main, 0.15), + sm: boxShadow$1([0, 5], [10, 0], black$7.main, 0.12), + md: `${boxShadow$1([0, 4], [6, -1], black$7.main, 0.1)}, ${boxShadow$1([0, 2], [4, -1], black$7.main, 0.06)}`, + lg: `${boxShadow$1([0, 10], [15, -3], black$7.main, 0.1)}, ${boxShadow$1([0, 4], [6, -2], black$7.main, 0.05)}`, + xl: `${boxShadow$1([0, 20], [25, -5], black$7.main, 0.1)}, ${boxShadow$1([0, 10], [10, -5], black$7.main, 0.04)}`, + xxl: boxShadow$1([0, 20], [27, 0], black$7.main, 0.05), + inset: boxShadow$1([0, 1], [2, 0], black$7.main, 0.075, "inset"), + colored: { + primary: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.primary, 0.4)}`, + secondary: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.secondary, 0.4)}`, + info: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.info, 0.4)}`, + success: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.success, 0.4)}`, + warning: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.warning, 0.4)}`, + error: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.error, 0.4)}`, + light: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.light, 0.4)}`, + dark: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.dark, 0.4)}`, + }, + navbarBoxShadow: `${boxShadow$1([0, 0], [1, 1], white$x.main, 0.9, "inset")}, ${boxShadow$1([0, 20], [27, 0], black$7.main, 0.05)}`, + sliderBoxShadow: { + thumb: boxShadow$1([0, 1], [13, 0], black$7.main, 0.2), + }, + tabsBoxShadow: { + indicator: boxShadow$1([0, 1], [5, 1], tabs$3.indicator.boxShadow, 1), + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { grey: grey$a } = colors$1; +const borders$1 = { + borderColor: grey$a[300], + borderWidth: { + 0: 0, + 1: pxToRem$1(1), + 2: pxToRem$1(2), + 3: pxToRem$1(3), + 4: pxToRem$1(4), + 5: pxToRem$1(5), + }, + borderRadius: { + xs: pxToRem$1(1.6), + sm: pxToRem$1(2), + md: pxToRem$1(6), + lg: pxToRem$1(8), + xl: pxToRem$1(12), + xxl: pxToRem$1(16), + section: pxToRem$1(160), + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { info: info$l, dark: dark$d } = colors$1; +const globals$1 = { + html: { + scrollBehavior: "smooth", + }, + "*, *::before, *::after": { + margin: 0, + padding: 0, + }, + "a, a:link, a:visited": { + textDecoration: "none !important", + }, + "a.link, .link, a.link:link, .link:link, a.link:visited, .link:visited": { + color: `${dark$d.main} !important`, + transition: "color 150ms ease-in !important", + }, + "a.link:hover, .link:hover, a.link:focus, .link:focus": { + color: `${info$l.main} !important`, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +/** + The linearGradient() function helps you to create a linear gradient color background + */ +function linearGradient$1(color, colorState, angle = 195) { + return `linear-gradient(${angle}deg, ${color}, ${colorState})`; +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$w } = colors$1; +const { borderRadius: borderRadius$B } = borders$1; +const sidenav$1 = { + styleOverrides: { + root: { + width: pxToRem$1(250), + whiteSpace: "nowrap", + border: "none", + }, + paper: { + width: pxToRem$1(250), + backgroundColor: white$w.main, + height: `calc(100vh - ${pxToRem$1(32)})`, + margin: pxToRem$1(16), + borderRadius: borderRadius$B.xl, + border: "none", + }, + paperAnchorDockedLeft: { + borderRight: "none", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const list$1 = { + styleOverrides: { + padding: { + paddingTop: 0, + paddingBottom: 0, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const listItem$1 = { + defaultProps: { + disableGutters: true, + }, + styleOverrides: { + root: { + paddingTop: 0, + paddingBottom: 0, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const listItemText$1 = { + styleOverrides: { + root: { + marginTop: 0, + marginBottom: 0, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { black: black$6, white: white$v } = colors$1; +const { borderWidth: borderWidth$h, borderRadius: borderRadius$A } = borders$1; +const { md: md$a } = boxShadows$1; +const card$1 = { + styleOverrides: { + root: { + display: "flex", + flexDirection: "column", + position: "relative", + minWidth: 0, + wordWrap: "break-word", + backgroundColor: white$v.main, + backgroundClip: "border-box", + border: `${borderWidth$h[0]} solid ${rgba$1(black$6.main, 0.125)}`, + borderRadius: borderRadius$A.xl, + boxShadow: md$a, + overflow: "visible", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderRadius: borderRadius$z } = borders$1; +const cardMedia$1 = { + styleOverrides: { + root: { + borderRadius: borderRadius$z.xl, + margin: `${pxToRem$1(16)} ${pxToRem$1(16)} 0`, + }, + media: { + width: "auto", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const cardContent$1 = { + styleOverrides: { + root: { + marginTop: 0, + marginBottom: 0, + padding: `${pxToRem$1(8)} ${pxToRem$1(24)} ${pxToRem$1(24)}`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { fontWeightBold: fontWeightBold$3, size: size$z } = typography$1; +const { borderRadius: borderRadius$y } = borders$1; +const root$1 = { + display: "inline-flex", + justifyContent: "center", + alignItems: "center", + fontSize: size$z.xs, + fontWeight: fontWeightBold$3, + borderRadius: borderRadius$y.lg, + padding: `${pxToRem$1(6.302)} ${pxToRem$1(16.604)}`, + lineHeight: 1.4, + textAlign: "center", + textTransform: "uppercase", + userSelect: "none", + backgroundSize: "150% !important", + backgroundPositionX: "25% !important", + transition: "all 150ms ease-in", + "&:disabled": { + pointerEvent: "none", + opacity: 0.65, + }, + "& .material-icons": { + fontSize: pxToRem$1(15), + marginTop: pxToRem$1(-2), + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$u, text: text$e, info: info$k, secondary: secondary$5 } = colors$1; +const { size: size$y } = typography$1; +const contained$1 = { + base: { + backgroundColor: white$u.main, + minHeight: pxToRem$1(40), + color: text$e.main, + padding: `${pxToRem$1(10)} ${pxToRem$1(24)}`, + "&:hover": { + backgroundColor: white$u.main, + }, + "&:active, &:active:focus, &:active:hover": { + opacity: 0.85, + }, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem$1(16)} !important`, + }, + }, + small: { + minHeight: pxToRem$1(32), + padding: `${pxToRem$1(6)} ${pxToRem$1(16)}`, + fontSize: size$y.xs, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem$1(12)} !important`, + }, + }, + large: { + minHeight: pxToRem$1(47), + padding: `${pxToRem$1(12)} ${pxToRem$1(28)}`, + fontSize: size$y.sm, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem$1(22)} !important`, + }, + }, + primary: { + backgroundColor: info$k.main, + "&:hover": { + backgroundColor: info$k.main, + }, + "&:focus:not(:hover)": { + backgroundColor: info$k.focus, + }, + }, + secondary: { + backgroundColor: secondary$5.main, + "&:hover": { + backgroundColor: secondary$5.main, + }, + "&:focus:not(:hover)": { + backgroundColor: secondary$5.focus, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent: transparent$p, light: light$9, info: info$j, secondary: secondary$4 } = colors$1; +const { size: size$x } = typography$1; +const outlined$1 = { + base: { + minHeight: pxToRem$1(40), + color: light$9.main, + borderColor: light$9.main, + padding: `${pxToRem$1(10)} ${pxToRem$1(24)}`, + "&:hover": { + opacity: 0.75, + backgroundColor: transparent$p.main, + }, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem$1(16)} !important`, + }, + }, + small: { + minHeight: pxToRem$1(32), + padding: `${pxToRem$1(6)} ${pxToRem$1(16)}`, + fontSize: size$x.xs, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem$1(12)} !important`, + }, + }, + large: { + minHeight: pxToRem$1(47), + padding: `${pxToRem$1(12)} ${pxToRem$1(28)}`, + fontSize: size$x.sm, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem$1(22)} !important`, + }, + }, + primary: { + backgroundColor: transparent$p.main, + borderColor: info$j.main, + "&:hover": { + backgroundColor: transparent$p.main, + }, + }, + secondary: { + backgroundColor: transparent$p.main, + borderColor: secondary$4.main, + "&:hover": { + backgroundColor: transparent$p.main, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { text: text$d, info: info$i, secondary: secondary$3, transparent: transparent$o } = colors$1; +const { size: size$w } = typography$1; +const buttonText$1 = { + base: { + backgroundColor: transparent$o.main, + minHeight: pxToRem$1(40), + color: text$d.main, + boxShadow: "none", + padding: `${pxToRem$1(10)} ${pxToRem$1(24)}`, + "&:hover": { + backgroundColor: transparent$o.main, + boxShadow: "none", + }, + "&:focus": { + boxShadow: "none", + }, + "&:active, &:active:focus, &:active:hover": { + opacity: 0.85, + boxShadow: "none", + }, + "&:disabled": { + boxShadow: "none", + }, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem$1(16)} !important`, + }, + }, + small: { + minHeight: pxToRem$1(32), + padding: `${pxToRem$1(6)} ${pxToRem$1(16)}`, + fontSize: size$w.xs, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem$1(12)} !important`, + }, + }, + large: { + minHeight: pxToRem$1(47), + padding: `${pxToRem$1(12)} ${pxToRem$1(28)}`, + fontSize: size$w.sm, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem$1(22)} !important`, + }, + }, + primary: { + color: info$i.main, + "&:hover": { + color: info$i.main, + }, + "&:focus:not(:hover)": { + color: info$i.focus, + boxShadow: "none", + }, + }, + secondary: { + color: secondary$3.main, + "&:hover": { + color: secondary$3.main, + }, + "&:focus:not(:hover)": { + color: secondary$3.focus, + boxShadow: "none", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const button$1 = { + defaultProps: { + disableRipple: false, + }, + styleOverrides: { + root: { ...root$1 }, + contained: { ...contained$1.base }, + containedSizeSmall: { ...contained$1.small }, + containedSizeLarge: { ...contained$1.large }, + containedPrimary: { ...contained$1.primary }, + containedSecondary: { ...contained$1.secondary }, + outlined: { ...outlined$1.base }, + outlinedSizeSmall: { ...outlined$1.small }, + outlinedSizeLarge: { ...outlined$1.large }, + outlinedPrimary: { ...outlined$1.primary }, + outlinedSecondary: { ...outlined$1.secondary }, + text: { ...buttonText$1.base }, + textSizeSmall: { ...buttonText$1.small }, + textSizeLarge: { ...buttonText$1.large }, + textPrimary: { ...buttonText$1.primary }, + textSecondary: { ...buttonText$1.secondary }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent: transparent$n } = colors$1; +const iconButton$1 = { + styleOverrides: { + root: { + "&:hover": { + backgroundColor: transparent$n.main, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { info: info$h, inputBorderColor: inputBorderColor$3, dark: dark$c } = colors$1; +const { size: size$v } = typography$1; +const { borderWidth: borderWidth$g } = borders$1; +const input$1 = { + styleOverrides: { + root: { + fontSize: size$v.sm, + color: dark$c.main, + "&:hover:not(.Mui-disabled):before": { + borderBottom: `${borderWidth$g[1]} solid ${inputBorderColor$3}`, + }, + "&:before": { + borderColor: inputBorderColor$3, + }, + "&:after": { + borderColor: info$h.main, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { text: text$c, info: info$g } = colors$1; +const { size: size$u } = typography$1; +const inputLabel$1 = { + styleOverrides: { + root: { + fontSize: size$u.sm, + color: text$c.main, + lineHeight: 0.9, + "&.Mui-focused": { + color: info$g.main, + }, + "&.MuiInputLabel-shrink": { + lineHeight: 1.5, + fontSize: size$u.md, + "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { + fontSize: "0.85em", + }, + }, + }, + sizeSmall: { + fontSize: size$u.xs, + lineHeight: 1.625, + "&.MuiInputLabel-shrink": { + lineHeight: 1.6, + fontSize: size$u.sm, + "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { + fontSize: "0.72em", + }, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { inputBorderColor: inputBorderColor$2, info: info$f, grey: grey$9, transparent: transparent$m } = colors$1; +const { borderRadius: borderRadius$x } = borders$1; +const { size: size$t } = typography$1; +const inputOutlined$1 = { + styleOverrides: { + root: { + backgroundColor: transparent$m.main, + fontSize: size$t.sm, + borderRadius: borderRadius$x.md, + "&:hover .MuiOutlinedInput-notchedOutline": { + borderColor: inputBorderColor$2, + }, + "&.Mui-focused": { + "& .MuiOutlinedInput-notchedOutline": { + borderColor: info$f.main, + }, + }, + }, + notchedOutline: { + borderColor: inputBorderColor$2, + }, + input: { + color: grey$9[700], + padding: pxToRem$1(12), + backgroundColor: transparent$m.main, + }, + inputSizeSmall: { + fontSize: size$t.xs, + padding: pxToRem$1(10), + }, + multiline: { + color: grey$9[700], + padding: 0, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent: transparent$l } = colors$1; +const textField$1 = { + styleOverrides: { + root: { + backgroundColor: transparent$l.main, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { lg: lg$5 } = boxShadows$1; +const { size: size$s } = typography$1; +const { text: text$b, white: white$t } = colors$1; +const { borderRadius: borderRadius$w } = borders$1; +const menu$1 = { + defaultProps: { + disableAutoFocusItem: true, + }, + styleOverrides: { + paper: { + minWidth: pxToRem$1(160), + boxShadow: lg$5, + padding: `${pxToRem$1(16)} ${pxToRem$1(8)}`, + fontSize: size$s.sm, + color: text$b.main, + textAlign: "left", + backgroundColor: `${white$t.main} !important`, + borderRadius: borderRadius$w.md, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { light: light$8, text: text$a, dark: dark$b } = colors$1; +const { borderRadius: borderRadius$v } = borders$1; +const { size: size$r } = typography$1; +const menuItem$2 = { + styleOverrides: { + root: { + minWidth: pxToRem$1(160), + minHeight: "unset", + padding: `${pxToRem$1(4.8)} ${pxToRem$1(16)}`, + borderRadius: borderRadius$v.md, + fontSize: size$r.sm, + color: text$a.main, + transition: "background-color 300ms ease, color 300ms ease", + "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { + backgroundColor: light$8.main, + color: dark$b.main, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$s, gradients: gradients$8, grey: grey$8, transparent: transparent$k } = colors$1; +const { borderWidth: borderWidth$f } = borders$1; +const { md: md$9 } = boxShadows$1; +const switchButton$1 = { + defaultProps: { + disableRipple: false, + }, + styleOverrides: { + switchBase: { + color: gradients$8.dark.main, + "&:hover": { + backgroundColor: transparent$k.main, + }, + "&.Mui-checked": { + color: gradients$8.dark.main, + "&:hover": { + backgroundColor: transparent$k.main, + }, + "& .MuiSwitch-thumb": { + borderColor: `${gradients$8.dark.main} !important`, + }, + "& + .MuiSwitch-track": { + backgroundColor: `${gradients$8.dark.main} !important`, + borderColor: `${gradients$8.dark.main} !important`, + opacity: 1, + }, + }, + "&.Mui-disabled + .MuiSwitch-track": { + opacity: "0.3 !important", + }, + "&.Mui-focusVisible .MuiSwitch-thumb": { + backgroundImage: linearGradient$1(gradients$8.info.main, gradients$8.info.state), + }, + }, + thumb: { + backgroundColor: white$s.main, + boxShadow: md$9, + border: `${borderWidth$f[1]} solid ${grey$8[400]}`, + }, + track: { + width: pxToRem$1(32), + height: pxToRem$1(15), + backgroundColor: grey$8[400], + border: `${borderWidth$f[1]} solid ${grey$8[400]}`, + opacity: 1, + }, + checked: {}, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { dark: dark$a, transparent: transparent$j, white: white$r } = colors$1; +const divider$1 = { + styleOverrides: { + root: { + backgroundColor: transparent$j.main, + backgroundImage: `linear-gradient(to right, ${rgba$1(dark$a.main, 0)}, ${rgba$1(dark$a.main, 0.4)}, ${rgba$1(dark$a.main, 0)}) !important`, + height: pxToRem$1(1), + margin: `${pxToRem$1(16)} 0`, + borderBottom: "none", + opacity: 0.25, + }, + vertical: { + backgroundColor: transparent$j.main, + backgroundImage: `linear-gradient(to bottom, ${rgba$1(dark$a.main, 0)}, ${rgba$1(dark$a.main, 0.4)}, ${rgba$1(dark$a.main, 0)}) !important`, + width: pxToRem$1(1), + height: "100%", + margin: `0 ${pxToRem$1(16)}`, + borderRight: "none", + }, + light: { + backgroundColor: transparent$j.main, + backgroundImage: `linear-gradient(to right, ${rgba$1(white$r.main, 0)}, ${white$r.main}, ${rgba$1(white$r.main, 0)}) !important`, + "&.MuiDivider-vertical": { + backgroundImage: `linear-gradient(to bottom, ${rgba$1(white$r.main, 0)}, ${white$r.main}, ${rgba$1(white$r.main, 0)}) !important`, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$q } = colors$1; +const { md: md$8 } = boxShadows$1; +const { borderRadius: borderRadius$u } = borders$1; +const tableContainer$1 = { + styleOverrides: { + root: { + backgroundColor: white$q.main, + boxShadow: md$8, + borderRadius: borderRadius$u.xl, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderRadius: borderRadius$t } = borders$1; +const tableHead$1 = { + styleOverrides: { + root: { + display: "block", + padding: `${pxToRem$1(16)} ${pxToRem$1(16)} 0 ${pxToRem$1(16)}`, + borderRadius: `${borderRadius$t.xl} ${borderRadius$t.xl} 0 0`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderWidth: borderWidth$e } = borders$1; +const { light: light$7 } = colors$1; +const tableCell$1 = { + styleOverrides: { + root: { + padding: `${pxToRem$1(12)} ${pxToRem$1(16)}`, + borderBottom: `${borderWidth$e[1]} solid ${light$7.main}`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderRadius: borderRadius$s } = borders$1; +const { light: light$6 } = colors$1; +const linearProgress$1 = { + styleOverrides: { + root: { + height: pxToRem$1(6), + borderRadius: borderRadius$s.md, + overflow: "visible", + position: "relative", + }, + colorPrimary: { + backgroundColor: light$6.main, + }, + colorSecondary: { + backgroundColor: light$6.main, + }, + bar: { + height: pxToRem$1(6), + borderRadius: borderRadius$s.sm, + position: "absolute", + transform: `translate(0, 0) !important`, + transition: "width 0.6s ease !important", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { grey: grey$7 } = colors$1; +const { size: size$q } = typography$1; +const breadcrumbs$1 = { + styleOverrides: { + li: { + lineHeight: 0, + }, + separator: { + fontSize: size$q.sm, + color: grey$7[600], + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { grey: grey$6, white: white$p, black: black$5, info: info$e } = colors$1; +const { borderRadius: borderRadius$r, borderWidth: borderWidth$d } = borders$1; +const { sliderBoxShadow: sliderBoxShadow$1 } = boxShadows$1; +const slider$1 = { + styleOverrides: { + root: { + width: "100%", + "& .MuiSlider-active, & .Mui-focusVisible": { + boxShadow: "none !important", + }, + "& .MuiSlider-valueLabel": { + color: black$5.main, + }, + }, + rail: { + height: pxToRem$1(2), + background: grey$6[200], + borderRadius: borderRadius$r.sm, + opacity: 1, + }, + track: { + background: info$e.main, + height: pxToRem$1(2), + position: "relative", + border: "none", + borderRadius: borderRadius$r.lg, + zIndex: 1, + }, + thumb: { + width: pxToRem$1(14), + height: pxToRem$1(14), + backgroundColor: white$p.main, + zIndex: 10, + boxShadow: sliderBoxShadow$1.thumb, + border: `${borderWidth$d[1]} solid ${info$e.main}`, + transition: "all 200ms linear", + "&:hover": { + boxShadow: "none", + }, + "&:active": { + transform: "translate(-50%, -50%) scale(1.4)", + }, + "&.Mui-active": { boxShadow: boxShadow$1([0, 0], [0, 14], info$e.main, 0.16) }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderRadius: borderRadius$q } = borders$1; +const avatar$1 = { + styleOverrides: { + root: { + transition: "all 200ms ease-in-out", + }, + rounded: { + borderRadius: borderRadius$q.lg, + }, + img: { + height: "auto", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { black: black$4, light: light$5 } = colors$1; +const { size: size$p, fontWeightRegular: fontWeightRegular$5 } = typography$1; +const { borderRadius: borderRadius$p } = borders$1; +const tooltip$1 = { + defaultProps: { + arrow: true, + TransitionComponent: Fade, + }, + styleOverrides: { + tooltip: { + maxWidth: pxToRem$1(200), + backgroundColor: black$4.main, + color: light$5.main, + fontSize: size$p.sm, + fontWeight: fontWeightRegular$5, + textAlign: "center", + borderRadius: borderRadius$p.md, + opacity: 0.7, + padding: `${pxToRem$1(5)} ${pxToRem$1(8)} ${pxToRem$1(4)}`, + }, + arrow: { + color: black$4.main, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const appBar$1 = { + defaultProps: { + color: "transparent", + }, + styleOverrides: { + root: { + boxShadow: "none", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { grey: grey$5, white: white$o } = colors$1; +const { borderRadius: borderRadius$o } = borders$1; +const { tabsBoxShadow } = boxShadows$1; +const tabs$2 = { + styleOverrides: { + root: { + position: "relative", + backgroundColor: grey$5[100], + borderRadius: borderRadius$o.xl, + minHeight: "unset", + padding: pxToRem$1(4), + }, + flexContainer: { + height: "100%", + position: "relative", + zIndex: 10, + }, + fixed: { + overflow: "unset !important", + overflowX: "unset !important", + }, + vertical: { + "& .MuiTabs-indicator": { + width: "100%", + }, + }, + indicator: { + height: "100%", + borderRadius: borderRadius$o.lg, + backgroundColor: white$o.main, + boxShadow: tabsBoxShadow.indicator, + transition: "all 500ms ease", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { size: size$o, fontWeightRegular: fontWeightRegular$4 } = typography$1; +const { borderRadius: borderRadius$n } = borders$1; +const { dark: dark$9 } = colors$1; +const tab$1 = { + styleOverrides: { + root: { + display: "flex", + alignItems: "center", + flexDirection: "row", + flex: "1 1 auto", + textAlign: "center", + maxWidth: "unset !important", + minWidth: "unset !important", + minHeight: "unset !important", + fontSize: size$o.md, + fontWeight: fontWeightRegular$4, + textTransform: "none", + lineHeight: "inherit", + padding: pxToRem$1(4), + borderRadius: borderRadius$n.lg, + color: `${dark$9.main} !important`, + opacity: "1 !important", + "& .material-icons, .material-icons-round": { + marginBottom: "0 !important", + marginRight: pxToRem$1(6), + }, + "& svg": { + marginBottom: "0 !important", + marginRight: pxToRem$1(6), + }, + }, + labelIcon: { + paddingTop: pxToRem$1(4), + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent: transparent$i, gradients: gradients$7 } = colors$1; +const { borderRadius: borderRadius$m } = borders$1; +const { colored: colored$1 } = boxShadows$1; +const stepper$1 = { + styleOverrides: { + root: { + background: linearGradient$1(gradients$7.info.main, gradients$7.info.state), + padding: `${pxToRem$1(24)} 0 ${pxToRem$1(16)}`, + borderRadius: borderRadius$m.lg, + boxShadow: colored$1.info, + "&.MuiPaper-root": { + backgroundColor: transparent$i.main, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const step$1 = { + styleOverrides: { + root: { + padding: `0 ${pxToRem$1(6)}`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$n } = colors$1; +const { borderWidth: borderWidth$c } = borders$1; +const stepConnector$1 = { + styleOverrides: { + root: { + color: "#9fc9ff", + transition: "all 200ms linear", + "&.Mui-active": { + color: white$n.main, + }, + "&.Mui-completed": { + color: white$n.main, + }, + }, + alternativeLabel: { + top: "14%", + left: "-50%", + right: "50%", + }, + line: { + borderWidth: `${borderWidth$c[2]} !important`, + borderColor: "currentColor", + opacity: 0.5, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { size: size$n, fontWeightRegular: fontWeightRegular$3 } = typography$1; +const { white: white$m } = colors$1; +const stepLabel$1 = { + styleOverrides: { + label: { + marginTop: `${pxToRem$1(8)} !important`, + fontWeight: fontWeightRegular$3, + fontSize: size$n.xs, + color: "#9fc9ff", + textTransform: "uppercase", + "&.Mui-active": { + fontWeight: `${fontWeightRegular$3} !important`, + color: `${rgba$1(white$m.main, 0.8)} !important`, + }, + "&.Mui-completed": { + fontWeight: `${fontWeightRegular$3} !important`, + color: `${rgba$1(white$m.main, 0.8)} !important`, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$l } = colors$1; +const stepIcon$1 = { + styleOverrides: { + root: { + background: "#9fc9ff", + fill: "#9fc9ff", + stroke: "#9fc9ff", + strokeWidth: pxToRem$1(10), + width: pxToRem$1(13), + height: pxToRem$1(13), + borderRadius: "50%", + zIndex: 99, + transition: "all 200ms linear", + "&.Mui-active": { + background: white$l.main, + fill: white$l.main, + stroke: white$l.main, + borderColor: white$l.main, + boxShadow: boxShadow$1([0, 0], [0, 2], white$l.main, 1), + }, + "&.Mui-completed": { + background: white$l.main, + fill: white$l.main, + stroke: white$l.main, + borderColor: white$l.main, + boxShadow: boxShadow$1([0, 0], [0, 2], white$l.main, 1), + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent: transparent$h } = colors$1; +const select$1 = { + styleOverrides: { + select: { + display: "grid", + alignItems: "center", + padding: `0 ${pxToRem$1(12)} !important`, + "& .Mui-selected": { + backgroundColor: transparent$h.main, + }, + }, + selectMenu: { + background: "none", + height: "none", + minHeight: "none", + overflow: "unset", + }, + icon: { + display: "none", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { dark: dark$8 } = colors$1; +const { size: size$m, fontWeightBold: fontWeightBold$2 } = typography$1; +const formControlLabel$1 = { + styleOverrides: { + root: { + display: "block", + minHeight: pxToRem$1(24), + marginBottom: pxToRem$1(2), + }, + label: { + display: "inline-block", + fontSize: size$m.sm, + fontWeight: fontWeightBold$2, + color: dark$8.main, + lineHeight: 1, + transform: `translateY(${pxToRem$1(1)})`, + marginLeft: pxToRem$1(4), + "&.Mui-disabled": { + color: dark$8.main, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { text: text$9 } = colors$1; +const formLabel$1 = { + styleOverrides: { + root: { + color: text$9.main, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderWidth: borderWidth$b, borderColor: borderColor$5 } = borders$1; +const { transparent: transparent$g, info: info$d } = colors$1; +const checkbox$1 = { + styleOverrides: { + root: { + "& .MuiSvgIcon-root": { + backgroundPosition: "center", + backgroundSize: "contain", + backgroundRepeat: "no-repeat", + width: pxToRem$1(20), + height: pxToRem$1(20), + color: transparent$g.main, + border: `${borderWidth$b[1]} solid ${borderColor$5}`, + borderRadius: pxToRem$1(5.6), + }, + "&:hover": { + backgroundColor: transparent$g.main, + }, + "&.Mui-focusVisible": { + border: `${borderWidth$b[2]} solid ${info$d.main} !important`, + }, + }, + colorPrimary: { + color: borderColor$5, + "&.Mui-checked": { + color: info$d.main, + "& .MuiSvgIcon-root": { + backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient$1(info$d.main, info$d.main)}`, + borderColor: info$d.main, + }, + }, + }, + colorSecondary: { + color: borderColor$5, + "& .MuiSvgIcon-root": { + color: info$d.main, + "&.Mui-checked": { + backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient$1(info$d.main, info$d.main)}`, + borderColor: info$d.main, + }, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderWidth: borderWidth$a, borderColor: borderColor$4 } = borders$1; +const { transparent: transparent$f, info: info$c } = colors$1; +const radio$1 = { + styleOverrides: { + root: { + "& .MuiSvgIcon-root": { + width: pxToRem$1(20), + height: pxToRem$1(20), + color: transparent$f.main, + border: `${borderWidth$a[1]} solid ${borderColor$4}`, + borderRadius: "50%", + }, + "&:after": { + transition: "opacity 250ms ease-in-out", + content: `""`, + position: "absolute", + width: pxToRem$1(14), + height: pxToRem$1(14), + borderRadius: "50%", + backgroundImage: linearGradient$1(info$c.main, info$c.main), + opacity: 0, + left: 0, + right: 0, + top: 0, + bottom: 0, + margin: "auto", + }, + "&:hover": { + backgroundColor: transparent$f.main, + }, + "&.Mui-focusVisible": { + border: `${borderWidth$a[2]} solid ${info$c.main} !important`, + }, + }, + colorPrimary: { + color: borderColor$4, + "&.Mui-checked": { + color: info$c.main, + "& .MuiSvgIcon-root": { + borderColor: info$c.main, + }, + "&:after": { + opacity: 1, + }, + }, + }, + colorSecondary: { + color: borderColor$4, + "&.Mui-checked": { + color: info$c.main, + "& .MuiSvgIcon-root": { + borderColor: info$c.main, + }, + "&:after": { + opacity: 1, + }, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { lg: lg$4 } = boxShadows$1; +const { size: size$l } = typography$1; +const { text: text$8, white: white$k, transparent: transparent$e, light: light$4, dark: dark$7, gradients: gradients$6 } = colors$1; +const { borderRadius: borderRadius$l } = borders$1; +const autocomplete = { + styleOverrides: { + popper: { + boxShadow: lg$4, + padding: pxToRem$1(8), + fontSize: size$l.sm, + color: text$8.main, + textAlign: "left", + backgroundColor: `${white$k.main} !important`, + borderRadius: borderRadius$l.md, + }, + paper: { + boxShadow: "none", + backgroundColor: transparent$e.main, + }, + option: { + padding: `${pxToRem$1(4.8)} ${pxToRem$1(16)}`, + borderRadius: borderRadius$l.md, + fontSize: size$l.sm, + color: text$8.main, + transition: "background-color 300ms ease, color 300ms ease", + "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { + backgroundColor: light$4.main, + color: dark$7.main, + }, + '&[aria-selected="true"]': { + backgroundColor: `${light$4.main} !important`, + color: `${dark$7.main} !important`, + }, + }, + noOptions: { + fontSize: size$l.sm, + color: text$8.main, + }, + groupLabel: { + color: dark$7.main, + }, + loading: { + fontSize: size$l.sm, + color: text$8.main, + }, + tag: { + display: "flex", + alignItems: "center", + height: "auto", + padding: pxToRem$1(4), + backgroundColor: gradients$6.dark.state, + color: white$k.main, + "& .MuiChip-label": { + lineHeight: 1.2, + padding: `0 ${pxToRem$1(10)} 0 ${pxToRem$1(4)}`, + }, + "& .MuiSvgIcon-root, & .MuiSvgIcon-root:hover, & .MuiSvgIcon-root:focus": { + color: white$k.main, + marginRight: 0, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { info: info$b, white: white$j, gradients: gradients$5 } = colors$1; +const flatpickr$1 = { + ".flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.nextMonthDay:hover, .flatpickr-day.nextMonthDay:focus": { + background: rgba$1(info$b.main, 0.28), + border: "none", + }, + ".flatpickr-day.today": { + background: info$b.main, + color: white$j.main, + border: "none", + "&:hover, &:focus": { + background: `${info$b.focus} !important`, + }, + }, + ".flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.nextMonthDay.selected, .flatpickr-day.nextMonthDay.selected:hover, .flatpickr-day.nextMonthDay.selected:focus": { + background: `${gradients$5.info.state} !important`, + color: white$j.main, + border: "none", + }, + ".flatpickr-months .flatpickr-next-month:hover svg, .flatpickr-months .flatpickr-prev-month:hover svg": { + color: `${info$b.main} !important`, + fill: `${info$b.main} !important`, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { values: { sm: sm$1, md: md$7, lg: lg$3, xl: xl$1, xxl: xxl$3 }, } = breakpoints$1; +const SM$1 = `@media (min-width: ${sm$1}px)`; +const MD$1 = `@media (min-width: ${md$7}px)`; +const LG$1 = `@media (min-width: ${lg$3}px)`; +const XL$1 = `@media (min-width: ${xl$1}px)`; +const XXL$1 = `@media (min-width: ${xxl$3}px)`; +const sharedClasses$1 = { + paddingRight: `${pxToRem$1(24)} !important`, + paddingLeft: `${pxToRem$1(24)} !important`, + marginRight: "auto !important", + marginLeft: "auto !important", + width: "100% !important", + position: "relative", +}; +const container$1 = { + [SM$1]: { + ".MuiContainer-root": { + ...sharedClasses$1, + maxWidth: "540px !important", + }, + }, + [MD$1]: { + ".MuiContainer-root": { + ...sharedClasses$1, + maxWidth: "720px !important", + }, + }, + [LG$1]: { + ".MuiContainer-root": { + ...sharedClasses$1, + maxWidth: "960px !important", + }, + }, + [XL$1]: { + ".MuiContainer-root": { + ...sharedClasses$1, + maxWidth: "1140px !important", + }, + }, + [XXL$1]: { + ".MuiContainer-root": { + ...sharedClasses$1, + maxWidth: "1320px !important", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent: transparent$d } = colors$1; +const { lg: lg$2 } = boxShadows$1; +const { borderRadius: borderRadius$k } = borders$1; +const popover$1 = { + styleOverrides: { + paper: { + backgroundColor: transparent$d.main, + boxShadow: lg$2, + padding: pxToRem$1(8), + borderRadius: borderRadius$k.md, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const buttonBase$1 = { + defaultProps: { + disableRipple: false, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const icon$1 = { + defaultProps: { + baseClassName: "material-icons-round", + fontSize: "inherit", + }, + styleOverrides: { + fontSizeInherit: { + fontSize: "inherit !important", + }, + fontSizeSmall: { + fontSize: `${pxToRem$1(20)} !important`, + }, + fontSizeLarge: { + fontSize: `${pxToRem$1(36)} !important`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const svgIcon$1 = { + defaultProps: { + fontSize: "inherit", + }, + styleOverrides: { + fontSizeInherit: { + fontSize: "inherit !important", + }, + fontSizeSmall: { + fontSize: `${pxToRem$1(20)} !important`, + }, + fontSizeLarge: { + fontSize: `${pxToRem$1(36)} !important`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const link$1 = { + defaultProps: { + underline: "none", + color: "inherit", + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderRadius: borderRadius$j } = borders$1; +const { xxl: xxl$2 } = boxShadows$1; +const dialog$1 = { + styleOverrides: { + paper: { + borderRadius: borderRadius$j.lg, + boxShadow: xxl$2, + }, + paperFullScreen: { + borderRadius: 0, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { size: size$k } = typography$1; +const dialogTitle$1 = { + styleOverrides: { + root: { + padding: pxToRem$1(16), + fontSize: size$k.xl, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { size: size$j } = typography$1; +const { text: text$7 } = colors$1; +const { borderWidth: borderWidth$9, borderColor: borderColor$3 } = borders$1; +const dialogContent$1 = { + styleOverrides: { + root: { + padding: pxToRem$1(16), + fontSize: size$j.md, + color: text$7.main, + }, + dividers: { + borderTop: `${borderWidth$9[1]} solid ${borderColor$3}`, + borderBottom: `${borderWidth$9[1]} solid ${borderColor$3}`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { size: size$i } = typography$1; +const { text: text$6 } = colors$1; +const dialogContentText$1 = { + styleOverrides: { + root: { + fontSize: size$i.md, + color: text$6.main, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const dialogActions$1 = { + styleOverrides: { + root: { + padding: pxToRem$1(16), + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React - v2.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-material-ui +* Copyright 2021 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +var theme = createTheme({ + breakpoints: { ...breakpoints$1 }, + palette: { ...colors$1 }, + typography: { ...typography$1 }, + boxShadows: { ...boxShadows$1 }, + borders: { ...borders$1 }, + functions: { + boxShadow: boxShadow$1, + hexToRgb: hexToRgb$1, + linearGradient: linearGradient$1, + pxToRem: pxToRem$1, + rgba: rgba$1, + }, + components: { + MuiCssBaseline: { + styleOverrides: { + ...globals$1, + ...flatpickr$1, + ...container$1, + }, + }, + MuiDrawer: { ...sidenav$1 }, + MuiList: { ...list$1 }, + MuiListItem: { ...listItem$1 }, + MuiListItemText: { ...listItemText$1 }, + MuiCard: { ...card$1 }, + MuiCardMedia: { ...cardMedia$1 }, + MuiCardContent: { ...cardContent$1 }, + MuiButton: { ...button$1 }, + MuiIconButton: { ...iconButton$1 }, + MuiInput: { ...input$1 }, + MuiInputLabel: { ...inputLabel$1 }, + MuiOutlinedInput: { ...inputOutlined$1 }, + MuiTextField: { ...textField$1 }, + MuiMenu: { ...menu$1 }, + MuiMenuItem: { ...menuItem$2 }, + MuiSwitch: { ...switchButton$1 }, + MuiDivider: { ...divider$1 }, + MuiTableContainer: { ...tableContainer$1 }, + MuiTableHead: { ...tableHead$1 }, + MuiTableCell: { ...tableCell$1 }, + MuiLinearProgress: { ...linearProgress$1 }, + MuiBreadcrumbs: { ...breadcrumbs$1 }, + MuiSlider: { ...slider$1 }, + MuiAvatar: { ...avatar$1 }, + MuiTooltip: { ...tooltip$1 }, + MuiAppBar: { ...appBar$1 }, + MuiTabs: { ...tabs$2 }, + MuiTab: { ...tab$1 }, + MuiStepper: { ...stepper$1 }, + MuiStep: { ...step$1 }, + MuiStepConnector: { ...stepConnector$1 }, + MuiStepLabel: { ...stepLabel$1 }, + MuiStepIcon: { ...stepIcon$1 }, + MuiSelect: { ...select$1 }, + MuiFormControlLabel: { ...formControlLabel$1 }, + MuiFormLabel: { ...formLabel$1 }, + MuiCheckbox: { ...checkbox$1 }, + MuiRadio: { ...radio$1 }, + MuiAutocomplete: { ...autocomplete }, + MuiPopover: { ...popover$1 }, + MuiButtonBase: { ...buttonBase$1 }, + MuiIcon: { ...icon$1 }, + MuiSvgIcon: { ...svgIcon$1 }, + MuiLink: { ...link$1 }, + MuiDialog: { ...dialog$1 }, + MuiDialogTitle: { ...dialogTitle$1 }, + MuiDialogContent: { ...dialogContent$1 }, + MuiDialogContentText: { ...dialogContentText$1 }, + MuiDialogActions: { ...dialogActions$1 }, + }, +}); + +/** +========================================================= +* Material Dashboard 2 PRO React - v2.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-material-ui +* Copyright 2021 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +var themeRTL = createTheme$1({ + direction: "rtl", + breakpoints: { ...breakpoints$1 }, + palette: { ...colors$1 }, + typography: { ...typography$1 }, + boxShadows: { ...boxShadows$1 }, + borders: { ...borders$1 }, + functions: { + boxShadow: boxShadow$1, + hexToRgb: hexToRgb$1, + linearGradient: linearGradient$1, + pxToRem: pxToRem$1, + rgba: rgba$1, + }, + components: { + MuiCssBaseline: { + styleOverrides: { + ...globals$1, + ...flatpickr$1, + ...container$1, + }, + }, + MuiDrawer: { ...sidenav$1 }, + MuiList: { ...list$1 }, + MuiListItem: { ...listItem$1 }, + MuiListItemText: { ...listItemText$1 }, + MuiCard: { ...card$1 }, + MuiCardMedia: { ...cardMedia$1 }, + MuiCardContent: { ...cardContent$1 }, + MuiButton: { ...button$1 }, + MuiIconButton: { ...iconButton$1 }, + MuiInput: { ...input$1 }, + MuiInputLabel: { ...inputLabel$1 }, + MuiOutlinedInput: { ...inputOutlined$1 }, + MuiTextField: { ...textField$1 }, + MuiMenu: { ...menu$1 }, + MuiMenuItem: { ...menuItem$2 }, + MuiSwitch: { ...switchButton$1 }, + MuiDivider: { ...divider$1 }, + MuiTableContainer: { ...tableContainer$1 }, + MuiTableHead: { ...tableHead$1 }, + MuiTableCell: { ...tableCell$1 }, + MuiLinearProgress: { ...linearProgress$1 }, + MuiBreadcrumbs: { ...breadcrumbs$1 }, + MuiSlider: { ...slider$1 }, + MuiAvatar: { ...avatar$1 }, + MuiTooltip: { ...tooltip$1 }, + MuiAppBar: { ...appBar$1 }, + MuiTabs: { ...tabs$2 }, + MuiTab: { ...tab$1 }, + MuiStepper: { ...stepper$1 }, + MuiStep: { ...step$1 }, + MuiStepConnector: { ...stepConnector$1 }, + MuiStepLabel: { ...stepLabel$1 }, + MuiStepIcon: { ...stepIcon$1 }, + MuiSelect: { ...select$1 }, + MuiFormControlLabel: { ...formControlLabel$1 }, + MuiFormLabel: { ...formLabel$1 }, + MuiCheckbox: { ...checkbox$1 }, + MuiRadio: { ...radio$1 }, + MuiAutocomplete: { ...autocomplete }, + MuiPopover: { ...popover$1 }, + MuiButtonBase: { ...buttonBase$1 }, + MuiIcon: { ...icon$1 }, + MuiSvgIcon: { ...svgIcon$1 }, + MuiLink: { ...link$1 }, + MuiDialog: { ...dialog$1 }, + MuiDialogTitle: { ...dialogTitle$1 }, + MuiDialogContent: { ...dialogContent$1 }, + MuiDialogContentText: { ...dialogContentText$1 }, + MuiDialogActions: { ...dialogActions$1 }, + }, +}); + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const colors = { + background: { + default: "#1a2035", + sidenav: "#1f283e", + card: "#202940", + }, + text: { + main: "#ffffffcc", + focus: "#ffffffcc", + }, + transparent: { + main: "transparent", + }, + white: { + main: "#ffffff", + focus: "#ffffff", + }, + black: { + light: "#000000", + main: "#000000", + focus: "#000000", + }, + primary: { + main: "#e91e63", + focus: "#e91e63", + }, + secondary: { + main: "#7b809a", + focus: "#8f93a9", + }, + info: { + main: "#1A73E8", + focus: "#1662C4", + }, + success: { + main: "#4CAF50", + focus: "#67bb6a", + }, + warning: { + main: "#fb8c00", + focus: "#fc9d26", + }, + error: { + main: "#F44335", + focus: "#f65f53", + }, + light: { + main: "#f0f2f566", + focus: "#f0f2f566", + }, + dark: { + main: "#344767", + focus: "#2c3c58", + }, + grey: { + 100: "#f8f9fa", + 200: "#f0f2f5", + 300: "#dee2e6", + 400: "#ced4da", + 500: "#adb5bd", + 600: "#6c757d", + 700: "#495057", + 800: "#343a40", + 900: "#212529", + }, + gradients: { + primary: { + main: "#EC407A", + state: "#D81B60", + }, + secondary: { + main: "#747b8a", + state: "#495361", + }, + info: { + main: "#49a3f1", + state: "#1A73E8", + }, + success: { + main: "#66BB6A", + state: "#43A047", + }, + warning: { + main: "#FFA726", + state: "#FB8C00", + }, + error: { + main: "#EF5350", + state: "#E53935", + }, + light: { + main: "#EBEFF4", + state: "#CED4DA", + }, + dark: { + main: "#323a54", + state: "#1a2035", + }, + }, + socialMediaColors: { + facebook: { + main: "#3b5998", + dark: "#344e86", + }, + twitter: { + main: "#55acee", + dark: "#3ea1ec", + }, + instagram: { + main: "#125688", + dark: "#0e456d", + }, + linkedin: { + main: "#0077b5", + dark: "#00669c", + }, + pinterest: { + main: "#cc2127", + dark: "#b21d22", + }, + youtube: { + main: "#e52d27", + dark: "#d41f1a", + }, + vimeo: { + main: "#1ab7ea", + dark: "#13a3d2", + }, + slack: { + main: "#3aaf85", + dark: "#329874", + }, + dribbble: { + main: "#ea4c89", + dark: "#e73177", + }, + github: { + main: "#24292e", + dark: "#171a1d", + }, + reddit: { + main: "#ff4500", + dark: "#e03d00", + }, + tumblr: { + main: "#35465c", + dark: "#2a3749", + }, + }, + badgeColors: { + primary: { + background: "#f8b3ca", + text: "#cc084b", + }, + secondary: { + background: "#d7d9e1", + text: "#6c757d", + }, + info: { + background: "#aecef7", + text: "#095bc6", + }, + success: { + background: "#bce2be", + text: "#339537", + }, + warning: { + background: "#ffd59f", + text: "#c87000", + }, + error: { + background: "#fcd3d0", + text: "#f61200", + }, + light: { + background: "#ffffff", + text: "#c7d3de", + }, + dark: { + background: "#8097bf", + text: "#1e2e4a", + }, + }, + coloredShadows: { + primary: "#e91e62", + secondary: "#110e0e", + info: "#00bbd4", + success: "#4caf4f", + warning: "#ff9900", + error: "#f44336", + light: "#adb5bd", + dark: "#404040", + }, + inputBorderColor: "#d2d6da", + tabs: { + indicator: { boxShadow: "#ddd" }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +/** + * The base breakpoints for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material. + * You can add new breakpoints using this file. + * You can customized the breakpoints for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file. + */ +const breakpoints = { + values: { + xs: 0, + sm: 576, + md: 768, + lg: 992, + xl: 1200, + xxl: 1400, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +/** + The pxToRem() function helps you to convert a px unit into a rem unit, + */ +function pxToRem(number, baseNumber = 16) { + return `${number / baseNumber}rem`; +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$i } = colors; +const baseProperties = { + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeightLighter: 100, + fontWeightLight: 300, + fontWeightRegular: 400, + fontWeightMedium: 600, + fontWeightBold: 700, + fontSizeXXS: pxToRem(10.4), + fontSizeXS: pxToRem(12), + fontSizeSM: pxToRem(14), + fontSizeMD: pxToRem(16), + fontSizeLG: pxToRem(18), + fontSizeXL: pxToRem(20), + fontSize2XL: pxToRem(24), + fontSize3XL: pxToRem(30), +}; +const baseHeadingProperties = { + fontFamily: baseProperties.fontFamily, + color: white$i.main, + fontWeight: baseProperties.fontWeightBold, +}; +const baseDisplayProperties = { + fontFamily: baseProperties.fontFamily, + color: white$i.main, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.2, +}; +const typography = { + fontFamily: baseProperties.fontFamily, + fontWeightLighter: baseProperties.fontWeightLighter, + fontWeightLight: baseProperties.fontWeightLight, + fontWeightRegular: baseProperties.fontWeightRegular, + fontWeightMedium: baseProperties.fontWeightMedium, + fontWeightBold: baseProperties.fontWeightBold, + h1: { + fontSize: pxToRem(48), + lineHeight: 1.25, + ...baseHeadingProperties, + }, + h2: { + fontSize: pxToRem(36), + lineHeight: 1.3, + ...baseHeadingProperties, + }, + h3: { + fontSize: pxToRem(30), + lineHeight: 1.375, + ...baseHeadingProperties, + }, + h4: { + fontSize: pxToRem(24), + lineHeight: 1.375, + ...baseHeadingProperties, + }, + h5: { + fontSize: pxToRem(20), + lineHeight: 1.375, + ...baseHeadingProperties, + }, + h6: { + fontSize: pxToRem(16), + lineHeight: 1.625, + ...baseHeadingProperties, + }, + subtitle1: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeXL, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.625, + }, + subtitle2: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeMD, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.6, + }, + body1: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeXL, + fontWeight: baseProperties.fontWeightRegular, + lineHeight: 1.625, + }, + body2: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeMD, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.6, + }, + button: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeSM, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.5, + textTransform: "uppercase", + }, + caption: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeXS, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.25, + }, + overline: { + fontFamily: baseProperties.fontFamily, + }, + d1: { + fontSize: pxToRem(80), + ...baseDisplayProperties, + }, + d2: { + fontSize: pxToRem(72), + ...baseDisplayProperties, + }, + d3: { + fontSize: pxToRem(64), + ...baseDisplayProperties, + }, + d4: { + fontSize: pxToRem(56), + ...baseDisplayProperties, + }, + d5: { + fontSize: pxToRem(48), + ...baseDisplayProperties, + }, + d6: { + fontSize: pxToRem(40), + ...baseDisplayProperties, + }, + size: { + xxs: baseProperties.fontSizeXXS, + xs: baseProperties.fontSizeXS, + sm: baseProperties.fontSizeSM, + md: baseProperties.fontSizeMD, + lg: baseProperties.fontSizeLG, + xl: baseProperties.fontSizeXL, + "2xl": baseProperties.fontSize2XL, + "3xl": baseProperties.fontSize3XL, + }, + lineHeight: { + sm: 1.25, + md: 1.5, + lg: 2, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function boxShadow(offset, radius, color, opacity, inset = "") { + const [x, y] = offset; + const [blur, spread] = radius; + return `${inset} ${pxToRem$1(x)} ${pxToRem$1(y)} ${pxToRem$1(blur)} ${pxToRem$1(spread)} ${rgba$1(color, opacity)}`; +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { black: black$3, dark: dark$6, tabs: tabs$1, coloredShadows } = colors; +const boxShadows = { + xs: boxShadow([0, 2], [9, -5], black$3.main, 0.15), + sm: boxShadow([0, 5], [10, 0], black$3.main, 0.12), + md: `${boxShadow([0, 2], [2, 0], black$3.main, 0.14)}, ${boxShadow([0, 3], [1, -2], black$3.main, 0.2)}, ${boxShadow([0, 1], [5, 0], black$3.main, 0.12)}`, + lg: `${boxShadow([0, 10], [15, -3], black$3.main, 0.1)}, ${boxShadow([0, 4], [6, -2], black$3.main, 0.05)}`, + xl: `${boxShadow([0, 20], [25, -5], black$3.main, 0.1)}, ${boxShadow([0, 10], [10, -5], black$3.main, 0.04)}`, + xxl: boxShadow([0, 20], [27, 0], black$3.main, 0.05), + inset: boxShadow([0, 1], [2, 0], black$3.main, 0.075, "inset"), + colored: { + primary: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.primary, 0.4)}`, + secondary: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.secondary, 0.4)}`, + info: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.info, 0.4)}`, + success: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.success, 0.4)}`, + warning: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.warning, 0.4)}`, + error: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.error, 0.4)}`, + light: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.light, 0.4)}`, + dark: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.dark, 0.4)}`, + }, + navbarBoxShadow: `${boxShadow([0, 0], [1, 1], dark$6.main, 0.9, "inset")}, ${boxShadow([0, 20], [27, 0], black$3.main, 0.05)}`, + sliderBoxShadow: { + thumb: boxShadow([0, 1], [13, 0], black$3.main, 0.2), + }, + tabsBoxShadow: { + indicator: boxShadow([0, 1], [5, 1], tabs$1.indicator.boxShadow, 1), + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function rgba(color, opacity) { + return `rgba(${hexToRgb$1(color)}, ${opacity})`; +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$h } = colors; +const borders = { + borderColor: rgba(white$h.main, 0.4), + borderWidth: { + 0: 0, + 1: pxToRem(1), + 2: pxToRem(2), + 3: pxToRem(3), + 4: pxToRem(4), + 5: pxToRem(5), + }, + borderRadius: { + xs: pxToRem(1.6), + sm: pxToRem(2), + md: pxToRem(6), + lg: pxToRem(8), + xl: pxToRem(12), + xxl: pxToRem(16), + section: pxToRem(160), + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { info: info$a, dark: dark$5 } = colors; +const globals = { + html: { + scrollBehavior: "smooth", + }, + "*, *::before, *::after": { + margin: 0, + padding: 0, + }, + "a, a:link, a:visited": { + textDecoration: "none !important", + }, + "a.link, .link, a.link:link, .link:link, a.link:visited, .link:visited": { + color: `${dark$5.main} !important`, + transition: "color 150ms ease-in !important", + }, + "a.link:hover, .link:hover, a.link:focus, .link:focus": { + color: `${info$a.main} !important`, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function hexToRgb(color) { + return chroma(color).rgb().join(", "); +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +/** + The linearGradient() function helps you to create a linear gradient color background + */ +function linearGradient(color, colorState, angle = 195) { + return `linear-gradient(${angle}deg, ${color}, ${colorState})`; +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { background: background$5 } = colors; +const { borderRadius: borderRadius$i } = borders; +const sidenav = { + styleOverrides: { + root: { + width: pxToRem(250), + whiteSpace: "nowrap", + border: "none", + }, + paper: { + width: pxToRem(250), + backgroundColor: background$5.sidenav, + height: `calc(100vh - ${pxToRem(32)})`, + margin: pxToRem(16), + borderRadius: borderRadius$i.xl, + border: "none", + }, + paperAnchorDockedLeft: { + borderRight: "none", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const list = { + styleOverrides: { + padding: { + paddingTop: 0, + paddingBottom: 0, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const listItem = { + defaultProps: { + disableGutters: true, + }, + styleOverrides: { + root: { + paddingTop: 0, + paddingBottom: 0, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const listItemText = { + styleOverrides: { + root: { + marginTop: 0, + marginBottom: 0, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { black: black$2, background: background$4 } = colors; +const { borderWidth: borderWidth$8, borderRadius: borderRadius$h } = borders; +const { md: md$6 } = boxShadows; +const card = { + styleOverrides: { + root: { + display: "flex", + flexDirection: "column", + position: "relative", + minWidth: 0, + wordWrap: "break-word", + backgroundImage: "none", + backgroundColor: background$4.card, + backgroundClip: "border-box", + border: `${borderWidth$8[0]} solid ${rgba(black$2.main, 0.125)}`, + borderRadius: borderRadius$h.xl, + boxShadow: md$6, + overflow: "visible", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderRadius: borderRadius$g } = borders; +const cardMedia = { + styleOverrides: { + root: { + borderRadius: borderRadius$g.xl, + margin: `${pxToRem(16)} ${pxToRem(16)} 0`, + }, + media: { + width: "auto", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const cardContent = { + styleOverrides: { + root: { + marginTop: 0, + marginBottom: 0, + padding: `${pxToRem(8)} ${pxToRem(24)} ${pxToRem(24)}`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { fontWeightBold: fontWeightBold$1, size: size$h } = typography; +const { borderRadius: borderRadius$f } = borders; +const root = { + display: "inline-flex", + justifyContent: "center", + alignItems: "center", + fontSize: size$h.xs, + fontWeight: fontWeightBold$1, + borderRadius: borderRadius$f.lg, + padding: `${pxToRem(6.302)} ${pxToRem(16.604)}`, + lineHeight: 1.4, + textAlign: "center", + textTransform: "uppercase", + userSelect: "none", + backgroundSize: "150% !important", + backgroundPositionX: "25% !important", + transition: "all 150ms ease-in", + "&:disabled": { + pointerEvent: "none", + opacity: 0.65, + }, + "& .material-icons": { + fontSize: pxToRem(15), + marginTop: pxToRem(-2), + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$g, text: text$5, info: info$9, secondary: secondary$2 } = colors; +const { size: size$g } = typography; +const contained = { + base: { + backgroundColor: white$g.main, + minHeight: pxToRem(37), + color: text$5.main, + padding: `${pxToRem(9)} ${pxToRem(24)}`, + "&:hover": { + backgroundColor: white$g.main, + }, + "&:active, &:active:focus, &:active:hover": { + opacity: 0.85, + }, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(16)} !important`, + }, + }, + small: { + minHeight: pxToRem(29), + padding: `${pxToRem(6)} ${pxToRem(18)}`, + fontSize: size$g.xs, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(12)} !important`, + }, + }, + large: { + minHeight: pxToRem(44), + padding: `${pxToRem(12)} ${pxToRem(64)}`, + fontSize: size$g.sm, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(22)} !important`, + }, + }, + primary: { + backgroundColor: info$9.main, + "&:hover": { + backgroundColor: info$9.main, + }, + "&:focus:not(:hover)": { + backgroundColor: info$9.focus, + }, + }, + secondary: { + backgroundColor: secondary$2.main, + "&:hover": { + backgroundColor: secondary$2.main, + }, + "&:focus:not(:hover)": { + backgroundColor: secondary$2.focus, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent: transparent$c, light: light$3, info: info$8, secondary: secondary$1 } = colors; +const { size: size$f } = typography; +const outlined = { + base: { + minHeight: pxToRem(39), + color: light$3.main, + borderColor: light$3.main, + padding: `${pxToRem(9)} ${pxToRem(24)}`, + "&:hover": { + opacity: 0.75, + backgroundColor: transparent$c.main, + }, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(16)} !important`, + }, + }, + small: { + minHeight: pxToRem(31), + padding: `${pxToRem(6)} ${pxToRem(18)}`, + fontSize: size$f.xs, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(12)} !important`, + }, + }, + large: { + minHeight: pxToRem(46), + padding: `${pxToRem(12)} ${pxToRem(64)}`, + fontSize: size$f.sm, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(22)} !important`, + }, + }, + primary: { + backgroundColor: transparent$c.main, + borderColor: info$8.main, + "&:hover": { + backgroundColor: transparent$c.main, + }, + }, + secondary: { + backgroundColor: transparent$c.main, + borderColor: secondary$1.main, + "&:hover": { + backgroundColor: transparent$c.main, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { text: text$4, info: info$7, secondary, transparent: transparent$b } = colors; +const { size: size$e } = typography; +const buttonText = { + base: { + backgroundColor: transparent$b.main, + minHeight: pxToRem(37), + color: text$4.main, + boxShadow: "none", + padding: `${pxToRem(9)} ${pxToRem(24)}`, + "&:hover": { + backgroundColor: transparent$b.main, + boxShadow: "none", + }, + "&:focus": { + boxShadow: "none", + }, + "&:active, &:active:focus, &:active:hover": { + opacity: 0.85, + boxShadow: "none", + }, + "&:disabled": { + boxShadow: "none", + }, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(16)} !important`, + }, + }, + small: { + minHeight: pxToRem(29), + padding: `${pxToRem(6)} ${pxToRem(18)}`, + fontSize: size$e.xs, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(12)} !important`, + }, + }, + large: { + minHeight: pxToRem(44), + padding: `${pxToRem(12)} ${pxToRem(64)}`, + fontSize: size$e.sm, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(22)} !important`, + }, + }, + primary: { + color: info$7.main, + "&:hover": { + color: info$7.main, + }, + "&:focus:not(:hover)": { + color: info$7.focus, + boxShadow: "none", + }, + }, + secondary: { + color: secondary.main, + "&:hover": { + color: secondary.main, + }, + "&:focus:not(:hover)": { + color: secondary.focus, + boxShadow: "none", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const button = { + defaultProps: { + disableRipple: false, + }, + styleOverrides: { + root: { ...root }, + contained: { ...contained.base }, + containedSizeSmall: { ...contained.small }, + containedSizeLarge: { ...contained.large }, + containedPrimary: { ...contained.primary }, + containedSecondary: { ...contained.secondary }, + outlined: { ...outlined.base }, + outlinedSizeSmall: { ...outlined.small }, + outlinedSizeLarge: { ...outlined.large }, + outlinedPrimary: { ...outlined.primary }, + outlinedSecondary: { ...outlined.secondary }, + text: { ...buttonText.base }, + textSizeSmall: { ...buttonText.small }, + textSizeLarge: { ...buttonText.large }, + textPrimary: { ...buttonText.primary }, + textSecondary: { ...buttonText.secondary }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent: transparent$a } = colors; +const iconButton = { + styleOverrides: { + root: { + "&:hover": { + backgroundColor: transparent$a.main, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { info: info$6, inputBorderColor: inputBorderColor$1, dark: dark$4, grey: grey$4, white: white$f } = colors; +const { size: size$d } = typography; +const { borderWidth: borderWidth$7 } = borders; +const input = { + styleOverrides: { + root: { + fontSize: size$d.sm, + color: dark$4.main, + "&:hover:not(.Mui-disabled):before": { + borderBottom: `${borderWidth$7[1]} solid ${rgba(inputBorderColor$1, 0.6)}`, + }, + "&:before": { + borderColor: rgba(inputBorderColor$1, 0.6), + }, + "&:after": { + borderColor: info$6.main, + }, + input: { + color: white$f.main, + "&::-webkit-input-placeholder": { + color: grey$4[100], + }, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { text: text$3, info: info$5 } = colors; +const { size: size$c } = typography; +const inputLabel = { + styleOverrides: { + root: { + fontSize: size$c.sm, + color: text$3.main, + lineHeight: 0.9, + "&.Mui-focused": { + color: info$5.main, + }, + "&.MuiInputLabel-shrink": { + lineHeight: 1.5, + fontSize: size$c.md, + "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { + fontSize: "0.85em", + }, + }, + }, + sizeSmall: { + fontSize: size$c.xs, + lineHeight: 1.625, + "&.MuiInputLabel-shrink": { + lineHeight: 1.6, + fontSize: size$c.sm, + "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { + fontSize: "0.72em", + }, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { inputBorderColor, info: info$4, grey: grey$3, transparent: transparent$9, white: white$e } = colors; +const { borderRadius: borderRadius$e } = borders; +const { size: size$b } = typography; +const inputOutlined = { + styleOverrides: { + root: { + backgroundColor: transparent$9.main, + fontSize: size$b.sm, + borderRadius: borderRadius$e.md, + "&:hover .MuiOutlinedInput-notchedOutline": { + borderColor: rgba(inputBorderColor, 0.6), + }, + "&.Mui-focused": { + "& .MuiOutlinedInput-notchedOutline": { + borderColor: info$4.main, + }, + }, + }, + notchedOutline: { + borderColor: rgba(inputBorderColor, 0.6), + }, + input: { + color: white$e.main, + padding: pxToRem(12), + backgroundColor: transparent$9.main, + "&::-webkit-input-placeholder": { + color: grey$3[100], + }, + }, + inputSizeSmall: { + fontSize: size$b.xs, + padding: pxToRem(10), + }, + multiline: { + color: grey$3[700], + padding: 0, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent: transparent$8 } = colors; +const textField = { + styleOverrides: { + root: { + backgroundColor: transparent$8.main, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { md: md$5 } = boxShadows; +const { size: size$a } = typography; +const { text: text$2, background: background$3 } = colors; +const { borderRadius: borderRadius$d } = borders; +const menu = { + defaultProps: { + disableAutoFocusItem: true, + }, + styleOverrides: { + paper: { + minWidth: pxToRem(160), + boxShadow: md$5, + padding: `${pxToRem(16)} ${pxToRem(8)}`, + fontSize: size$a.sm, + color: text$2.main, + textAlign: "left", + backgroundColor: `${background$3.card} !important`, + borderRadius: borderRadius$d.md, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { dark: dark$3, white: white$d } = colors; +const { borderRadius: borderRadius$c } = borders; +const { size: size$9 } = typography; +const menuItem$1 = { + styleOverrides: { + root: { + minWidth: pxToRem(160), + minHeight: "unset", + padding: `${pxToRem(4.8)} ${pxToRem(16)}`, + borderRadius: borderRadius$c.md, + fontSize: size$9.sm, + color: rgba(white$d.main, 0.8), + transition: "background-color 300ms ease, color 300ms ease", + "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { + backgroundColor: dark$3.main, + color: white$d.main, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$c, gradients: gradients$4, grey: grey$2, transparent: transparent$7 } = colors; +const { borderWidth: borderWidth$6 } = borders; +const { md: md$4 } = boxShadows; +const switchButton = { + defaultProps: { + disableRipple: false, + }, + styleOverrides: { + switchBase: { + color: gradients$4.dark.main, + "&:hover": { + backgroundColor: transparent$7.main, + }, + "&.Mui-checked": { + color: gradients$4.dark.main, + "&:hover": { + backgroundColor: transparent$7.main, + }, + "& .MuiSwitch-thumb": { + borderColor: `${gradients$4.dark.main} !important`, + }, + "& + .MuiSwitch-track": { + backgroundColor: `${gradients$4.dark.main} !important`, + borderColor: `${gradients$4.dark.main} !important`, + opacity: 1, + }, + }, + "&.Mui-disabled + .MuiSwitch-track": { + opacity: "0.3 !important", + }, + "&.Mui-focusVisible .MuiSwitch-thumb": { + backgroundImage: linearGradient(gradients$4.info.main, gradients$4.info.state), + }, + }, + thumb: { + backgroundColor: white$c.main, + boxShadow: md$4, + border: `${borderWidth$6[1]} solid ${grey$2[400]}`, + }, + track: { + width: pxToRem(32), + height: pxToRem(15), + backgroundColor: grey$2[400], + border: `${borderWidth$6[1]} solid ${grey$2[400]}`, + opacity: 1, + }, + checked: {}, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { dark: dark$2, transparent: transparent$6, white: white$b } = colors; +const divider = { + styleOverrides: { + root: { + backgroundColor: transparent$6.main, + backgroundImage: `linear-gradient(to right, ${rgba(dark$2.main, 0)}, ${white$b.main}, ${rgba(dark$2.main, 0)}) !important`, + height: pxToRem(1), + margin: `${pxToRem(16)} 0`, + borderBottom: "none", + opacity: 0.25, + }, + vertical: { + backgroundColor: transparent$6.main, + backgroundImage: `linear-gradient(to bottom, ${rgba(dark$2.main, 0)}, ${white$b.main}, ${rgba(dark$2.main, 0)}) !important`, + width: pxToRem(1), + height: "100%", + margin: `0 ${pxToRem(16)}`, + borderRight: "none", + }, + light: { + backgroundColor: transparent$6.main, + backgroundImage: `linear-gradient(to right, ${rgba(white$b.main, 0)}, ${rgba(dark$2.main, 0.4)}, ${rgba(white$b.main, 0)}) !important`, + "&.MuiDivider-vertical": { + backgroundImage: `linear-gradient(to bottom, ${rgba(white$b.main, 0)}, ${rgba(dark$2.main, 0.4)}, ${rgba(white$b.main, 0)}) !important`, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { background: background$2 } = colors; +const { md: md$3 } = boxShadows; +const { borderRadius: borderRadius$b } = borders; +const tableContainer = { + styleOverrides: { + root: { + backgroundColor: background$2.card, + boxShadow: md$3, + borderRadius: borderRadius$b.xl, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderRadius: borderRadius$a } = borders; +const tableHead = { + styleOverrides: { + root: { + display: "block", + padding: `${pxToRem(16)} ${pxToRem(16)} 0 ${pxToRem(16)}`, + borderRadius: `${borderRadius$a.xl} ${borderRadius$a.xl} 0 0`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderWidth: borderWidth$5 } = borders; +const { light: light$2 } = colors; +const tableCell = { + styleOverrides: { + root: { + padding: `${pxToRem(12)} ${pxToRem(16)}`, + borderBottom: `${borderWidth$5[1]} solid ${light$2.main}`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderRadius: borderRadius$9 } = borders; +const { light: light$1 } = colors; +const linearProgress = { + styleOverrides: { + root: { + height: pxToRem(6), + borderRadius: borderRadius$9.md, + overflow: "visible", + position: "relative", + }, + colorPrimary: { + backgroundColor: light$1.main, + }, + colorSecondary: { + backgroundColor: light$1.main, + }, + bar: { + height: pxToRem(6), + borderRadius: borderRadius$9.sm, + position: "absolute", + transform: `translate(0, 0) !important`, + transition: "width 0.6s ease !important", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { grey: grey$1 } = colors; +const { size: size$8 } = typography; +const breadcrumbs = { + styleOverrides: { + li: { + lineHeight: 0, + }, + separator: { + fontSize: size$8.sm, + color: grey$1[600], + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { grey, white: white$a, black: black$1, info: info$3 } = colors$1; +const { borderRadius: borderRadius$8, borderWidth: borderWidth$4 } = borders$1; +const { sliderBoxShadow } = boxShadows$1; +const slider = { + styleOverrides: { + root: { + width: "100%", + "& .MuiSlider-active, & .Mui-focusVisible": { + boxShadow: "none !important", + }, + "& .MuiSlider-valueLabel": { + color: black$1.main, + }, + }, + rail: { + height: pxToRem$1(2), + background: grey[200], + borderRadius: borderRadius$8.sm, + opacity: 1, + }, + track: { + background: info$3.main, + height: pxToRem$1(2), + position: "relative", + border: "none", + borderRadius: borderRadius$8.lg, + zIndex: 1, + }, + thumb: { + width: pxToRem$1(14), + height: pxToRem$1(14), + backgroundColor: white$a.main, + zIndex: 10, + boxShadow: sliderBoxShadow.thumb, + border: `${borderWidth$4[1]} solid ${info$3.main}`, + transition: "all 200ms linear", + "&:hover": { + boxShadow: "none", + }, + "&:active": { + transform: "translate(-50%, -50%) scale(1.4)", + }, + "&.Mui-active": { boxShadow: boxShadow$1([0, 0], [0, 14], info$3.main, 0.16) }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderRadius: borderRadius$7 } = borders; +const avatar = { + styleOverrides: { + root: { + transition: "all 200ms ease-in-out", + }, + rounded: { + borderRadius: borderRadius$7.lg, + }, + img: { + height: "auto", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { black, white: white$9 } = colors; +const { size: size$7, fontWeightRegular: fontWeightRegular$2 } = typography; +const { borderRadius: borderRadius$6 } = borders; +const tooltip = { + defaultProps: { + arrow: true, + TransitionComponent: Fade, + }, + styleOverrides: { + tooltip: { + maxWidth: pxToRem(200), + backgroundColor: black.main, + color: white$9.main, + fontSize: size$7.sm, + fontWeight: fontWeightRegular$2, + textAlign: "center", + borderRadius: borderRadius$6.md, + opacity: 0.7, + padding: `${pxToRem(5)} ${pxToRem(8)} ${pxToRem(4)}`, + }, + arrow: { + color: black.main, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const appBar = { + defaultProps: { + color: "transparent", + }, + styleOverrides: { + root: { + boxShadow: "none", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { background: background$1 } = colors; +const { borderRadius: borderRadius$5 } = borders; +const { md: md$2 } = boxShadows; +const tabs = { + styleOverrides: { + root: { + position: "relative", + backgroundColor: background$1.card, + borderRadius: borderRadius$5.xl, + minHeight: "unset", + padding: pxToRem(4), + }, + flexContainer: { + height: "100%", + position: "relative", + zIndex: 10, + }, + fixed: { + overflow: "unset !important", + overflowX: "unset !important", + }, + vertical: { + "& .MuiTabs-indicator": { + width: "100%", + }, + }, + indicator: { + height: "100%", + borderRadius: borderRadius$5.lg, + backgroundColor: background$1.default, + boxShadow: md$2, + transition: "all 500ms ease", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { size: size$6, fontWeightRegular: fontWeightRegular$1 } = typography; +const { borderRadius: borderRadius$4 } = borders; +const { white: white$8 } = colors; +const tab = { + styleOverrides: { + root: { + display: "flex", + alignItems: "center", + flexDirection: "row", + flex: "1 1 auto", + textAlign: "center", + maxWidth: "unset !important", + minWidth: "unset !important", + minHeight: "unset !important", + fontSize: size$6.md, + fontWeight: fontWeightRegular$1, + textTransform: "none", + lineHeight: "inherit", + padding: pxToRem(4), + borderRadius: borderRadius$4.lg, + color: `${white$8.main} !important`, + opacity: "1 !important", + "& .material-icons, .material-icons-round": { + marginBottom: "0 !important", + marginRight: pxToRem(6), + }, + "& svg": { + marginBottom: "0 !important", + marginRight: pxToRem(6), + }, + }, + labelIcon: { + paddingTop: pxToRem(4), + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent: transparent$5, gradients: gradients$3 } = colors; +const { borderRadius: borderRadius$3 } = borders; +const { colored } = boxShadows; +const stepper = { + styleOverrides: { + root: { + background: linearGradient(gradients$3.info.main, gradients$3.info.state), + padding: `${pxToRem(24)} 0 ${pxToRem(16)}`, + borderRadius: borderRadius$3.lg, + boxShadow: colored.info, + "&.MuiPaper-root": { + backgroundColor: transparent$5.main, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const step = { + styleOverrides: { + root: { + padding: `0 ${pxToRem(6)}`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$7 } = colors; +const { borderWidth: borderWidth$3 } = borders; +const stepConnector = { + styleOverrides: { + root: { + color: "#9fc9ff", + transition: "all 200ms linear", + "&.Mui-active": { + color: white$7.main, + }, + "&.Mui-completed": { + color: white$7.main, + }, + }, + alternativeLabel: { + top: "14%", + left: "-50%", + right: "50%", + }, + line: { + borderWidth: `${borderWidth$3[2]} !important`, + borderColor: "currentColor", + opacity: 0.5, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { size: size$5, fontWeightRegular } = typography; +const { white: white$6 } = colors; +const stepLabel = { + styleOverrides: { + label: { + marginTop: `${pxToRem(8)} !important`, + fontWeight: fontWeightRegular, + fontSize: size$5.xs, + color: "#9fc9ff", + textTransform: "uppercase", + "&.Mui-active": { + fontWeight: `${fontWeightRegular} !important`, + color: `${rgba(white$6.main, 0.8)} !important`, + }, + "&.Mui-completed": { + fontWeight: `${fontWeightRegular} !important`, + color: `${rgba(white$6.main, 0.8)} !important`, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$5 } = colors; +const stepIcon = { + styleOverrides: { + root: { + background: "#9fc9ff", + fill: "#9fc9ff", + stroke: "#9fc9ff", + strokeWidth: pxToRem(10), + width: pxToRem(13), + height: pxToRem(13), + borderRadius: "50%", + zIndex: 99, + transition: "all 200ms linear", + "&.Mui-active": { + background: white$5.main, + fill: white$5.main, + stroke: white$5.main, + borderColor: white$5.main, + boxShadow: boxShadow([0, 0], [0, 2], white$5.main, 1), + }, + "&.Mui-completed": { + background: white$5.main, + fill: white$5.main, + stroke: white$5.main, + borderColor: white$5.main, + boxShadow: boxShadow([0, 0], [0, 2], white$5.main, 1), + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent: transparent$4 } = colors; +const select = { + styleOverrides: { + select: { + display: "grid", + alignItems: "center", + padding: `0 ${pxToRem(12)} !important`, + "& .Mui-selected": { + backgroundColor: transparent$4.main, + }, + }, + selectMenu: { + background: "none", + height: "none", + minHeight: "none", + overflow: "unset", + }, + icon: { + display: "none", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$4 } = colors; +const { size: size$4, fontWeightBold } = typography; +const formControlLabel = { + styleOverrides: { + root: { + display: "block", + minHeight: pxToRem(24), + marginBottom: pxToRem(2), + }, + label: { + display: "inline-block", + fontSize: size$4.sm, + fontWeight: fontWeightBold, + color: white$4.main, + lineHeight: 1, + transform: `translateY(${pxToRem(1)})`, + marginLeft: pxToRem(4), + "&.Mui-disabled": { + color: white$4.main, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { text: text$1 } = colors; +const formLabel = { + styleOverrides: { + root: { + color: text$1.main, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderWidth: borderWidth$2, borderColor: borderColor$2 } = borders; +const { transparent: transparent$3, info: info$2 } = colors; +const checkbox = { + styleOverrides: { + root: { + "& .MuiSvgIcon-root": { + backgroundPosition: "center", + backgroundSize: "contain", + backgroundRepeat: "no-repeat", + width: pxToRem(20), + height: pxToRem(20), + color: transparent$3.main, + border: `${borderWidth$2[1]} solid ${borderColor$2}`, + borderRadius: pxToRem(5.6), + }, + "&:hover": { + backgroundColor: transparent$3.main, + }, + "&.Mui-focusVisible": { + border: `${borderWidth$2[2]} solid ${info$2.main} !important`, + }, + }, + colorPrimary: { + color: borderColor$2, + "&.Mui-checked": { + color: info$2.main, + "& .MuiSvgIcon-root": { + backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient(info$2.main, info$2.main)}`, + borderColor: info$2.main, + }, + }, + }, + colorSecondary: { + color: borderColor$2, + "& .MuiSvgIcon-root": { + color: info$2.main, + "&.Mui-checked": { + backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient(info$2.main, info$2.main)}`, + borderColor: info$2.main, + }, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderWidth: borderWidth$1, borderColor: borderColor$1 } = borders; +const { transparent: transparent$2, info: info$1 } = colors; +const radio = { + styleOverrides: { + root: { + "& .MuiSvgIcon-root": { + width: pxToRem(20), + height: pxToRem(20), + color: transparent$2.main, + border: `${borderWidth$1[1]} solid ${borderColor$1}`, + borderRadius: "50%", + }, + "&:after": { + transition: "opacity 250ms ease-in-out", + content: `""`, + position: "absolute", + width: pxToRem(14), + height: pxToRem(14), + borderRadius: "50%", + backgroundImage: linearGradient(info$1.main, info$1.main), + opacity: 0, + left: 0, + right: 0, + top: 0, + bottom: 0, + margin: "auto", + }, + "&:hover": { + backgroundColor: transparent$2.main, + }, + "&.Mui-focusVisible": { + border: `${borderWidth$1[2]} solid ${info$1.main} !important`, + }, + }, + colorPrimary: { + color: borderColor$1, + "&.Mui-checked": { + color: info$1.main, + "& .MuiSvgIcon-root": { + borderColor: info$1.main, + }, + "&:after": { + opacity: 1, + }, + }, + }, + colorSecondary: { + color: borderColor$1, + "&.Mui-checked": { + color: info$1.main, + "& .MuiSvgIcon-root": { + borderColor: info$1.main, + }, + "&:after": { + opacity: 1, + }, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { md: md$1 } = boxShadows; +const { size: size$3 } = typography; +const { text, transparent: transparent$1, light, dark: dark$1, gradients: gradients$2, background, white: white$3 } = colors; +const { borderRadius: borderRadius$2 } = borders; +const autocompletle = { + styleOverrides: { + popper: { + boxShadow: md$1, + padding: pxToRem(8), + fontSize: size$3.sm, + color: text.main, + textAlign: "left", + backgroundColor: `${background.card} !important`, + borderRadius: borderRadius$2.md, + }, + paper: { + boxShadow: "none", + backgroundColor: transparent$1.main, + }, + option: { + padding: `${pxToRem(4.8)} ${pxToRem(16)}`, + borderRadius: borderRadius$2.md, + fontSize: size$3.sm, + color: text.main, + transition: "background-color 300ms ease, color 300ms ease", + "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { + backgroundColor: rgba(light.main, 0.2), + color: white$3.main, + }, + '&[aria-selected="true"]': { + backgroundColor: `${rgba(light.main, 0.2)} !important`, + color: `${white$3.main} !important`, + }, + }, + noOptions: { + fontSize: size$3.sm, + color: text.main, + }, + groupLabel: { + color: dark$1.main, + }, + loading: { + fontSize: size$3.sm, + color: text.main, + }, + tag: { + display: "flex", + alignItems: "center", + height: "auto", + padding: pxToRem(4), + backgroundColor: gradients$2.dark.state, + color: white$3.main, + "& .MuiChip-label": { + lineHeight: 1.2, + padding: `0 ${pxToRem(10)} 0 ${pxToRem(4)}`, + }, + "& .MuiSvgIcon-root, & .MuiSvgIcon-root:hover, & .MuiSvgIcon-root:focus": { + color: white$3.main, + marginRight: 0, + }, + }, + popupIndicator: { + color: text.main, + }, + clearIndicator: { + color: text.main, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { info, white: white$2, gradients: gradients$1 } = colors; +const flatpickr = { + ".flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.nextMonthDay:hover, .flatpickr-day.nextMonthDay:focus": { + background: rgba(info.main, 0.28), + border: "none", + }, + ".flatpickr-day.today": { + background: info.main, + color: white$2.main, + border: "none", + "&:hover, &:focus": { + background: `${info.focus} !important`, + }, + }, + ".flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.nextMonthDay.selected, .flatpickr-day.nextMonthDay.selected:hover, .flatpickr-day.nextMonthDay.selected:focus": { + background: `${gradients$1.info.state} !important`, + color: white$2.main, + border: "none", + }, + ".flatpickr-months .flatpickr-next-month:hover svg, .flatpickr-months .flatpickr-prev-month:hover svg": { + color: `${info.main} !important`, + fill: `${info.main} !important`, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { values: { sm, md, lg: lg$1, xl, xxl: xxl$1 }, } = breakpoints; +const SM = `@media (min-width: ${sm}px)`; +const MD = `@media (min-width: ${md}px)`; +const LG = `@media (min-width: ${lg$1}px)`; +const XL = `@media (min-width: ${xl}px)`; +const XXL = `@media (min-width: ${xxl$1}px)`; +const sharedClasses = { + paddingRight: `${pxToRem(24)} !important`, + paddingLeft: `${pxToRem(24)} !important`, + marginRight: "auto !important", + marginLeft: "auto !important", + width: "100% !important", + position: "relative", +}; +const container = { + [SM]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "540px !important", + }, + }, + [MD]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "720px !important", + }, + }, + [LG]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "960px !important", + }, + }, + [XL]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "1140px !important", + }, + }, + [XXL]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "1320px !important", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent } = colors; +const { lg } = boxShadows; +const { borderRadius: borderRadius$1 } = borders; +const popover = { + styleOverrides: { + paper: { + backgroundColor: transparent.main, + boxShadow: lg, + borderRadius: borderRadius$1.md, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const buttonBase = { + defaultProps: { + disableRipple: false, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const icon = { + defaultProps: { + baseClassName: "material-icons-round", + fontSize: "inherit", + }, + styleOverrides: { + fontSizeInherit: { + fontSize: "inherit !important", + }, + fontSizeSmall: { + fontSize: `${pxToRem(20)} !important`, + }, + fontSizeLarge: { + fontSize: `${pxToRem(36)} !important`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const svgIcon = { + defaultProps: { + fontSize: "inherit", + }, + styleOverrides: { + fontSizeInherit: { + fontSize: "inherit !important", + }, + fontSizeSmall: { + fontSize: `${pxToRem(20)} !important`, + }, + fontSizeLarge: { + fontSize: `${pxToRem(36)} !important`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const link = { + defaultProps: { + underline: "none", + color: "inherit", + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderRadius } = borders; +const { xxl } = boxShadows; +const dialog = { + styleOverrides: { + paper: { + borderRadius: borderRadius.lg, + boxShadow: xxl, + }, + paperFullScreen: { + borderRadius: 0, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { size: size$2 } = typography; +const dialogTitle = { + styleOverrides: { + root: { + padding: pxToRem(16), + fontSize: size$2.xl, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { size: size$1 } = typography; +const { white: white$1 } = colors; +const { borderWidth, borderColor } = borders; +const dialogContent = { + styleOverrides: { + root: { + padding: pxToRem(16), + fontSize: size$1.md, + color: rgba(white$1.main, 0.8), + }, + dividers: { + borderTop: `${borderWidth[1]} solid ${rgba(borderColor, 0.6)}`, + borderBottom: `${borderWidth[1]} solid ${rgba(borderColor, 0.6)}`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { size } = typography; +const { white } = colors; +const dialogContentText = { + styleOverrides: { + root: { + fontSize: size.md, + color: rgba(white.main, 0.8), + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const dialogActions = { + styleOverrides: { + root: { + padding: pxToRem(16), + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React - v2.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-material-ui +* Copyright 2021 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +var themeDark = createTheme$1({ + breakpoints: { ...breakpoints }, + palette: { ...colors }, + typography: { ...typography }, + boxShadows: { ...boxShadows }, + borders: { ...borders }, + functions: { + boxShadow, + hexToRgb, + linearGradient, + pxToRem, + rgba, + }, + components: { + MuiCssBaseline: { + styleOverrides: { + ...globals, + ...flatpickr, + ...container, + }, + }, + MuiDrawer: { ...sidenav }, + MuiList: { ...list }, + MuiListItem: { ...listItem }, + MuiListItemText: { ...listItemText }, + MuiCard: { ...card }, + MuiCardMedia: { ...cardMedia }, + MuiCardContent: { ...cardContent }, + MuiButton: { ...button }, + MuiIconButton: { ...iconButton }, + MuiInput: { ...input }, + MuiInputLabel: { ...inputLabel }, + MuiOutlinedInput: { ...inputOutlined }, + MuiTextField: { ...textField }, + MuiMenu: { ...menu }, + MuiMenuItem: { ...menuItem$1 }, + MuiSwitch: { ...switchButton }, + MuiDivider: { ...divider }, + MuiTableContainer: { ...tableContainer }, + MuiTableHead: { ...tableHead }, + MuiTableCell: { ...tableCell }, + MuiLinearProgress: { ...linearProgress }, + MuiBreadcrumbs: { ...breadcrumbs }, + MuiSlider: { ...slider }, + MuiAvatar: { ...avatar }, + MuiTooltip: { ...tooltip }, + MuiAppBar: { ...appBar }, + MuiTabs: { ...tabs }, + MuiTab: { ...tab }, + MuiStepper: { ...stepper }, + MuiStep: { ...step }, + MuiStepConnector: { ...stepConnector }, + MuiStepLabel: { ...stepLabel }, + MuiStepIcon: { ...stepIcon }, + MuiSelect: { ...select }, + MuiFormControlLabel: { ...formControlLabel }, + MuiFormLabel: { ...formLabel }, + MuiCheckbox: { ...checkbox }, + MuiRadio: { ...radio }, + MuiAutocomplete: { ...autocompletle }, + MuiPopover: { ...popover }, + MuiButtonBase: { ...buttonBase }, + MuiIcon: { ...icon }, + MuiSvgIcon: { ...svgIcon }, + MuiLink: { ...link }, + MuiDialog: { ...dialog }, + MuiDialogTitle: { ...dialogTitle }, + MuiDialogContent: { ...dialogContent }, + MuiDialogContentText: { ...dialogContentText }, + MuiDialogActions: { ...dialogActions }, + }, +}); + +/** +========================================================= +* Material Dashboard 2 PRO React - v2.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-material-ui +* Copyright 2021 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +var themeDarkRTL = createTheme$1({ + direction: "rtl", + breakpoints: { ...breakpoints }, + palette: { ...colors }, + typography: { ...typography }, + boxShadows: { ...boxShadows }, + borders: { ...borders }, + functions: { + boxShadow, + hexToRgb, + linearGradient, + pxToRem, + rgba, + }, + components: { + MuiCssBaseline: { + styleOverrides: { + ...globals, + ...flatpickr, + ...container, + }, + }, + MuiDrawer: { ...sidenav }, + MuiList: { ...list }, + MuiListItem: { ...listItem }, + MuiListItemText: { ...listItemText }, + MuiCard: { ...card }, + MuiCardMedia: { ...cardMedia }, + MuiCardContent: { ...cardContent }, + MuiButton: { ...button }, + MuiIconButton: { ...iconButton }, + MuiInput: { ...input }, + MuiInputLabel: { ...inputLabel }, + MuiOutlinedInput: { ...inputOutlined }, + MuiTextField: { ...textField }, + MuiMenu: { ...menu }, + MuiMenuItem: { ...menuItem$1 }, + MuiSwitch: { ...switchButton }, + MuiDivider: { ...divider }, + MuiTableContainer: { ...tableContainer }, + MuiTableHead: { ...tableHead }, + MuiTableCell: { ...tableCell }, + MuiLinearProgress: { ...linearProgress }, + MuiBreadcrumbs: { ...breadcrumbs }, + MuiSlider: { ...slider }, + MuiAvatar: { ...avatar }, + MuiTooltip: { ...tooltip }, + MuiAppBar: { ...appBar }, + MuiTabs: { ...tabs }, + MuiTab: { ...tab }, + MuiStepper: { ...stepper }, + MuiStep: { ...step }, + MuiStepConnector: { ...stepConnector }, + MuiStepLabel: { ...stepLabel }, + MuiStepIcon: { ...stepIcon }, + MuiSelect: { ...select }, + MuiFormControlLabel: { ...formControlLabel }, + MuiFormLabel: { ...formLabel }, + MuiCheckbox: { ...checkbox }, + MuiRadio: { ...radio }, + MuiAutocomplete: { ...autocompletle }, + MuiPopover: { ...popover }, + MuiButtonBase: { ...buttonBase }, + MuiIcon: { ...icon }, + MuiSvgIcon: { ...svgIcon }, + MuiLink: { ...link }, + MuiDialog: { ...dialog }, + MuiDialogTitle: { ...dialogTitle }, + MuiDialogContent: { ...dialogContent }, + MuiDialogContentText: { ...dialogContentText }, + MuiDialogActions: { ...dialogActions }, + }, +}); + +function DashboardLayout({ children }) { + const [controller, dispatch] = useMaterialUIController(); + const { miniSidenav } = controller; + const { pathname } = useLocation(); + useEffect(() => { + setLayout(dispatch, "dashboard"); + }, [pathname]); + return (jsx(MDBox, { sx: ({ breakpoints, transitions, functions: { pxToRem } }) => ({ + p: 3, + position: "relative", + [breakpoints.up("xl")]: { + marginLeft: miniSidenav ? pxToRem(120) : pxToRem(274), + transition: transitions.create(["margin-left", "margin-right"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + }, + }), children: children })); +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +var MDInputRoot = styled(TextField)(({ theme, ownerState }) => { + const { palette, functions } = theme; + const { error, success, disabled } = ownerState; + const { grey, transparent, error: colorError, success: colorSuccess } = palette; + const { pxToRem } = functions; + // styles for the input with error={true} + const errorStyles = () => ({ + backgroundImage: "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23F44335' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23F44335' stroke='none'/%3E%3C/svg%3E\")", + backgroundRepeat: "no-repeat", + backgroundPosition: `right ${pxToRem(12)} center`, + backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`, + "& .Mui-focused": { + "& .MuiOutlinedInput-notchedOutline, &:after": { + borderColor: colorError.main, + }, + }, + "& .MuiInputLabel-root.Mui-focused": { + color: colorError.main, + }, + }); + // styles for the input with success={true} + const successStyles = () => ({ + backgroundImage: "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath fill='%234CAF50' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E\")", + backgroundRepeat: "no-repeat", + backgroundPosition: `right ${pxToRem(12)} center`, + backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`, + "& .Mui-focused": { + "& .MuiOutlinedInput-notchedOutline, &:after": { + borderColor: colorSuccess.main, + }, + }, + "& .MuiInputLabel-root.Mui-focused": { + color: colorSuccess.main, + }, + }); + return { + backgroundColor: disabled ? `${grey[200]} !important` : transparent.main, + pointerEvents: disabled ? "none" : "auto", + ...(error && errorStyles()), + ...(success && successStyles()), + }; +}); + +const MDInput = forwardRef(({ error, success, disabled, ...rest }, ref) => (jsx(MDInputRoot, { ...rest, ref: ref, ownerState: { error, success, disabled } }))); +// Declaring default props for MDInput +MDInput.defaultProps = { + error: false, + success: false, + disabled: false, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +var MDBadgeRoot = styled(Badge)(({ theme, ownerState }) => { + const { palette, typography, borders, functions } = theme; + const { color, circular, border, size, indicator, variant, container, children } = ownerState; + const { white, dark, gradients, badgeColors } = palette; + const { size: fontSize, fontWeightBold } = typography; + const { borderRadius, borderWidth } = borders; + const { pxToRem, linearGradient } = functions; + // padding values + const paddings = { + xs: "0.45em 0.775em", + sm: "0.55em 0.9em", + md: "0.65em 1em", + lg: "0.85em 1.375em", + }; + // fontSize value + const fontSizeValue = size === "xs" ? fontSize.xxs : fontSize.xs; + // border value + const borderValue = border ? `${borderWidth[3]} solid ${white.main}` : "none"; + // borderRadius value + const borderRadiusValue = circular ? borderRadius.section : borderRadius.md; + // styles for the badge with indicator={true} + const indicatorStyles = (sizeProp) => { + let widthValue = pxToRem(20); + let heightValue = pxToRem(20); + if (sizeProp === "medium") { + widthValue = pxToRem(24); + heightValue = pxToRem(24); + } + else if (sizeProp === "large") { + widthValue = pxToRem(32); + heightValue = pxToRem(32); + } + return { + width: widthValue, + height: heightValue, + display: "grid", + placeItems: "center", + textAlign: "center", + borderRadius: "50%", + padding: 0, + border: borderValue, + }; + }; + // styles for the badge with variant="gradient" + const gradientStyles = (colorProp) => { + const backgroundValue = gradients[colorProp] + ? linearGradient(gradients[colorProp].main, gradients[colorProp].state) + : linearGradient(gradients.info.main, gradients.info.state); + const colorValue = colorProp === "light" ? dark.main : white.main; + return { + background: backgroundValue, + color: colorValue, + }; + }; + // styles for the badge with variant="contained" + const containedStyles = (colorProp) => { + const backgroundValue = badgeColors[colorProp] + ? badgeColors[colorProp].background + : badgeColors.info.background; + let colorValue = badgeColors[colorProp] ? badgeColors[colorProp].text : badgeColors.info.text; + if (colorProp === "light") { + colorValue = dark.main; + } + return { + background: backgroundValue, + color: colorValue, + }; + }; + // styles for the badge with no children and container={false} + const standAloneStyles = () => ({ + position: "static", + marginLeft: pxToRem(8), + transform: "none", + fontSize: pxToRem(9), + }); + // styles for the badge with container={true} + const containerStyles = () => ({ + position: "relative", + transform: "none", + }); + return { + "& .MuiBadge-badge": { + height: "auto", + padding: paddings[size] || paddings.xs, + fontSize: fontSizeValue, + fontWeight: fontWeightBold, + textTransform: "uppercase", + lineHeight: 1, + textAlign: "center", + whiteSpace: "nowrap", + verticalAlign: "baseline", + border: borderValue, + borderRadius: borderRadiusValue, + ...(indicator && indicatorStyles(size)), + ...(variant === "gradient" && gradientStyles(color)), + ...(variant === "contained" && containedStyles(color)), + ...(!children && !container && standAloneStyles()), + ...(container && containerStyles()), + }, + }; +}); + +const MDBadge = forwardRef(({ color, variant, size, circular, indicator, border, container, children, ...rest }, ref) => (jsx(MDBadgeRoot, { ...rest, ownerState: { color, variant, size, circular, indicator, border, container, children }, ref: ref, color: "default", children: children }))); +// declaring default props for MDBadge +MDBadge.defaultProps = { + color: "info", + variant: "gradient", + size: "sm", + circular: false, + indicator: false, + border: false, + container: false, + children: false, +}; + +function Breadcrumbs({ icon, title, route, light }) { + const routes = route.slice(0, -1); + return (jsxs(MDBox, { mr: { xs: 0, xl: 8 }, children: [jsxs(Breadcrumbs$1, { sx: { + "& .MuiBreadcrumbs-separator": { + color: ({ palette: { white, grey } }) => (light ? white.main : grey[600]), + }, + }, children: [jsx(Link$1, { to: "/", children: jsx(MDTypography, { component: "span", variant: "body2", color: light ? "white" : "dark", opacity: light ? 0.8 : 0.5, sx: { lineHeight: 0 }, children: jsx(Icon, { children: icon }) }) }), routes.map((el) => (jsx(Link$1, { to: `/${el}`, children: jsx(MDTypography, { component: "span", variant: "button", fontWeight: "regular", textTransform: "capitalize", color: light ? "white" : "dark", opacity: light ? 0.8 : 0.5, sx: { lineHeight: 0 }, children: el }) }, el))), jsx(MDTypography, { variant: "button", fontWeight: "regular", textTransform: "capitalize", color: light ? "white" : "dark", sx: { lineHeight: 0 }, children: title.replace("-", " ") })] }), jsx(MDTypography, { fontWeight: "bold", textTransform: "capitalize", variant: "h6", color: light ? "white" : "dark", noWrap: true, children: title.replace("-", " ") })] })); +} +// Declaring default props for Breadcrumbs +Breadcrumbs.defaultProps = { + light: false, +}; + +function menuItem(theme) { + const { palette, borders, transitions } = theme; + const { secondary, light, dark } = palette; + const { borderRadius } = borders; + return { + display: "flex", + alignItems: "center", + width: "100%", + color: secondary.main, + borderRadius: borderRadius.md, + transition: transitions.create("background-color", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + "& *": { + transition: "color 100ms linear", + }, + "&:not(:last-child)": { + mb: 1, + }, + "&:hover": { + backgroundColor: light.main, + "& *": { + color: dark.main, + }, + }, + }; +} + +const NotificationItem = forwardRef(({ icon, title, ...rest }, ref) => (jsx(MenuItem, { ...rest, ref: ref, sx: (theme) => menuItem(theme), children: jsxs(MDBox, { component: Link, py: 0.5, display: "flex", alignItems: "center", lineHeight: 1, children: [jsx(MDTypography, { variant: "body1", color: "secondary", lineHeight: 0.75, children: icon }), jsx(MDTypography, { variant: "button", fontWeight: "regular", sx: { ml: 1 }, children: title })] }) }))); + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function navbar(theme, ownerState) { + const { palette, boxShadows, functions, transitions, breakpoints, borders } = theme; + const { transparentNavbar, absolute, light, darkMode } = ownerState; + const { dark, white, text, transparent, background } = palette; + const { navbarBoxShadow } = boxShadows; + const { rgba, pxToRem } = functions; + const { borderRadius } = borders; + return { + boxShadow: transparentNavbar || absolute ? "none" : navbarBoxShadow, + backdropFilter: transparentNavbar || absolute ? "none" : `saturate(200%) blur(${pxToRem(30)})`, + backgroundColor: transparentNavbar || absolute + ? `${transparent.main} !important` + : rgba(darkMode ? background.default : white.main, 0.8), + color: () => { + let color; + if (light) { + color = white.main; + } + else if (transparentNavbar) { + color = text.main; + } + else { + color = dark.main; + } + return color; + }, + top: absolute ? 0 : pxToRem(12), + minHeight: pxToRem(75), + display: "grid", + alignItems: "center", + borderRadius: borderRadius.xl, + paddingTop: pxToRem(8), + paddingBottom: pxToRem(8), + paddingRight: absolute ? pxToRem(8) : 0, + paddingLeft: absolute ? pxToRem(16) : 0, + "& > *": { + transition: transitions.create("all", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + }, + "& .MuiToolbar-root": { + display: "flex", + justifyContent: "space-between", + alignItems: "center", + [breakpoints.up("sm")]: { + minHeight: "auto", + padding: `${pxToRem(4)} ${pxToRem(16)}`, + }, + }, + }; +} +const navbarContainer = ({ breakpoints }) => ({ + flexDirection: "column", + alignItems: "flex-start", + justifyContent: "space-between", + pt: 0.5, + pb: 0.5, + [breakpoints.up("md")]: { + flexDirection: "row", + alignItems: "center", + paddingTop: "0", + paddingBottom: "0", + }, +}); +const navbarRow = ({ breakpoints }, { isMini }) => ({ + display: "flex", + alignItems: "center", + justifyContent: "space-between", + width: "100%", + [breakpoints.up("md")]: { + justifyContent: isMini ? "space-between" : "stretch", + width: isMini ? "100%" : "max-content", + }, + [breakpoints.up("xl")]: { + justifyContent: "stretch !important", + width: "max-content !important", + }, +}); +const navbarIconButton = ({ typography: { size }, breakpoints }) => ({ + px: 1, + "& .material-icons, .material-icons-round": { + fontSize: `${size.xl} !important`, + }, + "& .MuiTypography-root": { + display: "none", + [breakpoints.up("sm")]: { + display: "inline-block", + lineHeight: 1.2, + ml: 0.5, + }, + }, +}); +const navbarDesktopMenu = ({ breakpoints }) => ({ + display: "none !important", + cursor: "pointer", + [breakpoints.up("xl")]: { + display: "inline-block !important", + }, +}); +const navbarMobileMenu = ({ breakpoints }) => ({ + display: "inline-block", + lineHeight: 0, + [breakpoints.up("xl")]: { + display: "none", + }, +}); + +function DashboardNavbar({ absolute, light, isMini }) { + const [navbarType, setNavbarType] = useState(); + const [controller, dispatch] = useMaterialUIController(); + const { miniSidenav, transparentNavbar, fixedNavbar, openConfigurator, darkMode } = controller; + const [openMenu, setOpenMenu] = useState(false); + const route = useLocation().pathname.split("/").slice(1); + useEffect(() => { + // Setting the navbar type + if (fixedNavbar) { + setNavbarType("sticky"); + } + else { + setNavbarType("static"); + } + // A function that sets the transparent state of the navbar. + function handleTransparentNavbar() { + setTransparentNavbar(dispatch, (fixedNavbar && window.scrollY === 0) || !fixedNavbar); + } + /** + The event listener that's calling the handleTransparentNavbar function when + scrolling the window. + */ + window.addEventListener("scroll", handleTransparentNavbar); + // Call the handleTransparentNavbar function to set the state with the initial value. + handleTransparentNavbar(); + // Remove event listener on cleanup + return () => window.removeEventListener("scroll", handleTransparentNavbar); + }, [dispatch, fixedNavbar]); + const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav); + const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator); + const handleOpenMenu = (event) => setOpenMenu(event.currentTarget); + const handleCloseMenu = () => setOpenMenu(false); + // Render the notifications menu + const renderMenu = () => (jsxs(Menu, { anchorEl: openMenu, anchorReference: null, anchorOrigin: { + vertical: "bottom", + horizontal: "left", + }, open: Boolean(openMenu), onClose: handleCloseMenu, sx: { mt: 2 }, children: [jsx(NotificationItem, { icon: jsx(Icon, { children: "email" }), title: "Check new messages" }), jsx(NotificationItem, { icon: jsx(Icon, { children: "podcasts" }), title: "Manage Podcast sessions" }), jsx(NotificationItem, { icon: jsx(Icon, { children: "shopping_cart" }), title: "Payment successfully completed" })] })); + // Styles for the navbar icons + const iconsStyle = ({ palette: { dark, white, text }, functions: { rgba }, }) => ({ + color: () => { + let colorValue = light || darkMode ? white.main : dark.main; + if (transparentNavbar && !light) { + colorValue = darkMode ? rgba(text.main, 0.6) : text.main; + } + return colorValue; + }, + }); + return (jsx(AppBar, { position: absolute ? "absolute" : navbarType, color: "inherit", sx: (theme) => navbar(theme, { transparentNavbar, absolute, light, darkMode }), children: jsxs(Toolbar, { sx: navbarContainer, children: [jsxs(MDBox, { color: "inherit", mb: { xs: 1, md: 0 }, sx: (theme) => navbarRow(theme, { isMini }), children: [jsx(Breadcrumbs, { icon: "home", title: route[route.length - 1], route: route, light: light }), jsx(IconButton, { sx: navbarDesktopMenu, onClick: handleMiniSidenav, size: "small", disableRipple: true, children: jsx(Icon, { fontSize: "medium", sx: iconsStyle, children: miniSidenav ? "menu_open" : "menu" }) })] }), isMini ? null : (jsxs(MDBox, { sx: (theme) => navbarRow(theme, { isMini }), children: [jsx(MDBox, { pr: 1, children: jsx(MDInput, { label: "Search here" }) }), jsxs(MDBox, { color: light ? "white" : "inherit", children: [jsx(Link$1, { to: "/authentication/sign-in/basic", children: jsx(IconButton, { sx: navbarIconButton, size: "small", disableRipple: true, children: jsx(Icon, { sx: iconsStyle, children: "account_circle" }) }) }), jsx(IconButton, { size: "small", disableRipple: true, color: "inherit", sx: navbarMobileMenu, onClick: handleMiniSidenav, children: jsx(Icon, { sx: iconsStyle, fontSize: "medium", children: miniSidenav ? "menu_open" : "menu" }) }), jsx(IconButton, { size: "small", disableRipple: true, color: "inherit", sx: navbarIconButton, onClick: handleConfiguratorOpen, children: jsx(Icon, { sx: iconsStyle, children: "settings" }) }), jsx(IconButton, { size: "small", color: "inherit", sx: navbarIconButton, onClick: handleOpenMenu, children: jsx(MDBadge, { badgeContent: 9, color: "error", size: "xs", circular: true, children: jsx(Icon, { sx: iconsStyle, children: "notifications" }) }) }), renderMenu()] })] }))] }) })); +} +// Declaring default props for DashboardNavbar +DashboardNavbar.defaultProps = { + absolute: false, + light: false, + isMini: false, +}; + +function Footer$1({ company, links }) { + const { href, name } = company; + const { size } = typography$1; + const renderLinks = () => links.map((link) => (jsx(MDBox, { component: "li", px: 2, lineHeight: 1, children: jsx(Link, { href: link.href, target: "_blank", children: jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: link.name }) }) }, link.name))); + return (jsxs(MDBox, { width: "100%", display: "flex", flexDirection: { xs: "column", lg: "row" }, justifyContent: "space-between", alignItems: "center", px: 1.5, children: [jsxs(MDBox, { display: "flex", justifyContent: "center", alignItems: "center", flexWrap: "wrap", color: "text", fontSize: size.sm, px: 1.5, children: ["\u00A9 ", new Date().getFullYear(), ", made with", jsx(MDBox, { fontSize: size.md, color: "text", mb: -0.5, mx: 0.25, children: jsx(Icon, { color: "inherit", fontSize: "inherit", children: "favorite" }) }), "by", jsx(Link, { href: href, target: "_blank", children: jsxs(MDTypography, { variant: "button", fontWeight: "medium", children: ["\u00A0", name, "\u00A0"] }) }), "for a better web."] }), jsx(MDBox, { component: "ul", sx: ({ breakpoints }) => ({ + display: "flex", + flexWrap: "wrap", + alignItems: "center", + justifyContent: "center", + listStyle: "none", + mt: 3, + mb: 0, + p: 0, + [breakpoints.up("lg")]: { + mt: 0, + }, + }), children: renderLinks() })] })); +} +// Declaring default props for Footer +Footer$1.defaultProps = { + company: { href: "https://www.creative-tim.com/", name: "Creative Tim" }, + links: [ + { href: "https://www.creative-tim.com/", name: "Creative Tim" }, + { href: "https://www.creative-tim.com/presentation", name: "About Us" }, + { href: "https://www.creative-tim.com/blog", name: "Blog" }, + { href: "https://www.creative-tim.com/license", name: "License" }, + ], +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function configs$4(labels, datasets) { + return { + data: { + labels, + datasets: [ + { + label: datasets.label, + tension: 0.4, + borderWidth: 0, + borderRadius: 4, + borderSkipped: false, + backgroundColor: "rgba(255, 255, 255, 0.8)", + data: datasets.data, + maxBarThickness: 6, + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + color: "rgba(255, 255, 255, .2)", + }, + ticks: { + suggestedMin: 0, + suggestedMax: 500, + beginAtZero: true, + padding: 10, + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + color: "#fff", + }, + }, + x: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + color: "rgba(255, 255, 255, .2)", + }, + ticks: { + display: true, + color: "#f8f9fa", + padding: 10, + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +function ReportsBarChart({ color, title, description, date, chart }) { + const { data, options } = configs$4(chart.labels || [], chart.datasets || {}); + return (jsx(Card, { sx: { height: "100%" }, children: jsxs(MDBox, { padding: "1rem", children: [useMemo(() => (jsx(MDBox, { variant: "gradient", bgColor: color, borderRadius: "lg", coloredShadow: color, py: 2, pr: 0.5, mt: -5, height: "12.5rem", children: jsx(Bar, { data: data, options: options }) })), [chart, color]), jsxs(MDBox, { pt: 3, pb: 1, px: 1, children: [jsx(MDTypography, { variant: "h6", textTransform: "capitalize", children: title }), jsx(MDTypography, { component: "div", variant: "button", color: "text", fontWeight: "light", children: description }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsx(MDTypography, { variant: "button", color: "text", lineHeight: 1, sx: { mt: 0.15, mr: 0.5 }, children: jsx(Icon, { children: "schedule" }) }), jsx(MDTypography, { variant: "button", color: "text", fontWeight: "light", children: date })] })] })] }) })); +} +// Setting default values for the props of ReportsBarChart +ReportsBarChart.defaultProps = { + color: "dark", + description: "", +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function configs$3(labels, datasets) { + return { + data: { + labels, + datasets: [ + { + label: datasets.label, + tension: 0, + pointRadius: 5, + pointBorderColor: "transparent", + pointBackgroundColor: "rgba(255, 255, 255, .8)", + borderColor: "rgba(255, 255, 255, .8)", + borderWidth: 4, + backgroundColor: "transparent", + fill: true, + data: datasets.data, + maxBarThickness: 6, + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + color: "rgba(255, 255, 255, .2)", + }, + ticks: { + display: true, + color: "#f8f9fa", + padding: 10, + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + x: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: false, + drawTicks: false, + borderDash: [5, 5], + }, + ticks: { + display: true, + color: "#f8f9fa", + padding: 10, + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +function ReportsLineChart({ color, title, description, date, chart }) { + const { data, options } = configs$3(chart.labels || [], chart.datasets || {}); + return (jsx(Card, { sx: { height: "100%" }, children: jsxs(MDBox, { padding: "1rem", children: [useMemo(() => (jsx(MDBox, { variant: "gradient", bgColor: color, borderRadius: "lg", coloredShadow: color, py: 2, pr: 0.5, mt: -5, height: "12.5rem", children: jsx(Line, { data: data, options: options }) })), [chart, color]), jsxs(MDBox, { pt: 3, pb: 1, px: 1, children: [jsx(MDTypography, { variant: "h6", textTransform: "capitalize", children: title }), jsx(MDTypography, { component: "div", variant: "button", color: "text", fontWeight: "light", children: description }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsx(MDTypography, { variant: "button", color: "text", lineHeight: 1, sx: { mt: 0.15, mr: 0.5 }, children: jsx(Icon, { children: "schedule" }) }), jsx(MDTypography, { variant: "button", color: "text", fontWeight: "light", children: date })] })] })] }) })); +} +// Declaring default props for ReportsLineChart +ReportsLineChart.defaultProps = { + color: "dark", + description: "", +}; + +function ComplexStatisticsCard({ color, title, count, percentage, icon }) { + return (jsxs(Card, { children: [jsxs(MDBox, { display: "flex", justifyContent: "space-between", pt: 1, px: 2, children: [jsx(MDBox, { variant: "gradient", bgColor: color, color: color === "light" ? "dark" : "white", coloredShadow: color, borderRadius: "xl", display: "flex", justifyContent: "center", alignItems: "center", width: "4rem", height: "4rem", mt: -3, children: jsx(Icon, { fontSize: "medium", color: "inherit", children: icon }) }), jsxs(MDBox, { textAlign: "right", lineHeight: 1.25, children: [jsx(MDTypography, { variant: "button", fontWeight: "light", color: "text", children: title }), jsx(MDTypography, { variant: "h4", children: count })] })] }), jsx(Divider, {}), jsx(MDBox, { pb: 2, px: 2, children: jsxs(MDTypography, { component: "p", variant: "button", color: "text", display: "flex", children: [jsx(MDTypography, { component: "span", variant: "button", fontWeight: "bold", color: percentage.color, children: percentage.amount }), "\u00A0", percentage.label] }) })] })); +} +// Declaring defualt props for ComplexStatisticsCard +ComplexStatisticsCard.defaultProps = { + color: "info", + percentage: { + color: "success", + text: "", + label: "", + }, +}; + +function BookingCard({ image, title, description, price, location, action }) { + return (jsxs(Card, { sx: { + "&:hover .card-header": { + transform: action && "translate3d(0, -50px, 0)", + }, + }, children: [jsxs(MDBox, { position: "relative", borderRadius: "lg", mt: -3, mx: 2, className: "card-header", sx: { transition: "transform 300ms cubic-bezier(0.34, 1.61, 0.7, 1)" }, children: [jsx(MDBox, { component: "img", src: image, alt: title, borderRadius: "lg", shadow: "md", width: "100%", height: "100%", position: "relative", zIndex: 1 }), jsx(MDBox, { borderRadius: "lg", shadow: "md", width: "100%", height: "100%", position: "absolute", left: 0, top: "0", sx: { + backgroundImage: `url(${image})`, + transform: "scale(0.94)", + filter: "blur(12px)", + backgroundSize: "cover", + } })] }), jsxs(MDBox, { textAlign: "center", pt: 3, px: 3, children: [jsx(MDBox, { display: "flex", justifyContent: "center", alignItems: "center", mt: action ? -8 : -4.25, children: action }), jsx(MDTypography, { variant: "h5", fontWeight: "regular", sx: { mt: 4 }, children: title }), jsx(MDTypography, { variant: "body2", color: "text", sx: { mt: 1.5, mb: 1 }, children: description })] }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", pt: 0.5, pb: 3, px: 3, lineHeight: 1, children: [jsx(MDTypography, { variant: "body2", fontWeight: "regular", color: "text", children: price }), jsxs(MDBox, { color: "text", display: "flex", alignItems: "center", children: [jsx(Icon, { color: "inherit", sx: { m: 0.5 }, children: "place" }), jsx(MDTypography, { variant: "button", fontWeight: "light", color: "text", children: location })] })] })] })); +} +// Declaring default props for BookingCard +BookingCard.defaultProps = { + action: false, +}; + +function SalesTableCell({ title, content, image, noBorder, ...rest }) { + let template; + if (image) { + template = (jsx(TableCell$1, { ...rest, align: "left", width: "30%", sx: { border: noBorder && 0 }, children: jsxs(MDBox, { display: "flex", alignItems: "center", width: "max-content", children: [jsx(MDBox, { component: "img", src: image, alt: content.toString(), width: "1.5rem", height: "auto" }), " ", jsxs(MDBox, { display: "flex", flexDirection: "column", ml: 3, children: [jsxs(MDTypography, { variant: "caption", color: "text", fontWeight: "medium", textTransform: "capitalize", children: [title, ":"] }), jsx(MDTypography, { variant: "button", fontWeight: "regular", textTransform: "capitalize", children: content })] })] }) })); + } + else { + template = (jsx(TableCell$1, { ...rest, align: "center", sx: { border: noBorder && 0 }, children: jsxs(MDBox, { display: "flex", flexDirection: "column", children: [jsxs(MDTypography, { variant: "caption", color: "text", fontWeight: "medium", textTransform: "capitalize", children: [title, ":"] }), jsx(MDTypography, { variant: "button", fontWeight: "regular", textTransform: "capitalize", children: content })] }) })); + } + return template; +} +// Declaring default props for SalesTableCell +SalesTableCell.defaultProps = { + image: "", + noBorder: false, +}; + +function SalesTable({ title, rows, shadow }) { + const renderTableCells = rows.map((row, key) => { + const tableRows = []; + const rowKey = `row-${key}`; + Object.entries(row).map(([cellTitle, cellContent]) => Array.isArray(cellContent) + ? tableRows.push(jsx(SalesTableCell, { title: cellTitle, content: cellContent[1], image: cellContent[0], noBorder: key === rows.length - 1 }, cellContent[1])) + : tableRows.push(jsx(SalesTableCell, { title: cellTitle, content: cellContent, noBorder: key === rows.length - 1 }, cellContent))); + return jsx(TableRow, { children: tableRows }, rowKey); + }); + return (jsx(TableContainer, { sx: { height: "100%", boxShadow: !shadow && "none" }, children: jsxs(Table, { children: [title ? (jsx(TableHead, { children: jsx(MDBox, { component: "tr", width: "max-content", display: "block", mb: 1.5, children: jsx(MDTypography, { variant: "h6", component: "td", children: title }) }) })) : null, jsx(TableBody, { children: useMemo(() => renderTableCells, [rows]) })] }) })); +} +// Declaring default props for SalesTable +SalesTable.defaultProps = { + title: "", + rows: [{}], + shadow: true, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const salesTableData$1 = [ + { + country: [US, "united state"], + sales: 2500, + value: "$230,900", + bounce: "29.9%", + }, + { + country: [DE, "germany"], + sales: "3.900", + value: "$440,000", + bounce: "40.22%", + }, + { + country: [GB, "great britain"], + sales: "1.400", + value: "$190,700", + bounce: "23.44%", + }, + { country: [BR, "brasil"], sales: 562, value: "$143,960", bounce: "32.14%" }, +]; + +function SalesByCountry() { + return (jsxs(Card, { sx: { width: "100%" }, children: [jsxs(MDBox, { display: "flex", children: [jsx(MDBox, { display: "flex", justifyContent: "center", alignItems: "center", width: "4rem", height: "4rem", variant: "gradient", bgColor: "success", color: "white", shadow: "md", borderRadius: "xl", ml: 3, mt: -2, children: jsx(Icon, { fontSize: "medium", color: "inherit", children: "language" }) }), jsx(MDTypography, { variant: "h6", sx: { mt: 2, mb: 1, ml: 2 }, children: "Sales by Country" })] }), jsx(MDBox, { p: 2, children: jsxs(Grid, { container: true, children: [jsx(Grid, { item: true, xs: 12, md: 7, lg: 6, children: jsx(SalesTable, { rows: salesTableData$1, shadow: false }) }), jsx(Grid, { item: true, xs: 12, md: 5, lg: 6, sx: { mt: { xs: 5, lg: 0 } }, children: jsx(VectorMap, { map: worldMerc, zoomOnScroll: false, zoomButtons: false, markersSelectable: true, backgroundColor: "transparent", selectedMarkers: ["1", "3"], markers: [ + { + name: "USA", + latLng: [40.71296415909766, -74.00437720027804], + }, + { + name: "Germany", + latLng: [51.17661451970939, 10.97947735117339], + }, + { + name: "Brazil", + latLng: [-7.596735421549542, -54.781694323779185], + }, + { + name: "Russia", + latLng: [62.318222797104276, 89.81564777631716], + }, + { + name: "China", + latLng: [22.320178999475512, 114.17161225541399], + }, + ], regionStyle: { + initial: { + fill: "#dee2e7", + "fill-opacity": 1, + stroke: "none", + "stroke-width": 0, + "stroke-opacity": 0, + }, + }, markerStyle: { + initial: { + fill: "#e91e63", + stroke: "#ffffff", + "stroke-width": 5, + "stroke-opacity": 0.5, + r: 7, + }, + hover: { + fill: "E91E63", + stroke: "#ffffff", + "stroke-width": 5, + "stroke-opacity": 0.5, + }, + selected: { + fill: "E91E63", + stroke: "#ffffff", + "stroke-width": 5, + "stroke-opacity": 0.5, + }, + }, style: { + marginTop: "-1.5rem", + }, onRegionTipShow: () => false, onMarkerTipShow: () => false }) })] }) })] })); +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const reportsBarChartData = { + labels: ["M", "T", "W", "T", "F", "S", "S"], + datasets: { label: "Sales", data: [50, 20, 10, 22, 50, 10, 40] }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const reportsLineChartData = { + sales: { + labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], + datasets: { label: "Mobile apps", data: [50, 40, 300, 320, 500, 350, 200, 230, 500] }, + }, + tasks: { + labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], + datasets: { label: "Desktop apps", data: [50, 40, 300, 220, 500, 250, 400, 230, 500] }, + }, +}; + +function Analytics() { + const { sales, tasks } = reportsLineChartData; + // Action buttons for the BookingCard + const actionButtons = (jsxs(Fragment, { children: [jsx(Tooltip, { title: "Refresh", placement: "bottom", children: jsx(MDTypography, { variant: "body1", color: "primary", lineHeight: 1, sx: { cursor: "pointer", mx: 3 }, children: jsx(Icon, { color: "inherit", children: "refresh" }) }) }), jsx(Tooltip, { title: "Edit", placement: "bottom", children: jsx(MDTypography, { variant: "body1", color: "info", lineHeight: 1, sx: { cursor: "pointer", mx: 3 }, children: jsx(Icon, { color: "inherit", children: "edit" }) }) })] })); + return (jsxs(DashboardLayout, { children: [jsx(DashboardNavbar, {}), jsxs(MDBox, { py: 3, children: [jsx(Grid, { container: true, children: jsx(SalesByCountry, {}) }), jsx(MDBox, { mt: 6, children: jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, md: 6, lg: 4, children: jsx(MDBox, { mb: 3, children: jsx(ReportsBarChart, { color: "info", title: "website views", description: "Last Campaign Performance", date: "campaign sent 2 days ago", chart: reportsBarChartData }) }) }), jsx(Grid, { item: true, xs: 12, md: 6, lg: 4, children: jsx(MDBox, { mb: 3, children: jsx(ReportsLineChart, { color: "success", title: "daily sales", description: jsxs(Fragment, { children: ["(", jsx("strong", { children: "+15%" }), ") increase in today sales."] }), date: "updated 4 min ago", chart: sales }) }) }), jsx(Grid, { item: true, xs: 12, md: 6, lg: 4, children: jsx(MDBox, { mb: 3, children: jsx(ReportsLineChart, { color: "dark", title: "completed tasks", description: "Last Campaign Performance", date: "just updated", chart: tasks }) }) })] }) }), jsx(MDBox, { mt: 1.5, children: jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, md: 6, lg: 3, children: jsx(MDBox, { mb: 1.5, children: jsx(ComplexStatisticsCard, { color: "dark", icon: "weekend", title: "Bookings", count: 281, percentage: { + color: "success", + amount: "+55%", + label: "than lask week", + } }) }) }), jsx(Grid, { item: true, xs: 12, md: 6, lg: 3, children: jsx(MDBox, { mb: 1.5, children: jsx(ComplexStatisticsCard, { icon: "leaderboard", title: "Today's Users", count: "2,300", percentage: { + color: "success", + amount: "+3%", + label: "than last month", + } }) }) }), jsx(Grid, { item: true, xs: 12, md: 6, lg: 3, children: jsx(MDBox, { mb: 1.5, children: jsx(ComplexStatisticsCard, { color: "success", icon: "store", title: "Revenue", count: "34k", percentage: { + color: "success", + amount: "+1%", + label: "than yesterday", + } }) }) }), jsx(Grid, { item: true, xs: 12, md: 6, lg: 3, children: jsx(MDBox, { mb: 1.5, children: jsx(ComplexStatisticsCard, { color: "primary", icon: "person_add", title: "Followers", count: "+91", percentage: { + color: "success", + amount: "", + label: "Just updated", + } }) }) })] }) }), jsx(MDBox, { mt: 2, children: jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, md: 6, lg: 4, children: jsx(MDBox, { mt: 3, children: jsx(BookingCard, { image: booking1, title: "Cozy 5 Stars Apartment", description: 'The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona.', price: "$899/night", location: "Barcelona, Spain", action: actionButtons }) }) }), jsx(Grid, { item: true, xs: 12, md: 6, lg: 4, children: jsx(MDBox, { mt: 3, children: jsx(BookingCard, { image: booking2, title: "Office Studio", description: 'The place is close to Metro Station and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the night life in London, UK.', price: "$1.119/night", location: "London, UK", action: actionButtons }) }) }), jsx(Grid, { item: true, xs: 12, md: 6, lg: 4, children: jsx(MDBox, { mt: 3, children: jsx(BookingCard, { image: booking3, title: "Beautiful Castle", description: 'The place is close to Metro Station and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Milan.', price: "$459/night", location: "Milan, Italy", action: actionButtons }) }) })] }) })] }), jsx(Footer$1, {})] })); +} + +const MDBadgeDot = forwardRef(({ variant, color, size, badgeContent, font = {}, ...rest }, ref) => { + let finalSize; + let fontSize; + let padding; + if (size === "sm") { + finalSize = "0.5rem"; + fontSize = "caption"; + padding = "0.45em 0.775em"; + } + else if (size === "lg") { + finalSize = "0.625rem"; + fontSize = "body2"; + padding = "0.85em 1.375em"; + } + else if (size === "md") { + finalSize = "0.5rem"; + fontSize = "button"; + padding = "0.65em 1em"; + } + else { + finalSize = "0.375rem"; + fontSize = "caption"; + padding = "0.45em 0.775em"; + } + const validColors = [ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]; + const validColorIndex = validColors.findIndex((el) => el === color); + return (jsxs(MDBox, { ref: ref, display: "flex", alignItems: "center", p: padding, ...rest, children: [jsx(MDBox, { component: "i", display: "inline-block", width: finalSize, height: finalSize, borderRadius: "50%", bgColor: validColors[validColorIndex], variant: variant, mr: 1 }), jsx(MDTypography, { variant: fontSize, fontWeight: font.weight ? font.weight : "regular", color: font.color ? font.color : "dark", sx: { lineHeight: 0 }, children: badgeContent })] })); +}); +// Declaring default props for MDBadgeDot +MDBadgeDot.defaultProps = { + variant: "contained", + color: "info", + size: "xs", + font: {}, +}; + +function DefaultStatisticsCard({ title, count, percentage, dropdown }) { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + return (jsx(Card, { children: jsx(MDBox, { p: 2, children: jsxs(Grid, { container: true, children: [jsxs(Grid, { item: true, xs: 7, children: [jsx(MDBox, { mb: 0.5, lineHeight: 1, children: jsx(MDTypography, { variant: "button", fontWeight: "medium", color: "text", textTransform: "capitalize", children: title }) }), jsxs(MDBox, { lineHeight: 1, children: [jsx(MDTypography, { variant: "h5", fontWeight: "bold", children: count }), jsxs(MDTypography, { variant: "button", fontWeight: "bold", color: percentage.color, children: [percentage.value, "\u00A0", jsx(MDTypography, { variant: "button", fontWeight: "regular", color: darkMode ? "text" : "secondary", children: percentage.label })] })] })] }), jsx(Grid, { item: true, xs: 5, children: dropdown && (jsxs(MDBox, { width: "100%", textAlign: "right", lineHeight: 1, children: [jsx(MDTypography, { variant: "caption", color: "secondary", fontWeight: "regular", sx: { cursor: "pointer" }, onClick: dropdown.action, children: dropdown.value }), dropdown.menu] })) })] }) }) })); +} +// Setting default values for the props of DefaultStatisticsCard +DefaultStatisticsCard.defaultProps = { + percentage: { + color: "success", + value: "", + label: "", + }, + dropdown: false, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function configs$2(labels, datasets) { + return { + data: { + labels, + datasets: [...datasets], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + color: "#c1c4ce5c", + }, + ticks: { + display: true, + padding: 10, + color: "#9ca2b7", + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + x: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: true, + borderDash: [5, 5], + color: "#c1c4ce5c", + }, + ticks: { + display: true, + color: "#9ca2b7", + padding: 10, + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +function DefaultLineChart({ icon, title, description, height, chart }) { + const chartDatasets = chart.datasets + ? chart.datasets.map((dataset) => ({ + ...dataset, + tension: 0, + pointRadius: 3, + borderWidth: 4, + backgroundColor: "transparent", + fill: true, + pointBackgroundColor: colors$1[dataset.color] + ? colors$1[dataset.color || "dark"].main + : colors$1.dark.main, + borderColor: colors$1[dataset.color] + ? colors$1[dataset.color || "dark"].main + : colors$1.dark.main, + maxBarThickness: 6, + })) + : []; + const { data, options } = configs$2(chart.labels || [], chartDatasets); + const renderChart = (jsxs(MDBox, { py: 2, pr: 2, pl: icon.component ? 1 : 2, children: [title || description ? (jsxs(MDBox, { display: "flex", px: description ? 1 : 0, pt: description ? 1 : 0, children: [icon.component && (jsx(MDBox, { width: "4rem", height: "4rem", bgColor: icon.color || "info", variant: "gradient", coloredShadow: icon.color || "info", borderRadius: "xl", display: "flex", justifyContent: "center", alignItems: "center", color: "white", mt: -5, mr: 2, children: jsx(Icon, { fontSize: "medium", children: icon.component }) })), jsxs(MDBox, { mt: icon.component ? -2 : 0, children: [title && jsx(MDTypography, { variant: "h6", children: title }), jsx(MDBox, { mb: 2, children: jsx(MDTypography, { component: "div", variant: "button", color: "text", children: description }) })] })] })) : null, useMemo(() => (jsx(MDBox, { height: height, children: jsx(Line, { data: data, options: options }) })), [chart, height])] })); + return title || description ? jsx(Card, { children: renderChart }) : renderChart; +} +// Declaring default props DefaultLineChart +DefaultLineChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", + height: "19.125rem", +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function configs$1(labels, datasets) { + return { + data: { + labels, + datasets: [...datasets], + }, + options: { + indexAxis: "y", + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + color: "#c1c4ce5c", + }, + ticks: { + display: true, + padding: 10, + color: "#9ca2b7", + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + x: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: true, + drawTicks: true, + color: "#c1c4ce5c", + }, + ticks: { + display: true, + color: "#9ca2b7", + padding: 10, + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +function HorizontalBarChart({ icon, title, description, height, chart }) { + const chartDatasets = chart.datasets + ? chart.datasets.map((dataset) => ({ + ...dataset, + weight: 5, + borderWidth: 0, + borderRadius: 4, + backgroundColor: colors$1[dataset.color] + ? colors$1[dataset.color || "dark"].main + : colors$1.dark.main, + fill: false, + maxBarThickness: 35, + })) + : []; + const { data, options } = configs$1(chart.labels || [], chartDatasets); + const renderChart = (jsxs(MDBox, { py: 2, pr: 2, pl: icon.component ? 1 : 2, children: [title || description ? (jsxs(MDBox, { display: "flex", px: description ? 1 : 0, pt: description ? 1 : 0, children: [icon.component && (jsx(MDBox, { width: "4rem", height: "4rem", bgColor: icon.color || "info", variant: "gradient", coloredShadow: icon.color || "info", borderRadius: "xl", display: "flex", justifyContent: "center", alignItems: "center", color: "white", mt: -5, mr: 2, children: jsx(Icon, { fontSize: "medium", children: icon.component }) })), jsxs(MDBox, { mt: icon.component ? -2 : 0, children: [title && jsx(MDTypography, { variant: "h6", children: title }), jsx(MDBox, { mb: 2, children: jsx(MDTypography, { component: "div", variant: "button", color: "text", children: description }) })] })] })) : null, useMemo(() => (jsx(MDBox, { height: height, children: jsx(Bar, { data: data, options: options }) })), [chart, height])] })); + return title || description ? jsx(Card, { children: renderChart }) : renderChart; +} +// Declaring default props HorizontalBarChart +HorizontalBarChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", + height: "19.125rem", +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +// @ts-ignore +var MDPaginationItemRoot = styled(MDButton)(({ theme, ownerState }) => { + const { borders, functions, typography, palette } = theme; + const { variant, paginationSize, active } = ownerState; + const { borderColor } = borders; + const { pxToRem } = functions; + const { fontWeightRegular, size: fontSize } = typography; + const { light } = palette; + // width, height, minWidth and minHeight values + let sizeValue = pxToRem(36); + if (paginationSize === "small") { + sizeValue = pxToRem(30); + } + else if (paginationSize === "large") { + sizeValue = pxToRem(46); + } + return { + borderColor, + margin: `0 ${pxToRem(2)}`, + pointerEvents: active ? "none" : "auto", + fontWeight: fontWeightRegular, + fontSize: fontSize.sm, + width: sizeValue, + minWidth: sizeValue, + height: sizeValue, + minHeight: sizeValue, + "&:hover, &:focus, &:active": { + transform: "none", + boxShadow: (variant !== "gradient" || variant !== "contained") && "none !important", + opacity: "1 !important", + }, + "&:hover": { + backgroundColor: light.main, + borderColor, + }, + }; +}); + +// The Pagination main context +const Context = createContext(null); +const MDPagination = forwardRef(({ item, variant, color, size, active, children, ...rest }, ref) => { + const context = useContext(Context); + const paginationSize = context ? context.size : undefined; + const providerValue = useMemo(() => ({ + variant, + color, + size, + }), [variant, color, size]); + return (jsx(Context.Provider, { value: providerValue, children: item ? (jsx(MDPaginationItemRoot, { ...rest, ref: ref, variant: active ? context.variant : "outlined", color: active ? context.color : "secondary", iconOnly: true, circular: true, ownerState: { variant, active, paginationSize }, children: children })) : (jsx(MDBox, { display: "flex", justifyContent: "flex-end", alignItems: "center", sx: { listStyle: "none" }, children: children })) })); +}); +// Declaring default props for MDPagination +MDPagination.defaultProps = { + item: false, + variant: "gradient", + color: "info", + size: "medium", + active: false, +}; + +function DataTableHeadCell({ width, children, sorted, align, ...rest }) { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + return (jsx(MDBox, { component: "th", width: width, py: 1.5, px: 3, sx: ({ palette: { light }, borders: { borderWidth } }) => ({ + borderBottom: `${borderWidth[1]} solid ${light.main}`, + }), children: jsxs(MDBox, { ...rest, position: "relative", textAlign: align, color: darkMode ? "white" : "secondary", opacity: 0.7, sx: ({ typography: { size, fontWeightBold } }) => ({ + fontSize: size.xxs, + fontWeight: fontWeightBold, + textTransform: "uppercase", + cursor: sorted && "pointer", + userSelect: sorted && "none", + }), children: [children, sorted && (jsxs(MDBox, { position: "absolute", top: 0, right: align !== "right" ? "16px" : 0, left: align === "right" ? "-5px" : "unset", sx: ({ typography: { size } }) => ({ + fontSize: size.lg, + }), children: [jsx(MDBox, { position: "absolute", top: -6, color: sorted === "asce" ? "text" : "secondary", opacity: sorted === "asce" ? 1 : 0.5, children: jsx(Icon, { children: "arrow_drop_up" }) }), jsx(MDBox, { position: "absolute", top: 0, color: sorted === "desc" ? "text" : "secondary", opacity: sorted === "desc" ? 1 : 0.5, children: jsx(Icon, { children: "arrow_drop_down" }) })] }))] }) })); +} +// Declaring default props for DataTableHeadCell +DataTableHeadCell.defaultProps = { + width: "auto", + sorted: "none", + align: "left", +}; + +function DataTableBodyCell({ noBorder, align, children }) { + return (jsx(MDBox, { component: "td", textAlign: align, py: 1.5, px: 3, sx: ({ palette: { light }, typography: { size }, borders: { borderWidth } }) => ({ + fontSize: size.sm, + borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${light.main}`, + }), children: jsx(MDBox, { display: "inline-block", width: "max-content", color: "text", sx: { verticalAlign: "middle" }, children: children }) })); +} +// Declaring default props for DataTableBodyCell +DataTableBodyCell.defaultProps = { + noBorder: false, + align: "left", +}; + +function DataTable({ entriesPerPage, canSearch, showTotalEntries, table, pagination, isSorted, noEndBorder, }) { + let defaultValue; + let entries; + if (entriesPerPage) { + defaultValue = entriesPerPage.defaultValue ? entriesPerPage.defaultValue : "10"; + entries = entriesPerPage.entries ? entriesPerPage.entries : ["10", "25", "50", "100"]; + } + const columns = useMemo(() => table.columns, [table]); + const data = useMemo(() => table.rows, [table]); + const tableInstance = useTable({ columns, data, initialState: { pageIndex: 0 } }, useGlobalFilter, useSortBy, usePagination); + const { getTableProps, getTableBodyProps, headerGroups, prepareRow, rows, page, pageOptions, canPreviousPage, canNextPage, gotoPage, nextPage, previousPage, setPageSize, setGlobalFilter, state: { pageIndex, pageSize, globalFilter }, } = tableInstance; + // Set the default value for the entries per page when component mounts + useEffect(() => setPageSize(defaultValue || 10), [defaultValue]); + // Set the entries per page value based on the select value + const setEntriesPerPage = (value) => setPageSize(value); + // Render the paginations + const renderPagination = pageOptions.map((option) => (jsx(MDPagination, { item: true, onClick: () => gotoPage(Number(option)), active: pageIndex === option, children: option + 1 }, option))); + // Handler for the input to set the pagination index + const handleInputPagination = ({ target: { value } }) => value > pageOptions.length || value < 0 ? gotoPage(0) : gotoPage(Number(value)); + // Customized page options starting from 1 + const customizedPageOptions = pageOptions.map((option) => option + 1); + // Setting value for the pagination input + const handleInputPaginationValue = ({ target: value }) => gotoPage(Number(value.value - 1)); + // Search input value state + const [search, setSearch] = useState(globalFilter); + // Search input state handle + const onSearchChange = useAsyncDebounce((value) => { + setGlobalFilter(value || undefined); + }, 100); + // A function that sets the sorted value for the table + const setSortedValue = (column) => { + let sortedValue; + if (isSorted && column.isSorted) { + sortedValue = column.isSortedDesc ? "desc" : "asce"; + } + else if (isSorted) { + sortedValue = "none"; + } + else { + sortedValue = false; + } + return sortedValue; + }; + // Setting the entries starting point + const entriesStart = pageIndex === 0 ? pageIndex + 1 : pageIndex * pageSize + 1; + // Setting the entries ending point + let entriesEnd; + if (pageIndex === 0) { + entriesEnd = pageSize; + } + else if (pageIndex === pageOptions.length - 1) { + entriesEnd = rows.length; + } + else { + entriesEnd = pageSize * (pageIndex + 1); + } + return (jsxs(TableContainer, { sx: { boxShadow: "none" }, children: [entriesPerPage || canSearch ? (jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", p: 3, children: [entriesPerPage && (jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsx(Autocomplete, { disableClearable: true, value: pageSize.toString(), options: entries, onChange: (event, newValue) => { + setEntriesPerPage(parseInt(newValue, 10)); + }, size: "small", sx: { width: "5rem" }, renderInput: (params) => jsx(MDInput, { ...params }) }), jsx(MDTypography, { variant: "caption", color: "secondary", children: "\u00A0\u00A0entries per page" })] })), canSearch && (jsx(MDBox, { width: "12rem", ml: "auto", children: jsx(MDInput, { placeholder: "Search...", value: search, size: "small", fullWidth: true, onChange: ({ currentTarget }) => { + setSearch(search); + onSearchChange(currentTarget.value); + } }) }))] })) : null, jsxs(Table, { ...getTableProps(), children: [jsx(MDBox, { component: "thead", children: headerGroups.map((headerGroup) => (jsx(TableRow, { ...headerGroup.getHeaderGroupProps(), children: headerGroup.headers.map((column) => (jsx(DataTableHeadCell, { ...column.getHeaderProps(isSorted && column.getSortByToggleProps()), width: column.width ? column.width : "auto", align: column.align ? column.align : "left", sorted: setSortedValue(column), children: column.render("Header") }))) }))) }), jsx(TableBody, { ...getTableBodyProps(), children: page.map((row, key) => { + prepareRow(row); + return (jsx(TableRow, { ...row.getRowProps(), children: row.cells.map((cell) => (jsx(DataTableBodyCell, { noBorder: noEndBorder && rows.length - 1 === key, align: cell.column.align ? cell.column.align : "left", ...cell.getCellProps(), children: cell.render("Cell") }))) })); + }) })] }), jsxs(MDBox, { display: "flex", flexDirection: { xs: "column", sm: "row" }, justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, p: !showTotalEntries && pageOptions.length === 1 ? 0 : 3, children: [showTotalEntries && (jsx(MDBox, { mb: { xs: 3, sm: 0 }, children: jsxs(MDTypography, { variant: "button", color: "secondary", fontWeight: "regular", children: ["Showing ", entriesStart, " to ", entriesEnd, " of ", rows.length, " entries"] }) })), pageOptions.length > 1 && (jsxs(MDPagination, { variant: pagination.variant ? pagination.variant : "gradient", color: pagination.color ? pagination.color : "info", children: [canPreviousPage && (jsx(MDPagination, { item: true, onClick: () => previousPage(), children: jsx(Icon, { sx: { fontWeight: "bold" }, children: "chevron_left" }) })), renderPagination.length > 6 ? (jsx(MDBox, { width: "5rem", mx: 1, children: jsx(MDInput, { inputProps: { type: "number", min: 1, max: customizedPageOptions.length }, value: customizedPageOptions[pageIndex], onChange: (event) => { + handleInputPagination(event); + handleInputPaginationValue(event); + } }) })) : (renderPagination), canNextPage && (jsx(MDPagination, { item: true, onClick: () => nextPage(), children: jsx(Icon, { sx: { fontWeight: "bold" }, children: "chevron_right" }) }))] }))] })] })); +} +// Declaring default props for DataTable +DataTable.defaultProps = { + entriesPerPage: { defaultValue: 10, entries: ["5", "10", "15", "20", "25"] }, + canSearch: false, + showTotalEntries: true, + pagination: { variant: "gradient", color: "info" }, + isSorted: true, + noEndBorder: false, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { gradients, dark } = colors$1; +function configs(labels, datasets) { + const backgroundColors = []; + if (datasets.backgroundColors) { + datasets.backgroundColors.forEach((color) => gradients[color] + ? backgroundColors.push(gradients[color].state) + : backgroundColors.push(dark.main)); + } + else { + backgroundColors.push(dark.main); + } + return { + data: { + labels, + datasets: [ + { + label: datasets.label, + weight: 9, + cutout: 0, + tension: 0.9, + pointRadius: 2, + borderWidth: 2, + backgroundColor: backgroundColors, + fill: false, + data: datasets.data, + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: false, + drawTicks: false, + }, + ticks: { + display: false, + }, + }, + x: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: false, + drawTicks: false, + }, + ticks: { + display: false, + }, + }, + }, + }, + }; +} + +function PieChart({ icon, title, description, height, chart }) { + const { data, options } = configs(chart.labels || [], chart.datasets || {}); + const renderChart = (jsxs(MDBox, { py: 2, pr: 2, pl: icon.component ? 1 : 2, children: [title || description ? (jsxs(MDBox, { display: "flex", px: description ? 1 : 0, pt: description ? 1 : 0, children: [icon.component && (jsx(MDBox, { width: "4rem", height: "4rem", bgColor: icon.color || "info", variant: "gradient", coloredShadow: icon.color || "info", borderRadius: "xl", display: "flex", justifyContent: "center", alignItems: "center", color: "white", mt: -5, mr: 2, children: jsx(Icon, { fontSize: "medium", children: icon.component }) })), jsxs(MDBox, { mt: icon.component ? -2 : 0, children: [title && jsx(MDTypography, { variant: "h6", children: title }), jsx(MDBox, { mb: 2, children: jsx(MDTypography, { component: "div", variant: "button", color: "text", children: description }) })] })] })) : null, useMemo(() => (jsx(MDBox, { height: height, children: jsx(Pie, { data: data, options: options }) })), [chart, height])] })); + return title || description ? jsx(Card, { children: renderChart }) : renderChart; +} +// Declaring default props for PieChart +PieChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", + height: "19.125rem", +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const channelChartData = { + labels: ["Facebook", "Direct", "Organic", "Referral"], + datasets: { + label: "Projects", + backgroundColors: ["info", "primary", "dark", "secondary", "primary"], + data: [15, 20, 12, 60], + }, +}; + +function ChannelsChart() { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + return (jsxs(Card, { sx: { height: "100%" }, children: [jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", pt: 2, px: 2, children: [jsx(MDTypography, { variant: "h6", children: "Channels" }), jsx(Tooltip, { title: "See traffic channels", placement: "bottom", arrow: true, children: jsx(MDButton, { variant: "outlined", color: "secondary", size: "small", circular: true, iconOnly: true, children: jsx(Icon, { children: "priority_high" }) }) })] }), jsx(MDBox, { mt: 3, children: jsxs(Grid, { container: true, alignItems: "center", children: [jsx(Grid, { item: true, xs: 7, children: jsx(PieChart, { chart: channelChartData, height: "12.5rem" }) }), jsx(Grid, { item: true, xs: 5, children: jsxs(MDBox, { pr: 1, children: [jsx(MDBox, { mb: 1, children: jsx(MDBadgeDot, { color: "info", size: "sm", badgeContent: "Facebook" }) }), jsx(MDBox, { mb: 1, children: jsx(MDBadgeDot, { color: "primary", size: "sm", badgeContent: "Direct" }) }), jsx(MDBox, { mb: 1, children: jsx(MDBadgeDot, { color: "dark", size: "sm", badgeContent: "Organic" }) }), jsx(MDBox, { mb: 1, children: jsx(MDBadgeDot, { color: "secondary", size: "sm", badgeContent: "Referral" }) })] }) })] }) }), jsxs(MDBox, { pt: 4, pb: 2, px: 2, display: "flex", flexDirection: { xs: "column", sm: "row" }, mt: "auto", children: [jsx(MDBox, { width: { xs: "100%", sm: "60%" }, lineHeight: 1, children: jsxs(MDTypography, { variant: "button", color: "text", fontWeight: "light", children: ["More than ", jsx("strong", { children: "1,200,000" }), " sales are made using referral marketing, and", " ", jsx("strong", { children: "700,000" }), " are from social media."] }) }), jsx(MDBox, { width: { xs: "100%", sm: "40%" }, textAlign: "right", mt: { xs: 2, sm: "auto" }, children: jsx(MDButton, { color: darkMode ? "white" : "light", children: "read more" }) })] })] })); +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const defaultLineChartData = { + labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], + datasets: [ + { + label: "Facebook Ads", + color: "info", + data: [50, 100, 200, 190, 400, 350, 500, 450, 700], + }, + { + label: "Google Ads", + color: "dark", + data: [10, 30, 40, 120, 150, 220, 280, 250, 280], + }, + ], +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const horizontalBarChartData = { + labels: ["16-20", "21-25", "26-30", "31-36", "36-42", "42+"], + datasets: [ + { + label: "Sales by age", + color: "dark", + data: [15, 20, 12, 60, 20, 15], + }, + ], +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const salesTableData = [ + { + country: [US, "united state"], + sales: 2500, + bounce: "29.9%", + }, + { + country: [DE, "germany"], + sales: "3.900", + bounce: "40.22%", + }, + { + country: [GB, "great britain"], + sales: "1.400", + bounce: "23.44%", + }, + { country: [BR, "brasil"], sales: 562, bounce: "32.14%" }, + { country: [AU, "australia"], sales: 400, bounce: "56.83%" }, +]; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +var MDAvatarRoot = styled(Avatar)(({ theme, ownerState }) => { + const { palette, functions, typography, boxShadows } = theme; + const { shadow, bgColor, size } = ownerState; + const { gradients, transparent, white } = palette; + const { pxToRem, linearGradient } = functions; + const { size: fontSize, fontWeightRegular } = typography; + // backgroundImage value + const backgroundValue = bgColor === "transparent" + ? transparent.main + : linearGradient(gradients[bgColor].main, gradients[bgColor].state); + // size value + let sizeValue; + switch (size) { + case "xs": + sizeValue = { + width: pxToRem(24), + height: pxToRem(24), + fontSize: fontSize.xs, + }; + break; + case "sm": + sizeValue = { + width: pxToRem(36), + height: pxToRem(36), + fontSize: fontSize.sm, + }; + break; + case "lg": + sizeValue = { + width: pxToRem(58), + height: pxToRem(58), + fontSize: fontSize.sm, + }; + break; + case "xl": + sizeValue = { + width: pxToRem(74), + height: pxToRem(74), + fontSize: fontSize.md, + }; + break; + case "xxl": + sizeValue = { + width: pxToRem(110), + height: pxToRem(110), + fontSize: fontSize.md, + }; + break; + default: { + sizeValue = { + width: pxToRem(48), + height: pxToRem(48), + fontSize: fontSize.md, + }; + } + } + return { + background: backgroundValue, + color: white.main, + fontWeight: fontWeightRegular, + boxShadow: boxShadows[shadow], + ...sizeValue, + }; +}); + +const MDAvatar = forwardRef(({ bgColor, size, shadow, ...rest }, ref) => (jsx(MDAvatarRoot, { ref: ref, ownerState: { shadow, bgColor, size }, ...rest }))); +// Declaring default props for MDAvatar +MDAvatar.defaultProps = { + bgColor: "transparent", + size: "md", + shadow: "none", +}; + +function ProductCell({ image, name, orders }) { + return (jsxs(MDBox, { display: "flex", alignItems: "center", pr: 2, children: [jsx(MDBox, { mr: 2, children: jsx(MDAvatar, { src: image, alt: name }) }), jsxs(MDBox, { display: "flex", flexDirection: "column", children: [jsx(MDTypography, { variant: "button", fontWeight: "medium", children: name }), jsxs(MDTypography, { variant: "button", fontWeight: "regular", color: "secondary", children: [jsx(MDTypography, { component: "span", variant: "button", fontWeight: "regular", color: "success", children: orders }), " ", "orders"] })] })] })); +} + +function RefundsCell({ value, icon }) { + return (jsxs(MDBox, { display: "flex", justifyContent: "center", alignItems: "center", px: 2, children: [jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: value }), jsx(MDBox, { color: icon.color, lineHeight: 0, children: jsx(Icon, { sx: { fontWeight: "bold" }, fontSize: "small", children: icon.name }) })] })); +} + +function DefaultCell({ children }) { + return (jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: children })); +} + +const dataTableData$1 = { + columns: [ + { Header: "product", accessor: "product", width: "55%" }, + { Header: "value", accessor: "value" }, + { Header: "ads spent", accessor: "adsSpent", align: "center" }, + { Header: "refunds", accessor: "refunds", align: "center" }, + ], + rows: [ + { + product: jsx(ProductCell, { image: nikeV22, name: "Nike v22 Running", orders: 8.232 }), + value: jsx(DefaultCell, { children: "$130.992" }), + adsSpent: jsx(DefaultCell, { children: "$9.500" }), + refunds: jsx(RefundsCell, { value: 13, icon: { color: "success", name: "keyboard_arrow_up" } }), + }, + { + product: (jsx(ProductCell, { image: businessKit, name: "Business Kit (Mug + Notebook)", orders: 12.821 })), + value: jsx(DefaultCell, { children: "$80.250" }), + adsSpent: jsx(DefaultCell, { children: "$4.200" }), + refunds: jsx(RefundsCell, { value: 40, icon: { color: "error", name: "keyboard_arrow_down" } }), + }, + { + product: jsx(ProductCell, { image: blackChair, name: "Black Chair", orders: 2.421 }), + value: jsx(DefaultCell, { children: "$40.600" }), + adsSpent: jsx(DefaultCell, { children: "$9.430" }), + refunds: jsx(RefundsCell, { value: 54, icon: { color: "success", name: "keyboard_arrow_up" } }), + }, + { + product: jsx(ProductCell, { image: wirelessCharger, name: "Wireless Charger", orders: 5.921 }), + value: jsx(DefaultCell, { children: "$91.300" }), + adsSpent: jsx(DefaultCell, { children: "$7.364" }), + refunds: jsx(RefundsCell, { value: 5, icon: { color: "error", name: "keyboard_arrow_down" } }), + }, + { + product: (jsx(ProductCell, { image: tripKit, name: "Mountain Trip Kit (Camera + Backpack)", orders: 921 })), + value: jsx(DefaultCell, { children: "$140.925" }), + adsSpent: jsx(DefaultCell, { children: "$20.531" }), + refunds: jsx(RefundsCell, { value: 121, icon: { color: "success", name: "keyboard_arrow_up" } }), + }, + ], +}; + +function Sales() { + // DefaultStatisticsCard state for the dropdown value + const [salesDropdownValue, setSalesDropdownValue] = useState("6 May - 7 May"); + const [customersDropdownValue, setCustomersDropdownValue] = useState("6 May - 7 May"); + const [revenueDropdownValue, setRevenueDropdownValue] = useState("6 May - 7 May"); + // DefaultStatisticsCard state for the dropdown action + const [salesDropdown, setSalesDropdown] = useState(null); + const [customersDropdown, setCustomersDropdown] = useState(null); + const [revenueDropdown, setRevenueDropdown] = useState(null); + // DefaultStatisticsCard handler for the dropdown action + const openSalesDropdown = ({ currentTarget }) => setSalesDropdown(currentTarget); + const closeSalesDropdown = ({ currentTarget }) => { + setSalesDropdown(null); + setSalesDropdownValue(currentTarget.innerText || salesDropdownValue); + }; + const openCustomersDropdown = ({ currentTarget }) => setCustomersDropdown(currentTarget); + const closeCustomersDropdown = ({ currentTarget }) => { + setCustomersDropdown(null); + setCustomersDropdownValue(currentTarget.innerText || salesDropdownValue); + }; + const openRevenueDropdown = ({ currentTarget }) => setRevenueDropdown(currentTarget); + const closeRevenueDropdown = ({ currentTarget }) => { + setRevenueDropdown(null); + setRevenueDropdownValue(currentTarget.innerText || salesDropdownValue); + }; + // Dropdown menu template for the DefaultStatisticsCard + const renderMenu = (state, close) => (jsxs(Menu, { anchorEl: state, transformOrigin: { vertical: "top", horizontal: "center" }, open: Boolean(state), onClose: close, keepMounted: true, disableAutoFocusItem: true, children: [jsx(MenuItem, { onClick: close, children: "Last 7 days" }), jsx(MenuItem, { onClick: close, children: "Last week" }), jsx(MenuItem, { onClick: close, children: "Last 30 days" })] })); + return (jsxs(DashboardLayout, { children: [jsx(DashboardNavbar, {}), jsxs(MDBox, { py: 3, children: [jsx(MDBox, { mb: 3, children: jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, sm: 4, children: jsx(DefaultStatisticsCard, { title: "sales", count: "$230,220", percentage: { + color: "success", + value: "+55%", + label: "since last month", + }, dropdown: { + action: openSalesDropdown, + menu: renderMenu(salesDropdown, closeSalesDropdown), + value: salesDropdownValue, + } }) }), jsx(Grid, { item: true, xs: 12, sm: 4, children: jsx(DefaultStatisticsCard, { title: "customers", count: "3.200", percentage: { + color: "success", + value: "+12%", + label: "since last month", + }, dropdown: { + action: openCustomersDropdown, + menu: renderMenu(customersDropdown, closeCustomersDropdown), + value: customersDropdownValue, + } }) }), jsx(Grid, { item: true, xs: 12, sm: 4, children: jsx(DefaultStatisticsCard, { title: "avg. revenue", count: "$1.200", percentage: { + color: "secondary", + value: "+$213", + label: "since last month", + }, dropdown: { + action: openRevenueDropdown, + menu: renderMenu(revenueDropdown, closeRevenueDropdown), + value: revenueDropdownValue, + } }) })] }) }), jsx(MDBox, { mb: 3, children: jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, sm: 6, lg: 4, children: jsx(ChannelsChart, {}) }), jsx(Grid, { item: true, xs: 12, sm: 6, lg: 8, children: jsx(DefaultLineChart, { title: "Revenue", description: jsxs(MDBox, { display: "flex", justifyContent: "space-between", children: [jsxs(MDBox, { display: "flex", ml: -1, children: [jsx(MDBadgeDot, { color: "info", size: "sm", badgeContent: "Facebook Ads" }), jsx(MDBadgeDot, { color: "dark", size: "sm", badgeContent: "Google Ads" })] }), jsx(MDBox, { mt: -4, mr: -1, position: "absolute", right: "1.5rem", children: jsx(Tooltip, { title: "See which ads perform better", placement: "left", arrow: true, children: jsx(MDButton, { variant: "outlined", color: "secondary", size: "small", circular: true, iconOnly: true, children: jsx(Icon, { children: "priority_high" }) }) }) })] }), chart: defaultLineChartData }) })] }) }), jsx(MDBox, { mb: 3, children: jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, lg: 8, children: jsx(HorizontalBarChart, { title: "Sales by age", chart: horizontalBarChartData }) }), jsx(Grid, { item: true, xs: 12, lg: 4, children: jsx(SalesTable, { title: "Sales by Country", rows: salesTableData }) })] }) }), jsx(Grid, { container: true, spacing: 3, children: jsx(Grid, { item: true, xs: 12, children: jsxs(Card, { children: [jsx(MDBox, { pt: 3, px: 3, children: jsx(MDTypography, { variant: "h6", fontWeight: "medium", children: "Top Selling Products" }) }), jsx(MDBox, { py: 1, children: jsx(DataTable, { table: dataTableData$1, entriesPerPage: false, showTotalEntries: false, isSorted: false, noEndBorder: true }) })] }) }) })] }), jsx(Footer$1, {})] })); +} + +function ProfileInfoCard({ title, description, info, social, action, shadow }) { + const labels = []; + const values = []; + const { socialMediaColors } = colors$1; + const { size } = typography$1; + // Convert this form `objectKey` of the object key in to this `object key` + Object.keys(info).forEach((el) => { + if (el.match(/[A-Z\s]+/)) { + const uppercaseLetter = Array.from(el).find((i) => i.match(/[A-Z]+/)); + const newElement = el.replace(uppercaseLetter, ` ${uppercaseLetter.toLowerCase()}`); + labels.push(newElement); + } + else { + labels.push(el); + } + }); + // Push the object values into the values array + Object.values(info).forEach((el) => values.push(el)); + // Render the card info items + const renderItems = labels.map((label, key) => (jsxs(MDBox, { display: "flex", py: 1, pr: 2, children: [jsxs(MDTypography, { variant: "button", fontWeight: "bold", textTransform: "capitalize", children: [label, ": \u00A0"] }), jsxs(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: ["\u00A0", values[key]] })] }, label))); + // Render the card social media icons + const renderSocial = social.map(({ link, icon, color }) => (jsx(MDBox, { component: "a", href: link, target: "_blank", rel: "noreferrer", fontSize: size.lg, color: socialMediaColors[color].main, pr: 1, pl: 0.5, lineHeight: 1, children: icon }, color))); + return (jsxs(Card, { sx: { height: "100%", boxShadow: !shadow && "none" }, children: [jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", pt: 2, px: 2, children: [jsx(MDTypography, { variant: "h6", fontWeight: "medium", textTransform: "capitalize", children: title }), jsx(MDTypography, { component: Link$1, to: action.route, variant: "body2", color: "secondary", children: jsx(Tooltip, { title: action.tooltip, placement: "top", children: jsx(Icon, { children: "edit" }) }) })] }), jsxs(MDBox, { p: 2, children: [jsx(MDBox, { mb: 2, lineHeight: 1, children: jsx(MDTypography, { variant: "button", color: "text", fontWeight: "light", children: description }) }), jsx(MDBox, { opacity: 0.3, children: jsx(Divider, {}) }), jsxs(MDBox, { children: [renderItems, jsxs(MDBox, { display: "flex", py: 1, pr: 2, children: [jsx(MDTypography, { variant: "button", fontWeight: "bold", textTransform: "capitalize", children: "social: \u00A0" }), renderSocial] })] })] })] })); +} +// Declaring default props for ProfileInfoCard +ProfileInfoCard.defaultProps = { + shadow: true, +}; + +function ProfilesList({ title, profiles, shadow }) { + const renderProfiles = profiles.map(({ image, name, description, action }) => (jsxs(MDBox, { component: "li", display: "flex", alignItems: "center", py: 1, mb: 1, children: [jsx(MDBox, { mr: 2, children: jsx(MDAvatar, { src: image, alt: "something here", shadow: "md" }) }), jsxs(MDBox, { display: "flex", flexDirection: "column", alignItems: "flex-start", justifyContent: "center", children: [jsx(MDTypography, { variant: "button", fontWeight: "medium", children: name }), jsx(MDTypography, { variant: "caption", color: "text", children: description })] }), jsx(MDBox, { ml: "auto", children: action.type === "internal" ? (jsx(MDButton, { component: Link$1, to: action.route, variant: "text", color: "info", children: action.label })) : (jsx(MDButton, { component: "a", href: action.route, target: "_blank", rel: "noreferrer", variant: "text", color: action.color, children: action.label })) })] }, name))); + return (jsxs(Card, { sx: { height: "100%", boxShadow: !shadow && "none" }, children: [jsx(MDBox, { pt: 2, px: 2, children: jsx(MDTypography, { variant: "h6", fontWeight: "medium", textTransform: "capitalize", children: title }) }), jsx(MDBox, { p: 2, children: jsx(MDBox, { component: "ul", display: "flex", flexDirection: "column", p: 0, m: 0, children: renderProfiles }) })] })); +} +// Declaring defualt props for ProfilesList +ProfilesList.defaultProps = { + shadow: true, +}; + +function DefaultProjectCard({ image, label, title, description, action, authors, }) { + const renderAuthors = authors.map(({ image: media, name }) => (jsx(Tooltip, { title: name, placement: "bottom", children: jsx(MDAvatar, { src: media, alt: name, size: "xs", sx: ({ borders: { borderWidth }, palette: { white } }) => ({ + border: `${borderWidth[2]} solid ${white.main}`, + cursor: "pointer", + position: "relative", + ml: -1.25, + "&:hover, &:focus": { + zIndex: "10", + }, + }) }) }, name))); + return (jsxs(Card, { sx: { + display: "flex", + flexDirection: "column", + backgroundColor: "transparent", + boxShadow: "none", + overflow: "visible", + }, children: [jsx(MDBox, { position: "relative", width: "100.25%", shadow: "xl", borderRadius: "xl", children: jsx(CardMedia, { src: image, component: "img", title: title, sx: { + maxWidth: "100%", + margin: 0, + boxShadow: ({ boxShadows: { md } }) => md, + objectFit: "cover", + objectPosition: "center", + } }) }), jsxs(MDBox, { mt: 1, mx: 0.5, children: [jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", textTransform: "capitalize", children: label }), jsx(MDBox, { mb: 1, children: action.type === "internal" ? (jsx(MDTypography, { component: Link$1, to: action.route, variant: "h5", textTransform: "capitalize", children: title })) : (jsx(MDTypography, { component: "a", href: action.route, target: "_blank", rel: "noreferrer", variant: "h5", textTransform: "capitalize", children: title })) }), jsx(MDBox, { mb: 3, lineHeight: 0, children: jsx(MDTypography, { variant: "button", fontWeight: "light", color: "text", children: description }) }), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [action.type === "internal" ? (jsx(MDButton, { component: Link$1, to: action.route, variant: "outlined", size: "small", color: action.color, children: action.label })) : (jsx(MDButton, { component: "a", href: action.route, target: "_blank", rel: "noreferrer", variant: "outlined", size: "small", color: action.color, children: action.label })), jsx(MDBox, { display: "flex", children: renderAuthors })] })] })] })); +} +// Declaring default props for DefaultProjectCard +DefaultProjectCard.defaultProps = { + authors: [], +}; + +function Header$1({ children }) { + const [tabsOrientation, setTabsOrientation] = useState("horizontal"); + const [tabValue, setTabValue] = useState(0); + useEffect(() => { + // A function that sets the orientation state of the tabs. + function handleTabsOrientation() { + return window.innerWidth < breakpoints$1.values.sm + ? setTabsOrientation("vertical") + : setTabsOrientation("horizontal"); + } + /** + The event listener that's calling the handleTabsOrientation function when resizing the window. + */ + window.addEventListener("resize", handleTabsOrientation); + // Call the handleTabsOrientation function to set the state with the initial value. + handleTabsOrientation(); + // Remove event listener on cleanup + return () => window.removeEventListener("resize", handleTabsOrientation); + }, [tabsOrientation]); + const handleSetTabValue = (event, newValue) => setTabValue(newValue); + return (jsxs(MDBox, { position: "relative", mb: 5, children: [jsx(MDBox, { display: "flex", alignItems: "center", position: "relative", minHeight: "18.75rem", borderRadius: "xl", sx: { + backgroundImage: ({ functions: { rgba, linearGradient }, palette: { gradients } }) => `${linearGradient(rgba(gradients.info.main, 0.6), rgba(gradients.info.state, 0.6))}, url(${backgroundImage})`, + backgroundSize: "cover", + backgroundPosition: "50%", + overflow: "hidden", + } }), jsxs(Card, { sx: { + position: "relative", + mt: -8, + mx: 3, + py: 2, + px: 2, + }, children: [jsxs(Grid, { container: true, spacing: 3, alignItems: "center", children: [jsx(Grid, { item: true, children: jsx(MDAvatar, { src: burceMars, alt: "profile-image", size: "xl", shadow: "sm" }) }), jsx(Grid, { item: true, children: jsxs(MDBox, { height: "100%", mt: 0.5, lineHeight: 1, children: [jsx(MDTypography, { variant: "h5", fontWeight: "medium", children: "Richard Davis" }), jsx(MDTypography, { variant: "button", color: "text", fontWeight: "regular", children: "CEO / Co-Founder" })] }) }), jsx(Grid, { item: true, xs: 12, md: 6, lg: 4, sx: { ml: "auto" }, children: jsx(AppBar, { position: "static", children: jsxs(Tabs, { orientation: tabsOrientation, value: tabValue, onChange: handleSetTabValue, children: [jsx(Tab, { label: "App", icon: jsx(Icon, { fontSize: "small", sx: { mt: -0.25 }, children: "home" }) }), jsx(Tab, { label: "Message", icon: jsx(Icon, { fontSize: "small", sx: { mt: -0.25 }, children: "email" }) }), jsx(Tab, { label: "Settings", icon: jsx(Icon, { fontSize: "small", sx: { mt: -0.25 }, children: "settings" }) })] }) }) })] }), children] })] })); +} +// Declaring default props for Header +Header$1.defaultProps = { + children: "", +}; + +function PlatformSettings() { + const [followsMe, setFollowsMe] = useState(true); + const [answersPost, setAnswersPost] = useState(false); + const [mentionsMe, setMentionsMe] = useState(true); + const [newLaunches, setNewLaunches] = useState(false); + const [productUpdate, setProductUpdate] = useState(true); + const [newsletter, setNewsletter] = useState(false); + return (jsxs(Card, { sx: { boxShadow: "none" }, children: [jsx(MDBox, { p: 2, children: jsx(MDTypography, { variant: "h6", fontWeight: "medium", textTransform: "capitalize", children: "platform settings" }) }), jsxs(MDBox, { pt: 1, pb: 2, px: 2, lineHeight: 1.25, children: [jsx(MDTypography, { variant: "caption", fontWeight: "bold", color: "text", textTransform: "uppercase", children: "account" }), jsxs(MDBox, { display: "flex", alignItems: "center", mb: 0.5, ml: -1.5, children: [jsx(MDBox, { mt: 0.5, children: jsx(Switch, { checked: followsMe, onChange: () => setFollowsMe(!followsMe) }) }), jsx(MDBox, { width: "80%", ml: 0.5, children: jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: "Email me when someone follows me" }) })] }), jsxs(MDBox, { display: "flex", alignItems: "center", mb: 0.5, ml: -1.5, children: [jsx(MDBox, { mt: 0.5, children: jsx(Switch, { checked: answersPost, onChange: () => setAnswersPost(!answersPost) }) }), jsx(MDBox, { width: "80%", ml: 0.5, children: jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: "Email me when someone answers on my post" }) })] }), jsxs(MDBox, { display: "flex", alignItems: "center", mb: 0.5, ml: -1.5, children: [jsx(MDBox, { mt: 0.5, children: jsx(Switch, { checked: mentionsMe, onChange: () => setMentionsMe(!mentionsMe) }) }), jsx(MDBox, { width: "80%", ml: 0.5, children: jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: "Email me when someone mentions me" }) })] }), jsx(MDBox, { mt: 3, children: jsx(MDTypography, { variant: "caption", fontWeight: "bold", color: "text", textTransform: "uppercase", children: "application" }) }), jsxs(MDBox, { display: "flex", alignItems: "center", mb: 0.5, ml: -1.5, children: [jsx(MDBox, { mt: 0.5, children: jsx(Switch, { checked: newLaunches, onChange: () => setNewLaunches(!newLaunches) }) }), jsx(MDBox, { width: "80%", ml: 0.5, children: jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: "New launches and projects" }) })] }), jsxs(MDBox, { display: "flex", alignItems: "center", mb: 0.5, ml: -1.5, children: [jsx(MDBox, { mt: 0.5, children: jsx(Switch, { checked: productUpdate, onChange: () => setProductUpdate(!productUpdate) }) }), jsx(MDBox, { width: "80%", ml: 0.5, children: jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: "Monthly product updates" }) })] }), jsxs(MDBox, { display: "flex", alignItems: "center", mb: 0.5, ml: -1.5, children: [jsx(MDBox, { mt: 0.5, children: jsx(Switch, { checked: newsletter, onChange: () => setNewsletter(!newsletter) }) }), jsx(MDBox, { width: "80%", ml: 0.5, children: jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: "Subscribe to newsletter" }) })] })] })] })); +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const profileListData = [ + { + image: kal, + name: "Sophie B.", + description: "Hi! I need more information..", + action: { + type: "internal", + route: "/pages/profile/profile-overview", + color: "info", + label: "reply", + }, + }, + { + image: marie, + name: "Anne Marie", + description: "Awesome work, can you..", + action: { + type: "internal", + route: "/pages/profile/profile-overview", + color: "info", + label: "reply", + }, + }, + { + image: ivana, + name: "Ivanna", + description: "About files I can..", + action: { + type: "internal", + route: "/pages/profile/profile-overview", + color: "info", + label: "reply", + }, + }, + { + image: team4, + name: "Peterson", + description: "Have a great afternoon..", + action: { + type: "internal", + route: "/pages/profile/profile-overview", + color: "info", + label: "reply", + }, + }, + { + image: team3, + name: "Nick Daniel", + description: "Hi! I need more information..", + action: { + type: "internal", + route: "/pages/profile/profile-overview", + color: "info", + label: "reply", + }, + }, +]; + +function Overview() { + return (jsxs(DashboardLayout, { children: [jsx(DashboardNavbar, {}), jsx(MDBox, { mb: 2 }), jsxs(Header$1, { children: [jsx(MDBox, { mt: 5, mb: 3, children: jsxs(Grid, { container: true, spacing: 1, children: [jsx(Grid, { item: true, xs: 12, md: 6, xl: 4, children: jsx(PlatformSettings, {}) }), jsxs(Grid, { item: true, xs: 12, md: 6, xl: 4, sx: { display: "flex" }, children: [jsx(Divider, { orientation: "vertical", sx: { ml: -2, mr: 1 } }), jsx(ProfileInfoCard, { title: "profile information", description: "Hi, I\u2019m Alec Thompson, Decisions: If you can\u2019t decide, the answer is no. If two equally difficult paths, choose the one more painful in the short term (pain avoidance is creating an illusion of equality).", info: { + fullName: "Alec M. Thompson", + mobile: "(44) 123 1234 123", + email: "alecthompson@mail.com", + location: "USA", + }, social: [ + { + link: "https://www.facebook.com/CreativeTim/", + icon: jsx(FacebookIcon, {}), + color: "facebook", + }, + { + link: "https://twitter.com/creativetim", + icon: jsx(TwitterIcon, {}), + color: "twitter", + }, + { + link: "https://www.instagram.com/creativetimofficial/", + icon: jsx(InstagramIcon, {}), + color: "instagram", + }, + ], action: { route: "", tooltip: "Edit Profile" }, shadow: false }), jsx(Divider, { orientation: "vertical", sx: { mx: 0 } })] }), jsx(Grid, { item: true, xs: 12, xl: 4, children: jsx(ProfilesList, { title: "conversations", profiles: profileListData, shadow: false }) })] }) }), jsxs(MDBox, { pt: 2, px: 2, lineHeight: 1.25, children: [jsx(MDTypography, { variant: "h6", fontWeight: "medium", children: "Projects" }), jsx(MDBox, { mb: 1, children: jsx(MDTypography, { variant: "button", color: "text", children: "Architects design houses" }) })] }), jsx(MDBox, { p: 2, children: jsxs(Grid, { container: true, spacing: 6, children: [jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: jsx(DefaultProjectCard, { image: homeDecor1, label: "project #2", title: "modern", description: "As Uber works through a huge amount of internal management turmoil.", action: { + type: "internal", + route: "/pages/profile/profile-overview", + color: "info", + label: "view project", + }, authors: [ + { image: team1, name: "Elena Morison" }, + { image: team2, name: "Ryan Milly" }, + { image: team3, name: "Nick Daniel" }, + { image: team4, name: "Peterson" }, + ] }) }), jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: jsx(DefaultProjectCard, { image: homeDecor2, label: "project #1", title: "scandinavian", description: "Music is something that everyone has their own specific opinion about.", action: { + type: "internal", + route: "/pages/profile/profile-overview", + color: "info", + label: "view project", + }, authors: [ + { image: team3, name: "Nick Daniel" }, + { image: team4, name: "Peterson" }, + { image: team1, name: "Elena Morison" }, + { image: team2, name: "Ryan Milly" }, + ] }) }), jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: jsx(DefaultProjectCard, { image: homeDecor3, label: "project #3", title: "minimalist", description: "Different people have different taste, and various types of music.", action: { + type: "internal", + route: "/pages/profile/profile-overview", + color: "info", + label: "view project", + }, authors: [ + { image: team4, name: "Peterson" }, + { image: team3, name: "Nick Daniel" }, + { image: team2, name: "Ryan Milly" }, + { image: team1, name: "Elena Morison" }, + ] }) }), jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: jsx(DefaultProjectCard, { image: homeDecor4, label: "project #4", title: "gothic", description: "Why would anyone pick blue over pink? Pink is obviously a better color.", action: { + type: "internal", + route: "/pages/profile/profile-overview", + color: "info", + label: "view project", + }, authors: [ + { image: team4, name: "Peterson" }, + { image: team3, name: "Nick Daniel" }, + { image: team2, name: "Ryan Milly" }, + { image: team1, name: "Elena Morison" }, + ] }) })] }) })] }), jsx(Footer$1, {})] })); +} + +function BaseLayout({ stickyNavbar, children }) { + const [tabsOrientation, setTabsOrientation] = useState("horizontal"); + const [tabValue, setTabValue] = useState(0); + useEffect(() => { + // A function that sets the orientation state of the tabs. + function handleTabsOrientation() { + return window.innerWidth < breakpoints$1.values.sm + ? setTabsOrientation("vertical") + : setTabsOrientation("horizontal"); + } + /** + The event listener that's calling the handleTabsOrientation function when resizing the window. + */ + window.addEventListener("resize", handleTabsOrientation); + // Call the handleTabsOrientation function to set the state with the initial value. + handleTabsOrientation(); + // Remove event listener on cleanup + return () => window.removeEventListener("resize", handleTabsOrientation); + }, [tabsOrientation]); + const handleSetTabValue = (event, newValue) => setTabValue(newValue); + return (jsxs(DashboardLayout, { children: [jsx(DashboardNavbar, { absolute: !stickyNavbar, isMini: true }), jsxs(MDBox, { mt: stickyNavbar ? 3 : 10, children: [jsx(Grid, { container: true, children: jsx(Grid, { item: true, xs: 12, sm: 8, lg: 4, children: jsx(AppBar, { position: "static", children: jsxs(Tabs, { orientation: tabsOrientation, value: tabValue, onChange: handleSetTabValue, children: [jsx(Tab, { label: "Messages" }), jsx(Tab, { label: "Social" }), jsx(Tab, { label: "Notifications" }), jsx(Tab, { label: "Backup" })] }) }) }) }), children] }), jsx(Footer$1, {})] })); +} +// Declaring default props for BaseLayout +BaseLayout.defaultProps = { + stickyNavbar: false, +}; + +function Sidenav() { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + const sidenavItems = [ + { icon: "person", label: "profile", href: "profile" }, + { icon: "receipt_long", label: "basic info", href: "basic-info" }, + { icon: "lock", label: "change password", href: "change-password" }, + { icon: "security", label: "2FA", href: "2fa" }, + { icon: "badge", label: "accounts", href: "accounts" }, + { icon: "campaign", label: "notifications", href: "notifications" }, + { icon: "settings_applications", label: "sessions", href: "sessions" }, + { icon: "delete", label: "delete account", href: "delete-account" }, + ]; + const renderSidenavItems = sidenavItems.map(({ icon, label, href }, key) => { + const itemKey = `item-${key}`; + return (jsx(MDBox, { component: "li", pt: key === 0 ? 0 : 1, children: jsxs(MDTypography, { component: "a", href: `#${href}`, variant: "button", fontWeight: "regular", textTransform: "capitalize", sx: ({ borders: { borderRadius }, functions: { pxToRem }, palette: { light }, transitions, }) => ({ + display: "flex", + alignItems: "center", + borderRadius: borderRadius.md, + padding: `${pxToRem(10)} ${pxToRem(16)}`, + transition: transitions.create("background-color", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.shorter, + }), + "&:hover": { + backgroundColor: light.main, + }, + }), children: [jsx(MDBox, { mr: 1.5, lineHeight: 1, color: darkMode ? "white" : "dark", children: jsx(Icon, { fontSize: "small", children: icon }) }), label] }) }, itemKey)); + }); + return (jsx(Card, { sx: { + borderRadius: ({ borders: { borderRadius } }) => borderRadius.lg, + position: "sticky", + top: "1%", + }, children: jsx(MDBox, { component: "ul", display: "flex", flexDirection: "column", p: 2, m: 0, sx: { listStyle: "none" }, children: renderSidenavItems }) })); +} + +function Header() { + const [visible, setVisible] = useState(true); + const handleSetVisible = () => setVisible(!visible); + return (jsx(Card, { id: "profile", children: jsx(MDBox, { p: 2, children: jsxs(Grid, { container: true, spacing: 3, alignItems: "center", children: [jsx(Grid, { item: true, children: jsx(MDAvatar, { src: burceMars, alt: "profile-image", size: "xl", shadow: "sm" }) }), jsx(Grid, { item: true, children: jsxs(MDBox, { height: "100%", mt: 0.5, lineHeight: 1, children: [jsx(MDTypography, { variant: "h5", fontWeight: "medium", children: "Alex Thompson" }), jsx(MDTypography, { variant: "button", color: "text", fontWeight: "medium", children: "CEO / Co-Founder" })] }) }), jsx(Grid, { item: true, xs: 12, md: 6, lg: 3, sx: { ml: "auto" }, children: jsxs(MDBox, { display: "flex", justifyContent: { md: "flex-end" }, alignItems: "center", lineHeight: 1, children: [jsxs(MDTypography, { variant: "caption", fontWeight: "regular", children: ["Switch to ", visible ? "invisible" : "visible"] }), jsx(MDBox, { ml: 1, children: jsx(Switch, { checked: visible, onChange: handleSetVisible }) })] }) })] }) }) })); +} + +function FormField({ label, ...rest }) { + return (jsx(MDInput, { variant: "standard", label: label, fullWidth: true, InputLabelProps: { shrink: true }, ...rest })); +} +// Declaring default props for FormField +FormField.defaultProps = { + label: " ", +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const selectData = { + gender: ["Male", "Female"], + birthDate: [ + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December", + ], + days: [ + "1", + "2", + "3", + "4", + "5", + "6", + "7", + "8", + "9", + "10", + "11", + "12", + "13", + "14", + "15", + "16", + "17", + "18", + "19", + "20", + "21", + "22", + "23", + "24", + "25", + "26", + "27", + "28", + "29", + "30", + ], + years: [ + "1900", + "1901", + "1902", + "1903", + "1904", + "1905", + "1906", + "1907", + "1908", + "1909", + "1910", + "1911", + "1912", + "1913", + "1914", + "1915", + "1915", + "1915", + "1916", + "1917", + "1918", + "1919", + "1920", + "1921", + "1922", + "1923", + "1924", + "1925", + "1926", + "1927", + "1928", + "1929", + "1930", + "1931", + "1932", + "1933", + "1934", + "1935", + "1936", + "1937", + "1938", + "1939", + "1940", + "1941", + "1942", + "1943", + "1944", + "1945", + "1946", + "1947", + "1948", + "1949", + "1950", + "1951", + "1952", + "1953", + "1954", + "1955", + "1956", + "1957", + "1958", + "1959", + "1960", + "1961", + "1962", + "1963", + "1964", + "1965", + "1966", + "1967", + "1968", + "1969", + "1970", + "1971", + "1972", + "1973", + "1974", + "1975", + "1976", + "1977", + "1978", + "1979", + "1980", + "1981", + "1982", + "1983", + "1984", + "1985", + "1986", + "1987", + "1988", + "1989", + "1990", + "1991", + "1992", + "1993", + "1994", + "1995", + "1996", + "1997", + "1998", + "1999", + "2000", + "2001", + "2002", + "2003", + "2004", + "2005", + "2006", + "2007", + "2008", + "2009", + "2010", + "2011", + "2012", + "2013", + "2014", + "2015", + "2016", + "2017", + "2018", + "2019", + "2020", + "2021", + ], + skills: ["react", "vue", "angular", "svelte", "javascript"], +}; + +function BasicInfo() { + return (jsxs(Card, { id: "basic-info", sx: { overflow: "visible" }, children: [jsx(MDBox, { p: 3, children: jsx(MDTypography, { variant: "h5", children: "Basic Info" }) }), jsx(MDBox, { component: "form", pb: 3, px: 3, children: jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, sm: 6, children: jsx(FormField, { label: "First Name", placeholder: "Alec" }) }), jsx(Grid, { item: true, xs: 12, sm: 6, children: jsx(FormField, { label: "Last Name", placeholder: "Thompson" }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, sm: 4, children: jsx(Autocomplete, { defaultValue: "Male", options: selectData.gender, renderInput: (params) => (jsx(FormField, { ...params, label: "I'm", InputLabelProps: { shrink: true } })) }) }), jsx(Grid, { item: true, xs: 12, sm: 8, children: jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, sm: 5, children: jsx(Autocomplete, { defaultValue: "February", options: selectData.birthDate, renderInput: (params) => (jsx(FormField, { ...params, label: "Birth Date", InputLabelProps: { shrink: true } })) }) }), jsx(Grid, { item: true, xs: 12, sm: 4, children: jsx(Autocomplete, { defaultValue: "1", options: selectData.days, renderInput: (params) => (jsx(FormField, { ...params, InputLabelProps: { shrink: true } })) }) }), jsx(Grid, { item: true, xs: 12, sm: 3, children: jsx(Autocomplete, { defaultValue: "2021", options: selectData.years, renderInput: (params) => (jsx(FormField, { ...params, InputLabelProps: { shrink: true } })) }) })] }) })] }) }), jsx(Grid, { item: true, xs: 12, sm: 6, children: jsx(FormField, { label: "Email", placeholder: "example@email.com", inputProps: { type: "email" } }) }), jsx(Grid, { item: true, xs: 12, sm: 6, children: jsx(FormField, { label: "confirmation email", placeholder: "example@email.com", inputProps: { type: "email" } }) }), jsx(Grid, { item: true, xs: 12, sm: 6, children: jsx(FormField, { label: "your location", placeholder: "Sydney, A" }) }), jsx(Grid, { item: true, xs: 12, sm: 6, children: jsx(FormField, { label: "Phone Number", placeholder: "+40 735 631 620", inputProps: { type: "number" } }) }), jsx(Grid, { item: true, xs: 12, md: 6, children: jsx(FormField, { label: "Language", placeholder: "English" }) }), jsx(Grid, { item: true, xs: 12, md: 6, children: jsx(Autocomplete, { multiple: true, defaultValue: ["react", "angular"], options: selectData.skills, renderInput: (params) => jsx(FormField, { ...params, InputLabelProps: { shrink: true } }) }) })] }) })] })); +} + +function ChangePassword() { + const passwordRequirements = [ + "One special characters", + "Min 6 characters", + "One number (2 are recommended)", + "Change it often", + ]; + const renderPasswordRequirements = passwordRequirements.map((item, key) => { + const itemKey = `element-${key}`; + return (jsx(MDBox, { component: "li", color: "text", fontSize: "1.25rem", lineHeight: 1, children: jsx(MDTypography, { variant: "button", color: "text", fontWeight: "regular", verticalAlign: "middle", children: item }) }, itemKey)); + }); + return (jsxs(Card, { id: "change-password", children: [jsx(MDBox, { p: 3, children: jsx(MDTypography, { variant: "h5", children: "Change Password" }) }), jsxs(MDBox, { component: "form", pb: 3, px: 3, children: [jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, children: jsx(MDInput, { fullWidth: true, label: "Current Password", inputProps: { type: "password", autoComplete: "" } }) }), jsx(Grid, { item: true, xs: 12, children: jsx(MDInput, { fullWidth: true, label: "New Password", inputProps: { type: "password", autoComplete: "" } }) }), jsx(Grid, { item: true, xs: 12, children: jsx(MDInput, { fullWidth: true, label: "Confirm New Password", inputProps: { type: "password", autoComplete: "" } }) })] }), jsx(MDBox, { mt: 6, mb: 1, children: jsx(MDTypography, { variant: "h5", children: "Password requirements" }) }), jsx(MDBox, { mb: 1, children: jsx(MDTypography, { variant: "body2", color: "text", children: "Please follow this guide for a strong password" }) }), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", children: [jsx(MDBox, { component: "ul", m: 0, pl: 3.25, mb: { xs: 8, sm: 0 }, children: renderPasswordRequirements }), jsx(MDBox, { ml: "auto", children: jsx(MDButton, { variant: "gradient", color: "dark", size: "small", children: "update password" }) })] })] })] })); +} + +function Authentication() { + return (jsxs(Card, { id: "2fa", sx: { overflow: "visible" }, children: [jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", p: 3, children: [jsx(MDTypography, { variant: "h5", children: "Two-factor authentication" }), jsx(MDBadge, { variant: "contained", color: "success", badgeContent: "enabled", container: true })] }), jsxs(MDBox, { p: 3, children: [jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsx(MDTypography, { variant: "body2", color: "text", children: "Security keys" }), jsxs(MDBox, { display: "flex", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsx(MDBox, { mx: { xs: 0, sm: 2 }, mb: { xs: 1, sm: 0 }, children: jsx(MDTypography, { variant: "button", color: "text", fontWeight: "regular", children: "No Security keys" }) }), jsx(MDButton, { variant: "outlined", color: "dark", size: "small", children: "add" })] })] }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsx(MDTypography, { variant: "body2", color: "text", children: "SMS number" }), jsxs(MDBox, { display: "flex", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsx(MDBox, { mx: { xs: 0, sm: 2 }, mb: { xs: 1, sm: 0 }, children: jsx(MDTypography, { variant: "button", color: "text", fontWeight: "regular", children: "+3012374423" }) }), jsx(MDButton, { variant: "outlined", color: "dark", size: "small", children: "edit" })] })] }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsx(MDTypography, { variant: "body2", color: "text", children: "Authenticator app" }), jsxs(MDBox, { display: "flex", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsx(MDBox, { mx: { xs: 0, sm: 2 }, mb: { xs: 1, sm: 0 }, children: jsx(MDTypography, { variant: "button", color: "text", fontWeight: "regular", children: "Not Configured" }) }), jsx(MDButton, { variant: "outlined", color: "dark", size: "small", children: "set up" })] })] })] })] })); +} + +function Accounts() { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + const [slack2FA, setSlack2FA] = useState(true); + const [spotify2FA, setSpotify2FA] = useState(true); + const [atlassian2FA, setAtlassian2FA] = useState(true); + const [asana2FA, setAsana2FA] = useState(false); + const handleSetSlack2FA = () => setSlack2FA(!slack2FA); + const handleSetSpotify2FA = () => setSpotify2FA(!spotify2FA); + const handleSetAtlassian2FA = () => setAtlassian2FA(!atlassian2FA); + const handleSetAsana2FA = () => setAsana2FA(!asana2FA); + return (jsxs(Card, { id: "accounts", children: [jsxs(MDBox, { p: 3, lineHeight: 1, children: [jsx(MDBox, { mb: 1, children: jsx(MDTypography, { variant: "h5", children: "Accounts" }) }), jsx(MDTypography, { variant: "button", color: "text", children: "Here you can setup and manage your integration settings." })] }), jsxs(MDBox, { pt: 2, pb: 3, px: 3, children: [jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsx(MDAvatar, { src: logoSlack, alt: "Slack logo", variant: "rounded" }), jsxs(MDBox, { ml: 2, children: [jsx(MDTypography, { variant: "h5", fontWeight: "medium", children: "Slack" }), jsxs(MDBox, { display: "flex", alignItems: "flex-end", children: [jsx(MDTypography, { variant: "button", color: "text", children: "Show less" }), jsx(MDTypography, { variant: "button", color: "text", sx: { lineHeight: 0 }, children: jsx(Icon, { fontSize: "small", children: "expand_less" }) })] })] })] }), jsxs(MDBox, { display: "flex", alignItems: "center", justifyContent: "flex-end", width: { xs: "100%", sm: "auto" }, mt: { xs: 1, sm: 0 }, children: [jsx(MDBox, { lineHeight: 0, mx: 2, children: jsx(MDTypography, { variant: "button", color: "text", children: slack2FA ? "Enabled" : "Disabled" }) }), jsx(MDBox, { mr: 1, children: jsx(Switch, { checked: slack2FA, onChange: handleSetSlack2FA }) })] })] }), jsxs(MDBox, { ml: 2, pl: 6, pt: 2, lineHeight: 1, children: [jsx(MDTypography, { variant: "button", color: "text", children: "You haven't added your Slack yet or you aren't authorized. Please add our Slack Bot to your account by clicking on here. When you've added the bot, send your verification code that you have received." }), jsxs(MDBox, { bgColor: darkMode ? "grey-900" : "grey-100", borderRadius: "lg", display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, my: 3, py: 1, pl: { xs: 1, sm: 2 }, pr: 1, children: [jsx(MDTypography, { variant: "button", fontWeight: "medium", color: "text", children: "Verification Code" }), jsx(MDBox, { width: { xs: "100%", sm: "25%", md: "15%" }, mt: { xs: 1, sm: 0 }, children: jsx(Tooltip, { title: "Copy", placement: "top", children: jsx(MDInput, { size: "small", value: "1172913" }) }) })] }), jsxs(MDBox, { bgColor: darkMode ? "grey-900" : "grey-100", borderRadius: "lg", display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, my: 3, py: 1, pl: { xs: 1, sm: 2 }, pr: 1, children: [jsx(MDTypography, { variant: "button", fontWeight: "medium", color: "text", children: "Connected account" }), jsxs(MDBox, { display: "flex", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsx(MDBox, { mr: 2, mb: { xs: 1, sm: 0 }, lineHeight: 0, children: jsx(MDTypography, { variant: "button", fontWeight: "medium", children: "hello@creative-tim.com" }) }), jsx(MDButton, { variant: "gradient", color: "dark", size: "small", children: "delete" })] })] })] }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsx(MDAvatar, { src: logoSpotify, alt: "Slack logo", variant: "rounded" }), jsxs(MDBox, { ml: 2, lineHeight: 0, children: [jsx(MDTypography, { variant: "h5", fontWeight: "medium", children: "Spotify" }), jsx(MDTypography, { variant: "button", color: "text", children: "Music" })] })] }), jsxs(MDBox, { display: "flex", justifyContent: "flex-end", alignItems: "center", width: { xs: "100%", sm: "auto" }, mt: { xs: 1, sm: 0 }, children: [jsx(MDBox, { lineHeight: 0, mx: 2, children: jsx(MDTypography, { variant: "button", color: "text", children: spotify2FA ? "Enabled" : "Disabled" }) }), jsx(MDBox, { mr: 1, children: jsx(Switch, { checked: spotify2FA, onChange: handleSetSpotify2FA }) })] })] }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsx(MDAvatar, { src: logoAtlassian, alt: "Slack logo", variant: "rounded" }), jsxs(MDBox, { ml: 2, lineHeight: 0, children: [jsx(MDTypography, { variant: "h5", fontWeight: "medium", children: "Atlassian" }), jsx(MDTypography, { variant: "button", color: "text", children: "Payment vendor" })] })] }), jsxs(MDBox, { display: "flex", justifyContent: "flex-end", alignItems: "center", width: { xs: "100%", sm: "auto" }, mt: { xs: 1, sm: 0 }, children: [jsx(MDBox, { lineHeight: 0, mx: 2, children: jsx(MDTypography, { variant: "button", color: "text", children: atlassian2FA ? "Enabled" : "Disabled" }) }), jsx(MDBox, { mr: 1, children: jsx(Switch, { checked: atlassian2FA, onChange: handleSetAtlassian2FA }) })] })] }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsx(MDAvatar, { src: logoAsana, alt: "Slack logo", variant: "rounded" }), jsxs(MDBox, { ml: 2, lineHeight: 0, children: [jsx(MDTypography, { variant: "h5", fontWeight: "medium", children: "Asana" }), jsx(MDTypography, { variant: "button", color: "text", children: "Organize your team" })] })] }), jsxs(MDBox, { display: "flex", alignItems: "center", justifyContent: "flex-end", width: { xs: "100%", sm: "auto" }, mt: { xs: 1, sm: 0 }, children: [jsx(MDBox, { lineHeight: 0, mx: 2, children: jsx(MDTypography, { variant: "button", color: "text", children: asana2FA ? "Enabled" : "Disabled" }) }), jsx(MDBox, { mr: 1, children: jsx(Switch, { checked: asana2FA, onChange: handleSetAsana2FA }) })] })] })] })] })); +} + +function TableCell({ width, align, padding, noBorder, children }) { + return (jsx(MDBox, { component: "th", width: width, pt: padding[0], pr: padding[1], pb: padding[2], pl: padding[3], textAlign: align, sx: { + border: ({ borders: { borderWidth }, palette: { light } }) => noBorder ? 0 : `${borderWidth[1]} solid ${light.main}`, + }, children: jsx(MDTypography, { component: "div", variant: "body2", color: "text", children: children }) })); +} +// Declaring default props for TableCell +TableCell.defaultProps = { + width: "auto", + align: "left", + padding: [], + noBorder: false, +}; + +function Notifications() { + return (jsxs(Card, { id: "notifications", children: [jsxs(MDBox, { p: 3, lineHeight: 1, children: [jsx(MDBox, { mb: 1, children: jsx(MDTypography, { variant: "h5", children: "Notifications" }) }), jsx(MDTypography, { variant: "button", color: "text", children: "Choose how you receive notifications. These notification settings apply to the things you\u2019re watching." })] }), jsx(MDBox, { pb: 3, px: 3, children: jsx(MDBox, { minWidth: "auto", sx: { overflow: "scroll" }, children: jsxs(Table, { sx: { minWidth: "36rem" }, children: [jsx(MDBox, { component: "thead", children: jsxs(TableRow, { children: [jsx(TableCell, { width: "100%", padding: [1.5, 3, 1.5, 0.5], children: "Activity" }), jsx(TableCell, { align: "center", padding: [1.5, 6, 1.5, 6], children: "Email" }), jsx(TableCell, { align: "center", padding: [1.5, 6, 1.5, 6], children: "Push" }), jsx(TableCell, { align: "center", padding: [1.5, 6, 1.5, 6], children: "SMS" })] }) }), jsxs(TableBody, { children: [jsxs(TableRow, { children: [jsx(TableCell, { padding: [1, 1, 1, 0.5], children: jsxs(MDBox, { lineHeight: 1.4, children: [jsx(MDTypography, { display: "block", variant: "button", fontWeight: "regular", children: "Mentions" }), jsx(MDTypography, { variant: "caption", color: "text", fontWeight: "regular", children: "Notify when another user mentions you in a comment" })] }) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsx(Switch, { defaultChecked: true }) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsx(Switch, {}) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsx(Switch, {}) })] }), jsxs(TableRow, { children: [jsx(TableCell, { padding: [1, 1, 1, 0.5], children: jsxs(MDBox, { lineHeight: 1.4, children: [jsx(MDTypography, { display: "block", variant: "button", fontWeight: "regular", children: "Comments" }), jsx(MDTypography, { variant: "caption", color: "text", fontWeight: "regular", children: "Notify when another user comments your item." })] }) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsx(Switch, { defaultChecked: true }) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsx(Switch, { defaultChecked: true }) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsx(Switch, {}) })] }), jsxs(TableRow, { children: [jsx(TableCell, { padding: [1, 1, 1, 0.5], children: jsxs(MDBox, { lineHeight: 1.4, children: [jsx(MDTypography, { display: "block", variant: "button", fontWeight: "regular", children: "Follows" }), jsx(MDTypography, { variant: "caption", color: "text", fontWeight: "regular", children: "Notify when another user follows you." })] }) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsx(Switch, {}) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsx(Switch, { defaultChecked: true }) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsx(Switch, {}) })] }), jsxs(TableRow, { children: [jsx(TableCell, { padding: [1, 1, 1, 0.5], noBorder: true, children: jsx(MDTypography, { display: "block", variant: "button", color: "text", children: "Log in from a new device" }) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], noBorder: true, children: jsx(Switch, { defaultChecked: true }) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], noBorder: true, children: jsx(Switch, { defaultChecked: true }) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], noBorder: true, children: jsx(Switch, { defaultChecked: true }) })] })] })] }) }) })] })); +} + +function Sessions() { + const actionButtonStyles = { + "& .material-icons-round": { + transform: `translateX(0)`, + transition: "all 200ms cubic-bezier(0.34,1.61,0.7,1.3)", + }, + "&:hover .material-icons-round, &:focus .material-icons-round": { + transform: `translateX(4px)`, + }, + }; + return (jsxs(Card, { id: "sessions", children: [jsxs(MDBox, { p: 3, lineHeight: 1, children: [jsx(MDBox, { mb: 1, children: jsx(MDTypography, { variant: "h5", children: "Sessions" }) }), jsx(MDTypography, { variant: "button", color: "text", fontWeight: "regular", children: "This is a list of devices that have logged into your account. Remove those that you do not recognize." })] }), jsxs(MDBox, { pb: 3, px: 3, sx: { overflow: "auto" }, children: [jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", width: { xs: "max-content", sm: "100%" }, children: [jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsx(MDBox, { textAlign: "center", color: "text", px: { xs: 0, md: 1.5 }, opacity: 0.6, children: jsx(Icon, { children: "desktop_windows" }) }), jsxs(MDBox, { height: "100%", ml: 2, lineHeight: 1, mr: 2, children: [jsx(MDTypography, { display: "block", variant: "button", fontWeight: "regular", color: "text", children: "Bucharest 68.133.163.201" }), jsx(MDTypography, { variant: "caption", color: "text", children: "Your current session" })] })] }), jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsx(MDBadge, { variant: "contained", size: "xs", badgeContent: "active", color: "success", container: true }), jsx(MDBox, { mx: 2, lineHeight: 1, children: jsx(MDTypography, { variant: "button", color: "secondary", fontWeight: "regular", children: "EU" }) }), jsxs(MDTypography, { component: "a", href: "#", variant: "button", color: "info", fontWeight: "regular", sx: actionButtonStyles, children: ["See more\u00A0", jsx(Icon, { sx: { fontWeight: "bold", verticalAlign: "middle" }, children: "arrow_forward" })] })] })] }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", width: { xs: "max-content", sm: "100%" }, children: [jsxs(MDBox, { display: "flex", alignItems: "center", mr: 2, children: [jsx(MDBox, { textAlign: "center", color: "text", px: { xs: 0, md: 1.5 }, opacity: 0.6, children: jsx(Icon, { children: "desktop_windows" }) }), jsx(MDBox, { ml: 2, children: jsx(MDTypography, { display: "block", variant: "body2", fontWeight: "regular", color: "text", children: "Chrome on macOS" }) })] }), jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsx(MDBox, { mx: 2, lineHeight: 1, children: jsx(MDTypography, { variant: "button", color: "secondary", fontWeight: "regular", children: "US" }) }), jsxs(MDTypography, { component: "a", href: "#", variant: "button", color: "info", fontWeight: "regular", sx: actionButtonStyles, children: ["See more\u00A0", jsx(Icon, { sx: { fontWeight: "bold", verticalAlign: "middle" }, children: "arrow_forward" })] })] })] }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", width: { xs: "max-content", sm: "100%" }, children: [jsxs(MDBox, { display: "flex", alignItems: "center", mr: 2, children: [jsx(MDBox, { textAlign: "center", color: "text", px: { xs: 0, md: 1.5 }, opacity: 0.6, children: jsx(Icon, { children: "phone_iphone" }) }), jsx(MDBox, { ml: 2, children: jsx(MDTypography, { display: "block", variant: "body2", fontWeight: "regular", color: "text", children: "Safari on iPhone" }) })] }), jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsx(MDBox, { mx: 2, lineHeight: 1, children: jsx(MDTypography, { variant: "button", color: "secondary", fontWeight: "regular", children: "US" }) }), jsxs(MDTypography, { component: "a", href: "#", variant: "button", color: "info", fontWeight: "regular", sx: actionButtonStyles, children: ["See more\u00A0", jsx(Icon, { sx: { fontWeight: "bold", verticalAlign: "middle" }, children: "arrow_forward" })] })] })] })] })] })); +} + +function DeleteAccount() { + return (jsx(Card, { id: "delete-account", children: jsxs(MDBox, { pr: 3, display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsxs(MDBox, { p: 3, lineHeight: 1, children: [jsx(MDBox, { mb: 1, children: jsx(MDTypography, { variant: "h5", children: "Delete Account" }) }), jsx(MDTypography, { variant: "button", color: "text", children: "Once you delete your account, there is no going back. Please be certain." })] }), jsxs(MDBox, { display: "flex", flexDirection: { xs: "column", sm: "row" }, children: [jsx(MDButton, { variant: "outlined", color: "secondary", children: "deactivate" }), jsx(MDBox, { ml: { xs: 0, sm: 1 }, mt: { xs: 1, sm: 0 }, children: jsx(MDButton, { variant: "gradient", color: "error", sx: { height: "100%" }, children: "delete account" }) })] })] }) })); +} + +function Settings() { + return (jsx(BaseLayout, { children: jsx(MDBox, { mt: 4, children: jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, lg: 3, children: jsx(Sidenav, {}) }), jsx(Grid, { item: true, xs: 12, lg: 9, children: jsx(MDBox, { mb: 3, children: jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, children: jsx(Header, {}) }), jsx(Grid, { item: true, xs: 12, children: jsx(BasicInfo, {}) }), jsx(Grid, { item: true, xs: 12, children: jsx(ChangePassword, {}) }), jsx(Grid, { item: true, xs: 12, children: jsx(Authentication, {}) }), jsx(Grid, { item: true, xs: 12, children: jsx(Accounts, {}) }), jsx(Grid, { item: true, xs: 12, children: jsx(Notifications, {}) }), jsx(Grid, { item: true, xs: 12, children: jsx(Sessions, {}) }), jsx(Grid, { item: true, xs: 12, children: jsx(DeleteAccount, {}) })] }) }) })] }) }) })); +} + +function DefaultNavbarDropdown({ name, icon, children, collapseStatus, light, href, route, collapse, ...rest }) { + const linkComponent = { + component: "a", + href, + target: "_blank", + rel: "noreferrer", + }; + const routeComponent = { + component: Link$1, + to: route, + }; + return (jsxs(Fragment, { children: [jsxs(MDBox, { ...rest, mx: 1, p: 1, display: "flex", alignItems: "baseline", color: light ? "white" : "dark", opacity: light ? 1 : 0.6, sx: { cursor: "pointer", userSelect: "none" }, ...(route && routeComponent), ...(href && linkComponent), children: [jsx(MDTypography, { variant: "body2", lineHeight: 1, color: "inherit", sx: { alignSelf: "center", "& *": { verticalAlign: "middle" } }, children: icon }), jsx(MDTypography, { variant: "button", fontWeight: "regular", textTransform: "capitalize", color: light ? "white" : "dark", sx: { fontWeight: "100%", ml: 1, mr: 0.25 }, children: name }), jsx(MDTypography, { variant: "body2", color: light ? "white" : "dark", ml: "auto", children: jsx(Icon, { sx: { fontWeight: "normal", verticalAlign: "middle" }, children: collapse && "keyboard_arrow_down" }) })] }), children && (jsx(Collapse, { in: Boolean(collapseStatus), timeout: 400, unmountOnExit: true, children: children }))] })); +} +// Declaring default props for DefaultNavbarDropdown +DefaultNavbarDropdown.defaultProps = { + icon: false, + children: false, + collapseStatus: false, + light: false, + href: "", + route: "", +}; + +function DefaultNavbarMobile({ routes, open }) { + const [collapse, setCollapse] = useState(""); + const handleSetCollapse = (name) => collapse === name ? setCollapse(false) : setCollapse(name); + const renderNavbarItems = routes.map(({ name, icon, collapse: routeCollapses, href, route, collapse: navCollapse }) => (jsx(DefaultNavbarDropdown, { name: name, icon: icon, collapseStatus: name === collapse, onClick: () => handleSetCollapse(name), href: href, route: route, collapse: Boolean(navCollapse), children: jsx(MDBox, { sx: { height: "15rem", maxHeight: "15rem", overflowY: "scroll" }, children: routeCollapses && + routeCollapses.map((item) => (jsx(MDBox, { px: 2, children: item.collapse ? (jsxs(Fragment, { children: [jsx(MDTypography, { display: "block", variant: "button", fontWeight: "bold", textTransform: "capitalize", py: 1, px: 0.5, children: item.name }), item.collapse.map((el) => (jsx(MDTypography, { component: el.route ? Link$1 : Link, to: el.route ? el.route : "", href: el.href ? el.href : "", target: el.href ? "_blank" : "", rel: el.href ? "noreferrer" : "noreferrer", minWidth: "11.25rem", display: "block", variant: "button", color: "text", textTransform: "capitalize", fontWeight: "regular", py: 0.625, px: 2, sx: ({ palette: { grey, dark }, borders: { borderRadius } }) => ({ + borderRadius: borderRadius.md, + cursor: "pointer", + transition: "all 300ms linear", + "&:hover": { + backgroundColor: grey[200], + color: dark.main, + }, + }), children: el.name }, el.name)))] })) : (jsxs(MDBox, { display: "block", component: item.route ? Link$1 : Link, to: item.route ? item.route : "", href: item.href ? item.href : "", target: item.href ? "_blank" : "", rel: item.href ? "noreferrer" : "noreferrer", sx: ({ palette: { grey, dark }, borders: { borderRadius } }) => ({ + borderRadius: borderRadius.md, + cursor: "pointer", + transition: "all 300ms linear", + py: 1, + px: 1.625, + "&:hover": { + backgroundColor: grey[200], + color: dark.main, + "& *": { + color: dark.main, + }, + }, + }), children: [jsx(MDTypography, { display: "block", variant: "button", fontWeight: "bold", textTransform: "capitalize", children: item.name }), jsx(MDTypography, { display: "block", variant: "button", color: "text", fontWeight: "regular", sx: { transition: "all 300ms linear" }, children: item.description })] }, item.key)) }, item.name))) }) }, name))); + return (jsx(Collapse, { in: Boolean(open), timeout: "auto", unmountOnExit: true, children: jsx(MDBox, { width: "calc(100% + 1.625rem)", my: 2, ml: -2, children: renderNavbarItems }) })); +} + +function NewGrow(props) { + return jsx(Grow, { ...props }); +} +function DefaultNavbar({ routes, brand, transparent, light, action }) { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + const [dropdown, setDropdown] = useState(""); + const [dropdownEl, setDropdownEl] = useState(""); + const [dropdownName, setDropdownName] = useState(""); + const [nestedDropdown, setNestedDropdown] = useState(""); + const [nestedDropdownEl, setNestedDropdownEl] = useState(""); + const [nestedDropdownName, setNestedDropdownName] = useState(""); + const [arrowRef, setArrowRef] = useState(null); + const [mobileNavbar, setMobileNavbar] = useState(false); + const [mobileView, setMobileView] = useState(false); + const openMobileNavbar = () => setMobileNavbar(!mobileNavbar); + useEffect(() => { + // A function that sets the display state for the DefaultNavbarMobile. + function displayMobileNavbar() { + if (window.innerWidth < breakpoints$1.values.lg) { + setMobileView(true); + setMobileNavbar(false); + } + else { + setMobileView(false); + setMobileNavbar(false); + } + } + /** + The event listener that's calling the displayMobileNavbar function when + resizing the window. + */ + window.addEventListener("resize", displayMobileNavbar); + // Call the displayMobileNavbar function to set the state with the initial value. + displayMobileNavbar(); + // Remove event listener on cleanup + return () => window.removeEventListener("resize", displayMobileNavbar); + }, []); + const renderNavbarItems = routes.map(({ name, icon, href, route, collapse }) => (jsx(DefaultNavbarDropdown, { name: name, icon: icon, href: href, route: route, collapse: Boolean(collapse), onMouseEnter: ({ currentTarget }) => { + if (collapse) { + setDropdown(currentTarget); + setDropdownEl(currentTarget); + setDropdownName(name); + } + }, onMouseLeave: () => collapse && setDropdown(null), light: light }, name))); + // Render the routes on the dropdown menu + const renderRoutes = routes.map(({ name, collapse, columns, rowsPerColumn }) => { + let template; + // Render the dropdown menu that should be display as columns + if (collapse && columns && name === dropdownName) { + const calculateColumns = collapse.reduce((resultArray, item, index) => { + const chunkIndex = Math.floor(index / rowsPerColumn); + if (!resultArray[chunkIndex]) { + resultArray[chunkIndex] = []; + } + resultArray[chunkIndex].push(item); + return resultArray; + }, []); + template = (jsx(Grid, { container: true, spacing: 3, py: 1, px: 1.5, children: calculateColumns.map((cols, key) => { + const gridKey = `grid-${key}`; + const dividerKey = `divider-${key}`; + return (jsxs(Grid, { item: true, xs: 12 / columns, sx: { position: "relative" }, children: [cols.map((col, index) => (jsxs(Fragment$1, { children: [jsxs(MDBox, { width: "100%", display: "flex", alignItems: "center", py: 1, mt: index !== 0 ? 2 : 0, children: [jsx(MDBox, { display: "flex", justifyContent: "center", alignItems: "center", width: "1.5rem", height: "1.5rem", borderRadius: "md", color: "text", mr: 1, fontSize: "1rem", lineHeight: 1, children: col.icon }), jsx(MDTypography, { display: "block", variant: "button", fontWeight: "bold", textTransform: "capitalize", children: col.name })] }), col.collapse.map((item) => (jsx(MDTypography, { component: item.route ? Link$1 : Link, to: item.route ? item.route : "", href: item.href ? item.href : (e) => e.preventDefault(), target: item.href ? "_blank" : "", rel: item.href ? "noreferrer" : "noreferrer", minWidth: "11.25rem", display: "block", variant: "button", color: "text", textTransform: "capitalize", fontWeight: "regular", py: 0.625, px: 2, sx: ({ palette: { grey, dark }, borders: { borderRadius } }) => ({ + borderRadius: borderRadius.md, + cursor: "pointer", + transition: "all 300ms linear", + "&:hover": { + backgroundColor: grey[200], + color: dark.main, + }, + }), children: item.name }, item.name)))] }, col.name))), key !== 0 && (jsx(Divider, { orientation: "vertical", sx: { + position: "absolute", + top: "50%", + left: "-4px", + transform: "translateY(-45%)", + height: "90%", + } }, dividerKey))] }, gridKey)); + }) }, name)); + // Render the dropdown menu that should be display as list items + } + else if (collapse && name === dropdownName) { + template = collapse.map((item) => { + const linkComponent = { + component: Link, + href: item.href, + target: "_blank", + rel: "noreferrer", + }; + const routeComponent = { + component: Link$1, + to: item.route, + }; + return (jsxs(MDTypography, { ...(item.route ? routeComponent : linkComponent), display: "flex", justifyContent: "space-between", alignItems: "center", variant: "button", textTransform: "capitalize", minWidth: item.description ? "14rem" : "12rem", color: item.description ? "dark" : "text", fontWeight: item.description ? "bold" : "regular", py: item.description ? 1 : 0.625, px: 2, sx: ({ palette: { grey, dark }, borders: { borderRadius } }) => ({ + borderRadius: borderRadius.md, + cursor: "pointer", + transition: "all 300ms linear", + "&:hover": { + backgroundColor: grey[200], + color: dark.main, + "& *": { + color: dark.main, + }, + }, + }), onMouseEnter: ({ currentTarget }) => { + if (item.dropdown) { + setNestedDropdown(currentTarget); + setNestedDropdownEl(currentTarget); + setNestedDropdownName(item.name); + } + }, onMouseLeave: () => { + if (item.dropdown) { + setNestedDropdown(null); + } + }, children: [item.description ? (jsxs(MDBox, { display: "flex", py: 0.25, fontSize: "1rem", color: "text", children: [typeof item.icon === "string" ? (jsx(Icon, { color: "inherit", children: item.icon })) : (jsx(MDBox, { color: "inherit", children: item.icon })), jsxs(MDBox, { pl: 1, lineHeight: 0, children: [jsx(MDTypography, { variant: "button", display: "block", fontWeight: "bold", textTransform: "capitalize", children: item.name }), jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: item.description })] })] })) : (jsxs(MDBox, { display: "flex", alignItems: "center", color: "text", children: [jsx(Icon, { sx: { mr: 1 }, children: item.icon }), item.name] })), item.collapse && (jsx(Icon, { sx: { fontWeight: "normal", verticalAlign: "middle", mr: -0.5 }, children: "keyboard_arrow_right" }))] }, item.name)); + }); + } + return template; + }); + // Routes dropdown menu + const dropdownMenu = (jsx(Popper, { anchorEl: dropdown, popperRef: null, open: Boolean(dropdown), placement: "top-start", transition: true, style: { zIndex: 10 }, modifiers: [ + { + name: "arrow", + enabled: true, + options: { + element: arrowRef, + }, + }, + ], onMouseEnter: () => setDropdown(dropdownEl), onMouseLeave: () => { + if (!nestedDropdown) { + setDropdown(null); + setDropdownName(""); + } + }, children: ({ TransitionProps }) => (jsx(NewGrow, { ...TransitionProps, sx: { + transformOrigin: "left top", + background: ({ palette: { white } }) => white.main, + }, children: jsxs(MDBox, { borderRadius: "lg", children: [jsx(MDTypography, { variant: "h1", color: "white", children: jsx(Icon, { ref: setArrowRef, sx: { mt: -3 }, children: "arrow_drop_up" }) }), jsx(MDBox, { shadow: "lg", borderRadius: "lg", p: 1.625, mt: 1, children: renderRoutes })] }) })) })); + // Render routes that are nested inside the dropdown menu routes + const renderNestedRoutes = routes.map(({ collapse, columns }) => collapse && !columns + ? collapse.map(({ name: parentName, collapse: nestedCollapse }) => { + let template; + if (parentName === nestedDropdownName) { + template = + nestedCollapse && + nestedCollapse.map((item) => { + const linkComponent = { + component: Link, + href: item.href, + target: "_blank", + rel: "noreferrer", + }; + const routeComponent = { + component: Link$1, + to: item.route, + }; + return (jsxs(MDTypography, { ...(item.route ? routeComponent : linkComponent), display: "flex", justifyContent: "space-between", alignItems: "center", variant: "button", textTransform: "capitalize", minWidth: item.description ? "14rem" : "12rem", color: item.description ? "dark" : "text", fontWeight: item.description ? "bold" : "regular", py: item.description ? 1 : 0.625, px: 2, sx: ({ palette: { grey, dark }, borders: { borderRadius } }) => ({ + borderRadius: borderRadius.md, + cursor: "pointer", + transition: "all 300ms linear", + "&:hover": { + backgroundColor: grey[200], + color: dark.main, + "& *": { + color: dark.main, + }, + }, + }), children: [item.description ? (jsxs(MDBox, { children: [item.name, jsx(MDTypography, { display: "block", variant: "button", color: "text", fontWeight: "regular", sx: { transition: "all 300ms linear" }, children: item.description })] })) : (item.name), item.collapse && (jsx(Icon, { fontSize: "small", sx: { fontWeight: "normal", verticalAlign: "middle", mr: -0.5 }, children: "keyboard_arrow_right" }))] }, item.name)); + }); + } + return template; + }) + : null); + // Dropdown menu for the nested dropdowns + const nestedDropdownMenu = (jsx(Popper, { anchorEl: nestedDropdown, popperRef: null, open: Boolean(nestedDropdown), placement: "right-start", transition: true, style: { zIndex: 10 }, onMouseEnter: () => { + setNestedDropdown(nestedDropdownEl); + }, onMouseLeave: () => { + setNestedDropdown(null); + setNestedDropdownName(""); + setDropdown(null); + }, children: ({ TransitionProps }) => (jsx(NewGrow, { ...TransitionProps, sx: { + transformOrigin: "left top", + background: ({ palette: { white } }) => white.main, + }, children: jsx(MDBox, { ml: 2.5, mt: -2.5, borderRadius: "lg", children: jsx(MDBox, { shadow: "lg", borderRadius: "lg", py: 1.5, px: 1, mt: 2, children: renderNestedRoutes }) }) })) })); + return (jsxs(Container, { children: [jsxs(MDBox, { py: 1, px: { xs: 4, sm: transparent ? 2 : 3, lg: transparent ? 0 : 2 }, my: 3, mx: 3, width: "calc(100% - 48px)", borderRadius: "lg", shadow: transparent ? "none" : "md", color: light ? "white" : "dark", display: "flex", justifyContent: "space-between", alignItems: "center", position: "absolute", left: 0, zIndex: 3, sx: ({ palette: { transparent: transparentColor, white, background }, functions: { rgba }, }) => ({ + backgroundColor: transparent + ? transparentColor.main + : rgba(darkMode ? background.sidenav : white.main, 0.8), + backdropFilter: transparent ? "none" : `saturate(200%) blur(30px)`, + }), children: [jsx(MDBox, { component: Link$1, to: "/", py: transparent ? 1.5 : 0.75, lineHeight: 1, pl: { xs: 0, lg: 1 }, children: jsx(MDTypography, { variant: "button", fontWeight: "bold", color: light ? "white" : "dark", children: brand }) }), jsx(MDBox, { color: "inherit", display: { xs: "none", lg: "flex" }, m: 0, p: 0, children: renderNavbarItems }), action && + (action.type === "internal" ? (jsx(MDBox, { display: { xs: "none", lg: "inline-block" }, children: jsx(MDButton, { component: Link$1, to: action.route, variant: "gradient", color: action.color ? action.color : "info", size: "small", children: action.label }) })) : (jsx(MDBox, { display: { xs: "none", lg: "inline-block" }, children: jsx(MDButton, { component: "a", href: action.route, target: "_blank", rel: "noreferrer", variant: "gradient", color: action.color ? action.color : "info", size: "small", sx: { mt: -0.3 }, children: action.label }) }))), jsx(MDBox, { display: { xs: "inline-block", lg: "none" }, lineHeight: 0, py: 1.5, pl: 1.5, color: "inherit", sx: { cursor: "pointer" }, onClick: openMobileNavbar, children: mobileView && jsx(DefaultNavbarMobile, { routes: routes, open: mobileNavbar }) })] }), dropdownMenu, nestedDropdownMenu] })); +} +// Declaring default props for DefaultNavbar +DefaultNavbar.defaultProps = { + brand: "Material Dashboard PRO", + transparent: false, + light: false, + action: false, +}; + +function PageLayout({ background, children }) { + const [, dispatch] = useMaterialUIController(); + const { pathname } = useLocation(); + useEffect(() => { + setLayout(dispatch, "page"); + }, [pathname]); + return (jsx(MDBox, { width: "100vw", height: "100%", minHeight: "100vh", bgColor: background, sx: { overflowX: "hidden" }, children: children })); +} +// Declaring default props for PageLayout +PageLayout.defaultProps = { + background: "default", +}; + +const pageRoutes = [ + { + name: "pages", + columns: 3, + rowsPerColumn: 2, + collapse: [ + { + name: "dashboards", + icon: jsx(Icon, { children: "dashboard" }), + collapse: [ + { + name: "analytics", + route: "/dashboards/analytics", + }, + { + name: "sales", + route: "/dashboards/sales", + }, + ], + }, + { + name: "users", + icon: jsx(Icon, { children: "people" }), + collapse: [ + { + name: "reports", + route: "/pages/users/reports", + }, + ], + }, + { + name: "extra", + icon: jsx(Icon, { children: "queue_play_next" }), + collapse: [ + { + name: "pricing page", + route: "/pages/pricing-page", + }, + { name: "RTL", route: "/pages/rtl" }, + { name: "widgets", route: "/pages/widgets" }, + { name: "charts", route: "/pages/charts" }, + { + name: "notfications", + route: "/pages/notifications", + }, + ], + }, + { + name: "projects", + icon: jsx(Icon, { children: "precision_manufacturing" }), + collapse: [ + { + name: "timeline", + route: "/pages/projects/timeline", + }, + ], + }, + { + name: "account", + icon: jsx(Icon, { children: "account_balance" }), + collapse: [ + { + name: "settings", + route: "/pages/account/setting", + }, + { + name: "billing", + route: "/pages/account/billing", + }, + { + name: "invoice", + route: "/pages/account/invoice", + }, + ], + }, + { + name: "profile", + icon: jsx(Icon, { children: "badge" }), + collapse: [ + { + name: "profile overview", + route: "/pages/profile/profile-overview", + }, + { + name: "all projects", + route: "/pages/profile/all-projects", + }, + ], + }, + ], + }, + { + name: "authenticaton", + collapse: [ + { + name: "sign in", + dropdown: true, + icon: jsx(Icon, { children: "login" }), + collapse: [ + { + name: "basic", + route: "/authentication/sign-in/basic", + }, + { + name: "cover", + route: "/authentication/sign-in/cover", + }, + { + name: "illustration", + route: "/authentication/sign-in/illustration", + }, + ], + }, + { + name: "sign up", + dropdown: true, + icon: jsx(Icon, { children: "assignment" }), + collapse: [ + { + name: "cover", + route: "/authentication/sign-up/cover", + }, + ], + }, + { + name: "reset password", + dropdown: true, + icon: jsx(Icon, { children: "restart_alt" }), + collapse: [ + { + name: "cover", + route: "/authentication/reset-password/cover", + }, + ], + }, + ], + }, + { + name: "application", + collapse: [ + { + name: "kanban", + route: "/applications/kanban", + icon: "widgets", + }, + { + name: "wizard", + route: "/applications/wizard", + icon: "import_contacts", + }, + { + name: "data tables", + route: "/applications/data-tables", + icon: "backup_table", + }, + { + name: "calendar", + route: "/applications/calendar", + icon: "event", + }, + ], + }, + { + name: "ecommerce", + columns: 2, + rowsPerColumn: 1, + collapse: [ + { + name: "orders", + icon: jsx(Icon, { children: "shopping_cart" }), + collapse: [ + { + name: "order list", + route: "/ecommerce/orders/order-list", + }, + { + name: "order details", + route: "/ecommerce/orders/order-details", + }, + ], + }, + { + name: "products", + icon: jsx(Icon, { children: "memory" }), + collapse: [ + { + name: "new product", + route: "/ecommerce/products/new-product", + }, + { + name: "edit product", + route: "/ecommerce/products/edit-product", + }, + { + name: "product page", + route: "/ecommerce/products/product-page", + }, + ], + }, + ], + }, + { + name: "docs", + collapse: [ + { + name: "getting started", + href: "https://www.creative-tim.com/learning-lab/react/quick-start/material-dashboard/", + description: "All about overview, quick start, license and contents", + icon: jsx(Icon, { children: "article" }), + }, + { + name: "foundation", + href: "https://www.creative-tim.com/learning-lab/react/colors/material-dashboard/", + description: "See our colors, icons and typography", + icon: jsx(Icon, { children: "grading" }), + }, + { + name: "components", + href: "https://www.creative-tim.com/learning-lab/react/alerts/material-dashboard/", + description: "Explore our collection of fully designed components", + icon: jsx(Icon, { children: "apps" }), + }, + { + name: "plugins", + href: "https://www.creative-tim.com/learning-lab/react/datepicker/material-dashboard/", + description: "Check how you can integrate our plugins", + icon: jsx(Icon, { children: "extension" }), + }, + ], + }, +]; + +function Footer({ light }) { + const { size } = typography$1; + return (jsx(MDBox, { position: "absolute", width: "100%", bottom: 0, py: 4, children: jsx(Container, { children: jsxs(MDBox, { width: "100%", display: "flex", flexDirection: { xs: "column", lg: "row" }, justifyContent: "space-between", alignItems: "center", px: 1.5, children: [jsxs(MDBox, { display: "flex", justifyContent: "center", alignItems: "center", flexWrap: "wrap", color: light ? "white" : "text", fontSize: size.sm, children: ["\u00A9 ", new Date().getFullYear(), ", made with", jsx(MDBox, { fontSize: size.md, color: light ? "white" : "dark", mb: -0.5, mx: 0.25, children: jsx(Icon, { color: "inherit", fontSize: "inherit", children: "favorite" }) }), "by", jsx(Link, { href: "https://www.creative-tim.com/", target: "_blank", children: jsx(MDTypography, { variant: "button", fontWeight: "medium", color: light ? "white" : "dark", children: "\u00A0Creative Tim\u00A0" }) }), "for a better web."] }), jsxs(MDBox, { component: "ul", sx: ({ breakpoints }) => ({ + display: "flex", + flexWrap: "wrap", + alignItems: "center", + justifyContent: "center", + listStyle: "none", + mt: 3, + mb: 0, + p: 0, + [breakpoints.up("lg")]: { + mt: 0, + }, + }), children: [jsx(MDBox, { component: "li", pr: 2, lineHeight: 1, children: jsx(Link, { href: "https://www.creative-tim.com/", target: "_blank", children: jsx(MDTypography, { variant: "button", fontWeight: "regular", color: light ? "white" : "dark", children: "Creative Tim" }) }) }), jsx(MDBox, { component: "li", px: 2, lineHeight: 1, children: jsx(Link, { href: "https://www.creative-tim.com/presentation", target: "_blank", children: jsx(MDTypography, { variant: "button", fontWeight: "regular", color: light ? "white" : "dark", children: "About Us" }) }) }), jsx(MDBox, { component: "li", px: 2, lineHeight: 1, children: jsx(Link, { href: "https://www.creative-tim.com/blog", target: "_blank", children: jsx(MDTypography, { variant: "button", fontWeight: "regular", color: light ? "white" : "dark", children: "Blog" }) }) }), jsx(MDBox, { component: "li", pl: 2, lineHeight: 1, children: jsx(Link, { href: "https://www.creative-tim.com/license", target: "_blank", children: jsx(MDTypography, { variant: "button", fontWeight: "regular", color: light ? "white" : "dark", children: "License" }) }) })] })] }) }) })); +} +// Declaring default props for Footer +Footer.defaultProps = { + light: false, +}; + +function BasicLayout({ image, children }) { + return (jsxs(PageLayout, { children: [jsx(DefaultNavbar, { routes: pageRoutes, action: { + type: "external", + route: "https://creative-tim.com/product/material-dashboard-2-pro-react-ts", + label: "buy now", + color: "info", + }, transparent: true, light: true }), jsx(MDBox, { position: "absolute", width: "100%", minHeight: "100vh", sx: { + backgroundImage: ({ functions: { linearGradient, rgba }, palette: { gradients }, }) => image && + `${linearGradient(rgba(gradients.dark.main, 0.6), rgba(gradients.dark.state, 0.6))}, url(${image})`, + backgroundSize: "cover", + backgroundPosition: "center", + backgroundRepeat: "no-repeat", + } }), jsx(MDBox, { px: 1, width: "100%", height: "100vh", mx: "auto", children: jsx(Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center", height: "100%", children: jsx(Grid, { item: true, xs: 11, sm: 9, md: 5, lg: 4, xl: 3, children: children }) }) }), jsx(Footer, { light: true })] })); +} + +function Basic() { + const [rememberMe, setRememberMe] = useState(false); + const handleSetRememberMe = () => setRememberMe(!rememberMe); + return (jsx(BasicLayout, { image: bgImage, children: jsxs(Card, { children: [jsxs(MDBox, { variant: "gradient", bgColor: "info", borderRadius: "lg", coloredShadow: "info", mx: 2, mt: -3, p: 2, mb: 1, textAlign: "center", children: [jsx(MDTypography, { variant: "h4", fontWeight: "medium", color: "white", mt: 1, children: "Sign in" }), jsxs(Grid, { container: true, spacing: 3, justifyContent: "center", sx: { mt: 1, mb: 2 }, children: [jsx(Grid, { item: true, xs: 2, children: jsx(MDTypography, { component: Link, href: "#", variant: "body1", color: "white", children: jsx(FacebookIcon, { color: "inherit" }) }) }), jsx(Grid, { item: true, xs: 2, children: jsx(MDTypography, { component: Link, href: "#", variant: "body1", color: "white", children: jsx(GitHubIcon, { color: "inherit" }) }) }), jsx(Grid, { item: true, xs: 2, children: jsx(MDTypography, { component: Link, href: "#", variant: "body1", color: "white", children: jsx(GoogleIcon, { color: "inherit" }) }) })] })] }), jsx(MDBox, { pt: 4, pb: 3, px: 3, children: jsxs(MDBox, { component: "form", role: "form", children: [jsx(MDBox, { mb: 2, children: jsx(MDInput, { type: "email", label: "Email", fullWidth: true }) }), jsx(MDBox, { mb: 2, children: jsx(MDInput, { type: "password", label: "Password", fullWidth: true }) }), jsxs(MDBox, { display: "flex", alignItems: "center", ml: -1, children: [jsx(Switch, { checked: rememberMe, onChange: handleSetRememberMe }), jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", onClick: handleSetRememberMe, sx: { cursor: "pointer", userSelect: "none", ml: -1 }, children: "\u00A0\u00A0Remember me" })] }), jsx(MDBox, { mt: 4, mb: 1, children: jsx(MDButton, { variant: "gradient", color: "info", fullWidth: true, children: "sign in" }) }), jsx(MDBox, { mt: 3, mb: 1, textAlign: "center", children: jsxs(MDTypography, { variant: "button", color: "text", children: ["Don't have an account?", " ", jsx(MDTypography, { component: Link$1, to: "/authentication/sign-up/cover", variant: "button", color: "info", fontWeight: "medium", textGradient: true, children: "Sign up" })] }) })] }) })] }) })); +} + +// import DefaultCell from "../../layouts/ecommerce/orders/order-list/components/DefaultCell"; +// import team2 from "../../assets/images/team-2.jpg"; +// import team3 from "../../assets/images/team-3.jpg"; +const qController$1 = new QController("http://localhost:8000"); +console.log(qController$1); +/* +function entityCell({ value }: any) { + const [name, data] = value; + return ( + + ); +} + + */ +let dataTableData = { + columns: [], + rows: [], +}; +function EntityList({ table }) { + const [menu, setMenu] = useState(null); + const openMenu = (event) => setMenu(event.currentTarget); + const closeMenu = () => setMenu(null); + (async () => { + await qController$1.loadTableMetaData(table.name).then((tableMetaData) => { + // alert(typeof tableMetaData); + // alert(typeof tableMetaData.fields); + // alert(Object.keys(tableMetaData.fields)); + dataTableData = { + columns: [], + rows: [], + }; + dataTableData.columns.push({ Header: "derp", accessor: "derp", width: "20%" }); + Object.keys(tableMetaData.fields).forEach((key) => { + dataTableData.columns.push({ + Header: key, + accessor: key, + }); + }); + qController$1.query(table.name).then((results) => { + alert(results.length); + results.forEach((record) => { + alert(record); + const row = new Map(); + Object.keys(record.values).forEach((key) => { + row.set(key, record.values.get(key)); + }); + alert(row); + dataTableData.rows.push(row); + }); + }); + dataTableData.rows.push({ + id: "234", + firstName: "tim", + lastName: "chambers", + modifyDate: "8/27/2020", + email: "tim@tim.tim", + createDate: "8/27/2020", + birthDate: "8/27/2020", + }); + /* + Object.keys(tableMetaData.fields).forEach((key) => { + dataTableData.columns.push({ + Header: key, + accessor: key, + Cell: entityCell, + }); + }); + + dataTableData.rows = [ + { + id: "#10421", + date: "1 Nov, 10:20 AM", + status: "paid", + customer: ["Orlando Imieto", { image: team2 }], + product: "Nike Sport V2", + revenue: "$140,20", + }, + ]; + + alert(dataTableData.rows.length); + + */ + }); + })(); + const renderMenu = (jsxs(Menu, { anchorEl: menu, anchorOrigin: { vertical: "bottom", horizontal: "left" }, transformOrigin: { vertical: "top", horizontal: "left" }, open: Boolean(menu), onClose: closeMenu, keepMounted: true, children: [jsx(MenuItem, { onClick: closeMenu, children: "Status: Paid" }), jsx(MenuItem, { onClick: closeMenu, children: "Status: Refunded" }), jsx(MenuItem, { onClick: closeMenu, children: "Status: Canceled" }), jsx(Divider, { sx: { margin: "0.5rem 0" } }), jsx(MenuItem, { onClick: closeMenu, children: jsx(MDTypography, { variant: "button", color: "error", fontWeight: "regular", children: "Remove Filter" }) })] })); + return (jsxs(DashboardLayout, { children: [jsx(DashboardNavbar, {}), jsxs(MDBox, { my: 3, children: [jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "flex-start", mb: 2, children: [jsxs(MDButton, { variant: "gradient", color: "info", children: ["new ", table.label] }), jsxs(MDBox, { display: "flex", children: [jsxs(MDButton, { variant: menu ? "contained" : "outlined", color: "dark", onClick: openMenu, children: ["filters\u00A0", jsx(Icon, { children: "keyboard_arrow_down" })] }), renderMenu, jsx(MDBox, { ml: 1, children: jsxs(MDButton, { variant: "outlined", color: "dark", children: [jsx(Icon, { children: "description" }), "\u00A0export csv"] }) })] })] }), jsx(Card, { children: jsx(DataTable, { table: dataTableData, entriesPerPage: false, canSearch: true }) })] }), jsx(Footer$1, {})] })); +} + +// import { QTableMetaData } from "qqq-frontend-core/lib/model/metaData/QTableMetaData"; +// import thing from "qqq-frontend-core/lib/qqq-frontend-core.js"; +// import QController from "qqq-frontend-core/lib/qqq-frontend-core.js"; +// import {QTableMetaData} from "qqq-frontend-core/lib/model/metaData/QTableMetaData"; +// import {QFieldMetaData} from "qqq-frontend-core/lib/model/metaData/QFieldMetaData"; +// import {QFieldType} from "qqq-frontend-core/lib/model/metaData/QFieldType"; +const qqqRoutes = [ + { + type: "collapse", + name: "Brooklyn Alice", + key: "brooklyn-alice", + icon: jsx(MDAvatar, { src: team3, alt: "Brooklyn Alice", size: "sm" }), + collapse: [ + { + name: "My Profile", + key: "my-profile", + route: "/pages/profile/profile-overview", + component: jsx(Overview, {}), + }, + { + name: "Settings", + key: "profile-settings", + route: "/pages/account/settings", + component: jsx(Settings, {}), + }, + { + name: "Logout", + key: "logout", + route: "/authentication/sign-in/basic", + component: jsx(Basic, {}), + }, + ], + }, + { type: "divider", key: "divider-0" }, + { + type: "collapse", + name: "Dashboards", + key: "dashboards", + icon: jsx(Icon, { fontSize: "medium", children: "dashboard" }), + collapse: [ + { + name: "Analytics", + key: "analytics", + route: "/dashboards/analytics", + component: jsx(Analytics, {}), + }, + { + name: "Sales", + key: "sales", + route: "/dashboards/sales", + component: jsx(Sales, {}), + }, + ], + }, + /* + { type: "title", title: "Pages", key: "title-pages" }, + { + type: "collapse", + name: "Pages", + key: "pages", + icon: image, + collapse: [ + { + name: "Profile", + key: "profile", + collapse: [ + { + name: "Profile Overview", + key: "profile-overview", + route: "/pages/profile/profile-overview", + component: , + }, + { + name: "All Projects", + key: "all-projects", + route: "/pages/profile/all-projects", + component: , + }, + ], + }, + { + name: "Users", + key: "users", + collapse: [ + { + name: "New User", + key: "new-user", + route: "/pages/users/new-user", + component: , + }, + ], + }, + { + name: "Account", + key: "account", + collapse: [ + { + name: "Settings", + key: "settings", + route: "/pages/account/settings", + component: , + }, + { + name: "Billing", + key: "billing", + route: "/pages/account/billing", + component: , + }, + { + name: "Invoice", + key: "invoice", + route: "/pages/account/invoice", + component: , + }, + ], + }, + { + name: "Projects", + key: "projects", + collapse: [ + { + name: "Timeline", + key: "timeline", + route: "/pages/projects/timeline", + component: , + }, + ], + }, + { + name: "Pricing Page", + key: "pricing-page", + route: "/pages/pricing-page", + component: , + }, + { name: "RTL", key: "rtl", route: "/pages/rtl", component: }, + { name: "Widgets", key: "widgets", route: "/pages/widgets", component: }, + { name: "Charts", key: "charts", route: "/pages/charts", component: }, + { + name: "Notfications", + key: "notifications", + route: "/pages/notifications", + component: , + }, + ], + }, + { + type: "collapse", + name: "Applications", + key: "applications", + icon: apps, + collapse: [ + { + name: "Kanban", + key: "kanban", + route: "/applications/kanban", + component: , + }, + { + name: "Wizard", + key: "wizard", + route: "/applications/wizard", + component: , + }, + { + name: "Data Tables", + key: "data-tables", + route: "/applications/data-tables", + component: , + }, + { + name: "Calendar", + key: "calendar", + route: "/applications/calendar", + component: , + }, + ], + }, + { + type: "collapse", + name: "Ecommerce", + key: "ecommerce", + icon: shopping_basket, + collapse: [ + { + name: "Products", + key: "products", + collapse: [ + { + name: "New Product", + key: "new-product", + route: "/ecommerce/products/new-product", + component: , + }, + { + name: "Edit Product", + key: "edit-product", + route: "/ecommerce/products/edit-product", + component: , + }, + { + name: "Product Page", + key: "product-page", + route: "/ecommerce/products/product-page", + component: , + }, + ], + }, + { + name: "Orders", + key: "orders", + collapse: [ + { + name: "Order List", + key: "order-list", + route: "/ecommerce/orders/order-list", + component: , + }, + { + name: "Order Details", + key: "order-details", + route: "/ecommerce/orders/order-details", + component: , + }, + ], + }, + { + name: "Orders", + key: "orders", + collapse: [ + { + name: "Order List", + key: "order-list", + route: "/ecommerce/orders/order-list", + component: , + }, + { + name: "Order Details", + key: "order-details", + route: "/ecommerce/orders/order-details", + component: , + }, + ], + }, + ], + }, + { + type: "collapse", + name: "Authentication", + key: "authentication", + icon: content_paste, + collapse: [ + { + name: "Sign In", + key: "sign-in", + collapse: [ + { + name: "Basic", + key: "basic", + route: "/authentication/sign-in/basic", + component: , + }, + { + name: "Cover", + key: "cover", + route: "/authentication/sign-in/cover", + component: , + }, + { + name: "Illustration", + key: "illustration", + route: "/authentication/sign-in/illustration", + component: , + }, + ], + }, + { + name: "Sign Up", + key: "sign-up", + collapse: [ + { + name: "Cover", + key: "cover", + route: "/authentication/sign-up/cover", + component: , + }, + ], + }, + { + name: "Reset Password", + key: "reset-password", + collapse: [ + { + name: "Cover", + key: "cover", + route: "/authentication/reset-password/cover", + component: , + }, + ], + }, + ], + }, + */ + { type: "divider", key: "divider-1" }, + { type: "title", title: "Tables", key: "title-docs" }, +]; +const qController = new QController("http://localhost:8000"); +console.log(qController); +(async () => { + await qController.loadMetaData().then((metaData) => { + console.log(`metaData: ${metaData}`); + const tableList = []; + metaData.forEach((value, key) => { + const table = metaData.get(key); + tableList.push({ + name: table.label, + key: table.name, + route: `/${table.name}/list`, + component: jsx(EntityList, { table: table }), + }); + }); + const tables = { + type: "collapse", + name: "Tables", + key: "tables", + icon: jsx(Icon, { fontSize: "medium", children: "dashboard" }), + collapse: tableList, + }; + qqqRoutes.push(tables); + }); +})(); + +function App() { + const [controller, dispatch] = useMaterialUIController(); + const { miniSidenav, direction, layout, openConfigurator, sidenavColor, transparentSidenav, whiteSidenav, darkMode, } = controller; + const [onMouseEnter, setOnMouseEnter] = useState(false); + const [rtlCache, setRtlCache] = useState(null); + const { pathname } = useLocation(); + // Cache for the rtl + useMemo(() => { + const pluginRtl = rtlPlugin; + const cacheRtl = createCache({ + key: "rtl", + stylisPlugins: [pluginRtl], + }); + setRtlCache(cacheRtl); + }, []); + // Open sidenav when mouse enter on mini sidenav + const handleOnMouseEnter = () => { + if (miniSidenav && !onMouseEnter) { + setMiniSidenav(dispatch, false); + setOnMouseEnter(true); + } + }; + // Close sidenav when mouse leave mini sidenav + const handleOnMouseLeave = () => { + if (onMouseEnter) { + setMiniSidenav(dispatch, true); + setOnMouseEnter(false); + } + }; + // Change the openConfigurator state + const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator); + // Setting the dir attribute for the body element + useEffect(() => { + document.body.setAttribute("dir", direction); + }, [direction]); + // Setting page scroll to 0 when changing the route + useEffect(() => { + document.documentElement.scrollTop = 0; + document.scrollingElement.scrollTop = 0; + }, [pathname]); + const getRoutes = (allRoutes) => allRoutes.map((route) => { + if (route.collapse) { + return getRoutes(route.collapse); + } + if (route.route) { + return jsx(Route, { path: route.route, element: route.component }, route.key); + } + return null; + }); + const configsButton = (jsx(MDBox, { display: "flex", justifyContent: "center", alignItems: "center", width: "3.25rem", height: "3.25rem", bgColor: "white", shadow: "sm", borderRadius: "50%", position: "fixed", right: "2rem", bottom: "2rem", zIndex: 99, color: "dark", sx: { cursor: "pointer" }, onClick: handleConfiguratorOpen, children: jsx(Icon, { fontSize: "small", color: "inherit", children: "settings" }) })); + return direction === "rtl" ? (jsx(CacheProvider, { value: rtlCache, children: jsxs(ThemeProvider, { theme: darkMode ? themeDarkRTL : themeRTL, children: [jsx(CssBaseline, {}), layout === "dashboard" && (jsxs(Fragment, { children: [jsx(Sidenav$1, { color: sidenavColor, brand: (transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite, brandName: "Material Dashboard PRO", routes: qqqRoutes, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave }), jsx(Configurator, {}), configsButton] })), layout === "vr" && jsx(Configurator, {}), jsxs(Routes, { children: [getRoutes(qqqRoutes), jsx(Route, { path: "*", element: jsx(Navigate, { to: "/dashboards/analytics" }) })] })] }) })) : (jsxs(ThemeProvider, { theme: darkMode ? themeDark : theme, children: [jsx(CssBaseline, {}), layout === "dashboard" && (jsxs(Fragment, { children: [jsx(Sidenav$1, { color: sidenavColor, brand: (transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite, brandName: "Material Dashboard PRO", routes: qqqRoutes, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave }), jsx(Configurator, {}), configsButton] })), layout === "vr" && jsx(Configurator, {}), jsxs(Routes, { children: [getRoutes(qqqRoutes), jsx(Route, { path: "*", element: jsx(Navigate, { to: "/dashboards/analytics" }) })] })] })); +} + +ReactDOM.render(jsx(BrowserRouter, { children: jsx(MaterialUIControllerProvider, { children: jsx(App, {}) }) }), document.getElementById("root")); diff --git a/dist/index.js b/dist/index.js new file mode 100644 index 0000000..f1cd547 --- /dev/null +++ b/dist/index.js @@ -0,0 +1,10492 @@ +'use strict'; + +var jsxRuntime = require('react/jsx-runtime'); +var ReactDOM = require('react-dom'); +var reactRouterDom = require('react-router-dom'); +var react = require('react'); +var styles = require('@mui/material/styles'); +var CssBaseline = require('@mui/material/CssBaseline'); +var Icon = require('@mui/material/Icon'); +var Box = require('@mui/material/Box'); +var List = require('@mui/material/List'); +var Divider = require('@mui/material/Divider'); +var Link = require('@mui/material/Link'); +var Typography = require('@mui/material/Typography'); +var Collapse = require('@mui/material/Collapse'); +var ListItem = require('@mui/material/ListItem'); +var ListItemIcon = require('@mui/material/ListItemIcon'); +var ListItemText = require('@mui/material/ListItemText'); +var Drawer = require('@mui/material/Drawer'); +var GitHubButton = require('react-github-btn'); +var Switch = require('@mui/material/Switch'); +var IconButton = require('@mui/material/IconButton'); +var TwitterIcon = require('@mui/icons-material/Twitter'); +var FacebookIcon = require('@mui/icons-material/Facebook'); +var Button = require('@mui/material/Button'); +var material = require('@mui/material'); +var chroma = require('chroma-js'); +var Fade = require('@mui/material/Fade'); +var rtlPlugin = require('stylis-plugin-rtl'); +var react$1 = require('@emotion/react'); +var createCache = require('@emotion/cache'); +var Grid = require('@mui/material/Grid'); +var Tooltip = require('@mui/material/Tooltip'); +var AppBar = require('@mui/material/AppBar'); +var Toolbar = require('@mui/material/Toolbar'); +var Menu = require('@mui/material/Menu'); +var TextField = require('@mui/material/TextField'); +var Badge = require('@mui/material/Badge'); +var MenuItem = require('@mui/material/MenuItem'); +var reactChartjs2 = require('react-chartjs-2'); +var Card = require('@mui/material/Card'); +var core = require('@react-jvectormap/core'); +var world = require('@react-jvectormap/world'); +var Table = require('@mui/material/Table'); +var TableBody = require('@mui/material/TableBody'); +var TableContainer = require('@mui/material/TableContainer'); +var TableHead = require('@mui/material/TableHead'); +var TableRow = require('@mui/material/TableRow'); +var TableCell$1 = require('@mui/material/TableCell'); +var US = require('assets/images/icons/flags/US.png'); +var DE = require('assets/images/icons/flags/DE.png'); +var GB = require('assets/images/icons/flags/GB.png'); +var BR = require('assets/images/icons/flags/BR.png'); +var booking1 = require('assets/images/products/product-1-min.jpg'); +var booking2 = require('assets/images/products/product-2-min.jpg'); +var booking3 = require('assets/images/products/product-3-min.jpg'); +var reactTable = require('react-table'); +var Autocomplete = require('@mui/material/Autocomplete'); +var AU = require('assets/images/icons/flags/AU.png'); +var Avatar = require('@mui/material/Avatar'); +var nikeV22 = require('assets/images/ecommerce/blue-shoe.jpeg'); +var businessKit = require('assets/images/ecommerce/black-mug.jpeg'); +var blackChair = require('assets/images/ecommerce/black-chair.jpeg'); +var wirelessCharger = require('assets/images/ecommerce/bang-sound.jpeg'); +var tripKit = require('assets/images/ecommerce/photo-tools.jpeg'); +var InstagramIcon = require('@mui/icons-material/Instagram'); +var CardMedia = require('@mui/material/CardMedia'); +var Tabs = require('@mui/material/Tabs'); +var Tab = require('@mui/material/Tab'); +var burceMars = require('assets/images/bruce-mars.jpg'); +var backgroundImage = require('assets/images/bg-profile.jpeg'); +var kal = require('assets/images/kal-visuals-square.jpg'); +var marie = require('assets/images/marie.jpg'); +var ivana = require('assets/images/ivana-square.jpg'); +var team3 = require('assets/images/team-3.jpg'); +var team4 = require('assets/images/team-4.jpg'); +var homeDecor1 = require('assets/images/home-decor-1.jpg'); +var homeDecor2 = require('assets/images/home-decor-2.jpg'); +var homeDecor3 = require('assets/images/home-decor-3.jpg'); +var homeDecor4 = require('assets/images/home-decor-4.jpeg'); +var team1 = require('assets/images/team-1.jpg'); +var team2 = require('assets/images/team-2.jpg'); +var logoSlack = require('assets/images/small-logos/logo-slack.svg'); +var logoSpotify = require('assets/images/small-logos/logo-spotify.svg'); +var logoAtlassian = require('assets/images/small-logos/logo-atlassian.svg'); +var logoAsana = require('assets/images/small-logos/logo-asana.svg'); +var GitHubIcon = require('@mui/icons-material/GitHub'); +var GoogleIcon = require('@mui/icons-material/Google'); +var Popper = require('@mui/material/Popper'); +var Grow = require('@mui/material/Grow'); +var Container = require('@mui/material/Container'); +var bgImage = require('assets/images/bg-sign-in-basic.jpeg'); +var QController = require('qqq-frontend-core/lib/controllers/QController'); +var brandWhite = require('assets/images/logo-ct.png'); +var brandDark = require('assets/images/logo-ct-dark.png'); + +function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } + +var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM); +var CssBaseline__default = /*#__PURE__*/_interopDefaultLegacy(CssBaseline); +var Icon__default = /*#__PURE__*/_interopDefaultLegacy(Icon); +var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box); +var List__default = /*#__PURE__*/_interopDefaultLegacy(List); +var Divider__default = /*#__PURE__*/_interopDefaultLegacy(Divider); +var Link__default = /*#__PURE__*/_interopDefaultLegacy(Link); +var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography); +var Collapse__default = /*#__PURE__*/_interopDefaultLegacy(Collapse); +var ListItem__default = /*#__PURE__*/_interopDefaultLegacy(ListItem); +var ListItemIcon__default = /*#__PURE__*/_interopDefaultLegacy(ListItemIcon); +var ListItemText__default = /*#__PURE__*/_interopDefaultLegacy(ListItemText); +var Drawer__default = /*#__PURE__*/_interopDefaultLegacy(Drawer); +var GitHubButton__default = /*#__PURE__*/_interopDefaultLegacy(GitHubButton); +var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch); +var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton); +var TwitterIcon__default = /*#__PURE__*/_interopDefaultLegacy(TwitterIcon); +var FacebookIcon__default = /*#__PURE__*/_interopDefaultLegacy(FacebookIcon); +var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button); +var chroma__default = /*#__PURE__*/_interopDefaultLegacy(chroma); +var Fade__default = /*#__PURE__*/_interopDefaultLegacy(Fade); +var rtlPlugin__default = /*#__PURE__*/_interopDefaultLegacy(rtlPlugin); +var createCache__default = /*#__PURE__*/_interopDefaultLegacy(createCache); +var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid); +var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip); +var AppBar__default = /*#__PURE__*/_interopDefaultLegacy(AppBar); +var Toolbar__default = /*#__PURE__*/_interopDefaultLegacy(Toolbar); +var Menu__default = /*#__PURE__*/_interopDefaultLegacy(Menu); +var TextField__default = /*#__PURE__*/_interopDefaultLegacy(TextField); +var Badge__default = /*#__PURE__*/_interopDefaultLegacy(Badge); +var MenuItem__default = /*#__PURE__*/_interopDefaultLegacy(MenuItem); +var Card__default = /*#__PURE__*/_interopDefaultLegacy(Card); +var Table__default = /*#__PURE__*/_interopDefaultLegacy(Table); +var TableBody__default = /*#__PURE__*/_interopDefaultLegacy(TableBody); +var TableContainer__default = /*#__PURE__*/_interopDefaultLegacy(TableContainer); +var TableHead__default = /*#__PURE__*/_interopDefaultLegacy(TableHead); +var TableRow__default = /*#__PURE__*/_interopDefaultLegacy(TableRow); +var TableCell__default = /*#__PURE__*/_interopDefaultLegacy(TableCell$1); +var US__default = /*#__PURE__*/_interopDefaultLegacy(US); +var DE__default = /*#__PURE__*/_interopDefaultLegacy(DE); +var GB__default = /*#__PURE__*/_interopDefaultLegacy(GB); +var BR__default = /*#__PURE__*/_interopDefaultLegacy(BR); +var booking1__default = /*#__PURE__*/_interopDefaultLegacy(booking1); +var booking2__default = /*#__PURE__*/_interopDefaultLegacy(booking2); +var booking3__default = /*#__PURE__*/_interopDefaultLegacy(booking3); +var Autocomplete__default = /*#__PURE__*/_interopDefaultLegacy(Autocomplete); +var AU__default = /*#__PURE__*/_interopDefaultLegacy(AU); +var Avatar__default = /*#__PURE__*/_interopDefaultLegacy(Avatar); +var nikeV22__default = /*#__PURE__*/_interopDefaultLegacy(nikeV22); +var businessKit__default = /*#__PURE__*/_interopDefaultLegacy(businessKit); +var blackChair__default = /*#__PURE__*/_interopDefaultLegacy(blackChair); +var wirelessCharger__default = /*#__PURE__*/_interopDefaultLegacy(wirelessCharger); +var tripKit__default = /*#__PURE__*/_interopDefaultLegacy(tripKit); +var InstagramIcon__default = /*#__PURE__*/_interopDefaultLegacy(InstagramIcon); +var CardMedia__default = /*#__PURE__*/_interopDefaultLegacy(CardMedia); +var Tabs__default = /*#__PURE__*/_interopDefaultLegacy(Tabs); +var Tab__default = /*#__PURE__*/_interopDefaultLegacy(Tab); +var burceMars__default = /*#__PURE__*/_interopDefaultLegacy(burceMars); +var backgroundImage__default = /*#__PURE__*/_interopDefaultLegacy(backgroundImage); +var kal__default = /*#__PURE__*/_interopDefaultLegacy(kal); +var marie__default = /*#__PURE__*/_interopDefaultLegacy(marie); +var ivana__default = /*#__PURE__*/_interopDefaultLegacy(ivana); +var team3__default = /*#__PURE__*/_interopDefaultLegacy(team3); +var team4__default = /*#__PURE__*/_interopDefaultLegacy(team4); +var homeDecor1__default = /*#__PURE__*/_interopDefaultLegacy(homeDecor1); +var homeDecor2__default = /*#__PURE__*/_interopDefaultLegacy(homeDecor2); +var homeDecor3__default = /*#__PURE__*/_interopDefaultLegacy(homeDecor3); +var homeDecor4__default = /*#__PURE__*/_interopDefaultLegacy(homeDecor4); +var team1__default = /*#__PURE__*/_interopDefaultLegacy(team1); +var team2__default = /*#__PURE__*/_interopDefaultLegacy(team2); +var logoSlack__default = /*#__PURE__*/_interopDefaultLegacy(logoSlack); +var logoSpotify__default = /*#__PURE__*/_interopDefaultLegacy(logoSpotify); +var logoAtlassian__default = /*#__PURE__*/_interopDefaultLegacy(logoAtlassian); +var logoAsana__default = /*#__PURE__*/_interopDefaultLegacy(logoAsana); +var GitHubIcon__default = /*#__PURE__*/_interopDefaultLegacy(GitHubIcon); +var GoogleIcon__default = /*#__PURE__*/_interopDefaultLegacy(GoogleIcon); +var Popper__default = /*#__PURE__*/_interopDefaultLegacy(Popper); +var Grow__default = /*#__PURE__*/_interopDefaultLegacy(Grow); +var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container); +var bgImage__default = /*#__PURE__*/_interopDefaultLegacy(bgImage); +var brandWhite__default = /*#__PURE__*/_interopDefaultLegacy(brandWhite); +var brandDark__default = /*#__PURE__*/_interopDefaultLegacy(brandDark); + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +var MDBoxRoot = styles.styled(Box__default["default"])(({ theme, ownerState }) => { + const { palette, functions, borders, boxShadows } = theme; + const { variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow } = ownerState; + const { gradients, grey, white } = palette; + const { linearGradient } = functions; + const { borderRadius: radius } = borders; + const { colored } = boxShadows; + const greyColors = { + "grey-100": grey[100], + "grey-200": grey[200], + "grey-300": grey[300], + "grey-400": grey[400], + "grey-500": grey[500], + "grey-600": grey[600], + "grey-700": grey[700], + "grey-800": grey[800], + "grey-900": grey[900], + }; + const validGradients = [ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "dark", + "light", + ]; + const validColors = [ + "transparent", + "white", + "black", + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + "text", + "grey-100", + "grey-200", + "grey-300", + "grey-400", + "grey-500", + "grey-600", + "grey-700", + "grey-800", + "grey-900", + ]; + const validBorderRadius = ["xs", "sm", "md", "lg", "xl", "xxl", "section"]; + const validBoxShadows = ["xs", "sm", "md", "lg", "xl", "xxl", "inset"]; + // background value + let backgroundValue = bgColor; + if (variant === "gradient") { + backgroundValue = validGradients.find((el) => el === bgColor) + ? linearGradient(gradients[bgColor].main, gradients[bgColor].state) + : white.main; + } + else if (validColors.find((el) => el === bgColor)) { + backgroundValue = palette[bgColor] ? palette[bgColor].main : greyColors[bgColor]; + } + else { + backgroundValue = bgColor; + } + // color value + let colorValue = color; + if (validColors.find((el) => el === color)) { + colorValue = palette[color] ? palette[color].main : greyColors[color]; + } + // borderRadius value + let borderRadiusValue = borderRadius; + if (validBorderRadius.find((el) => el === borderRadius)) { + borderRadiusValue = radius[borderRadius]; + } + // boxShadow value + let boxShadowValue = "none"; + if (validBoxShadows.find((el) => el === shadow)) { + boxShadowValue = boxShadows[shadow]; + } + else if (coloredShadow) { + boxShadowValue = colored[coloredShadow] ? colored[coloredShadow] : "none"; + } + return { + opacity, + background: backgroundValue, + color: colorValue, + borderRadius: borderRadiusValue, + boxShadow: boxShadowValue, + }; +}); + +const MDBox = react.forwardRef(({ variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow, ...rest }, ref) => (jsxRuntime.jsx(MDBoxRoot, { ...rest, ref: ref, ownerState: { variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow } }))); +// Declaring default props for MDBox +MDBox.defaultProps = { + variant: "contained", + bgColor: "transparent", + color: "dark", + opacity: 1, + borderRadius: "none", + shadow: "none", + coloredShadow: "none", +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +var MDTypographyRoot = styles.styled(Typography__default["default"])(({ theme, ownerState }) => { + const { palette, typography, functions } = theme; + const { color, textTransform, verticalAlign, fontWeight, opacity, textGradient, darkMode } = ownerState; + const { gradients, transparent, white } = palette; + const { fontWeightLight, fontWeightRegular, fontWeightMedium, fontWeightBold } = typography; + const { linearGradient } = functions; + // fontWeight styles + const fontWeights = { + light: fontWeightLight, + regular: fontWeightRegular, + medium: fontWeightMedium, + bold: fontWeightBold, + }; + // styles for the typography with textGradient={true} + const gradientStyles = () => ({ + backgroundImage: color !== "inherit" && color !== "text" && color !== "white" && gradients[color] + ? linearGradient(gradients[color].main, gradients[color].state) + : linearGradient(gradients.dark.main, gradients.dark.state), + display: "inline-block", + WebkitBackgroundClip: "text", + WebkitTextFillColor: transparent.main, + position: "relative", + zIndex: 1, + }); + // color value + let colorValue = color === "inherit" || !palette[color] ? "inherit" : palette[color].main; + if (darkMode && (color === "inherit" || !palette[color])) { + colorValue = "inherit"; + } + else if (darkMode && color === "dark") + colorValue = white.main; + return { + opacity, + textTransform, + verticalAlign, + textDecoration: "none", + color: colorValue, + fontWeight: fontWeights[fontWeight] && fontWeights[fontWeight], + ...(textGradient && gradientStyles()), + }; +}); + +// The Material Dashboard 2 PRO React TSUI Dashboard PRO Material main context +const MaterialUI = react.createContext(null); +// Setting custom name for the context which is visible on react dev tools +MaterialUI.displayName = "MaterialUIContext"; +// Material Dashboard 2 PRO React reducer +function reducer(state, action) { + switch (action.type) { + case "MINI_SIDENAV": { + return { ...state, miniSidenav: action.value }; + } + case "TRANSPARENT_SIDENAV": { + return { ...state, transparentSidenav: action.value }; + } + case "WHITE_SIDENAV": { + return { ...state, whiteSidenav: action.value }; + } + case "SIDENAV_COLOR": { + return { ...state, sidenavColor: action.value }; + } + case "TRANSPARENT_NAVBAR": { + return { ...state, transparentNavbar: action.value }; + } + case "FIXED_NAVBAR": { + return { ...state, fixedNavbar: action.value }; + } + case "OPEN_CONFIGURATOR": { + return { ...state, openConfigurator: action.value }; + } + case "DIRECTION": { + return { ...state, direction: action.value }; + } + case "LAYOUT": { + return { ...state, layout: action.value }; + } + case "DARKMODE": { + return { ...state, darkMode: action.value }; + } + default: { + throw new Error(`Unhandled action type: ${action.type}`); + } + } +} +// Material Dashboard 2 PRO React context provider +function MaterialUIControllerProvider({ children }) { + const initialState = { + miniSidenav: false, + transparentSidenav: false, + whiteSidenav: false, + sidenavColor: "info", + transparentNavbar: true, + fixedNavbar: true, + openConfigurator: false, + direction: "ltr", + layout: "dashboard", + darkMode: false, + }; + const [controller, dispatch] = react.useReducer(reducer, initialState); + const value = react.useMemo(() => [controller, dispatch], [controller, dispatch]); + return jsxRuntime.jsx(MaterialUI.Provider, { value: value, children: children }); +} +// Material Dashboard 2 PRO React custom hook for using context +function useMaterialUIController() { + const context = react.useContext(MaterialUI); + if (!context) { + throw new Error("useMaterialUIController should be used inside the MaterialUIControllerProvider."); + } + return context; +} +// Context module functions +const setMiniSidenav = (dispatch, value) => dispatch({ type: "MINI_SIDENAV", value }); +const setTransparentSidenav = (dispatch, value) => dispatch({ type: "TRANSPARENT_SIDENAV", value }); +const setWhiteSidenav = (dispatch, value) => dispatch({ type: "WHITE_SIDENAV", value }); +const setSidenavColor = (dispatch, value) => dispatch({ type: "SIDENAV_COLOR", value }); +const setTransparentNavbar = (dispatch, value) => dispatch({ type: "TRANSPARENT_NAVBAR", value }); +const setFixedNavbar = (dispatch, value) => dispatch({ type: "FIXED_NAVBAR", value }); +const setOpenConfigurator = (dispatch, value) => dispatch({ type: "OPEN_CONFIGURATOR", value }); +const setLayout = (dispatch, value) => dispatch({ type: "LAYOUT", value }); +const setDarkMode = (dispatch, value) => dispatch({ type: "DARKMODE", value }); + +const MDTypography = react.forwardRef(({ color, fontWeight, textTransform, verticalAlign, textGradient, opacity, children, ...rest }, ref) => { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + return (jsxRuntime.jsx(MDTypographyRoot, { ...rest, ref: ref, ownerState: { + color, + textTransform, + verticalAlign, + fontWeight, + opacity, + textGradient, + darkMode, + }, children: children })); +}); +// Declaring default props for MDTypography +MDTypography.defaultProps = { + color: "dark", + fontWeight: undefined, + textTransform: "none", + verticalAlign: "unset", + textGradient: false, + opacity: 1, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function collapseItem(theme, ownerState) { + const { palette, transitions, breakpoints, boxShadows, borders, functions } = theme; + const { active, transparentSidenav, whiteSidenav, darkMode } = ownerState; + const { white, transparent, dark, grey } = palette; + const { md } = boxShadows; + const { borderRadius } = borders; + const { pxToRem, rgba } = functions; + return { + background: () => { + let backgroundValue; + if (transparentSidenav && darkMode) { + backgroundValue = active ? rgba(white.main, 0.2) : transparent.main; + } + else if (transparentSidenav && !darkMode) { + backgroundValue = active ? grey[300] : transparent.main; + } + else if (whiteSidenav) { + backgroundValue = active ? grey[200] : transparent.main; + } + else { + backgroundValue = active ? rgba(white.main, 0.2) : transparent.main; + } + return backgroundValue; + }, + color: (transparentSidenav && !darkMode) || whiteSidenav ? dark.main : white.main, + display: "flex", + alignItems: "center", + width: "100%", + padding: `${pxToRem(8)} ${pxToRem(16)}`, + margin: `${pxToRem(1.5)} ${pxToRem(16)}`, + borderRadius: borderRadius.md, + cursor: "pointer", + userSelect: "none", + whiteSpace: "nowrap", + boxShadow: active && !whiteSidenav && !darkMode && !transparentSidenav ? md : "none", + [breakpoints.up("xl")]: { + transition: transitions.create(["box-shadow", "background-color"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.shorter, + }), + }, + "&:hover, &:focus": { + backgroundColor: transparentSidenav && !darkMode + ? grey[300] + : rgba(whiteSidenav ? grey[400] : white.main, 0.2), + }, + }; +} +function collapseIconBox(theme, ownerState) { + const { palette, transitions, borders, functions } = theme; + const { transparentSidenav, whiteSidenav, darkMode } = ownerState; + const { white, dark } = palette; + const { borderRadius } = borders; + const { pxToRem } = functions; + return { + minWidth: pxToRem(32), + minHeight: pxToRem(32), + color: (transparentSidenav && !darkMode) || whiteSidenav ? dark.main : white.main, + borderRadius: borderRadius.md, + display: "grid", + placeItems: "center", + transition: transitions.create("margin", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + "& svg, svg g": { + color: transparentSidenav || whiteSidenav ? dark.main : white.main, + }, + }; +} +const collapseIcon = ({ palette: { white, gradients } }, { active }) => ({ + color: active ? white.main : gradients.dark.state, +}); +function collapseText(theme, ownerState) { + const { typography, transitions, breakpoints, functions } = theme; + const { miniSidenav, transparentSidenav, active } = ownerState; + const { size, fontWeightRegular, fontWeightLight } = typography; + const { pxToRem } = functions; + return { + marginLeft: pxToRem(10), + [breakpoints.up("xl")]: { + opacity: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : 1, + maxWidth: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : "100%", + marginLeft: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : pxToRem(10), + transition: transitions.create(["opacity", "margin"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + }, + "& span": { + fontWeight: active ? fontWeightRegular : fontWeightLight, + fontSize: size.sm, + lineHeight: 0, + }, + }; +} +function collapseArrow(theme, ownerState) { + const { palette, typography, transitions, breakpoints, functions } = theme; + const { noCollapse, transparentSidenav, whiteSidenav, miniSidenav, open, active, darkMode } = ownerState; + const { white, dark } = palette; + const { size } = typography; + const { pxToRem, rgba } = functions; + return { + fontSize: `${size.lg} !important`, + fontWeight: 700, + marginBottom: pxToRem(-1), + transform: open ? "rotate(0)" : "rotate(-180deg)", + color: () => { + let colorValue; + if (transparentSidenav && darkMode) { + colorValue = open || active ? white.main : rgba(white.main, 0.25); + } + else if (transparentSidenav || whiteSidenav) { + colorValue = open || active ? dark.main : rgba(dark.main, 0.25); + } + else { + colorValue = open || active ? white.main : rgba(white.main, 0.5); + } + return colorValue; + }, + transition: transitions.create(["color", "transform", "opacity"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.shorter, + }), + [breakpoints.up("xl")]: { + display: noCollapse || (transparentSidenav && miniSidenav) || miniSidenav + ? "none !important" + : "block !important", + }, + }; +} + +function SidenavCollapse({ icon, name, children, active, noCollapse, open, ...rest }) { + const [controller] = useMaterialUIController(); + const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller; + return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ListItem__default["default"], { component: "li", children: jsxRuntime.jsxs(MDBox, { ...rest, sx: (theme) => collapseItem(theme, { active, transparentSidenav, whiteSidenav, darkMode }), children: [jsxRuntime.jsx(ListItemIcon__default["default"], { sx: (theme) => collapseIconBox(theme, { transparentSidenav, whiteSidenav, darkMode }), children: typeof icon === "string" ? (jsxRuntime.jsx(Icon__default["default"], { sx: (theme) => collapseIcon(theme, { active }), children: icon })) : (icon) }), jsxRuntime.jsx(ListItemText__default["default"], { primary: name, sx: (theme) => collapseText(theme, { + miniSidenav, + transparentSidenav, + whiteSidenav, + active, + }) }), jsxRuntime.jsx(Icon__default["default"], { sx: (theme) => collapseArrow(theme, { + noCollapse, + transparentSidenav, + whiteSidenav, + miniSidenav, + open, + active, + darkMode, + }), children: "expand_less" })] }) }), children && (jsxRuntime.jsx(Collapse__default["default"], { in: Boolean(open), unmountOnExit: true, children: children }))] })); +} +// Declaring default props for SidenavCollapse +SidenavCollapse.defaultProps = { + active: false, + noCollapse: false, + children: false, + open: false, +}; + +function SidenavList({ children }) { + return (jsxRuntime.jsx(List__default["default"], { sx: { + px: 2, + my: 0.3, + }, children: children })); +} + +/* eslint-disable prefer-destructuring */ +function item(theme, ownerState) { + const { palette, borders, functions, transitions } = theme; + const { active, color, transparentSidenav, whiteSidenav, darkMode } = ownerState; + const { transparent, white, grey } = palette; + const { borderRadius } = borders; + const { rgba } = functions; + return { + pl: 3, + mt: 0.375, + mb: 0.3, + width: "100%", + borderRadius: borderRadius.md, + cursor: "pointer", + backgroundColor: () => { + let backgroundValue = transparent.main; + if ((active === "isParent" && !transparentSidenav && !whiteSidenav) || + (active === "isParent" && transparentSidenav && darkMode)) { + backgroundValue = rgba(white.main, 0.2); + } + else if (active === "isParent" && transparentSidenav) { + backgroundValue = grey[300]; + } + else if (active === "isParent" && whiteSidenav) { + backgroundValue = grey[200]; + } + else if (active) { + backgroundValue = palette[color].main; + } + return backgroundValue; + }, + transition: transitions.create("background-color", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.shorter, + }), + "&:hover, &:focus": { + backgroundColor: !active && + rgba((transparentSidenav && !darkMode) || whiteSidenav ? grey[400] : white.main, 0.2), + }, + }; +} +function itemContent(theme, ownerState) { + const { palette, typography, transitions, functions } = theme; + const { miniSidenav, name, active, transparentSidenav, whiteSidenav, darkMode } = ownerState; + const { white, dark } = palette; + const { size, fontWeightRegular, fontWeightLight } = typography; + const { pxToRem } = functions; + return { + display: "flex", + alignItems: "center", + justifyContent: "space-between", + width: "100%", + padding: `${pxToRem(12)} ${pxToRem(16)}`, + marginLeft: pxToRem(18), + userSelect: "none", + position: "relative", + "& span": { + color: ((transparentSidenav && !darkMode) || whiteSidenav) && (active === "isParent" || !active) + ? dark.main + : white.main, + fontWeight: active ? fontWeightRegular : fontWeightLight, + fontSize: size.sm, + opacity: miniSidenav ? 0 : 1, + transition: transitions.create(["opacity", "color"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + }, + "&::before": { + content: `"${name[0]}"`, + color: ((transparentSidenav && !darkMode) || whiteSidenav) && (active === "isParent" || !active) + ? dark.main + : white.main, + fontWeight: fontWeightRegular, + display: "flex", + alignItems: "center", + position: "absolute", + top: "50%", + transform: "translateY(-50%)", + left: pxToRem(-15), + opacity: 1, + borderRadius: "50%", + fontSize: size.sm, + }, + }; +} +function itemArrow(theme, ownerState) { + const { palette, typography, transitions, breakpoints, functions } = theme; + const { noCollapse, transparentSidenav, whiteSidenav, miniSidenav, open, active, darkMode } = ownerState; + const { white, dark } = palette; + const { size } = typography; + const { pxToRem, rgba } = functions; + return { + fontSize: `${size.lg} !important`, + fontWeight: 700, + marginBottom: pxToRem(-1), + transform: open ? "rotate(0)" : "rotate(-180deg)", + color: () => { + let colorValue; + if (transparentSidenav && darkMode) { + colorValue = open || active ? white.main : rgba(white.main, 0.25); + } + else if (transparentSidenav || whiteSidenav) { + colorValue = open || active ? dark.main : rgba(dark.main, 0.25); + } + else { + colorValue = open || active ? white.main : rgba(white.main, 0.5); + } + return colorValue; + }, + transition: transitions.create(["color", "transform", "opacity"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.shorter, + }), + [breakpoints.up("xl")]: { + display: noCollapse || (transparentSidenav && miniSidenav) || miniSidenav + ? "none !important" + : "block !important", + }, + }; +} + +function SidenavItem({ color, name, active, nested, children, open, ...rest }) { + const [controller] = useMaterialUIController(); + const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller; + return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ListItem__default["default"], { ...rest, component: "li", sx: (theme) => item(theme, { active, color, transparentSidenav, whiteSidenav, darkMode }), children: jsxRuntime.jsxs(MDBox, { sx: (theme) => itemContent(theme, { + active, + miniSidenav, + name, + open, + nested, + transparentSidenav, + whiteSidenav, + darkMode, + }), children: [jsxRuntime.jsx(ListItemText__default["default"], { primary: name }), children && (jsxRuntime.jsx(Icon__default["default"], { component: "i", sx: (theme) => itemArrow(theme, { open, miniSidenav, transparentSidenav, whiteSidenav, darkMode }), children: "expand_less" }))] }) }), children && (jsxRuntime.jsx(Collapse__default["default"], { in: open, timeout: "auto", unmountOnExit: true, ...rest, children: children }))] })); +} +// Declaring default props for SidenavItem +SidenavItem.defaultProps = { + color: "info", + active: false, + nested: false, + children: false, + open: false, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +var SidenavRoot = styles.styled(Drawer__default["default"])(({ theme, ownerState }) => { + const { palette, boxShadows, transitions, breakpoints, functions } = theme; + const { transparentSidenav, whiteSidenav, miniSidenav, darkMode } = ownerState; + const sidebarWidth = 250; + const { transparent, gradients, white, background } = palette; + const { xxl } = boxShadows; + const { pxToRem, linearGradient } = functions; + let backgroundValue = darkMode + ? background.sidenav + : linearGradient(gradients.dark.main, gradients.dark.state); + if (transparentSidenav) { + backgroundValue = transparent.main; + } + else if (whiteSidenav) { + backgroundValue = white.main; + } + // styles for the sidenav when miniSidenav={false} + const drawerOpenStyles = () => ({ + background: backgroundValue, + transform: "translateX(0)", + transition: transitions.create("transform", { + easing: transitions.easing.sharp, + duration: transitions.duration.shorter, + }), + [breakpoints.up("xl")]: { + boxShadow: transparentSidenav ? "none" : xxl, + marginBottom: transparentSidenav ? 0 : "inherit", + left: "0", + width: sidebarWidth, + transform: "translateX(0)", + transition: transitions.create(["width", "background-color"], { + easing: transitions.easing.sharp, + duration: transitions.duration.enteringScreen, + }), + }, + }); + // styles for the sidenav when miniSidenav={true} + const drawerCloseStyles = () => ({ + background: backgroundValue, + transform: `translateX(${pxToRem(-320)})`, + transition: transitions.create("transform", { + easing: transitions.easing.sharp, + duration: transitions.duration.shorter, + }), + [breakpoints.up("xl")]: { + boxShadow: transparentSidenav ? "none" : xxl, + marginBottom: transparentSidenav ? 0 : "inherit", + left: "0", + width: pxToRem(96), + overflowX: "hidden", + transform: "translateX(0)", + transition: transitions.create(["width", "background-color"], { + easing: transitions.easing.sharp, + duration: transitions.duration.shorter, + }), + }, + }); + return { + "& .MuiDrawer-paper": { + boxShadow: xxl, + border: "none", + ...(miniSidenav ? drawerCloseStyles() : drawerOpenStyles()), + }, + }; +}); + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function sidenavLogoLabel(theme, ownerState) { + const { functions, transitions, typography, breakpoints } = theme; + const { miniSidenav } = ownerState; + const { pxToRem } = functions; + const { fontWeightMedium } = typography; + return { + ml: 0.5, + fontWeight: fontWeightMedium, + wordSpacing: pxToRem(-1), + transition: transitions.create("opacity", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + [breakpoints.up("xl")]: { + opacity: miniSidenav ? 0 : 1, + }, + }; +} + +function Sidenav$1({ color, brand, brandName, routes, ...rest }) { + const [openCollapse, setOpenCollapse] = react.useState(false); + const [openNestedCollapse, setOpenNestedCollapse] = react.useState(false); + const [controller, dispatch] = useMaterialUIController(); + const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller; + const location = reactRouterDom.useLocation(); + const { pathname } = location; + const collapseName = pathname.split("/").slice(1)[0]; + const items = pathname.split("/").slice(1); + const itemParentName = items[1]; + const itemName = items[items.length - 1]; + let textColor = "white"; + if (transparentSidenav || (whiteSidenav && !darkMode)) { + textColor = "dark"; + } + else if (whiteSidenav && darkMode) { + textColor = "inherit"; + } + const closeSidenav = () => setMiniSidenav(dispatch, true); + react.useEffect(() => { + setOpenCollapse(collapseName); + setOpenNestedCollapse(itemParentName); + }, []); + react.useEffect(() => { + // A function that sets the mini state of the sidenav. + function handleMiniSidenav() { + setMiniSidenav(dispatch, window.innerWidth < 1200); + setTransparentSidenav(dispatch, window.innerWidth < 1200 ? false : transparentSidenav); + setWhiteSidenav(dispatch, window.innerWidth < 1200 ? false : whiteSidenav); + } + /** + The event listener that's calling the handleMiniSidenav function when resizing the window. + */ + window.addEventListener("resize", handleMiniSidenav); + // Call the handleMiniSidenav function to set the state with the initial value. + handleMiniSidenav(); + // Remove event listener on cleanup + return () => window.removeEventListener("resize", handleMiniSidenav); + }, [dispatch, location]); + // Render all the nested collapse items from the routes.js + const renderNestedCollapse = (collapse) => { + const template = collapse.map(({ name, route, key, href }) => href ? (jsxRuntime.jsx(Link__default["default"], { href: href, target: "_blank", rel: "noreferrer", sx: { textDecoration: "none" }, children: jsxRuntime.jsx(SidenavItem, { name: name, nested: true }) }, key)) : (jsxRuntime.jsx(reactRouterDom.NavLink, { to: route, style: { textDecoration: "none" }, children: jsxRuntime.jsx(SidenavItem, { name: name, active: route === pathname, nested: true }) }, key))); + return template; + }; + // Render the all the collpases from the routes.js + const renderCollapse = (collapses) => collapses.map(({ name, collapse, route, href, key }) => { + let returnValue; + if (collapse) { + returnValue = (jsxRuntime.jsx(SidenavItem, { color: color, name: name, active: key === itemParentName ? "isParent" : false, open: openNestedCollapse === key, onClick: ({ currentTarget }) => openNestedCollapse === key && currentTarget.classList.contains("MuiListItem-root") + ? setOpenNestedCollapse(false) + : setOpenNestedCollapse(key), children: renderNestedCollapse(collapse) }, key)); + } + else { + returnValue = href ? (jsxRuntime.jsx(Link__default["default"], { href: href, target: "_blank", rel: "noreferrer", sx: { textDecoration: "none" }, children: jsxRuntime.jsx(SidenavItem, { color: color, name: name, active: key === itemName }) }, key)) : (jsxRuntime.jsx(reactRouterDom.NavLink, { to: route, style: { textDecoration: "none" }, children: jsxRuntime.jsx(SidenavItem, { color: color, name: name, active: key === itemName }) }, key)); + } + return jsxRuntime.jsx(SidenavList, { children: returnValue }, key); + }); + // Render all the routes from the routes.js (All the visible items on the Sidenav) + const renderRoutes = routes.map(({ type, name, icon, title, collapse, noCollapse, key, href, route }) => { + let returnValue; + if (type === "collapse") { + if (href) { + returnValue = (jsxRuntime.jsx(Link__default["default"], { href: href, target: "_blank", rel: "noreferrer", sx: { textDecoration: "none" }, children: jsxRuntime.jsx(SidenavCollapse, { name: name, icon: icon, active: key === collapseName, noCollapse: noCollapse }) }, key)); + } + else if (noCollapse && route) { + returnValue = (jsxRuntime.jsx(reactRouterDom.NavLink, { to: route, children: jsxRuntime.jsx(SidenavCollapse, { name: name, icon: icon, noCollapse: noCollapse, active: key === collapseName, children: collapse ? renderCollapse(collapse) : null }) }, key)); + } + else { + returnValue = (jsxRuntime.jsx(SidenavCollapse, { name: name, icon: icon, active: key === collapseName, open: openCollapse === key, onClick: () => (openCollapse === key ? setOpenCollapse(false) : setOpenCollapse(key)), children: collapse ? renderCollapse(collapse) : null }, key)); + } + } + else if (type === "title") { + returnValue = (jsxRuntime.jsx(MDTypography, { color: textColor, display: "block", variant: "caption", fontWeight: "bold", textTransform: "uppercase", pl: 3, mt: 2, mb: 1, ml: 1, children: title }, key)); + } + else if (type === "divider") { + returnValue = (jsxRuntime.jsx(Divider__default["default"], { light: (!darkMode && !whiteSidenav && !transparentSidenav) || + (darkMode && !transparentSidenav && whiteSidenav) }, key)); + } + return returnValue; + }); + return (jsxRuntime.jsxs(SidenavRoot, { ...rest, variant: "permanent", ownerState: { transparentSidenav, whiteSidenav, miniSidenav, darkMode }, children: [jsxRuntime.jsxs(MDBox, { pt: 3, pb: 1, px: 4, textAlign: "center", children: [jsxRuntime.jsx(MDBox, { display: { xs: "block", xl: "none" }, position: "absolute", top: 0, right: 0, p: 1.625, onClick: closeSidenav, sx: { cursor: "pointer" }, children: jsxRuntime.jsx(MDTypography, { variant: "h6", color: "secondary", children: jsxRuntime.jsx(Icon__default["default"], { sx: { fontWeight: "bold" }, children: "close" }) }) }), jsxRuntime.jsxs(MDBox, { component: reactRouterDom.NavLink, to: "/", display: "flex", alignItems: "center", children: [brand && jsxRuntime.jsx(MDBox, { component: "img", src: brand, alt: "Brand", width: "2rem" }), jsxRuntime.jsx(MDBox, { width: !brandName && "100%", sx: (theme) => sidenavLogoLabel(theme, { miniSidenav }), children: jsxRuntime.jsx(MDTypography, { component: "h6", variant: "button", fontWeight: "medium", color: textColor, children: brandName }) })] })] }), jsxRuntime.jsx(Divider__default["default"], { light: (!darkMode && !whiteSidenav && !transparentSidenav) || + (darkMode && !transparentSidenav && whiteSidenav) }), jsxRuntime.jsx(List__default["default"], { children: renderRoutes })] })); +} +// Declaring default props for Sidenav +Sidenav$1.defaultProps = { + color: "info", + brand: "", +}; + +/* eslint-disable prefer-destructuring */ +var MDButtonRoot = styles.styled(Button__default["default"])(({ theme, ownerState }) => { + const { palette, functions, borders, boxShadows } = theme; + const { color, variant, size, circular, iconOnly, darkMode } = ownerState; + const { white, text, transparent, gradients, grey } = palette; + const { boxShadow, linearGradient, pxToRem, rgba } = functions; + const { borderRadius } = borders; + const { colored } = boxShadows; + // styles for the button with variant="contained" + const containedStyles = () => { + // background color value + const backgroundValue = palette[color] ? palette[color].main : white.main; + // backgroundColor value when button is focused + const focusedBackgroundValue = palette[color] ? palette[color].focus : white.focus; + // boxShadow value + const boxShadowValue = colored[color] + ? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow([0, 3], [1, -2], palette[color].main, 0.2)}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}` + : "none"; + // boxShadow value when button is hovered + const hoveredBoxShadowValue = colored[color] + ? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow([0, 4], [23, 0], palette[color].main, 0.15)}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}` + : "none"; + // color value + let colorValue = white.main; + if (!darkMode && (color === "white" || color === "light" || !palette[color])) { + colorValue = text.main; + } + else if (darkMode && (color === "white" || color === "light" || !palette[color])) { + colorValue = grey[600]; + } + // color value when button is focused + let focusedColorValue = white.main; + if (color === "white") { + focusedColorValue = text.main; + } + else if (color === "primary" || color === "error" || color === "dark") { + focusedColorValue = white.main; + } + return { + background: backgroundValue, + color: colorValue, + boxShadow: boxShadowValue, + "&:hover": { + backgroundColor: backgroundValue, + color: colorValue, + boxShadow: hoveredBoxShadowValue, + }, + "&:focus:not(:hover)": { + backgroundColor: focusedBackgroundValue, + color: colorValue, + boxShadow: palette[color] + ? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5) + : boxShadow([0, 0], [0, 3.2], white.main, 0.5), + }, + "&:disabled": { + backgroundColor: backgroundValue, + color: focusedColorValue, + }, + }; + }; + // styles for the button with variant="outlined" + const outlinedStyles = () => { + // background color value + const backgroundValue = color === "white" ? rgba(white.main, 0.1) : transparent.main; + // color value + const colorValue = palette[color] ? palette[color].main : white.main; + // boxShadow value + const boxShadowValue = palette[color] + ? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5) + : boxShadow([0, 0], [0, 3.2], white.main, 0.5); + // border color value + let borderColorValue = palette[color] ? palette[color].main : rgba(white.main, 0.75); + if (color === "white") { + borderColorValue = rgba(white.main, 0.75); + } + return { + background: backgroundValue, + color: colorValue, + border: `${pxToRem(1)} solid ${borderColorValue}`, + "&:hover": { + background: transparent.main, + color: colorValue, + borderColor: colorValue, + opacity: 0.85, + }, + "&:focus:not(:hover)": { + background: transparent.main, + color: colorValue, + boxShadow: boxShadowValue, + }, + "&:active:not(:hover)": { + backgroundColor: colorValue, + color: white.main, + opacity: 0.85, + }, + "&:disabled": { + color: colorValue, + borderColor: colorValue, + }, + }; + }; + // styles for the button with variant="gradient" + const gradientStyles = () => { + // background value + const backgroundValue = color === "white" || !gradients[color] + ? white.main + : linearGradient(gradients[color].main, gradients[color].state); + // boxShadow value + const boxShadowValue = colored[color] + ? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow([0, 3], [1, -2], palette[color].main, 0.2)}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}` + : "none"; + // boxShadow value when button is hovered + const hoveredBoxShadowValue = colored[color] + ? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow([0, 4], [23, 0], palette[color].main, 0.15)}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}` + : "none"; + // color value + let colorValue = white.main; + if (color === "white") { + colorValue = text.main; + } + else if (color === "light") { + colorValue = gradients.dark.state; + } + return { + background: backgroundValue, + color: colorValue, + boxShadow: boxShadowValue, + "&:hover": { + boxShadow: hoveredBoxShadowValue, + color: colorValue, + }, + "&:focus:not(:hover)": { + boxShadow: boxShadowValue, + color: colorValue, + }, + "&:disabled": { + background: backgroundValue, + color: colorValue, + }, + }; + }; + // styles for the button with variant="text" + const textStyles = () => { + // color value + const colorValue = palette[color] ? palette[color].main : white.main; + // color value when button is focused + const focusedColorValue = palette[color] ? palette[color].focus : white.focus; + return { + color: colorValue, + "&:hover": { + color: focusedColorValue, + }, + "&:focus:not(:hover)": { + color: focusedColorValue, + }, + }; + }; + // styles for the button with circular={true} + const circularStyles = () => ({ + borderRadius: borderRadius.section, + }); + // styles for the button with iconOnly={true} + const iconOnlyStyles = () => { + // width, height, minWidth and minHeight values + let sizeValue = pxToRem(38); + if (size === "small") { + sizeValue = pxToRem(25.4); + } + else if (size === "large") { + sizeValue = pxToRem(52); + } + // padding value + let paddingValue = `${pxToRem(11)} ${pxToRem(11)} ${pxToRem(10)}`; + if (size === "small") { + paddingValue = pxToRem(4.5); + } + else if (size === "large") { + paddingValue = pxToRem(16); + } + return { + width: sizeValue, + minWidth: sizeValue, + height: sizeValue, + minHeight: sizeValue, + padding: paddingValue, + "& .material-icons": { + marginTop: 0, + }, + "&:hover, &:focus, &:active": { + transform: "none", + }, + }; + }; + return { + ...(variant === "contained" && containedStyles()), + ...(variant === "outlined" && outlinedStyles()), + ...(variant === "gradient" && gradientStyles()), + ...(variant === "text" && textStyles()), + ...(circular && circularStyles()), + ...(iconOnly && iconOnlyStyles()), + }; +}); + +const MDButton = react.forwardRef(({ color, variant, size, circular, iconOnly, children, ...rest }, ref) => { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + return (jsxRuntime.jsx(MDButtonRoot, { ...rest, ref: ref, ownerState: { color, variant, size, circular, iconOnly, darkMode }, children: children })); +}); +// Declaring default props for MDButton +MDButton.defaultProps = { + color: "white", + variant: "contained", + size: "medium", + circular: false, + iconOnly: false, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +var ConfiguratorRoot = styles.styled(Drawer__default["default"])(({ theme, ownerState }) => { + const { boxShadows, functions, transitions } = theme; + const { openConfigurator } = ownerState; + const configuratorWidth = 360; + const { lg } = boxShadows; + const { pxToRem } = functions; + // drawer styles when openConfigurator={true} + const drawerOpenStyles = () => ({ + width: configuratorWidth, + left: "initial", + right: 0, + transition: transitions.create("right", { + easing: transitions.easing.sharp, + duration: transitions.duration.short, + }), + }); + // drawer styles when openConfigurator={false} + const drawerCloseStyles = () => ({ + left: "initial", + right: pxToRem(-350), + transition: transitions.create("all", { + easing: transitions.easing.sharp, + duration: transitions.duration.short, + }), + }); + return { + "& .MuiDrawer-paper": { + height: "100vh", + margin: 0, + padding: `0 ${pxToRem(10)}`, + borderRadius: 0, + boxShadow: lg, + overflowY: "auto", + ...(openConfigurator ? drawerOpenStyles() : drawerCloseStyles()), + }, + }; +}); + +function Configurator() { + const [controller, dispatch] = useMaterialUIController(); + const { openConfigurator, miniSidenav, fixedNavbar, sidenavColor, transparentSidenav, whiteSidenav, darkMode, } = controller; + const [disabled, setDisabled] = react.useState(false); + const sidenavColors = ["primary", "dark", "info", "success", "warning", "error"]; + // Use the useEffect hook to change the button state for the sidenav type based on window size. + react.useEffect(() => { + // A function that sets the disabled state of the buttons for the sidenav type. + function handleDisabled() { + return window.innerWidth > 1200 ? setDisabled(false) : setDisabled(true); + } + // The event listener that's calling the handleDisabled function when resizing the window. + window.addEventListener("resize", handleDisabled); + // Call the handleDisabled function to set the state with the initial value. + handleDisabled(); + // Remove event listener on cleanup + return () => window.removeEventListener("resize", handleDisabled); + }, []); + const handleCloseConfigurator = () => setOpenConfigurator(dispatch, false); + const handleTransparentSidenav = () => { + setTransparentSidenav(dispatch, true); + setWhiteSidenav(dispatch, false); + }; + const handleWhiteSidenav = () => { + setWhiteSidenav(dispatch, true); + setTransparentSidenav(dispatch, false); + }; + const handleDarkSidenav = () => { + setWhiteSidenav(dispatch, false); + setTransparentSidenav(dispatch, false); + }; + const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav); + const handleFixedNavbar = () => setFixedNavbar(dispatch, !fixedNavbar); + const handleDarkMode = () => setDarkMode(dispatch, !darkMode); + // sidenav type buttons styles + const sidenavTypeButtonsStyles = ({ functions: { pxToRem }, palette: { white, dark, background }, borders: { borderWidth }, }) => ({ + height: pxToRem(39), + background: darkMode ? background.sidenav : white.main, + color: darkMode ? white.main : dark.main, + border: `${borderWidth[1]} solid ${darkMode ? white.main : dark.main}`, + "&:hover, &:focus, &:focus:not(:hover)": { + background: darkMode ? background.sidenav : white.main, + color: darkMode ? white.main : dark.main, + border: `${borderWidth[1]} solid ${darkMode ? white.main : dark.main}`, + }, + }); + // sidenav type active button styles + const sidenavTypeActiveButtonStyles = ({ functions: { pxToRem, linearGradient }, palette: { white, gradients, background }, }) => ({ + height: pxToRem(39), + background: darkMode ? white.main : linearGradient(gradients.dark.main, gradients.dark.state), + color: darkMode ? background.sidenav : white.main, + "&:hover, &:focus, &:focus:not(:hover)": { + background: darkMode ? white.main : linearGradient(gradients.dark.main, gradients.dark.state), + color: darkMode ? background.sidenav : white.main, + }, + }); + return (jsxRuntime.jsxs(ConfiguratorRoot, { variant: "permanent", ownerState: { openConfigurator }, children: [jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "baseline", pt: 4, pb: 0.5, px: 3, children: [jsxRuntime.jsxs(MDBox, { children: [jsxRuntime.jsx(MDTypography, { variant: "h5", children: "Material UI Configurator" }), jsxRuntime.jsx(MDTypography, { variant: "body2", color: "text", children: "See our dashboard options." })] }), jsxRuntime.jsx(Icon__default["default"], { sx: ({ typography: { size }, palette: { dark, white } }) => ({ + fontSize: `${size.lg} !important`, + color: darkMode ? white.main : dark.main, + stroke: "currentColor", + strokeWidth: "2px", + cursor: "pointer", + transform: "translateY(5px)", + }), onClick: handleCloseConfigurator, children: "close" })] }), jsxRuntime.jsx(Divider__default["default"], {}), jsxRuntime.jsxs(MDBox, { pt: 0.5, pb: 3, px: 3, children: [jsxRuntime.jsxs(MDBox, { children: [jsxRuntime.jsx(MDTypography, { variant: "h6", children: "Sidenav Colors" }), jsxRuntime.jsx(MDBox, { mb: 0.5, children: sidenavColors.map((color) => (jsxRuntime.jsx(IconButton__default["default"], { sx: ({ borders: { borderWidth }, palette: { white, dark, background }, transitions, }) => ({ + width: "24px", + height: "24px", + padding: 0, + border: `${borderWidth[1]} solid ${darkMode ? background.sidenav : white.main}`, + borderColor: () => { + let borderColorValue = sidenavColor === color && dark.main; + if (darkMode && sidenavColor === color) { + borderColorValue = white.main; + } + return borderColorValue; + }, + transition: transitions.create("border-color", { + easing: transitions.easing.sharp, + duration: transitions.duration.shorter, + }), + backgroundImage: ({ functions: { linearGradient }, palette: { gradients } }) => linearGradient(gradients[color].main, gradients[color].state), + "&:not(:last-child)": { + mr: 1, + }, + "&:hover, &:focus, &:active": { + borderColor: darkMode ? white.main : dark.main, + }, + }), onClick: () => setSidenavColor(dispatch, color) }, color))) })] }), jsxRuntime.jsxs(MDBox, { mt: 3, lineHeight: 1, children: [jsxRuntime.jsx(MDTypography, { variant: "h6", children: "Sidenav Type" }), jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", children: "Choose between different sidenav types." }), jsxRuntime.jsxs(MDBox, { sx: { + display: "flex", + mt: 2, + mr: 1, + }, children: [jsxRuntime.jsx(MDButton, { color: "dark", variant: "gradient", onClick: handleDarkSidenav, disabled: disabled, fullWidth: true, sx: !transparentSidenav && !whiteSidenav + ? sidenavTypeActiveButtonStyles + : sidenavTypeButtonsStyles, children: "Dark" }), jsxRuntime.jsx(MDBox, { sx: { mx: 1, width: "8rem", minWidth: "8rem" }, children: jsxRuntime.jsx(MDButton, { color: "dark", variant: "gradient", onClick: handleTransparentSidenav, disabled: disabled, fullWidth: true, sx: transparentSidenav && !whiteSidenav + ? sidenavTypeActiveButtonStyles + : sidenavTypeButtonsStyles, children: "Transparent" }) }), jsxRuntime.jsx(MDButton, { color: "dark", variant: "gradient", onClick: handleWhiteSidenav, disabled: disabled, fullWidth: true, sx: whiteSidenav && !transparentSidenav + ? sidenavTypeActiveButtonStyles + : sidenavTypeButtonsStyles, children: "White" })] })] }), jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, lineHeight: 1, children: [jsxRuntime.jsx(MDTypography, { variant: "h6", children: "Navbar Fixed" }), jsxRuntime.jsx(Switch__default["default"], { checked: fixedNavbar, onChange: handleFixedNavbar })] }), jsxRuntime.jsx(Divider__default["default"], {}), jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", lineHeight: 1, children: [jsxRuntime.jsx(MDTypography, { variant: "h6", children: "Sidenav Mini" }), jsxRuntime.jsx(Switch__default["default"], { checked: miniSidenav, onChange: handleMiniSidenav })] }), jsxRuntime.jsx(Divider__default["default"], {}), jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", lineHeight: 1, children: [jsxRuntime.jsx(MDTypography, { variant: "h6", children: "Light / Dark" }), jsxRuntime.jsx(Switch__default["default"], { checked: darkMode, onChange: handleDarkMode })] }), jsxRuntime.jsx(Divider__default["default"], {}), jsxRuntime.jsxs(MDBox, { mt: 3, mb: 2, children: [jsxRuntime.jsx(MDBox, { mb: 2, children: jsxRuntime.jsx(MDButton, { component: Link__default["default"], href: "https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts", target: "_blank", rel: "noreferrer", color: "info", variant: "gradient", fullWidth: true, children: "buy now" }) }), jsxRuntime.jsx(MDBox, { mb: 2, children: jsxRuntime.jsx(MDButton, { component: Link__default["default"], href: "https://www.creative-tim.com/product/material-dashboard-pro-react", target: "_blank", rel: "noreferrer", color: "dark", variant: "gradient", fullWidth: true, children: "buy javascript version" }) }), jsxRuntime.jsx(MDButton, { component: Link__default["default"], href: "https://www.creative-tim.com/learning-lab/react/quick-start/material-dashboard/", target: "_blank", rel: "noreferrer", color: darkMode ? "light" : "dark", variant: "outlined", fullWidth: true, children: "view documentation" })] }), jsxRuntime.jsx(MDBox, { display: "flex", justifyContent: "center", children: jsxRuntime.jsx(GitHubButton__default["default"], { href: "https://github.com/creativetimofficial/ct-material-dashboard-pro-react", "data-icon": "octicon-star", "data-size": "large", "data-show-count": "true", "aria-label": "Star creativetimofficial/ct-material-dashboard-pro-react on GitHub", children: "Star" }) }), jsxRuntime.jsxs(MDBox, { mt: 2, textAlign: "center", children: [jsxRuntime.jsx(MDBox, { mb: 0.5, children: jsxRuntime.jsx(MDTypography, { variant: "h6", children: "Thank you for sharing!" }) }), jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "center", children: [jsxRuntime.jsx(MDBox, { mr: 1.5, children: jsxRuntime.jsxs(MDButton, { component: Link__default["default"], href: "//twitter.com/intent/tweet?text=Check%20Material%20Dashboard%202%20PRO%20React%20made%20by%20%40CreativeTim%20%23webdesign%20%23dashboard%20%23react%20%mui&url=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fmaterial-dashboard-2-pro-react-ts", target: "_blank", rel: "noreferrer", color: "dark", children: [jsxRuntime.jsx(TwitterIcon__default["default"], {}), "\u00A0 Tweet"] }) }), jsxRuntime.jsxs(MDButton, { component: Link__default["default"], href: "https://www.facebook.com/sharer/sharer.php?u=https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts", target: "_blank", rel: "noreferrer", color: "dark", children: [jsxRuntime.jsx(FacebookIcon__default["default"], {}), "\u00A0 Share"] })] })] })] })] })); +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const colors$1 = { + background: { + default: "#f0f2f5", + }, + text: { + main: "#7b809a", + focus: "#7b809a", + }, + transparent: { + main: "transparent", + }, + white: { + main: "#ffffff", + focus: "#ffffff", + }, + black: { + light: "#000000", + main: "#000000", + focus: "#000000", + }, + primary: { + main: "#e91e63", + focus: "#e91e63", + }, + secondary: { + main: "#7b809a", + focus: "#8f93a9", + }, + info: { + main: "#1A73E8", + focus: "#1662C4", + }, + success: { + main: "#4CAF50", + focus: "#67bb6a", + }, + warning: { + main: "#fb8c00", + focus: "#fc9d26", + }, + error: { + main: "#F44335", + focus: "#f65f53", + }, + light: { + main: "#f0f2f5", + focus: "#f0f2f5", + }, + dark: { + main: "#344767", + focus: "#2c3c58", + }, + grey: { + 100: "#f8f9fa", + 200: "#f0f2f5", + 300: "#dee2e6", + 400: "#ced4da", + 500: "#adb5bd", + 600: "#6c757d", + 700: "#495057", + 800: "#343a40", + 900: "#212529", + }, + gradients: { + primary: { + main: "#EC407A", + state: "#D81B60", + }, + secondary: { + main: "#747b8a", + state: "#495361", + }, + info: { + main: "#49a3f1", + state: "#1A73E8", + }, + success: { + main: "#66BB6A", + state: "#43A047", + }, + warning: { + main: "#FFA726", + state: "#FB8C00", + }, + error: { + main: "#EF5350", + state: "#E53935", + }, + light: { + main: "#EBEFF4", + state: "#CED4DA", + }, + dark: { + main: "#42424a", + state: "#191919", + }, + }, + socialMediaColors: { + facebook: { + main: "#3b5998", + dark: "#344e86", + }, + twitter: { + main: "#55acee", + dark: "#3ea1ec", + }, + instagram: { + main: "#125688", + dark: "#0e456d", + }, + linkedin: { + main: "#0077b5", + dark: "#00669c", + }, + pinterest: { + main: "#cc2127", + dark: "#b21d22", + }, + youtube: { + main: "#e52d27", + dark: "#d41f1a", + }, + vimeo: { + main: "#1ab7ea", + dark: "#13a3d2", + }, + slack: { + main: "#3aaf85", + dark: "#329874", + }, + dribbble: { + main: "#ea4c89", + dark: "#e73177", + }, + github: { + main: "#24292e", + dark: "#171a1d", + }, + reddit: { + main: "#ff4500", + dark: "#e03d00", + }, + tumblr: { + main: "#35465c", + dark: "#2a3749", + }, + }, + badgeColors: { + primary: { + background: "#f8b3ca", + text: "#cc084b", + }, + secondary: { + background: "#d7d9e1", + text: "#6c757d", + }, + info: { + background: "#aecef7", + text: "#095bc6", + }, + success: { + background: "#bce2be", + text: "#339537", + }, + warning: { + background: "#ffd59f", + text: "#c87000", + }, + error: { + background: "#fcd3d0", + text: "#f61200", + }, + light: { + background: "#ffffff", + text: "#c7d3de", + }, + dark: { + background: "#8097bf", + text: "#1e2e4a", + }, + }, + coloredShadows: { + primary: "#e91e62", + secondary: "#110e0e", + info: "#00bbd4", + success: "#4caf4f", + warning: "#ff9900", + error: "#f44336", + light: "#adb5bd", + dark: "#404040", + }, + inputBorderColor: "#d2d6da", + tabs: { + indicator: { boxShadow: "#ddd" }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +/** + * The base breakpoints for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material. + * You can add new breakpoints using this file. + * You can customized the breakpoints for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file. + */ +const breakpoints$1 = { + values: { + xs: 0, + sm: 576, + md: 768, + lg: 992, + xl: 1200, + xxl: 1400, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +/** + The pxToRem() function helps you to convert a px unit into a rem unit, + */ +function pxToRem$1(number, baseNumber = 16) { + return `${number / baseNumber}rem`; +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { dark: dark$e } = colors$1; +const baseProperties$1 = { + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeightLighter: 100, + fontWeightLight: 300, + fontWeightRegular: 400, + fontWeightMedium: 600, + fontWeightBold: 700, + fontSizeXXS: pxToRem$1(10.4), + fontSizeXS: pxToRem$1(12), + fontSizeSM: pxToRem$1(14), + fontSizeMD: pxToRem$1(16), + fontSizeLG: pxToRem$1(18), + fontSizeXL: pxToRem$1(20), + fontSize2XL: pxToRem$1(24), + fontSize3XL: pxToRem$1(30), +}; +const baseHeadingProperties$1 = { + fontFamily: baseProperties$1.fontFamily, + color: dark$e.main, + fontWeight: baseProperties$1.fontWeightBold, +}; +const baseDisplayProperties$1 = { + fontFamily: baseProperties$1.fontFamily, + color: dark$e.main, + fontWeight: baseProperties$1.fontWeightLight, + lineHeight: 1.2, +}; +const typography$1 = { + fontFamily: baseProperties$1.fontFamily, + fontWeightLighter: baseProperties$1.fontWeightLighter, + fontWeightLight: baseProperties$1.fontWeightLight, + fontWeightRegular: baseProperties$1.fontWeightRegular, + fontWeightMedium: baseProperties$1.fontWeightMedium, + fontWeightBold: baseProperties$1.fontWeightBold, + h1: { + fontSize: pxToRem$1(48), + lineHeight: 1.25, + ...baseHeadingProperties$1, + }, + h2: { + fontSize: pxToRem$1(36), + lineHeight: 1.3, + ...baseHeadingProperties$1, + }, + h3: { + fontSize: pxToRem$1(30), + lineHeight: 1.375, + ...baseHeadingProperties$1, + }, + h4: { + fontSize: pxToRem$1(24), + lineHeight: 1.375, + ...baseHeadingProperties$1, + }, + h5: { + fontSize: pxToRem$1(20), + lineHeight: 1.375, + ...baseHeadingProperties$1, + }, + h6: { + fontSize: pxToRem$1(16), + lineHeight: 1.625, + ...baseHeadingProperties$1, + }, + subtitle1: { + fontFamily: baseProperties$1.fontFamily, + fontSize: baseProperties$1.fontSizeXL, + fontWeight: baseProperties$1.fontWeightLight, + lineHeight: 1.625, + }, + subtitle2: { + fontFamily: baseProperties$1.fontFamily, + fontSize: baseProperties$1.fontSizeMD, + fontWeight: baseProperties$1.fontWeightLight, + lineHeight: 1.6, + }, + body1: { + fontFamily: baseProperties$1.fontFamily, + fontSize: baseProperties$1.fontSizeXL, + fontWeight: baseProperties$1.fontWeightRegular, + lineHeight: 1.625, + }, + body2: { + fontFamily: baseProperties$1.fontFamily, + fontSize: baseProperties$1.fontSizeMD, + fontWeight: baseProperties$1.fontWeightLight, + lineHeight: 1.6, + }, + button: { + fontFamily: baseProperties$1.fontFamily, + fontSize: baseProperties$1.fontSizeSM, + fontWeight: baseProperties$1.fontWeightLight, + lineHeight: 1.5, + textTransform: "uppercase", + }, + caption: { + fontFamily: baseProperties$1.fontFamily, + fontSize: baseProperties$1.fontSizeXS, + fontWeight: baseProperties$1.fontWeightLight, + lineHeight: 1.25, + }, + overline: { + fontFamily: baseProperties$1.fontFamily, + }, + d1: { + fontSize: pxToRem$1(80), + ...baseDisplayProperties$1, + }, + d2: { + fontSize: pxToRem$1(72), + ...baseDisplayProperties$1, + }, + d3: { + fontSize: pxToRem$1(64), + ...baseDisplayProperties$1, + }, + d4: { + fontSize: pxToRem$1(56), + ...baseDisplayProperties$1, + }, + d5: { + fontSize: pxToRem$1(48), + ...baseDisplayProperties$1, + }, + d6: { + fontSize: pxToRem$1(40), + ...baseDisplayProperties$1, + }, + size: { + xxs: baseProperties$1.fontSizeXXS, + xs: baseProperties$1.fontSizeXS, + sm: baseProperties$1.fontSizeSM, + md: baseProperties$1.fontSizeMD, + lg: baseProperties$1.fontSizeLG, + xl: baseProperties$1.fontSizeXL, + "2xl": baseProperties$1.fontSize2XL, + "3xl": baseProperties$1.fontSize3XL, + }, + lineHeight: { + sm: 1.25, + md: 1.5, + lg: 2, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function hexToRgb$1(color) { + return chroma__default["default"](color).rgb().join(", "); +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function rgba$1(color, opacity) { + return `rgba(${hexToRgb$1(color)}, ${opacity})`; +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function boxShadow$1(offset, radius, color, opacity, inset = "") { + const [x, y] = offset; + const [blur, spread] = radius; + return `${inset} ${pxToRem$1(x)} ${pxToRem$1(y)} ${pxToRem$1(blur)} ${pxToRem$1(spread)} ${rgba$1(color, opacity)}`; +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { black: black$7, white: white$x, tabs: tabs$3, coloredShadows: coloredShadows$1 } = colors$1; +const boxShadows$1 = { + xs: boxShadow$1([0, 2], [9, -5], black$7.main, 0.15), + sm: boxShadow$1([0, 5], [10, 0], black$7.main, 0.12), + md: `${boxShadow$1([0, 4], [6, -1], black$7.main, 0.1)}, ${boxShadow$1([0, 2], [4, -1], black$7.main, 0.06)}`, + lg: `${boxShadow$1([0, 10], [15, -3], black$7.main, 0.1)}, ${boxShadow$1([0, 4], [6, -2], black$7.main, 0.05)}`, + xl: `${boxShadow$1([0, 20], [25, -5], black$7.main, 0.1)}, ${boxShadow$1([0, 10], [10, -5], black$7.main, 0.04)}`, + xxl: boxShadow$1([0, 20], [27, 0], black$7.main, 0.05), + inset: boxShadow$1([0, 1], [2, 0], black$7.main, 0.075, "inset"), + colored: { + primary: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.primary, 0.4)}`, + secondary: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.secondary, 0.4)}`, + info: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.info, 0.4)}`, + success: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.success, 0.4)}`, + warning: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.warning, 0.4)}`, + error: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.error, 0.4)}`, + light: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.light, 0.4)}`, + dark: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.dark, 0.4)}`, + }, + navbarBoxShadow: `${boxShadow$1([0, 0], [1, 1], white$x.main, 0.9, "inset")}, ${boxShadow$1([0, 20], [27, 0], black$7.main, 0.05)}`, + sliderBoxShadow: { + thumb: boxShadow$1([0, 1], [13, 0], black$7.main, 0.2), + }, + tabsBoxShadow: { + indicator: boxShadow$1([0, 1], [5, 1], tabs$3.indicator.boxShadow, 1), + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { grey: grey$a } = colors$1; +const borders$1 = { + borderColor: grey$a[300], + borderWidth: { + 0: 0, + 1: pxToRem$1(1), + 2: pxToRem$1(2), + 3: pxToRem$1(3), + 4: pxToRem$1(4), + 5: pxToRem$1(5), + }, + borderRadius: { + xs: pxToRem$1(1.6), + sm: pxToRem$1(2), + md: pxToRem$1(6), + lg: pxToRem$1(8), + xl: pxToRem$1(12), + xxl: pxToRem$1(16), + section: pxToRem$1(160), + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { info: info$l, dark: dark$d } = colors$1; +const globals$1 = { + html: { + scrollBehavior: "smooth", + }, + "*, *::before, *::after": { + margin: 0, + padding: 0, + }, + "a, a:link, a:visited": { + textDecoration: "none !important", + }, + "a.link, .link, a.link:link, .link:link, a.link:visited, .link:visited": { + color: `${dark$d.main} !important`, + transition: "color 150ms ease-in !important", + }, + "a.link:hover, .link:hover, a.link:focus, .link:focus": { + color: `${info$l.main} !important`, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +/** + The linearGradient() function helps you to create a linear gradient color background + */ +function linearGradient$1(color, colorState, angle = 195) { + return `linear-gradient(${angle}deg, ${color}, ${colorState})`; +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$w } = colors$1; +const { borderRadius: borderRadius$B } = borders$1; +const sidenav$1 = { + styleOverrides: { + root: { + width: pxToRem$1(250), + whiteSpace: "nowrap", + border: "none", + }, + paper: { + width: pxToRem$1(250), + backgroundColor: white$w.main, + height: `calc(100vh - ${pxToRem$1(32)})`, + margin: pxToRem$1(16), + borderRadius: borderRadius$B.xl, + border: "none", + }, + paperAnchorDockedLeft: { + borderRight: "none", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const list$1 = { + styleOverrides: { + padding: { + paddingTop: 0, + paddingBottom: 0, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const listItem$1 = { + defaultProps: { + disableGutters: true, + }, + styleOverrides: { + root: { + paddingTop: 0, + paddingBottom: 0, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const listItemText$1 = { + styleOverrides: { + root: { + marginTop: 0, + marginBottom: 0, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { black: black$6, white: white$v } = colors$1; +const { borderWidth: borderWidth$h, borderRadius: borderRadius$A } = borders$1; +const { md: md$a } = boxShadows$1; +const card$1 = { + styleOverrides: { + root: { + display: "flex", + flexDirection: "column", + position: "relative", + minWidth: 0, + wordWrap: "break-word", + backgroundColor: white$v.main, + backgroundClip: "border-box", + border: `${borderWidth$h[0]} solid ${rgba$1(black$6.main, 0.125)}`, + borderRadius: borderRadius$A.xl, + boxShadow: md$a, + overflow: "visible", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderRadius: borderRadius$z } = borders$1; +const cardMedia$1 = { + styleOverrides: { + root: { + borderRadius: borderRadius$z.xl, + margin: `${pxToRem$1(16)} ${pxToRem$1(16)} 0`, + }, + media: { + width: "auto", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const cardContent$1 = { + styleOverrides: { + root: { + marginTop: 0, + marginBottom: 0, + padding: `${pxToRem$1(8)} ${pxToRem$1(24)} ${pxToRem$1(24)}`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { fontWeightBold: fontWeightBold$3, size: size$z } = typography$1; +const { borderRadius: borderRadius$y } = borders$1; +const root$1 = { + display: "inline-flex", + justifyContent: "center", + alignItems: "center", + fontSize: size$z.xs, + fontWeight: fontWeightBold$3, + borderRadius: borderRadius$y.lg, + padding: `${pxToRem$1(6.302)} ${pxToRem$1(16.604)}`, + lineHeight: 1.4, + textAlign: "center", + textTransform: "uppercase", + userSelect: "none", + backgroundSize: "150% !important", + backgroundPositionX: "25% !important", + transition: "all 150ms ease-in", + "&:disabled": { + pointerEvent: "none", + opacity: 0.65, + }, + "& .material-icons": { + fontSize: pxToRem$1(15), + marginTop: pxToRem$1(-2), + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$u, text: text$e, info: info$k, secondary: secondary$5 } = colors$1; +const { size: size$y } = typography$1; +const contained$1 = { + base: { + backgroundColor: white$u.main, + minHeight: pxToRem$1(40), + color: text$e.main, + padding: `${pxToRem$1(10)} ${pxToRem$1(24)}`, + "&:hover": { + backgroundColor: white$u.main, + }, + "&:active, &:active:focus, &:active:hover": { + opacity: 0.85, + }, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem$1(16)} !important`, + }, + }, + small: { + minHeight: pxToRem$1(32), + padding: `${pxToRem$1(6)} ${pxToRem$1(16)}`, + fontSize: size$y.xs, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem$1(12)} !important`, + }, + }, + large: { + minHeight: pxToRem$1(47), + padding: `${pxToRem$1(12)} ${pxToRem$1(28)}`, + fontSize: size$y.sm, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem$1(22)} !important`, + }, + }, + primary: { + backgroundColor: info$k.main, + "&:hover": { + backgroundColor: info$k.main, + }, + "&:focus:not(:hover)": { + backgroundColor: info$k.focus, + }, + }, + secondary: { + backgroundColor: secondary$5.main, + "&:hover": { + backgroundColor: secondary$5.main, + }, + "&:focus:not(:hover)": { + backgroundColor: secondary$5.focus, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent: transparent$p, light: light$9, info: info$j, secondary: secondary$4 } = colors$1; +const { size: size$x } = typography$1; +const outlined$1 = { + base: { + minHeight: pxToRem$1(40), + color: light$9.main, + borderColor: light$9.main, + padding: `${pxToRem$1(10)} ${pxToRem$1(24)}`, + "&:hover": { + opacity: 0.75, + backgroundColor: transparent$p.main, + }, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem$1(16)} !important`, + }, + }, + small: { + minHeight: pxToRem$1(32), + padding: `${pxToRem$1(6)} ${pxToRem$1(16)}`, + fontSize: size$x.xs, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem$1(12)} !important`, + }, + }, + large: { + minHeight: pxToRem$1(47), + padding: `${pxToRem$1(12)} ${pxToRem$1(28)}`, + fontSize: size$x.sm, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem$1(22)} !important`, + }, + }, + primary: { + backgroundColor: transparent$p.main, + borderColor: info$j.main, + "&:hover": { + backgroundColor: transparent$p.main, + }, + }, + secondary: { + backgroundColor: transparent$p.main, + borderColor: secondary$4.main, + "&:hover": { + backgroundColor: transparent$p.main, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { text: text$d, info: info$i, secondary: secondary$3, transparent: transparent$o } = colors$1; +const { size: size$w } = typography$1; +const buttonText$1 = { + base: { + backgroundColor: transparent$o.main, + minHeight: pxToRem$1(40), + color: text$d.main, + boxShadow: "none", + padding: `${pxToRem$1(10)} ${pxToRem$1(24)}`, + "&:hover": { + backgroundColor: transparent$o.main, + boxShadow: "none", + }, + "&:focus": { + boxShadow: "none", + }, + "&:active, &:active:focus, &:active:hover": { + opacity: 0.85, + boxShadow: "none", + }, + "&:disabled": { + boxShadow: "none", + }, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem$1(16)} !important`, + }, + }, + small: { + minHeight: pxToRem$1(32), + padding: `${pxToRem$1(6)} ${pxToRem$1(16)}`, + fontSize: size$w.xs, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem$1(12)} !important`, + }, + }, + large: { + minHeight: pxToRem$1(47), + padding: `${pxToRem$1(12)} ${pxToRem$1(28)}`, + fontSize: size$w.sm, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem$1(22)} !important`, + }, + }, + primary: { + color: info$i.main, + "&:hover": { + color: info$i.main, + }, + "&:focus:not(:hover)": { + color: info$i.focus, + boxShadow: "none", + }, + }, + secondary: { + color: secondary$3.main, + "&:hover": { + color: secondary$3.main, + }, + "&:focus:not(:hover)": { + color: secondary$3.focus, + boxShadow: "none", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const button$1 = { + defaultProps: { + disableRipple: false, + }, + styleOverrides: { + root: { ...root$1 }, + contained: { ...contained$1.base }, + containedSizeSmall: { ...contained$1.small }, + containedSizeLarge: { ...contained$1.large }, + containedPrimary: { ...contained$1.primary }, + containedSecondary: { ...contained$1.secondary }, + outlined: { ...outlined$1.base }, + outlinedSizeSmall: { ...outlined$1.small }, + outlinedSizeLarge: { ...outlined$1.large }, + outlinedPrimary: { ...outlined$1.primary }, + outlinedSecondary: { ...outlined$1.secondary }, + text: { ...buttonText$1.base }, + textSizeSmall: { ...buttonText$1.small }, + textSizeLarge: { ...buttonText$1.large }, + textPrimary: { ...buttonText$1.primary }, + textSecondary: { ...buttonText$1.secondary }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent: transparent$n } = colors$1; +const iconButton$1 = { + styleOverrides: { + root: { + "&:hover": { + backgroundColor: transparent$n.main, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { info: info$h, inputBorderColor: inputBorderColor$3, dark: dark$c } = colors$1; +const { size: size$v } = typography$1; +const { borderWidth: borderWidth$g } = borders$1; +const input$1 = { + styleOverrides: { + root: { + fontSize: size$v.sm, + color: dark$c.main, + "&:hover:not(.Mui-disabled):before": { + borderBottom: `${borderWidth$g[1]} solid ${inputBorderColor$3}`, + }, + "&:before": { + borderColor: inputBorderColor$3, + }, + "&:after": { + borderColor: info$h.main, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { text: text$c, info: info$g } = colors$1; +const { size: size$u } = typography$1; +const inputLabel$1 = { + styleOverrides: { + root: { + fontSize: size$u.sm, + color: text$c.main, + lineHeight: 0.9, + "&.Mui-focused": { + color: info$g.main, + }, + "&.MuiInputLabel-shrink": { + lineHeight: 1.5, + fontSize: size$u.md, + "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { + fontSize: "0.85em", + }, + }, + }, + sizeSmall: { + fontSize: size$u.xs, + lineHeight: 1.625, + "&.MuiInputLabel-shrink": { + lineHeight: 1.6, + fontSize: size$u.sm, + "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { + fontSize: "0.72em", + }, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { inputBorderColor: inputBorderColor$2, info: info$f, grey: grey$9, transparent: transparent$m } = colors$1; +const { borderRadius: borderRadius$x } = borders$1; +const { size: size$t } = typography$1; +const inputOutlined$1 = { + styleOverrides: { + root: { + backgroundColor: transparent$m.main, + fontSize: size$t.sm, + borderRadius: borderRadius$x.md, + "&:hover .MuiOutlinedInput-notchedOutline": { + borderColor: inputBorderColor$2, + }, + "&.Mui-focused": { + "& .MuiOutlinedInput-notchedOutline": { + borderColor: info$f.main, + }, + }, + }, + notchedOutline: { + borderColor: inputBorderColor$2, + }, + input: { + color: grey$9[700], + padding: pxToRem$1(12), + backgroundColor: transparent$m.main, + }, + inputSizeSmall: { + fontSize: size$t.xs, + padding: pxToRem$1(10), + }, + multiline: { + color: grey$9[700], + padding: 0, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent: transparent$l } = colors$1; +const textField$1 = { + styleOverrides: { + root: { + backgroundColor: transparent$l.main, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { lg: lg$5 } = boxShadows$1; +const { size: size$s } = typography$1; +const { text: text$b, white: white$t } = colors$1; +const { borderRadius: borderRadius$w } = borders$1; +const menu$1 = { + defaultProps: { + disableAutoFocusItem: true, + }, + styleOverrides: { + paper: { + minWidth: pxToRem$1(160), + boxShadow: lg$5, + padding: `${pxToRem$1(16)} ${pxToRem$1(8)}`, + fontSize: size$s.sm, + color: text$b.main, + textAlign: "left", + backgroundColor: `${white$t.main} !important`, + borderRadius: borderRadius$w.md, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { light: light$8, text: text$a, dark: dark$b } = colors$1; +const { borderRadius: borderRadius$v } = borders$1; +const { size: size$r } = typography$1; +const menuItem$2 = { + styleOverrides: { + root: { + minWidth: pxToRem$1(160), + minHeight: "unset", + padding: `${pxToRem$1(4.8)} ${pxToRem$1(16)}`, + borderRadius: borderRadius$v.md, + fontSize: size$r.sm, + color: text$a.main, + transition: "background-color 300ms ease, color 300ms ease", + "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { + backgroundColor: light$8.main, + color: dark$b.main, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$s, gradients: gradients$8, grey: grey$8, transparent: transparent$k } = colors$1; +const { borderWidth: borderWidth$f } = borders$1; +const { md: md$9 } = boxShadows$1; +const switchButton$1 = { + defaultProps: { + disableRipple: false, + }, + styleOverrides: { + switchBase: { + color: gradients$8.dark.main, + "&:hover": { + backgroundColor: transparent$k.main, + }, + "&.Mui-checked": { + color: gradients$8.dark.main, + "&:hover": { + backgroundColor: transparent$k.main, + }, + "& .MuiSwitch-thumb": { + borderColor: `${gradients$8.dark.main} !important`, + }, + "& + .MuiSwitch-track": { + backgroundColor: `${gradients$8.dark.main} !important`, + borderColor: `${gradients$8.dark.main} !important`, + opacity: 1, + }, + }, + "&.Mui-disabled + .MuiSwitch-track": { + opacity: "0.3 !important", + }, + "&.Mui-focusVisible .MuiSwitch-thumb": { + backgroundImage: linearGradient$1(gradients$8.info.main, gradients$8.info.state), + }, + }, + thumb: { + backgroundColor: white$s.main, + boxShadow: md$9, + border: `${borderWidth$f[1]} solid ${grey$8[400]}`, + }, + track: { + width: pxToRem$1(32), + height: pxToRem$1(15), + backgroundColor: grey$8[400], + border: `${borderWidth$f[1]} solid ${grey$8[400]}`, + opacity: 1, + }, + checked: {}, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { dark: dark$a, transparent: transparent$j, white: white$r } = colors$1; +const divider$1 = { + styleOverrides: { + root: { + backgroundColor: transparent$j.main, + backgroundImage: `linear-gradient(to right, ${rgba$1(dark$a.main, 0)}, ${rgba$1(dark$a.main, 0.4)}, ${rgba$1(dark$a.main, 0)}) !important`, + height: pxToRem$1(1), + margin: `${pxToRem$1(16)} 0`, + borderBottom: "none", + opacity: 0.25, + }, + vertical: { + backgroundColor: transparent$j.main, + backgroundImage: `linear-gradient(to bottom, ${rgba$1(dark$a.main, 0)}, ${rgba$1(dark$a.main, 0.4)}, ${rgba$1(dark$a.main, 0)}) !important`, + width: pxToRem$1(1), + height: "100%", + margin: `0 ${pxToRem$1(16)}`, + borderRight: "none", + }, + light: { + backgroundColor: transparent$j.main, + backgroundImage: `linear-gradient(to right, ${rgba$1(white$r.main, 0)}, ${white$r.main}, ${rgba$1(white$r.main, 0)}) !important`, + "&.MuiDivider-vertical": { + backgroundImage: `linear-gradient(to bottom, ${rgba$1(white$r.main, 0)}, ${white$r.main}, ${rgba$1(white$r.main, 0)}) !important`, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$q } = colors$1; +const { md: md$8 } = boxShadows$1; +const { borderRadius: borderRadius$u } = borders$1; +const tableContainer$1 = { + styleOverrides: { + root: { + backgroundColor: white$q.main, + boxShadow: md$8, + borderRadius: borderRadius$u.xl, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderRadius: borderRadius$t } = borders$1; +const tableHead$1 = { + styleOverrides: { + root: { + display: "block", + padding: `${pxToRem$1(16)} ${pxToRem$1(16)} 0 ${pxToRem$1(16)}`, + borderRadius: `${borderRadius$t.xl} ${borderRadius$t.xl} 0 0`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderWidth: borderWidth$e } = borders$1; +const { light: light$7 } = colors$1; +const tableCell$1 = { + styleOverrides: { + root: { + padding: `${pxToRem$1(12)} ${pxToRem$1(16)}`, + borderBottom: `${borderWidth$e[1]} solid ${light$7.main}`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderRadius: borderRadius$s } = borders$1; +const { light: light$6 } = colors$1; +const linearProgress$1 = { + styleOverrides: { + root: { + height: pxToRem$1(6), + borderRadius: borderRadius$s.md, + overflow: "visible", + position: "relative", + }, + colorPrimary: { + backgroundColor: light$6.main, + }, + colorSecondary: { + backgroundColor: light$6.main, + }, + bar: { + height: pxToRem$1(6), + borderRadius: borderRadius$s.sm, + position: "absolute", + transform: `translate(0, 0) !important`, + transition: "width 0.6s ease !important", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { grey: grey$7 } = colors$1; +const { size: size$q } = typography$1; +const breadcrumbs$1 = { + styleOverrides: { + li: { + lineHeight: 0, + }, + separator: { + fontSize: size$q.sm, + color: grey$7[600], + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { grey: grey$6, white: white$p, black: black$5, info: info$e } = colors$1; +const { borderRadius: borderRadius$r, borderWidth: borderWidth$d } = borders$1; +const { sliderBoxShadow: sliderBoxShadow$1 } = boxShadows$1; +const slider$1 = { + styleOverrides: { + root: { + width: "100%", + "& .MuiSlider-active, & .Mui-focusVisible": { + boxShadow: "none !important", + }, + "& .MuiSlider-valueLabel": { + color: black$5.main, + }, + }, + rail: { + height: pxToRem$1(2), + background: grey$6[200], + borderRadius: borderRadius$r.sm, + opacity: 1, + }, + track: { + background: info$e.main, + height: pxToRem$1(2), + position: "relative", + border: "none", + borderRadius: borderRadius$r.lg, + zIndex: 1, + }, + thumb: { + width: pxToRem$1(14), + height: pxToRem$1(14), + backgroundColor: white$p.main, + zIndex: 10, + boxShadow: sliderBoxShadow$1.thumb, + border: `${borderWidth$d[1]} solid ${info$e.main}`, + transition: "all 200ms linear", + "&:hover": { + boxShadow: "none", + }, + "&:active": { + transform: "translate(-50%, -50%) scale(1.4)", + }, + "&.Mui-active": { boxShadow: boxShadow$1([0, 0], [0, 14], info$e.main, 0.16) }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderRadius: borderRadius$q } = borders$1; +const avatar$1 = { + styleOverrides: { + root: { + transition: "all 200ms ease-in-out", + }, + rounded: { + borderRadius: borderRadius$q.lg, + }, + img: { + height: "auto", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { black: black$4, light: light$5 } = colors$1; +const { size: size$p, fontWeightRegular: fontWeightRegular$5 } = typography$1; +const { borderRadius: borderRadius$p } = borders$1; +const tooltip$1 = { + defaultProps: { + arrow: true, + TransitionComponent: Fade__default["default"], + }, + styleOverrides: { + tooltip: { + maxWidth: pxToRem$1(200), + backgroundColor: black$4.main, + color: light$5.main, + fontSize: size$p.sm, + fontWeight: fontWeightRegular$5, + textAlign: "center", + borderRadius: borderRadius$p.md, + opacity: 0.7, + padding: `${pxToRem$1(5)} ${pxToRem$1(8)} ${pxToRem$1(4)}`, + }, + arrow: { + color: black$4.main, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const appBar$1 = { + defaultProps: { + color: "transparent", + }, + styleOverrides: { + root: { + boxShadow: "none", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { grey: grey$5, white: white$o } = colors$1; +const { borderRadius: borderRadius$o } = borders$1; +const { tabsBoxShadow } = boxShadows$1; +const tabs$2 = { + styleOverrides: { + root: { + position: "relative", + backgroundColor: grey$5[100], + borderRadius: borderRadius$o.xl, + minHeight: "unset", + padding: pxToRem$1(4), + }, + flexContainer: { + height: "100%", + position: "relative", + zIndex: 10, + }, + fixed: { + overflow: "unset !important", + overflowX: "unset !important", + }, + vertical: { + "& .MuiTabs-indicator": { + width: "100%", + }, + }, + indicator: { + height: "100%", + borderRadius: borderRadius$o.lg, + backgroundColor: white$o.main, + boxShadow: tabsBoxShadow.indicator, + transition: "all 500ms ease", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { size: size$o, fontWeightRegular: fontWeightRegular$4 } = typography$1; +const { borderRadius: borderRadius$n } = borders$1; +const { dark: dark$9 } = colors$1; +const tab$1 = { + styleOverrides: { + root: { + display: "flex", + alignItems: "center", + flexDirection: "row", + flex: "1 1 auto", + textAlign: "center", + maxWidth: "unset !important", + minWidth: "unset !important", + minHeight: "unset !important", + fontSize: size$o.md, + fontWeight: fontWeightRegular$4, + textTransform: "none", + lineHeight: "inherit", + padding: pxToRem$1(4), + borderRadius: borderRadius$n.lg, + color: `${dark$9.main} !important`, + opacity: "1 !important", + "& .material-icons, .material-icons-round": { + marginBottom: "0 !important", + marginRight: pxToRem$1(6), + }, + "& svg": { + marginBottom: "0 !important", + marginRight: pxToRem$1(6), + }, + }, + labelIcon: { + paddingTop: pxToRem$1(4), + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent: transparent$i, gradients: gradients$7 } = colors$1; +const { borderRadius: borderRadius$m } = borders$1; +const { colored: colored$1 } = boxShadows$1; +const stepper$1 = { + styleOverrides: { + root: { + background: linearGradient$1(gradients$7.info.main, gradients$7.info.state), + padding: `${pxToRem$1(24)} 0 ${pxToRem$1(16)}`, + borderRadius: borderRadius$m.lg, + boxShadow: colored$1.info, + "&.MuiPaper-root": { + backgroundColor: transparent$i.main, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const step$1 = { + styleOverrides: { + root: { + padding: `0 ${pxToRem$1(6)}`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$n } = colors$1; +const { borderWidth: borderWidth$c } = borders$1; +const stepConnector$1 = { + styleOverrides: { + root: { + color: "#9fc9ff", + transition: "all 200ms linear", + "&.Mui-active": { + color: white$n.main, + }, + "&.Mui-completed": { + color: white$n.main, + }, + }, + alternativeLabel: { + top: "14%", + left: "-50%", + right: "50%", + }, + line: { + borderWidth: `${borderWidth$c[2]} !important`, + borderColor: "currentColor", + opacity: 0.5, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { size: size$n, fontWeightRegular: fontWeightRegular$3 } = typography$1; +const { white: white$m } = colors$1; +const stepLabel$1 = { + styleOverrides: { + label: { + marginTop: `${pxToRem$1(8)} !important`, + fontWeight: fontWeightRegular$3, + fontSize: size$n.xs, + color: "#9fc9ff", + textTransform: "uppercase", + "&.Mui-active": { + fontWeight: `${fontWeightRegular$3} !important`, + color: `${rgba$1(white$m.main, 0.8)} !important`, + }, + "&.Mui-completed": { + fontWeight: `${fontWeightRegular$3} !important`, + color: `${rgba$1(white$m.main, 0.8)} !important`, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$l } = colors$1; +const stepIcon$1 = { + styleOverrides: { + root: { + background: "#9fc9ff", + fill: "#9fc9ff", + stroke: "#9fc9ff", + strokeWidth: pxToRem$1(10), + width: pxToRem$1(13), + height: pxToRem$1(13), + borderRadius: "50%", + zIndex: 99, + transition: "all 200ms linear", + "&.Mui-active": { + background: white$l.main, + fill: white$l.main, + stroke: white$l.main, + borderColor: white$l.main, + boxShadow: boxShadow$1([0, 0], [0, 2], white$l.main, 1), + }, + "&.Mui-completed": { + background: white$l.main, + fill: white$l.main, + stroke: white$l.main, + borderColor: white$l.main, + boxShadow: boxShadow$1([0, 0], [0, 2], white$l.main, 1), + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent: transparent$h } = colors$1; +const select$1 = { + styleOverrides: { + select: { + display: "grid", + alignItems: "center", + padding: `0 ${pxToRem$1(12)} !important`, + "& .Mui-selected": { + backgroundColor: transparent$h.main, + }, + }, + selectMenu: { + background: "none", + height: "none", + minHeight: "none", + overflow: "unset", + }, + icon: { + display: "none", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { dark: dark$8 } = colors$1; +const { size: size$m, fontWeightBold: fontWeightBold$2 } = typography$1; +const formControlLabel$1 = { + styleOverrides: { + root: { + display: "block", + minHeight: pxToRem$1(24), + marginBottom: pxToRem$1(2), + }, + label: { + display: "inline-block", + fontSize: size$m.sm, + fontWeight: fontWeightBold$2, + color: dark$8.main, + lineHeight: 1, + transform: `translateY(${pxToRem$1(1)})`, + marginLeft: pxToRem$1(4), + "&.Mui-disabled": { + color: dark$8.main, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { text: text$9 } = colors$1; +const formLabel$1 = { + styleOverrides: { + root: { + color: text$9.main, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderWidth: borderWidth$b, borderColor: borderColor$5 } = borders$1; +const { transparent: transparent$g, info: info$d } = colors$1; +const checkbox$1 = { + styleOverrides: { + root: { + "& .MuiSvgIcon-root": { + backgroundPosition: "center", + backgroundSize: "contain", + backgroundRepeat: "no-repeat", + width: pxToRem$1(20), + height: pxToRem$1(20), + color: transparent$g.main, + border: `${borderWidth$b[1]} solid ${borderColor$5}`, + borderRadius: pxToRem$1(5.6), + }, + "&:hover": { + backgroundColor: transparent$g.main, + }, + "&.Mui-focusVisible": { + border: `${borderWidth$b[2]} solid ${info$d.main} !important`, + }, + }, + colorPrimary: { + color: borderColor$5, + "&.Mui-checked": { + color: info$d.main, + "& .MuiSvgIcon-root": { + backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient$1(info$d.main, info$d.main)}`, + borderColor: info$d.main, + }, + }, + }, + colorSecondary: { + color: borderColor$5, + "& .MuiSvgIcon-root": { + color: info$d.main, + "&.Mui-checked": { + backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient$1(info$d.main, info$d.main)}`, + borderColor: info$d.main, + }, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderWidth: borderWidth$a, borderColor: borderColor$4 } = borders$1; +const { transparent: transparent$f, info: info$c } = colors$1; +const radio$1 = { + styleOverrides: { + root: { + "& .MuiSvgIcon-root": { + width: pxToRem$1(20), + height: pxToRem$1(20), + color: transparent$f.main, + border: `${borderWidth$a[1]} solid ${borderColor$4}`, + borderRadius: "50%", + }, + "&:after": { + transition: "opacity 250ms ease-in-out", + content: `""`, + position: "absolute", + width: pxToRem$1(14), + height: pxToRem$1(14), + borderRadius: "50%", + backgroundImage: linearGradient$1(info$c.main, info$c.main), + opacity: 0, + left: 0, + right: 0, + top: 0, + bottom: 0, + margin: "auto", + }, + "&:hover": { + backgroundColor: transparent$f.main, + }, + "&.Mui-focusVisible": { + border: `${borderWidth$a[2]} solid ${info$c.main} !important`, + }, + }, + colorPrimary: { + color: borderColor$4, + "&.Mui-checked": { + color: info$c.main, + "& .MuiSvgIcon-root": { + borderColor: info$c.main, + }, + "&:after": { + opacity: 1, + }, + }, + }, + colorSecondary: { + color: borderColor$4, + "&.Mui-checked": { + color: info$c.main, + "& .MuiSvgIcon-root": { + borderColor: info$c.main, + }, + "&:after": { + opacity: 1, + }, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { lg: lg$4 } = boxShadows$1; +const { size: size$l } = typography$1; +const { text: text$8, white: white$k, transparent: transparent$e, light: light$4, dark: dark$7, gradients: gradients$6 } = colors$1; +const { borderRadius: borderRadius$l } = borders$1; +const autocomplete = { + styleOverrides: { + popper: { + boxShadow: lg$4, + padding: pxToRem$1(8), + fontSize: size$l.sm, + color: text$8.main, + textAlign: "left", + backgroundColor: `${white$k.main} !important`, + borderRadius: borderRadius$l.md, + }, + paper: { + boxShadow: "none", + backgroundColor: transparent$e.main, + }, + option: { + padding: `${pxToRem$1(4.8)} ${pxToRem$1(16)}`, + borderRadius: borderRadius$l.md, + fontSize: size$l.sm, + color: text$8.main, + transition: "background-color 300ms ease, color 300ms ease", + "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { + backgroundColor: light$4.main, + color: dark$7.main, + }, + '&[aria-selected="true"]': { + backgroundColor: `${light$4.main} !important`, + color: `${dark$7.main} !important`, + }, + }, + noOptions: { + fontSize: size$l.sm, + color: text$8.main, + }, + groupLabel: { + color: dark$7.main, + }, + loading: { + fontSize: size$l.sm, + color: text$8.main, + }, + tag: { + display: "flex", + alignItems: "center", + height: "auto", + padding: pxToRem$1(4), + backgroundColor: gradients$6.dark.state, + color: white$k.main, + "& .MuiChip-label": { + lineHeight: 1.2, + padding: `0 ${pxToRem$1(10)} 0 ${pxToRem$1(4)}`, + }, + "& .MuiSvgIcon-root, & .MuiSvgIcon-root:hover, & .MuiSvgIcon-root:focus": { + color: white$k.main, + marginRight: 0, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { info: info$b, white: white$j, gradients: gradients$5 } = colors$1; +const flatpickr$1 = { + ".flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.nextMonthDay:hover, .flatpickr-day.nextMonthDay:focus": { + background: rgba$1(info$b.main, 0.28), + border: "none", + }, + ".flatpickr-day.today": { + background: info$b.main, + color: white$j.main, + border: "none", + "&:hover, &:focus": { + background: `${info$b.focus} !important`, + }, + }, + ".flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.nextMonthDay.selected, .flatpickr-day.nextMonthDay.selected:hover, .flatpickr-day.nextMonthDay.selected:focus": { + background: `${gradients$5.info.state} !important`, + color: white$j.main, + border: "none", + }, + ".flatpickr-months .flatpickr-next-month:hover svg, .flatpickr-months .flatpickr-prev-month:hover svg": { + color: `${info$b.main} !important`, + fill: `${info$b.main} !important`, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { values: { sm: sm$1, md: md$7, lg: lg$3, xl: xl$1, xxl: xxl$3 }, } = breakpoints$1; +const SM$1 = `@media (min-width: ${sm$1}px)`; +const MD$1 = `@media (min-width: ${md$7}px)`; +const LG$1 = `@media (min-width: ${lg$3}px)`; +const XL$1 = `@media (min-width: ${xl$1}px)`; +const XXL$1 = `@media (min-width: ${xxl$3}px)`; +const sharedClasses$1 = { + paddingRight: `${pxToRem$1(24)} !important`, + paddingLeft: `${pxToRem$1(24)} !important`, + marginRight: "auto !important", + marginLeft: "auto !important", + width: "100% !important", + position: "relative", +}; +const container$1 = { + [SM$1]: { + ".MuiContainer-root": { + ...sharedClasses$1, + maxWidth: "540px !important", + }, + }, + [MD$1]: { + ".MuiContainer-root": { + ...sharedClasses$1, + maxWidth: "720px !important", + }, + }, + [LG$1]: { + ".MuiContainer-root": { + ...sharedClasses$1, + maxWidth: "960px !important", + }, + }, + [XL$1]: { + ".MuiContainer-root": { + ...sharedClasses$1, + maxWidth: "1140px !important", + }, + }, + [XXL$1]: { + ".MuiContainer-root": { + ...sharedClasses$1, + maxWidth: "1320px !important", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent: transparent$d } = colors$1; +const { lg: lg$2 } = boxShadows$1; +const { borderRadius: borderRadius$k } = borders$1; +const popover$1 = { + styleOverrides: { + paper: { + backgroundColor: transparent$d.main, + boxShadow: lg$2, + padding: pxToRem$1(8), + borderRadius: borderRadius$k.md, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const buttonBase$1 = { + defaultProps: { + disableRipple: false, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const icon$1 = { + defaultProps: { + baseClassName: "material-icons-round", + fontSize: "inherit", + }, + styleOverrides: { + fontSizeInherit: { + fontSize: "inherit !important", + }, + fontSizeSmall: { + fontSize: `${pxToRem$1(20)} !important`, + }, + fontSizeLarge: { + fontSize: `${pxToRem$1(36)} !important`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const svgIcon$1 = { + defaultProps: { + fontSize: "inherit", + }, + styleOverrides: { + fontSizeInherit: { + fontSize: "inherit !important", + }, + fontSizeSmall: { + fontSize: `${pxToRem$1(20)} !important`, + }, + fontSizeLarge: { + fontSize: `${pxToRem$1(36)} !important`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const link$1 = { + defaultProps: { + underline: "none", + color: "inherit", + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderRadius: borderRadius$j } = borders$1; +const { xxl: xxl$2 } = boxShadows$1; +const dialog$1 = { + styleOverrides: { + paper: { + borderRadius: borderRadius$j.lg, + boxShadow: xxl$2, + }, + paperFullScreen: { + borderRadius: 0, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { size: size$k } = typography$1; +const dialogTitle$1 = { + styleOverrides: { + root: { + padding: pxToRem$1(16), + fontSize: size$k.xl, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { size: size$j } = typography$1; +const { text: text$7 } = colors$1; +const { borderWidth: borderWidth$9, borderColor: borderColor$3 } = borders$1; +const dialogContent$1 = { + styleOverrides: { + root: { + padding: pxToRem$1(16), + fontSize: size$j.md, + color: text$7.main, + }, + dividers: { + borderTop: `${borderWidth$9[1]} solid ${borderColor$3}`, + borderBottom: `${borderWidth$9[1]} solid ${borderColor$3}`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { size: size$i } = typography$1; +const { text: text$6 } = colors$1; +const dialogContentText$1 = { + styleOverrides: { + root: { + fontSize: size$i.md, + color: text$6.main, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const dialogActions$1 = { + styleOverrides: { + root: { + padding: pxToRem$1(16), + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React - v2.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-material-ui +* Copyright 2021 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +var theme = material.createTheme({ + breakpoints: { ...breakpoints$1 }, + palette: { ...colors$1 }, + typography: { ...typography$1 }, + boxShadows: { ...boxShadows$1 }, + borders: { ...borders$1 }, + functions: { + boxShadow: boxShadow$1, + hexToRgb: hexToRgb$1, + linearGradient: linearGradient$1, + pxToRem: pxToRem$1, + rgba: rgba$1, + }, + components: { + MuiCssBaseline: { + styleOverrides: { + ...globals$1, + ...flatpickr$1, + ...container$1, + }, + }, + MuiDrawer: { ...sidenav$1 }, + MuiList: { ...list$1 }, + MuiListItem: { ...listItem$1 }, + MuiListItemText: { ...listItemText$1 }, + MuiCard: { ...card$1 }, + MuiCardMedia: { ...cardMedia$1 }, + MuiCardContent: { ...cardContent$1 }, + MuiButton: { ...button$1 }, + MuiIconButton: { ...iconButton$1 }, + MuiInput: { ...input$1 }, + MuiInputLabel: { ...inputLabel$1 }, + MuiOutlinedInput: { ...inputOutlined$1 }, + MuiTextField: { ...textField$1 }, + MuiMenu: { ...menu$1 }, + MuiMenuItem: { ...menuItem$2 }, + MuiSwitch: { ...switchButton$1 }, + MuiDivider: { ...divider$1 }, + MuiTableContainer: { ...tableContainer$1 }, + MuiTableHead: { ...tableHead$1 }, + MuiTableCell: { ...tableCell$1 }, + MuiLinearProgress: { ...linearProgress$1 }, + MuiBreadcrumbs: { ...breadcrumbs$1 }, + MuiSlider: { ...slider$1 }, + MuiAvatar: { ...avatar$1 }, + MuiTooltip: { ...tooltip$1 }, + MuiAppBar: { ...appBar$1 }, + MuiTabs: { ...tabs$2 }, + MuiTab: { ...tab$1 }, + MuiStepper: { ...stepper$1 }, + MuiStep: { ...step$1 }, + MuiStepConnector: { ...stepConnector$1 }, + MuiStepLabel: { ...stepLabel$1 }, + MuiStepIcon: { ...stepIcon$1 }, + MuiSelect: { ...select$1 }, + MuiFormControlLabel: { ...formControlLabel$1 }, + MuiFormLabel: { ...formLabel$1 }, + MuiCheckbox: { ...checkbox$1 }, + MuiRadio: { ...radio$1 }, + MuiAutocomplete: { ...autocomplete }, + MuiPopover: { ...popover$1 }, + MuiButtonBase: { ...buttonBase$1 }, + MuiIcon: { ...icon$1 }, + MuiSvgIcon: { ...svgIcon$1 }, + MuiLink: { ...link$1 }, + MuiDialog: { ...dialog$1 }, + MuiDialogTitle: { ...dialogTitle$1 }, + MuiDialogContent: { ...dialogContent$1 }, + MuiDialogContentText: { ...dialogContentText$1 }, + MuiDialogActions: { ...dialogActions$1 }, + }, +}); + +/** +========================================================= +* Material Dashboard 2 PRO React - v2.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-material-ui +* Copyright 2021 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +var themeRTL = styles.createTheme({ + direction: "rtl", + breakpoints: { ...breakpoints$1 }, + palette: { ...colors$1 }, + typography: { ...typography$1 }, + boxShadows: { ...boxShadows$1 }, + borders: { ...borders$1 }, + functions: { + boxShadow: boxShadow$1, + hexToRgb: hexToRgb$1, + linearGradient: linearGradient$1, + pxToRem: pxToRem$1, + rgba: rgba$1, + }, + components: { + MuiCssBaseline: { + styleOverrides: { + ...globals$1, + ...flatpickr$1, + ...container$1, + }, + }, + MuiDrawer: { ...sidenav$1 }, + MuiList: { ...list$1 }, + MuiListItem: { ...listItem$1 }, + MuiListItemText: { ...listItemText$1 }, + MuiCard: { ...card$1 }, + MuiCardMedia: { ...cardMedia$1 }, + MuiCardContent: { ...cardContent$1 }, + MuiButton: { ...button$1 }, + MuiIconButton: { ...iconButton$1 }, + MuiInput: { ...input$1 }, + MuiInputLabel: { ...inputLabel$1 }, + MuiOutlinedInput: { ...inputOutlined$1 }, + MuiTextField: { ...textField$1 }, + MuiMenu: { ...menu$1 }, + MuiMenuItem: { ...menuItem$2 }, + MuiSwitch: { ...switchButton$1 }, + MuiDivider: { ...divider$1 }, + MuiTableContainer: { ...tableContainer$1 }, + MuiTableHead: { ...tableHead$1 }, + MuiTableCell: { ...tableCell$1 }, + MuiLinearProgress: { ...linearProgress$1 }, + MuiBreadcrumbs: { ...breadcrumbs$1 }, + MuiSlider: { ...slider$1 }, + MuiAvatar: { ...avatar$1 }, + MuiTooltip: { ...tooltip$1 }, + MuiAppBar: { ...appBar$1 }, + MuiTabs: { ...tabs$2 }, + MuiTab: { ...tab$1 }, + MuiStepper: { ...stepper$1 }, + MuiStep: { ...step$1 }, + MuiStepConnector: { ...stepConnector$1 }, + MuiStepLabel: { ...stepLabel$1 }, + MuiStepIcon: { ...stepIcon$1 }, + MuiSelect: { ...select$1 }, + MuiFormControlLabel: { ...formControlLabel$1 }, + MuiFormLabel: { ...formLabel$1 }, + MuiCheckbox: { ...checkbox$1 }, + MuiRadio: { ...radio$1 }, + MuiAutocomplete: { ...autocomplete }, + MuiPopover: { ...popover$1 }, + MuiButtonBase: { ...buttonBase$1 }, + MuiIcon: { ...icon$1 }, + MuiSvgIcon: { ...svgIcon$1 }, + MuiLink: { ...link$1 }, + MuiDialog: { ...dialog$1 }, + MuiDialogTitle: { ...dialogTitle$1 }, + MuiDialogContent: { ...dialogContent$1 }, + MuiDialogContentText: { ...dialogContentText$1 }, + MuiDialogActions: { ...dialogActions$1 }, + }, +}); + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const colors = { + background: { + default: "#1a2035", + sidenav: "#1f283e", + card: "#202940", + }, + text: { + main: "#ffffffcc", + focus: "#ffffffcc", + }, + transparent: { + main: "transparent", + }, + white: { + main: "#ffffff", + focus: "#ffffff", + }, + black: { + light: "#000000", + main: "#000000", + focus: "#000000", + }, + primary: { + main: "#e91e63", + focus: "#e91e63", + }, + secondary: { + main: "#7b809a", + focus: "#8f93a9", + }, + info: { + main: "#1A73E8", + focus: "#1662C4", + }, + success: { + main: "#4CAF50", + focus: "#67bb6a", + }, + warning: { + main: "#fb8c00", + focus: "#fc9d26", + }, + error: { + main: "#F44335", + focus: "#f65f53", + }, + light: { + main: "#f0f2f566", + focus: "#f0f2f566", + }, + dark: { + main: "#344767", + focus: "#2c3c58", + }, + grey: { + 100: "#f8f9fa", + 200: "#f0f2f5", + 300: "#dee2e6", + 400: "#ced4da", + 500: "#adb5bd", + 600: "#6c757d", + 700: "#495057", + 800: "#343a40", + 900: "#212529", + }, + gradients: { + primary: { + main: "#EC407A", + state: "#D81B60", + }, + secondary: { + main: "#747b8a", + state: "#495361", + }, + info: { + main: "#49a3f1", + state: "#1A73E8", + }, + success: { + main: "#66BB6A", + state: "#43A047", + }, + warning: { + main: "#FFA726", + state: "#FB8C00", + }, + error: { + main: "#EF5350", + state: "#E53935", + }, + light: { + main: "#EBEFF4", + state: "#CED4DA", + }, + dark: { + main: "#323a54", + state: "#1a2035", + }, + }, + socialMediaColors: { + facebook: { + main: "#3b5998", + dark: "#344e86", + }, + twitter: { + main: "#55acee", + dark: "#3ea1ec", + }, + instagram: { + main: "#125688", + dark: "#0e456d", + }, + linkedin: { + main: "#0077b5", + dark: "#00669c", + }, + pinterest: { + main: "#cc2127", + dark: "#b21d22", + }, + youtube: { + main: "#e52d27", + dark: "#d41f1a", + }, + vimeo: { + main: "#1ab7ea", + dark: "#13a3d2", + }, + slack: { + main: "#3aaf85", + dark: "#329874", + }, + dribbble: { + main: "#ea4c89", + dark: "#e73177", + }, + github: { + main: "#24292e", + dark: "#171a1d", + }, + reddit: { + main: "#ff4500", + dark: "#e03d00", + }, + tumblr: { + main: "#35465c", + dark: "#2a3749", + }, + }, + badgeColors: { + primary: { + background: "#f8b3ca", + text: "#cc084b", + }, + secondary: { + background: "#d7d9e1", + text: "#6c757d", + }, + info: { + background: "#aecef7", + text: "#095bc6", + }, + success: { + background: "#bce2be", + text: "#339537", + }, + warning: { + background: "#ffd59f", + text: "#c87000", + }, + error: { + background: "#fcd3d0", + text: "#f61200", + }, + light: { + background: "#ffffff", + text: "#c7d3de", + }, + dark: { + background: "#8097bf", + text: "#1e2e4a", + }, + }, + coloredShadows: { + primary: "#e91e62", + secondary: "#110e0e", + info: "#00bbd4", + success: "#4caf4f", + warning: "#ff9900", + error: "#f44336", + light: "#adb5bd", + dark: "#404040", + }, + inputBorderColor: "#d2d6da", + tabs: { + indicator: { boxShadow: "#ddd" }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +/** + * The base breakpoints for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material. + * You can add new breakpoints using this file. + * You can customized the breakpoints for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file. + */ +const breakpoints = { + values: { + xs: 0, + sm: 576, + md: 768, + lg: 992, + xl: 1200, + xxl: 1400, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +/** + The pxToRem() function helps you to convert a px unit into a rem unit, + */ +function pxToRem(number, baseNumber = 16) { + return `${number / baseNumber}rem`; +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$i } = colors; +const baseProperties = { + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeightLighter: 100, + fontWeightLight: 300, + fontWeightRegular: 400, + fontWeightMedium: 600, + fontWeightBold: 700, + fontSizeXXS: pxToRem(10.4), + fontSizeXS: pxToRem(12), + fontSizeSM: pxToRem(14), + fontSizeMD: pxToRem(16), + fontSizeLG: pxToRem(18), + fontSizeXL: pxToRem(20), + fontSize2XL: pxToRem(24), + fontSize3XL: pxToRem(30), +}; +const baseHeadingProperties = { + fontFamily: baseProperties.fontFamily, + color: white$i.main, + fontWeight: baseProperties.fontWeightBold, +}; +const baseDisplayProperties = { + fontFamily: baseProperties.fontFamily, + color: white$i.main, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.2, +}; +const typography = { + fontFamily: baseProperties.fontFamily, + fontWeightLighter: baseProperties.fontWeightLighter, + fontWeightLight: baseProperties.fontWeightLight, + fontWeightRegular: baseProperties.fontWeightRegular, + fontWeightMedium: baseProperties.fontWeightMedium, + fontWeightBold: baseProperties.fontWeightBold, + h1: { + fontSize: pxToRem(48), + lineHeight: 1.25, + ...baseHeadingProperties, + }, + h2: { + fontSize: pxToRem(36), + lineHeight: 1.3, + ...baseHeadingProperties, + }, + h3: { + fontSize: pxToRem(30), + lineHeight: 1.375, + ...baseHeadingProperties, + }, + h4: { + fontSize: pxToRem(24), + lineHeight: 1.375, + ...baseHeadingProperties, + }, + h5: { + fontSize: pxToRem(20), + lineHeight: 1.375, + ...baseHeadingProperties, + }, + h6: { + fontSize: pxToRem(16), + lineHeight: 1.625, + ...baseHeadingProperties, + }, + subtitle1: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeXL, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.625, + }, + subtitle2: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeMD, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.6, + }, + body1: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeXL, + fontWeight: baseProperties.fontWeightRegular, + lineHeight: 1.625, + }, + body2: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeMD, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.6, + }, + button: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeSM, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.5, + textTransform: "uppercase", + }, + caption: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeXS, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.25, + }, + overline: { + fontFamily: baseProperties.fontFamily, + }, + d1: { + fontSize: pxToRem(80), + ...baseDisplayProperties, + }, + d2: { + fontSize: pxToRem(72), + ...baseDisplayProperties, + }, + d3: { + fontSize: pxToRem(64), + ...baseDisplayProperties, + }, + d4: { + fontSize: pxToRem(56), + ...baseDisplayProperties, + }, + d5: { + fontSize: pxToRem(48), + ...baseDisplayProperties, + }, + d6: { + fontSize: pxToRem(40), + ...baseDisplayProperties, + }, + size: { + xxs: baseProperties.fontSizeXXS, + xs: baseProperties.fontSizeXS, + sm: baseProperties.fontSizeSM, + md: baseProperties.fontSizeMD, + lg: baseProperties.fontSizeLG, + xl: baseProperties.fontSizeXL, + "2xl": baseProperties.fontSize2XL, + "3xl": baseProperties.fontSize3XL, + }, + lineHeight: { + sm: 1.25, + md: 1.5, + lg: 2, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function boxShadow(offset, radius, color, opacity, inset = "") { + const [x, y] = offset; + const [blur, spread] = radius; + return `${inset} ${pxToRem$1(x)} ${pxToRem$1(y)} ${pxToRem$1(blur)} ${pxToRem$1(spread)} ${rgba$1(color, opacity)}`; +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { black: black$3, dark: dark$6, tabs: tabs$1, coloredShadows } = colors; +const boxShadows = { + xs: boxShadow([0, 2], [9, -5], black$3.main, 0.15), + sm: boxShadow([0, 5], [10, 0], black$3.main, 0.12), + md: `${boxShadow([0, 2], [2, 0], black$3.main, 0.14)}, ${boxShadow([0, 3], [1, -2], black$3.main, 0.2)}, ${boxShadow([0, 1], [5, 0], black$3.main, 0.12)}`, + lg: `${boxShadow([0, 10], [15, -3], black$3.main, 0.1)}, ${boxShadow([0, 4], [6, -2], black$3.main, 0.05)}`, + xl: `${boxShadow([0, 20], [25, -5], black$3.main, 0.1)}, ${boxShadow([0, 10], [10, -5], black$3.main, 0.04)}`, + xxl: boxShadow([0, 20], [27, 0], black$3.main, 0.05), + inset: boxShadow([0, 1], [2, 0], black$3.main, 0.075, "inset"), + colored: { + primary: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.primary, 0.4)}`, + secondary: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.secondary, 0.4)}`, + info: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.info, 0.4)}`, + success: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.success, 0.4)}`, + warning: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.warning, 0.4)}`, + error: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.error, 0.4)}`, + light: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.light, 0.4)}`, + dark: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.dark, 0.4)}`, + }, + navbarBoxShadow: `${boxShadow([0, 0], [1, 1], dark$6.main, 0.9, "inset")}, ${boxShadow([0, 20], [27, 0], black$3.main, 0.05)}`, + sliderBoxShadow: { + thumb: boxShadow([0, 1], [13, 0], black$3.main, 0.2), + }, + tabsBoxShadow: { + indicator: boxShadow([0, 1], [5, 1], tabs$1.indicator.boxShadow, 1), + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function rgba(color, opacity) { + return `rgba(${hexToRgb$1(color)}, ${opacity})`; +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$h } = colors; +const borders = { + borderColor: rgba(white$h.main, 0.4), + borderWidth: { + 0: 0, + 1: pxToRem(1), + 2: pxToRem(2), + 3: pxToRem(3), + 4: pxToRem(4), + 5: pxToRem(5), + }, + borderRadius: { + xs: pxToRem(1.6), + sm: pxToRem(2), + md: pxToRem(6), + lg: pxToRem(8), + xl: pxToRem(12), + xxl: pxToRem(16), + section: pxToRem(160), + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { info: info$a, dark: dark$5 } = colors; +const globals = { + html: { + scrollBehavior: "smooth", + }, + "*, *::before, *::after": { + margin: 0, + padding: 0, + }, + "a, a:link, a:visited": { + textDecoration: "none !important", + }, + "a.link, .link, a.link:link, .link:link, a.link:visited, .link:visited": { + color: `${dark$5.main} !important`, + transition: "color 150ms ease-in !important", + }, + "a.link:hover, .link:hover, a.link:focus, .link:focus": { + color: `${info$a.main} !important`, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function hexToRgb(color) { + return chroma__default["default"](color).rgb().join(", "); +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +/** + The linearGradient() function helps you to create a linear gradient color background + */ +function linearGradient(color, colorState, angle = 195) { + return `linear-gradient(${angle}deg, ${color}, ${colorState})`; +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { background: background$5 } = colors; +const { borderRadius: borderRadius$i } = borders; +const sidenav = { + styleOverrides: { + root: { + width: pxToRem(250), + whiteSpace: "nowrap", + border: "none", + }, + paper: { + width: pxToRem(250), + backgroundColor: background$5.sidenav, + height: `calc(100vh - ${pxToRem(32)})`, + margin: pxToRem(16), + borderRadius: borderRadius$i.xl, + border: "none", + }, + paperAnchorDockedLeft: { + borderRight: "none", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const list = { + styleOverrides: { + padding: { + paddingTop: 0, + paddingBottom: 0, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const listItem = { + defaultProps: { + disableGutters: true, + }, + styleOverrides: { + root: { + paddingTop: 0, + paddingBottom: 0, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const listItemText = { + styleOverrides: { + root: { + marginTop: 0, + marginBottom: 0, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { black: black$2, background: background$4 } = colors; +const { borderWidth: borderWidth$8, borderRadius: borderRadius$h } = borders; +const { md: md$6 } = boxShadows; +const card = { + styleOverrides: { + root: { + display: "flex", + flexDirection: "column", + position: "relative", + minWidth: 0, + wordWrap: "break-word", + backgroundImage: "none", + backgroundColor: background$4.card, + backgroundClip: "border-box", + border: `${borderWidth$8[0]} solid ${rgba(black$2.main, 0.125)}`, + borderRadius: borderRadius$h.xl, + boxShadow: md$6, + overflow: "visible", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderRadius: borderRadius$g } = borders; +const cardMedia = { + styleOverrides: { + root: { + borderRadius: borderRadius$g.xl, + margin: `${pxToRem(16)} ${pxToRem(16)} 0`, + }, + media: { + width: "auto", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const cardContent = { + styleOverrides: { + root: { + marginTop: 0, + marginBottom: 0, + padding: `${pxToRem(8)} ${pxToRem(24)} ${pxToRem(24)}`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { fontWeightBold: fontWeightBold$1, size: size$h } = typography; +const { borderRadius: borderRadius$f } = borders; +const root = { + display: "inline-flex", + justifyContent: "center", + alignItems: "center", + fontSize: size$h.xs, + fontWeight: fontWeightBold$1, + borderRadius: borderRadius$f.lg, + padding: `${pxToRem(6.302)} ${pxToRem(16.604)}`, + lineHeight: 1.4, + textAlign: "center", + textTransform: "uppercase", + userSelect: "none", + backgroundSize: "150% !important", + backgroundPositionX: "25% !important", + transition: "all 150ms ease-in", + "&:disabled": { + pointerEvent: "none", + opacity: 0.65, + }, + "& .material-icons": { + fontSize: pxToRem(15), + marginTop: pxToRem(-2), + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$g, text: text$5, info: info$9, secondary: secondary$2 } = colors; +const { size: size$g } = typography; +const contained = { + base: { + backgroundColor: white$g.main, + minHeight: pxToRem(37), + color: text$5.main, + padding: `${pxToRem(9)} ${pxToRem(24)}`, + "&:hover": { + backgroundColor: white$g.main, + }, + "&:active, &:active:focus, &:active:hover": { + opacity: 0.85, + }, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(16)} !important`, + }, + }, + small: { + minHeight: pxToRem(29), + padding: `${pxToRem(6)} ${pxToRem(18)}`, + fontSize: size$g.xs, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(12)} !important`, + }, + }, + large: { + minHeight: pxToRem(44), + padding: `${pxToRem(12)} ${pxToRem(64)}`, + fontSize: size$g.sm, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(22)} !important`, + }, + }, + primary: { + backgroundColor: info$9.main, + "&:hover": { + backgroundColor: info$9.main, + }, + "&:focus:not(:hover)": { + backgroundColor: info$9.focus, + }, + }, + secondary: { + backgroundColor: secondary$2.main, + "&:hover": { + backgroundColor: secondary$2.main, + }, + "&:focus:not(:hover)": { + backgroundColor: secondary$2.focus, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent: transparent$c, light: light$3, info: info$8, secondary: secondary$1 } = colors; +const { size: size$f } = typography; +const outlined = { + base: { + minHeight: pxToRem(39), + color: light$3.main, + borderColor: light$3.main, + padding: `${pxToRem(9)} ${pxToRem(24)}`, + "&:hover": { + opacity: 0.75, + backgroundColor: transparent$c.main, + }, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(16)} !important`, + }, + }, + small: { + minHeight: pxToRem(31), + padding: `${pxToRem(6)} ${pxToRem(18)}`, + fontSize: size$f.xs, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(12)} !important`, + }, + }, + large: { + minHeight: pxToRem(46), + padding: `${pxToRem(12)} ${pxToRem(64)}`, + fontSize: size$f.sm, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(22)} !important`, + }, + }, + primary: { + backgroundColor: transparent$c.main, + borderColor: info$8.main, + "&:hover": { + backgroundColor: transparent$c.main, + }, + }, + secondary: { + backgroundColor: transparent$c.main, + borderColor: secondary$1.main, + "&:hover": { + backgroundColor: transparent$c.main, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { text: text$4, info: info$7, secondary, transparent: transparent$b } = colors; +const { size: size$e } = typography; +const buttonText = { + base: { + backgroundColor: transparent$b.main, + minHeight: pxToRem(37), + color: text$4.main, + boxShadow: "none", + padding: `${pxToRem(9)} ${pxToRem(24)}`, + "&:hover": { + backgroundColor: transparent$b.main, + boxShadow: "none", + }, + "&:focus": { + boxShadow: "none", + }, + "&:active, &:active:focus, &:active:hover": { + opacity: 0.85, + boxShadow: "none", + }, + "&:disabled": { + boxShadow: "none", + }, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(16)} !important`, + }, + }, + small: { + minHeight: pxToRem(29), + padding: `${pxToRem(6)} ${pxToRem(18)}`, + fontSize: size$e.xs, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(12)} !important`, + }, + }, + large: { + minHeight: pxToRem(44), + padding: `${pxToRem(12)} ${pxToRem(64)}`, + fontSize: size$e.sm, + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(22)} !important`, + }, + }, + primary: { + color: info$7.main, + "&:hover": { + color: info$7.main, + }, + "&:focus:not(:hover)": { + color: info$7.focus, + boxShadow: "none", + }, + }, + secondary: { + color: secondary.main, + "&:hover": { + color: secondary.main, + }, + "&:focus:not(:hover)": { + color: secondary.focus, + boxShadow: "none", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const button = { + defaultProps: { + disableRipple: false, + }, + styleOverrides: { + root: { ...root }, + contained: { ...contained.base }, + containedSizeSmall: { ...contained.small }, + containedSizeLarge: { ...contained.large }, + containedPrimary: { ...contained.primary }, + containedSecondary: { ...contained.secondary }, + outlined: { ...outlined.base }, + outlinedSizeSmall: { ...outlined.small }, + outlinedSizeLarge: { ...outlined.large }, + outlinedPrimary: { ...outlined.primary }, + outlinedSecondary: { ...outlined.secondary }, + text: { ...buttonText.base }, + textSizeSmall: { ...buttonText.small }, + textSizeLarge: { ...buttonText.large }, + textPrimary: { ...buttonText.primary }, + textSecondary: { ...buttonText.secondary }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent: transparent$a } = colors; +const iconButton = { + styleOverrides: { + root: { + "&:hover": { + backgroundColor: transparent$a.main, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { info: info$6, inputBorderColor: inputBorderColor$1, dark: dark$4, grey: grey$4, white: white$f } = colors; +const { size: size$d } = typography; +const { borderWidth: borderWidth$7 } = borders; +const input = { + styleOverrides: { + root: { + fontSize: size$d.sm, + color: dark$4.main, + "&:hover:not(.Mui-disabled):before": { + borderBottom: `${borderWidth$7[1]} solid ${rgba(inputBorderColor$1, 0.6)}`, + }, + "&:before": { + borderColor: rgba(inputBorderColor$1, 0.6), + }, + "&:after": { + borderColor: info$6.main, + }, + input: { + color: white$f.main, + "&::-webkit-input-placeholder": { + color: grey$4[100], + }, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { text: text$3, info: info$5 } = colors; +const { size: size$c } = typography; +const inputLabel = { + styleOverrides: { + root: { + fontSize: size$c.sm, + color: text$3.main, + lineHeight: 0.9, + "&.Mui-focused": { + color: info$5.main, + }, + "&.MuiInputLabel-shrink": { + lineHeight: 1.5, + fontSize: size$c.md, + "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { + fontSize: "0.85em", + }, + }, + }, + sizeSmall: { + fontSize: size$c.xs, + lineHeight: 1.625, + "&.MuiInputLabel-shrink": { + lineHeight: 1.6, + fontSize: size$c.sm, + "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { + fontSize: "0.72em", + }, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { inputBorderColor, info: info$4, grey: grey$3, transparent: transparent$9, white: white$e } = colors; +const { borderRadius: borderRadius$e } = borders; +const { size: size$b } = typography; +const inputOutlined = { + styleOverrides: { + root: { + backgroundColor: transparent$9.main, + fontSize: size$b.sm, + borderRadius: borderRadius$e.md, + "&:hover .MuiOutlinedInput-notchedOutline": { + borderColor: rgba(inputBorderColor, 0.6), + }, + "&.Mui-focused": { + "& .MuiOutlinedInput-notchedOutline": { + borderColor: info$4.main, + }, + }, + }, + notchedOutline: { + borderColor: rgba(inputBorderColor, 0.6), + }, + input: { + color: white$e.main, + padding: pxToRem(12), + backgroundColor: transparent$9.main, + "&::-webkit-input-placeholder": { + color: grey$3[100], + }, + }, + inputSizeSmall: { + fontSize: size$b.xs, + padding: pxToRem(10), + }, + multiline: { + color: grey$3[700], + padding: 0, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent: transparent$8 } = colors; +const textField = { + styleOverrides: { + root: { + backgroundColor: transparent$8.main, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { md: md$5 } = boxShadows; +const { size: size$a } = typography; +const { text: text$2, background: background$3 } = colors; +const { borderRadius: borderRadius$d } = borders; +const menu = { + defaultProps: { + disableAutoFocusItem: true, + }, + styleOverrides: { + paper: { + minWidth: pxToRem(160), + boxShadow: md$5, + padding: `${pxToRem(16)} ${pxToRem(8)}`, + fontSize: size$a.sm, + color: text$2.main, + textAlign: "left", + backgroundColor: `${background$3.card} !important`, + borderRadius: borderRadius$d.md, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { dark: dark$3, white: white$d } = colors; +const { borderRadius: borderRadius$c } = borders; +const { size: size$9 } = typography; +const menuItem$1 = { + styleOverrides: { + root: { + minWidth: pxToRem(160), + minHeight: "unset", + padding: `${pxToRem(4.8)} ${pxToRem(16)}`, + borderRadius: borderRadius$c.md, + fontSize: size$9.sm, + color: rgba(white$d.main, 0.8), + transition: "background-color 300ms ease, color 300ms ease", + "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { + backgroundColor: dark$3.main, + color: white$d.main, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$c, gradients: gradients$4, grey: grey$2, transparent: transparent$7 } = colors; +const { borderWidth: borderWidth$6 } = borders; +const { md: md$4 } = boxShadows; +const switchButton = { + defaultProps: { + disableRipple: false, + }, + styleOverrides: { + switchBase: { + color: gradients$4.dark.main, + "&:hover": { + backgroundColor: transparent$7.main, + }, + "&.Mui-checked": { + color: gradients$4.dark.main, + "&:hover": { + backgroundColor: transparent$7.main, + }, + "& .MuiSwitch-thumb": { + borderColor: `${gradients$4.dark.main} !important`, + }, + "& + .MuiSwitch-track": { + backgroundColor: `${gradients$4.dark.main} !important`, + borderColor: `${gradients$4.dark.main} !important`, + opacity: 1, + }, + }, + "&.Mui-disabled + .MuiSwitch-track": { + opacity: "0.3 !important", + }, + "&.Mui-focusVisible .MuiSwitch-thumb": { + backgroundImage: linearGradient(gradients$4.info.main, gradients$4.info.state), + }, + }, + thumb: { + backgroundColor: white$c.main, + boxShadow: md$4, + border: `${borderWidth$6[1]} solid ${grey$2[400]}`, + }, + track: { + width: pxToRem(32), + height: pxToRem(15), + backgroundColor: grey$2[400], + border: `${borderWidth$6[1]} solid ${grey$2[400]}`, + opacity: 1, + }, + checked: {}, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { dark: dark$2, transparent: transparent$6, white: white$b } = colors; +const divider = { + styleOverrides: { + root: { + backgroundColor: transparent$6.main, + backgroundImage: `linear-gradient(to right, ${rgba(dark$2.main, 0)}, ${white$b.main}, ${rgba(dark$2.main, 0)}) !important`, + height: pxToRem(1), + margin: `${pxToRem(16)} 0`, + borderBottom: "none", + opacity: 0.25, + }, + vertical: { + backgroundColor: transparent$6.main, + backgroundImage: `linear-gradient(to bottom, ${rgba(dark$2.main, 0)}, ${white$b.main}, ${rgba(dark$2.main, 0)}) !important`, + width: pxToRem(1), + height: "100%", + margin: `0 ${pxToRem(16)}`, + borderRight: "none", + }, + light: { + backgroundColor: transparent$6.main, + backgroundImage: `linear-gradient(to right, ${rgba(white$b.main, 0)}, ${rgba(dark$2.main, 0.4)}, ${rgba(white$b.main, 0)}) !important`, + "&.MuiDivider-vertical": { + backgroundImage: `linear-gradient(to bottom, ${rgba(white$b.main, 0)}, ${rgba(dark$2.main, 0.4)}, ${rgba(white$b.main, 0)}) !important`, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { background: background$2 } = colors; +const { md: md$3 } = boxShadows; +const { borderRadius: borderRadius$b } = borders; +const tableContainer = { + styleOverrides: { + root: { + backgroundColor: background$2.card, + boxShadow: md$3, + borderRadius: borderRadius$b.xl, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderRadius: borderRadius$a } = borders; +const tableHead = { + styleOverrides: { + root: { + display: "block", + padding: `${pxToRem(16)} ${pxToRem(16)} 0 ${pxToRem(16)}`, + borderRadius: `${borderRadius$a.xl} ${borderRadius$a.xl} 0 0`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderWidth: borderWidth$5 } = borders; +const { light: light$2 } = colors; +const tableCell = { + styleOverrides: { + root: { + padding: `${pxToRem(12)} ${pxToRem(16)}`, + borderBottom: `${borderWidth$5[1]} solid ${light$2.main}`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderRadius: borderRadius$9 } = borders; +const { light: light$1 } = colors; +const linearProgress = { + styleOverrides: { + root: { + height: pxToRem(6), + borderRadius: borderRadius$9.md, + overflow: "visible", + position: "relative", + }, + colorPrimary: { + backgroundColor: light$1.main, + }, + colorSecondary: { + backgroundColor: light$1.main, + }, + bar: { + height: pxToRem(6), + borderRadius: borderRadius$9.sm, + position: "absolute", + transform: `translate(0, 0) !important`, + transition: "width 0.6s ease !important", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { grey: grey$1 } = colors; +const { size: size$8 } = typography; +const breadcrumbs = { + styleOverrides: { + li: { + lineHeight: 0, + }, + separator: { + fontSize: size$8.sm, + color: grey$1[600], + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { grey, white: white$a, black: black$1, info: info$3 } = colors$1; +const { borderRadius: borderRadius$8, borderWidth: borderWidth$4 } = borders$1; +const { sliderBoxShadow } = boxShadows$1; +const slider = { + styleOverrides: { + root: { + width: "100%", + "& .MuiSlider-active, & .Mui-focusVisible": { + boxShadow: "none !important", + }, + "& .MuiSlider-valueLabel": { + color: black$1.main, + }, + }, + rail: { + height: pxToRem$1(2), + background: grey[200], + borderRadius: borderRadius$8.sm, + opacity: 1, + }, + track: { + background: info$3.main, + height: pxToRem$1(2), + position: "relative", + border: "none", + borderRadius: borderRadius$8.lg, + zIndex: 1, + }, + thumb: { + width: pxToRem$1(14), + height: pxToRem$1(14), + backgroundColor: white$a.main, + zIndex: 10, + boxShadow: sliderBoxShadow.thumb, + border: `${borderWidth$4[1]} solid ${info$3.main}`, + transition: "all 200ms linear", + "&:hover": { + boxShadow: "none", + }, + "&:active": { + transform: "translate(-50%, -50%) scale(1.4)", + }, + "&.Mui-active": { boxShadow: boxShadow$1([0, 0], [0, 14], info$3.main, 0.16) }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderRadius: borderRadius$7 } = borders; +const avatar = { + styleOverrides: { + root: { + transition: "all 200ms ease-in-out", + }, + rounded: { + borderRadius: borderRadius$7.lg, + }, + img: { + height: "auto", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { black, white: white$9 } = colors; +const { size: size$7, fontWeightRegular: fontWeightRegular$2 } = typography; +const { borderRadius: borderRadius$6 } = borders; +const tooltip = { + defaultProps: { + arrow: true, + TransitionComponent: Fade__default["default"], + }, + styleOverrides: { + tooltip: { + maxWidth: pxToRem(200), + backgroundColor: black.main, + color: white$9.main, + fontSize: size$7.sm, + fontWeight: fontWeightRegular$2, + textAlign: "center", + borderRadius: borderRadius$6.md, + opacity: 0.7, + padding: `${pxToRem(5)} ${pxToRem(8)} ${pxToRem(4)}`, + }, + arrow: { + color: black.main, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const appBar = { + defaultProps: { + color: "transparent", + }, + styleOverrides: { + root: { + boxShadow: "none", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { background: background$1 } = colors; +const { borderRadius: borderRadius$5 } = borders; +const { md: md$2 } = boxShadows; +const tabs = { + styleOverrides: { + root: { + position: "relative", + backgroundColor: background$1.card, + borderRadius: borderRadius$5.xl, + minHeight: "unset", + padding: pxToRem(4), + }, + flexContainer: { + height: "100%", + position: "relative", + zIndex: 10, + }, + fixed: { + overflow: "unset !important", + overflowX: "unset !important", + }, + vertical: { + "& .MuiTabs-indicator": { + width: "100%", + }, + }, + indicator: { + height: "100%", + borderRadius: borderRadius$5.lg, + backgroundColor: background$1.default, + boxShadow: md$2, + transition: "all 500ms ease", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { size: size$6, fontWeightRegular: fontWeightRegular$1 } = typography; +const { borderRadius: borderRadius$4 } = borders; +const { white: white$8 } = colors; +const tab = { + styleOverrides: { + root: { + display: "flex", + alignItems: "center", + flexDirection: "row", + flex: "1 1 auto", + textAlign: "center", + maxWidth: "unset !important", + minWidth: "unset !important", + minHeight: "unset !important", + fontSize: size$6.md, + fontWeight: fontWeightRegular$1, + textTransform: "none", + lineHeight: "inherit", + padding: pxToRem(4), + borderRadius: borderRadius$4.lg, + color: `${white$8.main} !important`, + opacity: "1 !important", + "& .material-icons, .material-icons-round": { + marginBottom: "0 !important", + marginRight: pxToRem(6), + }, + "& svg": { + marginBottom: "0 !important", + marginRight: pxToRem(6), + }, + }, + labelIcon: { + paddingTop: pxToRem(4), + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent: transparent$5, gradients: gradients$3 } = colors; +const { borderRadius: borderRadius$3 } = borders; +const { colored } = boxShadows; +const stepper = { + styleOverrides: { + root: { + background: linearGradient(gradients$3.info.main, gradients$3.info.state), + padding: `${pxToRem(24)} 0 ${pxToRem(16)}`, + borderRadius: borderRadius$3.lg, + boxShadow: colored.info, + "&.MuiPaper-root": { + backgroundColor: transparent$5.main, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const step = { + styleOverrides: { + root: { + padding: `0 ${pxToRem(6)}`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$7 } = colors; +const { borderWidth: borderWidth$3 } = borders; +const stepConnector = { + styleOverrides: { + root: { + color: "#9fc9ff", + transition: "all 200ms linear", + "&.Mui-active": { + color: white$7.main, + }, + "&.Mui-completed": { + color: white$7.main, + }, + }, + alternativeLabel: { + top: "14%", + left: "-50%", + right: "50%", + }, + line: { + borderWidth: `${borderWidth$3[2]} !important`, + borderColor: "currentColor", + opacity: 0.5, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { size: size$5, fontWeightRegular } = typography; +const { white: white$6 } = colors; +const stepLabel = { + styleOverrides: { + label: { + marginTop: `${pxToRem(8)} !important`, + fontWeight: fontWeightRegular, + fontSize: size$5.xs, + color: "#9fc9ff", + textTransform: "uppercase", + "&.Mui-active": { + fontWeight: `${fontWeightRegular} !important`, + color: `${rgba(white$6.main, 0.8)} !important`, + }, + "&.Mui-completed": { + fontWeight: `${fontWeightRegular} !important`, + color: `${rgba(white$6.main, 0.8)} !important`, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$5 } = colors; +const stepIcon = { + styleOverrides: { + root: { + background: "#9fc9ff", + fill: "#9fc9ff", + stroke: "#9fc9ff", + strokeWidth: pxToRem(10), + width: pxToRem(13), + height: pxToRem(13), + borderRadius: "50%", + zIndex: 99, + transition: "all 200ms linear", + "&.Mui-active": { + background: white$5.main, + fill: white$5.main, + stroke: white$5.main, + borderColor: white$5.main, + boxShadow: boxShadow([0, 0], [0, 2], white$5.main, 1), + }, + "&.Mui-completed": { + background: white$5.main, + fill: white$5.main, + stroke: white$5.main, + borderColor: white$5.main, + boxShadow: boxShadow([0, 0], [0, 2], white$5.main, 1), + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent: transparent$4 } = colors; +const select = { + styleOverrides: { + select: { + display: "grid", + alignItems: "center", + padding: `0 ${pxToRem(12)} !important`, + "& .Mui-selected": { + backgroundColor: transparent$4.main, + }, + }, + selectMenu: { + background: "none", + height: "none", + minHeight: "none", + overflow: "unset", + }, + icon: { + display: "none", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { white: white$4 } = colors; +const { size: size$4, fontWeightBold } = typography; +const formControlLabel = { + styleOverrides: { + root: { + display: "block", + minHeight: pxToRem(24), + marginBottom: pxToRem(2), + }, + label: { + display: "inline-block", + fontSize: size$4.sm, + fontWeight: fontWeightBold, + color: white$4.main, + lineHeight: 1, + transform: `translateY(${pxToRem(1)})`, + marginLeft: pxToRem(4), + "&.Mui-disabled": { + color: white$4.main, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { text: text$1 } = colors; +const formLabel = { + styleOverrides: { + root: { + color: text$1.main, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderWidth: borderWidth$2, borderColor: borderColor$2 } = borders; +const { transparent: transparent$3, info: info$2 } = colors; +const checkbox = { + styleOverrides: { + root: { + "& .MuiSvgIcon-root": { + backgroundPosition: "center", + backgroundSize: "contain", + backgroundRepeat: "no-repeat", + width: pxToRem(20), + height: pxToRem(20), + color: transparent$3.main, + border: `${borderWidth$2[1]} solid ${borderColor$2}`, + borderRadius: pxToRem(5.6), + }, + "&:hover": { + backgroundColor: transparent$3.main, + }, + "&.Mui-focusVisible": { + border: `${borderWidth$2[2]} solid ${info$2.main} !important`, + }, + }, + colorPrimary: { + color: borderColor$2, + "&.Mui-checked": { + color: info$2.main, + "& .MuiSvgIcon-root": { + backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient(info$2.main, info$2.main)}`, + borderColor: info$2.main, + }, + }, + }, + colorSecondary: { + color: borderColor$2, + "& .MuiSvgIcon-root": { + color: info$2.main, + "&.Mui-checked": { + backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient(info$2.main, info$2.main)}`, + borderColor: info$2.main, + }, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderWidth: borderWidth$1, borderColor: borderColor$1 } = borders; +const { transparent: transparent$2, info: info$1 } = colors; +const radio = { + styleOverrides: { + root: { + "& .MuiSvgIcon-root": { + width: pxToRem(20), + height: pxToRem(20), + color: transparent$2.main, + border: `${borderWidth$1[1]} solid ${borderColor$1}`, + borderRadius: "50%", + }, + "&:after": { + transition: "opacity 250ms ease-in-out", + content: `""`, + position: "absolute", + width: pxToRem(14), + height: pxToRem(14), + borderRadius: "50%", + backgroundImage: linearGradient(info$1.main, info$1.main), + opacity: 0, + left: 0, + right: 0, + top: 0, + bottom: 0, + margin: "auto", + }, + "&:hover": { + backgroundColor: transparent$2.main, + }, + "&.Mui-focusVisible": { + border: `${borderWidth$1[2]} solid ${info$1.main} !important`, + }, + }, + colorPrimary: { + color: borderColor$1, + "&.Mui-checked": { + color: info$1.main, + "& .MuiSvgIcon-root": { + borderColor: info$1.main, + }, + "&:after": { + opacity: 1, + }, + }, + }, + colorSecondary: { + color: borderColor$1, + "&.Mui-checked": { + color: info$1.main, + "& .MuiSvgIcon-root": { + borderColor: info$1.main, + }, + "&:after": { + opacity: 1, + }, + }, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { md: md$1 } = boxShadows; +const { size: size$3 } = typography; +const { text, transparent: transparent$1, light, dark: dark$1, gradients: gradients$2, background, white: white$3 } = colors; +const { borderRadius: borderRadius$2 } = borders; +const autocompletle = { + styleOverrides: { + popper: { + boxShadow: md$1, + padding: pxToRem(8), + fontSize: size$3.sm, + color: text.main, + textAlign: "left", + backgroundColor: `${background.card} !important`, + borderRadius: borderRadius$2.md, + }, + paper: { + boxShadow: "none", + backgroundColor: transparent$1.main, + }, + option: { + padding: `${pxToRem(4.8)} ${pxToRem(16)}`, + borderRadius: borderRadius$2.md, + fontSize: size$3.sm, + color: text.main, + transition: "background-color 300ms ease, color 300ms ease", + "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { + backgroundColor: rgba(light.main, 0.2), + color: white$3.main, + }, + '&[aria-selected="true"]': { + backgroundColor: `${rgba(light.main, 0.2)} !important`, + color: `${white$3.main} !important`, + }, + }, + noOptions: { + fontSize: size$3.sm, + color: text.main, + }, + groupLabel: { + color: dark$1.main, + }, + loading: { + fontSize: size$3.sm, + color: text.main, + }, + tag: { + display: "flex", + alignItems: "center", + height: "auto", + padding: pxToRem(4), + backgroundColor: gradients$2.dark.state, + color: white$3.main, + "& .MuiChip-label": { + lineHeight: 1.2, + padding: `0 ${pxToRem(10)} 0 ${pxToRem(4)}`, + }, + "& .MuiSvgIcon-root, & .MuiSvgIcon-root:hover, & .MuiSvgIcon-root:focus": { + color: white$3.main, + marginRight: 0, + }, + }, + popupIndicator: { + color: text.main, + }, + clearIndicator: { + color: text.main, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { info, white: white$2, gradients: gradients$1 } = colors; +const flatpickr = { + ".flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.nextMonthDay:hover, .flatpickr-day.nextMonthDay:focus": { + background: rgba(info.main, 0.28), + border: "none", + }, + ".flatpickr-day.today": { + background: info.main, + color: white$2.main, + border: "none", + "&:hover, &:focus": { + background: `${info.focus} !important`, + }, + }, + ".flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.nextMonthDay.selected, .flatpickr-day.nextMonthDay.selected:hover, .flatpickr-day.nextMonthDay.selected:focus": { + background: `${gradients$1.info.state} !important`, + color: white$2.main, + border: "none", + }, + ".flatpickr-months .flatpickr-next-month:hover svg, .flatpickr-months .flatpickr-prev-month:hover svg": { + color: `${info.main} !important`, + fill: `${info.main} !important`, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { values: { sm, md, lg: lg$1, xl, xxl: xxl$1 }, } = breakpoints; +const SM = `@media (min-width: ${sm}px)`; +const MD = `@media (min-width: ${md}px)`; +const LG = `@media (min-width: ${lg$1}px)`; +const XL = `@media (min-width: ${xl}px)`; +const XXL = `@media (min-width: ${xxl$1}px)`; +const sharedClasses = { + paddingRight: `${pxToRem(24)} !important`, + paddingLeft: `${pxToRem(24)} !important`, + marginRight: "auto !important", + marginLeft: "auto !important", + width: "100% !important", + position: "relative", +}; +const container = { + [SM]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "540px !important", + }, + }, + [MD]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "720px !important", + }, + }, + [LG]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "960px !important", + }, + }, + [XL]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "1140px !important", + }, + }, + [XXL]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "1320px !important", + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { transparent } = colors; +const { lg } = boxShadows; +const { borderRadius: borderRadius$1 } = borders; +const popover = { + styleOverrides: { + paper: { + backgroundColor: transparent.main, + boxShadow: lg, + borderRadius: borderRadius$1.md, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const buttonBase = { + defaultProps: { + disableRipple: false, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const icon = { + defaultProps: { + baseClassName: "material-icons-round", + fontSize: "inherit", + }, + styleOverrides: { + fontSizeInherit: { + fontSize: "inherit !important", + }, + fontSizeSmall: { + fontSize: `${pxToRem(20)} !important`, + }, + fontSizeLarge: { + fontSize: `${pxToRem(36)} !important`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const svgIcon = { + defaultProps: { + fontSize: "inherit", + }, + styleOverrides: { + fontSizeInherit: { + fontSize: "inherit !important", + }, + fontSizeSmall: { + fontSize: `${pxToRem(20)} !important`, + }, + fontSizeLarge: { + fontSize: `${pxToRem(36)} !important`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const link = { + defaultProps: { + underline: "none", + color: "inherit", + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { borderRadius } = borders; +const { xxl } = boxShadows; +const dialog = { + styleOverrides: { + paper: { + borderRadius: borderRadius.lg, + boxShadow: xxl, + }, + paperFullScreen: { + borderRadius: 0, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { size: size$2 } = typography; +const dialogTitle = { + styleOverrides: { + root: { + padding: pxToRem(16), + fontSize: size$2.xl, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { size: size$1 } = typography; +const { white: white$1 } = colors; +const { borderWidth, borderColor } = borders; +const dialogContent = { + styleOverrides: { + root: { + padding: pxToRem(16), + fontSize: size$1.md, + color: rgba(white$1.main, 0.8), + }, + dividers: { + borderTop: `${borderWidth[1]} solid ${rgba(borderColor, 0.6)}`, + borderBottom: `${borderWidth[1]} solid ${rgba(borderColor, 0.6)}`, + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { size } = typography; +const { white } = colors; +const dialogContentText = { + styleOverrides: { + root: { + fontSize: size.md, + color: rgba(white.main, 0.8), + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const dialogActions = { + styleOverrides: { + root: { + padding: pxToRem(16), + }, + }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React - v2.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-material-ui +* Copyright 2021 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +var themeDark = styles.createTheme({ + breakpoints: { ...breakpoints }, + palette: { ...colors }, + typography: { ...typography }, + boxShadows: { ...boxShadows }, + borders: { ...borders }, + functions: { + boxShadow, + hexToRgb, + linearGradient, + pxToRem, + rgba, + }, + components: { + MuiCssBaseline: { + styleOverrides: { + ...globals, + ...flatpickr, + ...container, + }, + }, + MuiDrawer: { ...sidenav }, + MuiList: { ...list }, + MuiListItem: { ...listItem }, + MuiListItemText: { ...listItemText }, + MuiCard: { ...card }, + MuiCardMedia: { ...cardMedia }, + MuiCardContent: { ...cardContent }, + MuiButton: { ...button }, + MuiIconButton: { ...iconButton }, + MuiInput: { ...input }, + MuiInputLabel: { ...inputLabel }, + MuiOutlinedInput: { ...inputOutlined }, + MuiTextField: { ...textField }, + MuiMenu: { ...menu }, + MuiMenuItem: { ...menuItem$1 }, + MuiSwitch: { ...switchButton }, + MuiDivider: { ...divider }, + MuiTableContainer: { ...tableContainer }, + MuiTableHead: { ...tableHead }, + MuiTableCell: { ...tableCell }, + MuiLinearProgress: { ...linearProgress }, + MuiBreadcrumbs: { ...breadcrumbs }, + MuiSlider: { ...slider }, + MuiAvatar: { ...avatar }, + MuiTooltip: { ...tooltip }, + MuiAppBar: { ...appBar }, + MuiTabs: { ...tabs }, + MuiTab: { ...tab }, + MuiStepper: { ...stepper }, + MuiStep: { ...step }, + MuiStepConnector: { ...stepConnector }, + MuiStepLabel: { ...stepLabel }, + MuiStepIcon: { ...stepIcon }, + MuiSelect: { ...select }, + MuiFormControlLabel: { ...formControlLabel }, + MuiFormLabel: { ...formLabel }, + MuiCheckbox: { ...checkbox }, + MuiRadio: { ...radio }, + MuiAutocomplete: { ...autocompletle }, + MuiPopover: { ...popover }, + MuiButtonBase: { ...buttonBase }, + MuiIcon: { ...icon }, + MuiSvgIcon: { ...svgIcon }, + MuiLink: { ...link }, + MuiDialog: { ...dialog }, + MuiDialogTitle: { ...dialogTitle }, + MuiDialogContent: { ...dialogContent }, + MuiDialogContentText: { ...dialogContentText }, + MuiDialogActions: { ...dialogActions }, + }, +}); + +/** +========================================================= +* Material Dashboard 2 PRO React - v2.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-material-ui +* Copyright 2021 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +var themeDarkRTL = styles.createTheme({ + direction: "rtl", + breakpoints: { ...breakpoints }, + palette: { ...colors }, + typography: { ...typography }, + boxShadows: { ...boxShadows }, + borders: { ...borders }, + functions: { + boxShadow, + hexToRgb, + linearGradient, + pxToRem, + rgba, + }, + components: { + MuiCssBaseline: { + styleOverrides: { + ...globals, + ...flatpickr, + ...container, + }, + }, + MuiDrawer: { ...sidenav }, + MuiList: { ...list }, + MuiListItem: { ...listItem }, + MuiListItemText: { ...listItemText }, + MuiCard: { ...card }, + MuiCardMedia: { ...cardMedia }, + MuiCardContent: { ...cardContent }, + MuiButton: { ...button }, + MuiIconButton: { ...iconButton }, + MuiInput: { ...input }, + MuiInputLabel: { ...inputLabel }, + MuiOutlinedInput: { ...inputOutlined }, + MuiTextField: { ...textField }, + MuiMenu: { ...menu }, + MuiMenuItem: { ...menuItem$1 }, + MuiSwitch: { ...switchButton }, + MuiDivider: { ...divider }, + MuiTableContainer: { ...tableContainer }, + MuiTableHead: { ...tableHead }, + MuiTableCell: { ...tableCell }, + MuiLinearProgress: { ...linearProgress }, + MuiBreadcrumbs: { ...breadcrumbs }, + MuiSlider: { ...slider }, + MuiAvatar: { ...avatar }, + MuiTooltip: { ...tooltip }, + MuiAppBar: { ...appBar }, + MuiTabs: { ...tabs }, + MuiTab: { ...tab }, + MuiStepper: { ...stepper }, + MuiStep: { ...step }, + MuiStepConnector: { ...stepConnector }, + MuiStepLabel: { ...stepLabel }, + MuiStepIcon: { ...stepIcon }, + MuiSelect: { ...select }, + MuiFormControlLabel: { ...formControlLabel }, + MuiFormLabel: { ...formLabel }, + MuiCheckbox: { ...checkbox }, + MuiRadio: { ...radio }, + MuiAutocomplete: { ...autocompletle }, + MuiPopover: { ...popover }, + MuiButtonBase: { ...buttonBase }, + MuiIcon: { ...icon }, + MuiSvgIcon: { ...svgIcon }, + MuiLink: { ...link }, + MuiDialog: { ...dialog }, + MuiDialogTitle: { ...dialogTitle }, + MuiDialogContent: { ...dialogContent }, + MuiDialogContentText: { ...dialogContentText }, + MuiDialogActions: { ...dialogActions }, + }, +}); + +function DashboardLayout({ children }) { + const [controller, dispatch] = useMaterialUIController(); + const { miniSidenav } = controller; + const { pathname } = reactRouterDom.useLocation(); + react.useEffect(() => { + setLayout(dispatch, "dashboard"); + }, [pathname]); + return (jsxRuntime.jsx(MDBox, { sx: ({ breakpoints, transitions, functions: { pxToRem } }) => ({ + p: 3, + position: "relative", + [breakpoints.up("xl")]: { + marginLeft: miniSidenav ? pxToRem(120) : pxToRem(274), + transition: transitions.create(["margin-left", "margin-right"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + }, + }), children: children })); +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +var MDInputRoot = styles.styled(TextField__default["default"])(({ theme, ownerState }) => { + const { palette, functions } = theme; + const { error, success, disabled } = ownerState; + const { grey, transparent, error: colorError, success: colorSuccess } = palette; + const { pxToRem } = functions; + // styles for the input with error={true} + const errorStyles = () => ({ + backgroundImage: "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23F44335' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23F44335' stroke='none'/%3E%3C/svg%3E\")", + backgroundRepeat: "no-repeat", + backgroundPosition: `right ${pxToRem(12)} center`, + backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`, + "& .Mui-focused": { + "& .MuiOutlinedInput-notchedOutline, &:after": { + borderColor: colorError.main, + }, + }, + "& .MuiInputLabel-root.Mui-focused": { + color: colorError.main, + }, + }); + // styles for the input with success={true} + const successStyles = () => ({ + backgroundImage: "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath fill='%234CAF50' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E\")", + backgroundRepeat: "no-repeat", + backgroundPosition: `right ${pxToRem(12)} center`, + backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`, + "& .Mui-focused": { + "& .MuiOutlinedInput-notchedOutline, &:after": { + borderColor: colorSuccess.main, + }, + }, + "& .MuiInputLabel-root.Mui-focused": { + color: colorSuccess.main, + }, + }); + return { + backgroundColor: disabled ? `${grey[200]} !important` : transparent.main, + pointerEvents: disabled ? "none" : "auto", + ...(error && errorStyles()), + ...(success && successStyles()), + }; +}); + +const MDInput = react.forwardRef(({ error, success, disabled, ...rest }, ref) => (jsxRuntime.jsx(MDInputRoot, { ...rest, ref: ref, ownerState: { error, success, disabled } }))); +// Declaring default props for MDInput +MDInput.defaultProps = { + error: false, + success: false, + disabled: false, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +var MDBadgeRoot = styles.styled(Badge__default["default"])(({ theme, ownerState }) => { + const { palette, typography, borders, functions } = theme; + const { color, circular, border, size, indicator, variant, container, children } = ownerState; + const { white, dark, gradients, badgeColors } = palette; + const { size: fontSize, fontWeightBold } = typography; + const { borderRadius, borderWidth } = borders; + const { pxToRem, linearGradient } = functions; + // padding values + const paddings = { + xs: "0.45em 0.775em", + sm: "0.55em 0.9em", + md: "0.65em 1em", + lg: "0.85em 1.375em", + }; + // fontSize value + const fontSizeValue = size === "xs" ? fontSize.xxs : fontSize.xs; + // border value + const borderValue = border ? `${borderWidth[3]} solid ${white.main}` : "none"; + // borderRadius value + const borderRadiusValue = circular ? borderRadius.section : borderRadius.md; + // styles for the badge with indicator={true} + const indicatorStyles = (sizeProp) => { + let widthValue = pxToRem(20); + let heightValue = pxToRem(20); + if (sizeProp === "medium") { + widthValue = pxToRem(24); + heightValue = pxToRem(24); + } + else if (sizeProp === "large") { + widthValue = pxToRem(32); + heightValue = pxToRem(32); + } + return { + width: widthValue, + height: heightValue, + display: "grid", + placeItems: "center", + textAlign: "center", + borderRadius: "50%", + padding: 0, + border: borderValue, + }; + }; + // styles for the badge with variant="gradient" + const gradientStyles = (colorProp) => { + const backgroundValue = gradients[colorProp] + ? linearGradient(gradients[colorProp].main, gradients[colorProp].state) + : linearGradient(gradients.info.main, gradients.info.state); + const colorValue = colorProp === "light" ? dark.main : white.main; + return { + background: backgroundValue, + color: colorValue, + }; + }; + // styles for the badge with variant="contained" + const containedStyles = (colorProp) => { + const backgroundValue = badgeColors[colorProp] + ? badgeColors[colorProp].background + : badgeColors.info.background; + let colorValue = badgeColors[colorProp] ? badgeColors[colorProp].text : badgeColors.info.text; + if (colorProp === "light") { + colorValue = dark.main; + } + return { + background: backgroundValue, + color: colorValue, + }; + }; + // styles for the badge with no children and container={false} + const standAloneStyles = () => ({ + position: "static", + marginLeft: pxToRem(8), + transform: "none", + fontSize: pxToRem(9), + }); + // styles for the badge with container={true} + const containerStyles = () => ({ + position: "relative", + transform: "none", + }); + return { + "& .MuiBadge-badge": { + height: "auto", + padding: paddings[size] || paddings.xs, + fontSize: fontSizeValue, + fontWeight: fontWeightBold, + textTransform: "uppercase", + lineHeight: 1, + textAlign: "center", + whiteSpace: "nowrap", + verticalAlign: "baseline", + border: borderValue, + borderRadius: borderRadiusValue, + ...(indicator && indicatorStyles(size)), + ...(variant === "gradient" && gradientStyles(color)), + ...(variant === "contained" && containedStyles(color)), + ...(!children && !container && standAloneStyles()), + ...(container && containerStyles()), + }, + }; +}); + +const MDBadge = react.forwardRef(({ color, variant, size, circular, indicator, border, container, children, ...rest }, ref) => (jsxRuntime.jsx(MDBadgeRoot, { ...rest, ownerState: { color, variant, size, circular, indicator, border, container, children }, ref: ref, color: "default", children: children }))); +// declaring default props for MDBadge +MDBadge.defaultProps = { + color: "info", + variant: "gradient", + size: "sm", + circular: false, + indicator: false, + border: false, + container: false, + children: false, +}; + +function Breadcrumbs({ icon, title, route, light }) { + const routes = route.slice(0, -1); + return (jsxRuntime.jsxs(MDBox, { mr: { xs: 0, xl: 8 }, children: [jsxRuntime.jsxs(material.Breadcrumbs, { sx: { + "& .MuiBreadcrumbs-separator": { + color: ({ palette: { white, grey } }) => (light ? white.main : grey[600]), + }, + }, children: [jsxRuntime.jsx(reactRouterDom.Link, { to: "/", children: jsxRuntime.jsx(MDTypography, { component: "span", variant: "body2", color: light ? "white" : "dark", opacity: light ? 0.8 : 0.5, sx: { lineHeight: 0 }, children: jsxRuntime.jsx(Icon__default["default"], { children: icon }) }) }), routes.map((el) => (jsxRuntime.jsx(reactRouterDom.Link, { to: `/${el}`, children: jsxRuntime.jsx(MDTypography, { component: "span", variant: "button", fontWeight: "regular", textTransform: "capitalize", color: light ? "white" : "dark", opacity: light ? 0.8 : 0.5, sx: { lineHeight: 0 }, children: el }) }, el))), jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "regular", textTransform: "capitalize", color: light ? "white" : "dark", sx: { lineHeight: 0 }, children: title.replace("-", " ") })] }), jsxRuntime.jsx(MDTypography, { fontWeight: "bold", textTransform: "capitalize", variant: "h6", color: light ? "white" : "dark", noWrap: true, children: title.replace("-", " ") })] })); +} +// Declaring default props for Breadcrumbs +Breadcrumbs.defaultProps = { + light: false, +}; + +function menuItem(theme) { + const { palette, borders, transitions } = theme; + const { secondary, light, dark } = palette; + const { borderRadius } = borders; + return { + display: "flex", + alignItems: "center", + width: "100%", + color: secondary.main, + borderRadius: borderRadius.md, + transition: transitions.create("background-color", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + "& *": { + transition: "color 100ms linear", + }, + "&:not(:last-child)": { + mb: 1, + }, + "&:hover": { + backgroundColor: light.main, + "& *": { + color: dark.main, + }, + }, + }; +} + +const NotificationItem = react.forwardRef(({ icon, title, ...rest }, ref) => (jsxRuntime.jsx(MenuItem__default["default"], { ...rest, ref: ref, sx: (theme) => menuItem(theme), children: jsxRuntime.jsxs(MDBox, { component: Link__default["default"], py: 0.5, display: "flex", alignItems: "center", lineHeight: 1, children: [jsxRuntime.jsx(MDTypography, { variant: "body1", color: "secondary", lineHeight: 0.75, children: icon }), jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "regular", sx: { ml: 1 }, children: title })] }) }))); + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function navbar(theme, ownerState) { + const { palette, boxShadows, functions, transitions, breakpoints, borders } = theme; + const { transparentNavbar, absolute, light, darkMode } = ownerState; + const { dark, white, text, transparent, background } = palette; + const { navbarBoxShadow } = boxShadows; + const { rgba, pxToRem } = functions; + const { borderRadius } = borders; + return { + boxShadow: transparentNavbar || absolute ? "none" : navbarBoxShadow, + backdropFilter: transparentNavbar || absolute ? "none" : `saturate(200%) blur(${pxToRem(30)})`, + backgroundColor: transparentNavbar || absolute + ? `${transparent.main} !important` + : rgba(darkMode ? background.default : white.main, 0.8), + color: () => { + let color; + if (light) { + color = white.main; + } + else if (transparentNavbar) { + color = text.main; + } + else { + color = dark.main; + } + return color; + }, + top: absolute ? 0 : pxToRem(12), + minHeight: pxToRem(75), + display: "grid", + alignItems: "center", + borderRadius: borderRadius.xl, + paddingTop: pxToRem(8), + paddingBottom: pxToRem(8), + paddingRight: absolute ? pxToRem(8) : 0, + paddingLeft: absolute ? pxToRem(16) : 0, + "& > *": { + transition: transitions.create("all", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + }, + "& .MuiToolbar-root": { + display: "flex", + justifyContent: "space-between", + alignItems: "center", + [breakpoints.up("sm")]: { + minHeight: "auto", + padding: `${pxToRem(4)} ${pxToRem(16)}`, + }, + }, + }; +} +const navbarContainer = ({ breakpoints }) => ({ + flexDirection: "column", + alignItems: "flex-start", + justifyContent: "space-between", + pt: 0.5, + pb: 0.5, + [breakpoints.up("md")]: { + flexDirection: "row", + alignItems: "center", + paddingTop: "0", + paddingBottom: "0", + }, +}); +const navbarRow = ({ breakpoints }, { isMini }) => ({ + display: "flex", + alignItems: "center", + justifyContent: "space-between", + width: "100%", + [breakpoints.up("md")]: { + justifyContent: isMini ? "space-between" : "stretch", + width: isMini ? "100%" : "max-content", + }, + [breakpoints.up("xl")]: { + justifyContent: "stretch !important", + width: "max-content !important", + }, +}); +const navbarIconButton = ({ typography: { size }, breakpoints }) => ({ + px: 1, + "& .material-icons, .material-icons-round": { + fontSize: `${size.xl} !important`, + }, + "& .MuiTypography-root": { + display: "none", + [breakpoints.up("sm")]: { + display: "inline-block", + lineHeight: 1.2, + ml: 0.5, + }, + }, +}); +const navbarDesktopMenu = ({ breakpoints }) => ({ + display: "none !important", + cursor: "pointer", + [breakpoints.up("xl")]: { + display: "inline-block !important", + }, +}); +const navbarMobileMenu = ({ breakpoints }) => ({ + display: "inline-block", + lineHeight: 0, + [breakpoints.up("xl")]: { + display: "none", + }, +}); + +function DashboardNavbar({ absolute, light, isMini }) { + const [navbarType, setNavbarType] = react.useState(); + const [controller, dispatch] = useMaterialUIController(); + const { miniSidenav, transparentNavbar, fixedNavbar, openConfigurator, darkMode } = controller; + const [openMenu, setOpenMenu] = react.useState(false); + const route = reactRouterDom.useLocation().pathname.split("/").slice(1); + react.useEffect(() => { + // Setting the navbar type + if (fixedNavbar) { + setNavbarType("sticky"); + } + else { + setNavbarType("static"); + } + // A function that sets the transparent state of the navbar. + function handleTransparentNavbar() { + setTransparentNavbar(dispatch, (fixedNavbar && window.scrollY === 0) || !fixedNavbar); + } + /** + The event listener that's calling the handleTransparentNavbar function when + scrolling the window. + */ + window.addEventListener("scroll", handleTransparentNavbar); + // Call the handleTransparentNavbar function to set the state with the initial value. + handleTransparentNavbar(); + // Remove event listener on cleanup + return () => window.removeEventListener("scroll", handleTransparentNavbar); + }, [dispatch, fixedNavbar]); + const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav); + const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator); + const handleOpenMenu = (event) => setOpenMenu(event.currentTarget); + const handleCloseMenu = () => setOpenMenu(false); + // Render the notifications menu + const renderMenu = () => (jsxRuntime.jsxs(Menu__default["default"], { anchorEl: openMenu, anchorReference: null, anchorOrigin: { + vertical: "bottom", + horizontal: "left", + }, open: Boolean(openMenu), onClose: handleCloseMenu, sx: { mt: 2 }, children: [jsxRuntime.jsx(NotificationItem, { icon: jsxRuntime.jsx(Icon__default["default"], { children: "email" }), title: "Check new messages" }), jsxRuntime.jsx(NotificationItem, { icon: jsxRuntime.jsx(Icon__default["default"], { children: "podcasts" }), title: "Manage Podcast sessions" }), jsxRuntime.jsx(NotificationItem, { icon: jsxRuntime.jsx(Icon__default["default"], { children: "shopping_cart" }), title: "Payment successfully completed" })] })); + // Styles for the navbar icons + const iconsStyle = ({ palette: { dark, white, text }, functions: { rgba }, }) => ({ + color: () => { + let colorValue = light || darkMode ? white.main : dark.main; + if (transparentNavbar && !light) { + colorValue = darkMode ? rgba(text.main, 0.6) : text.main; + } + return colorValue; + }, + }); + return (jsxRuntime.jsx(AppBar__default["default"], { position: absolute ? "absolute" : navbarType, color: "inherit", sx: (theme) => navbar(theme, { transparentNavbar, absolute, light, darkMode }), children: jsxRuntime.jsxs(Toolbar__default["default"], { sx: navbarContainer, children: [jsxRuntime.jsxs(MDBox, { color: "inherit", mb: { xs: 1, md: 0 }, sx: (theme) => navbarRow(theme, { isMini }), children: [jsxRuntime.jsx(Breadcrumbs, { icon: "home", title: route[route.length - 1], route: route, light: light }), jsxRuntime.jsx(IconButton__default["default"], { sx: navbarDesktopMenu, onClick: handleMiniSidenav, size: "small", disableRipple: true, children: jsxRuntime.jsx(Icon__default["default"], { fontSize: "medium", sx: iconsStyle, children: miniSidenav ? "menu_open" : "menu" }) })] }), isMini ? null : (jsxRuntime.jsxs(MDBox, { sx: (theme) => navbarRow(theme, { isMini }), children: [jsxRuntime.jsx(MDBox, { pr: 1, children: jsxRuntime.jsx(MDInput, { label: "Search here" }) }), jsxRuntime.jsxs(MDBox, { color: light ? "white" : "inherit", children: [jsxRuntime.jsx(reactRouterDom.Link, { to: "/authentication/sign-in/basic", children: jsxRuntime.jsx(IconButton__default["default"], { sx: navbarIconButton, size: "small", disableRipple: true, children: jsxRuntime.jsx(Icon__default["default"], { sx: iconsStyle, children: "account_circle" }) }) }), jsxRuntime.jsx(IconButton__default["default"], { size: "small", disableRipple: true, color: "inherit", sx: navbarMobileMenu, onClick: handleMiniSidenav, children: jsxRuntime.jsx(Icon__default["default"], { sx: iconsStyle, fontSize: "medium", children: miniSidenav ? "menu_open" : "menu" }) }), jsxRuntime.jsx(IconButton__default["default"], { size: "small", disableRipple: true, color: "inherit", sx: navbarIconButton, onClick: handleConfiguratorOpen, children: jsxRuntime.jsx(Icon__default["default"], { sx: iconsStyle, children: "settings" }) }), jsxRuntime.jsx(IconButton__default["default"], { size: "small", color: "inherit", sx: navbarIconButton, onClick: handleOpenMenu, children: jsxRuntime.jsx(MDBadge, { badgeContent: 9, color: "error", size: "xs", circular: true, children: jsxRuntime.jsx(Icon__default["default"], { sx: iconsStyle, children: "notifications" }) }) }), renderMenu()] })] }))] }) })); +} +// Declaring default props for DashboardNavbar +DashboardNavbar.defaultProps = { + absolute: false, + light: false, + isMini: false, +}; + +function Footer$1({ company, links }) { + const { href, name } = company; + const { size } = typography$1; + const renderLinks = () => links.map((link) => (jsxRuntime.jsx(MDBox, { component: "li", px: 2, lineHeight: 1, children: jsxRuntime.jsx(Link__default["default"], { href: link.href, target: "_blank", children: jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: link.name }) }) }, link.name))); + return (jsxRuntime.jsxs(MDBox, { width: "100%", display: "flex", flexDirection: { xs: "column", lg: "row" }, justifyContent: "space-between", alignItems: "center", px: 1.5, children: [jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "center", alignItems: "center", flexWrap: "wrap", color: "text", fontSize: size.sm, px: 1.5, children: ["\u00A9 ", new Date().getFullYear(), ", made with", jsxRuntime.jsx(MDBox, { fontSize: size.md, color: "text", mb: -0.5, mx: 0.25, children: jsxRuntime.jsx(Icon__default["default"], { color: "inherit", fontSize: "inherit", children: "favorite" }) }), "by", jsxRuntime.jsx(Link__default["default"], { href: href, target: "_blank", children: jsxRuntime.jsxs(MDTypography, { variant: "button", fontWeight: "medium", children: ["\u00A0", name, "\u00A0"] }) }), "for a better web."] }), jsxRuntime.jsx(MDBox, { component: "ul", sx: ({ breakpoints }) => ({ + display: "flex", + flexWrap: "wrap", + alignItems: "center", + justifyContent: "center", + listStyle: "none", + mt: 3, + mb: 0, + p: 0, + [breakpoints.up("lg")]: { + mt: 0, + }, + }), children: renderLinks() })] })); +} +// Declaring default props for Footer +Footer$1.defaultProps = { + company: { href: "https://www.creative-tim.com/", name: "Creative Tim" }, + links: [ + { href: "https://www.creative-tim.com/", name: "Creative Tim" }, + { href: "https://www.creative-tim.com/presentation", name: "About Us" }, + { href: "https://www.creative-tim.com/blog", name: "Blog" }, + { href: "https://www.creative-tim.com/license", name: "License" }, + ], +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function configs$4(labels, datasets) { + return { + data: { + labels, + datasets: [ + { + label: datasets.label, + tension: 0.4, + borderWidth: 0, + borderRadius: 4, + borderSkipped: false, + backgroundColor: "rgba(255, 255, 255, 0.8)", + data: datasets.data, + maxBarThickness: 6, + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + color: "rgba(255, 255, 255, .2)", + }, + ticks: { + suggestedMin: 0, + suggestedMax: 500, + beginAtZero: true, + padding: 10, + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + color: "#fff", + }, + }, + x: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + color: "rgba(255, 255, 255, .2)", + }, + ticks: { + display: true, + color: "#f8f9fa", + padding: 10, + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +function ReportsBarChart({ color, title, description, date, chart }) { + const { data, options } = configs$4(chart.labels || [], chart.datasets || {}); + return (jsxRuntime.jsx(Card__default["default"], { sx: { height: "100%" }, children: jsxRuntime.jsxs(MDBox, { padding: "1rem", children: [react.useMemo(() => (jsxRuntime.jsx(MDBox, { variant: "gradient", bgColor: color, borderRadius: "lg", coloredShadow: color, py: 2, pr: 0.5, mt: -5, height: "12.5rem", children: jsxRuntime.jsx(reactChartjs2.Bar, { data: data, options: options }) })), [chart, color]), jsxRuntime.jsxs(MDBox, { pt: 3, pb: 1, px: 1, children: [jsxRuntime.jsx(MDTypography, { variant: "h6", textTransform: "capitalize", children: title }), jsxRuntime.jsx(MDTypography, { component: "div", variant: "button", color: "text", fontWeight: "light", children: description }), jsxRuntime.jsx(Divider__default["default"], {}), jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", lineHeight: 1, sx: { mt: 0.15, mr: 0.5 }, children: jsxRuntime.jsx(Icon__default["default"], { children: "schedule" }) }), jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", fontWeight: "light", children: date })] })] })] }) })); +} +// Setting default values for the props of ReportsBarChart +ReportsBarChart.defaultProps = { + color: "dark", + description: "", +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function configs$3(labels, datasets) { + return { + data: { + labels, + datasets: [ + { + label: datasets.label, + tension: 0, + pointRadius: 5, + pointBorderColor: "transparent", + pointBackgroundColor: "rgba(255, 255, 255, .8)", + borderColor: "rgba(255, 255, 255, .8)", + borderWidth: 4, + backgroundColor: "transparent", + fill: true, + data: datasets.data, + maxBarThickness: 6, + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + color: "rgba(255, 255, 255, .2)", + }, + ticks: { + display: true, + color: "#f8f9fa", + padding: 10, + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + x: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: false, + drawTicks: false, + borderDash: [5, 5], + }, + ticks: { + display: true, + color: "#f8f9fa", + padding: 10, + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +function ReportsLineChart({ color, title, description, date, chart }) { + const { data, options } = configs$3(chart.labels || [], chart.datasets || {}); + return (jsxRuntime.jsx(Card__default["default"], { sx: { height: "100%" }, children: jsxRuntime.jsxs(MDBox, { padding: "1rem", children: [react.useMemo(() => (jsxRuntime.jsx(MDBox, { variant: "gradient", bgColor: color, borderRadius: "lg", coloredShadow: color, py: 2, pr: 0.5, mt: -5, height: "12.5rem", children: jsxRuntime.jsx(reactChartjs2.Line, { data: data, options: options }) })), [chart, color]), jsxRuntime.jsxs(MDBox, { pt: 3, pb: 1, px: 1, children: [jsxRuntime.jsx(MDTypography, { variant: "h6", textTransform: "capitalize", children: title }), jsxRuntime.jsx(MDTypography, { component: "div", variant: "button", color: "text", fontWeight: "light", children: description }), jsxRuntime.jsx(Divider__default["default"], {}), jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", lineHeight: 1, sx: { mt: 0.15, mr: 0.5 }, children: jsxRuntime.jsx(Icon__default["default"], { children: "schedule" }) }), jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", fontWeight: "light", children: date })] })] })] }) })); +} +// Declaring default props for ReportsLineChart +ReportsLineChart.defaultProps = { + color: "dark", + description: "", +}; + +function ComplexStatisticsCard({ color, title, count, percentage, icon }) { + return (jsxRuntime.jsxs(Card__default["default"], { children: [jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", pt: 1, px: 2, children: [jsxRuntime.jsx(MDBox, { variant: "gradient", bgColor: color, color: color === "light" ? "dark" : "white", coloredShadow: color, borderRadius: "xl", display: "flex", justifyContent: "center", alignItems: "center", width: "4rem", height: "4rem", mt: -3, children: jsxRuntime.jsx(Icon__default["default"], { fontSize: "medium", color: "inherit", children: icon }) }), jsxRuntime.jsxs(MDBox, { textAlign: "right", lineHeight: 1.25, children: [jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "light", color: "text", children: title }), jsxRuntime.jsx(MDTypography, { variant: "h4", children: count })] })] }), jsxRuntime.jsx(Divider__default["default"], {}), jsxRuntime.jsx(MDBox, { pb: 2, px: 2, children: jsxRuntime.jsxs(MDTypography, { component: "p", variant: "button", color: "text", display: "flex", children: [jsxRuntime.jsx(MDTypography, { component: "span", variant: "button", fontWeight: "bold", color: percentage.color, children: percentage.amount }), "\u00A0", percentage.label] }) })] })); +} +// Declaring defualt props for ComplexStatisticsCard +ComplexStatisticsCard.defaultProps = { + color: "info", + percentage: { + color: "success", + text: "", + label: "", + }, +}; + +function BookingCard({ image, title, description, price, location, action }) { + return (jsxRuntime.jsxs(Card__default["default"], { sx: { + "&:hover .card-header": { + transform: action && "translate3d(0, -50px, 0)", + }, + }, children: [jsxRuntime.jsxs(MDBox, { position: "relative", borderRadius: "lg", mt: -3, mx: 2, className: "card-header", sx: { transition: "transform 300ms cubic-bezier(0.34, 1.61, 0.7, 1)" }, children: [jsxRuntime.jsx(MDBox, { component: "img", src: image, alt: title, borderRadius: "lg", shadow: "md", width: "100%", height: "100%", position: "relative", zIndex: 1 }), jsxRuntime.jsx(MDBox, { borderRadius: "lg", shadow: "md", width: "100%", height: "100%", position: "absolute", left: 0, top: "0", sx: { + backgroundImage: `url(${image})`, + transform: "scale(0.94)", + filter: "blur(12px)", + backgroundSize: "cover", + } })] }), jsxRuntime.jsxs(MDBox, { textAlign: "center", pt: 3, px: 3, children: [jsxRuntime.jsx(MDBox, { display: "flex", justifyContent: "center", alignItems: "center", mt: action ? -8 : -4.25, children: action }), jsxRuntime.jsx(MDTypography, { variant: "h5", fontWeight: "regular", sx: { mt: 4 }, children: title }), jsxRuntime.jsx(MDTypography, { variant: "body2", color: "text", sx: { mt: 1.5, mb: 1 }, children: description })] }), jsxRuntime.jsx(Divider__default["default"], {}), jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", pt: 0.5, pb: 3, px: 3, lineHeight: 1, children: [jsxRuntime.jsx(MDTypography, { variant: "body2", fontWeight: "regular", color: "text", children: price }), jsxRuntime.jsxs(MDBox, { color: "text", display: "flex", alignItems: "center", children: [jsxRuntime.jsx(Icon__default["default"], { color: "inherit", sx: { m: 0.5 }, children: "place" }), jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "light", color: "text", children: location })] })] })] })); +} +// Declaring default props for BookingCard +BookingCard.defaultProps = { + action: false, +}; + +function SalesTableCell({ title, content, image, noBorder, ...rest }) { + let template; + if (image) { + template = (jsxRuntime.jsx(TableCell__default["default"], { ...rest, align: "left", width: "30%", sx: { border: noBorder && 0 }, children: jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", width: "max-content", children: [jsxRuntime.jsx(MDBox, { component: "img", src: image, alt: content.toString(), width: "1.5rem", height: "auto" }), " ", jsxRuntime.jsxs(MDBox, { display: "flex", flexDirection: "column", ml: 3, children: [jsxRuntime.jsxs(MDTypography, { variant: "caption", color: "text", fontWeight: "medium", textTransform: "capitalize", children: [title, ":"] }), jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "regular", textTransform: "capitalize", children: content })] })] }) })); + } + else { + template = (jsxRuntime.jsx(TableCell__default["default"], { ...rest, align: "center", sx: { border: noBorder && 0 }, children: jsxRuntime.jsxs(MDBox, { display: "flex", flexDirection: "column", children: [jsxRuntime.jsxs(MDTypography, { variant: "caption", color: "text", fontWeight: "medium", textTransform: "capitalize", children: [title, ":"] }), jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "regular", textTransform: "capitalize", children: content })] }) })); + } + return template; +} +// Declaring default props for SalesTableCell +SalesTableCell.defaultProps = { + image: "", + noBorder: false, +}; + +function SalesTable({ title, rows, shadow }) { + const renderTableCells = rows.map((row, key) => { + const tableRows = []; + const rowKey = `row-${key}`; + Object.entries(row).map(([cellTitle, cellContent]) => Array.isArray(cellContent) + ? tableRows.push(jsxRuntime.jsx(SalesTableCell, { title: cellTitle, content: cellContent[1], image: cellContent[0], noBorder: key === rows.length - 1 }, cellContent[1])) + : tableRows.push(jsxRuntime.jsx(SalesTableCell, { title: cellTitle, content: cellContent, noBorder: key === rows.length - 1 }, cellContent))); + return jsxRuntime.jsx(TableRow__default["default"], { children: tableRows }, rowKey); + }); + return (jsxRuntime.jsx(TableContainer__default["default"], { sx: { height: "100%", boxShadow: !shadow && "none" }, children: jsxRuntime.jsxs(Table__default["default"], { children: [title ? (jsxRuntime.jsx(TableHead__default["default"], { children: jsxRuntime.jsx(MDBox, { component: "tr", width: "max-content", display: "block", mb: 1.5, children: jsxRuntime.jsx(MDTypography, { variant: "h6", component: "td", children: title }) }) })) : null, jsxRuntime.jsx(TableBody__default["default"], { children: react.useMemo(() => renderTableCells, [rows]) })] }) })); +} +// Declaring default props for SalesTable +SalesTable.defaultProps = { + title: "", + rows: [{}], + shadow: true, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const salesTableData$1 = [ + { + country: [US__default["default"], "united state"], + sales: 2500, + value: "$230,900", + bounce: "29.9%", + }, + { + country: [DE__default["default"], "germany"], + sales: "3.900", + value: "$440,000", + bounce: "40.22%", + }, + { + country: [GB__default["default"], "great britain"], + sales: "1.400", + value: "$190,700", + bounce: "23.44%", + }, + { country: [BR__default["default"], "brasil"], sales: 562, value: "$143,960", bounce: "32.14%" }, +]; + +function SalesByCountry() { + return (jsxRuntime.jsxs(Card__default["default"], { sx: { width: "100%" }, children: [jsxRuntime.jsxs(MDBox, { display: "flex", children: [jsxRuntime.jsx(MDBox, { display: "flex", justifyContent: "center", alignItems: "center", width: "4rem", height: "4rem", variant: "gradient", bgColor: "success", color: "white", shadow: "md", borderRadius: "xl", ml: 3, mt: -2, children: jsxRuntime.jsx(Icon__default["default"], { fontSize: "medium", color: "inherit", children: "language" }) }), jsxRuntime.jsx(MDTypography, { variant: "h6", sx: { mt: 2, mb: 1, ml: 2 }, children: "Sales by Country" })] }), jsxRuntime.jsx(MDBox, { p: 2, children: jsxRuntime.jsxs(Grid__default["default"], { container: true, children: [jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, md: 7, lg: 6, children: jsxRuntime.jsx(SalesTable, { rows: salesTableData$1, shadow: false }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, md: 5, lg: 6, sx: { mt: { xs: 5, lg: 0 } }, children: jsxRuntime.jsx(core.VectorMap, { map: world.worldMerc, zoomOnScroll: false, zoomButtons: false, markersSelectable: true, backgroundColor: "transparent", selectedMarkers: ["1", "3"], markers: [ + { + name: "USA", + latLng: [40.71296415909766, -74.00437720027804], + }, + { + name: "Germany", + latLng: [51.17661451970939, 10.97947735117339], + }, + { + name: "Brazil", + latLng: [-7.596735421549542, -54.781694323779185], + }, + { + name: "Russia", + latLng: [62.318222797104276, 89.81564777631716], + }, + { + name: "China", + latLng: [22.320178999475512, 114.17161225541399], + }, + ], regionStyle: { + initial: { + fill: "#dee2e7", + "fill-opacity": 1, + stroke: "none", + "stroke-width": 0, + "stroke-opacity": 0, + }, + }, markerStyle: { + initial: { + fill: "#e91e63", + stroke: "#ffffff", + "stroke-width": 5, + "stroke-opacity": 0.5, + r: 7, + }, + hover: { + fill: "E91E63", + stroke: "#ffffff", + "stroke-width": 5, + "stroke-opacity": 0.5, + }, + selected: { + fill: "E91E63", + stroke: "#ffffff", + "stroke-width": 5, + "stroke-opacity": 0.5, + }, + }, style: { + marginTop: "-1.5rem", + }, onRegionTipShow: () => false, onMarkerTipShow: () => false }) })] }) })] })); +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const reportsBarChartData = { + labels: ["M", "T", "W", "T", "F", "S", "S"], + datasets: { label: "Sales", data: [50, 20, 10, 22, 50, 10, 40] }, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const reportsLineChartData = { + sales: { + labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], + datasets: { label: "Mobile apps", data: [50, 40, 300, 320, 500, 350, 200, 230, 500] }, + }, + tasks: { + labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], + datasets: { label: "Desktop apps", data: [50, 40, 300, 220, 500, 250, 400, 230, 500] }, + }, +}; + +function Analytics() { + const { sales, tasks } = reportsLineChartData; + // Action buttons for the BookingCard + const actionButtons = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], { title: "Refresh", placement: "bottom", children: jsxRuntime.jsx(MDTypography, { variant: "body1", color: "primary", lineHeight: 1, sx: { cursor: "pointer", mx: 3 }, children: jsxRuntime.jsx(Icon__default["default"], { color: "inherit", children: "refresh" }) }) }), jsxRuntime.jsx(Tooltip__default["default"], { title: "Edit", placement: "bottom", children: jsxRuntime.jsx(MDTypography, { variant: "body1", color: "info", lineHeight: 1, sx: { cursor: "pointer", mx: 3 }, children: jsxRuntime.jsx(Icon__default["default"], { color: "inherit", children: "edit" }) }) })] })); + return (jsxRuntime.jsxs(DashboardLayout, { children: [jsxRuntime.jsx(DashboardNavbar, {}), jsxRuntime.jsxs(MDBox, { py: 3, children: [jsxRuntime.jsx(Grid__default["default"], { container: true, children: jsxRuntime.jsx(SalesByCountry, {}) }), jsxRuntime.jsx(MDBox, { mt: 6, children: jsxRuntime.jsxs(Grid__default["default"], { container: true, spacing: 3, children: [jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, md: 6, lg: 4, children: jsxRuntime.jsx(MDBox, { mb: 3, children: jsxRuntime.jsx(ReportsBarChart, { color: "info", title: "website views", description: "Last Campaign Performance", date: "campaign sent 2 days ago", chart: reportsBarChartData }) }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, md: 6, lg: 4, children: jsxRuntime.jsx(MDBox, { mb: 3, children: jsxRuntime.jsx(ReportsLineChart, { color: "success", title: "daily sales", description: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["(", jsxRuntime.jsx("strong", { children: "+15%" }), ") increase in today sales."] }), date: "updated 4 min ago", chart: sales }) }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, md: 6, lg: 4, children: jsxRuntime.jsx(MDBox, { mb: 3, children: jsxRuntime.jsx(ReportsLineChart, { color: "dark", title: "completed tasks", description: "Last Campaign Performance", date: "just updated", chart: tasks }) }) })] }) }), jsxRuntime.jsx(MDBox, { mt: 1.5, children: jsxRuntime.jsxs(Grid__default["default"], { container: true, spacing: 3, children: [jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, md: 6, lg: 3, children: jsxRuntime.jsx(MDBox, { mb: 1.5, children: jsxRuntime.jsx(ComplexStatisticsCard, { color: "dark", icon: "weekend", title: "Bookings", count: 281, percentage: { + color: "success", + amount: "+55%", + label: "than lask week", + } }) }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, md: 6, lg: 3, children: jsxRuntime.jsx(MDBox, { mb: 1.5, children: jsxRuntime.jsx(ComplexStatisticsCard, { icon: "leaderboard", title: "Today's Users", count: "2,300", percentage: { + color: "success", + amount: "+3%", + label: "than last month", + } }) }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, md: 6, lg: 3, children: jsxRuntime.jsx(MDBox, { mb: 1.5, children: jsxRuntime.jsx(ComplexStatisticsCard, { color: "success", icon: "store", title: "Revenue", count: "34k", percentage: { + color: "success", + amount: "+1%", + label: "than yesterday", + } }) }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, md: 6, lg: 3, children: jsxRuntime.jsx(MDBox, { mb: 1.5, children: jsxRuntime.jsx(ComplexStatisticsCard, { color: "primary", icon: "person_add", title: "Followers", count: "+91", percentage: { + color: "success", + amount: "", + label: "Just updated", + } }) }) })] }) }), jsxRuntime.jsx(MDBox, { mt: 2, children: jsxRuntime.jsxs(Grid__default["default"], { container: true, spacing: 3, children: [jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, md: 6, lg: 4, children: jsxRuntime.jsx(MDBox, { mt: 3, children: jsxRuntime.jsx(BookingCard, { image: booking1__default["default"], title: "Cozy 5 Stars Apartment", description: 'The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona.', price: "$899/night", location: "Barcelona, Spain", action: actionButtons }) }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, md: 6, lg: 4, children: jsxRuntime.jsx(MDBox, { mt: 3, children: jsxRuntime.jsx(BookingCard, { image: booking2__default["default"], title: "Office Studio", description: 'The place is close to Metro Station and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the night life in London, UK.', price: "$1.119/night", location: "London, UK", action: actionButtons }) }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, md: 6, lg: 4, children: jsxRuntime.jsx(MDBox, { mt: 3, children: jsxRuntime.jsx(BookingCard, { image: booking3__default["default"], title: "Beautiful Castle", description: 'The place is close to Metro Station and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Milan.', price: "$459/night", location: "Milan, Italy", action: actionButtons }) }) })] }) })] }), jsxRuntime.jsx(Footer$1, {})] })); +} + +const MDBadgeDot = react.forwardRef(({ variant, color, size, badgeContent, font = {}, ...rest }, ref) => { + let finalSize; + let fontSize; + let padding; + if (size === "sm") { + finalSize = "0.5rem"; + fontSize = "caption"; + padding = "0.45em 0.775em"; + } + else if (size === "lg") { + finalSize = "0.625rem"; + fontSize = "body2"; + padding = "0.85em 1.375em"; + } + else if (size === "md") { + finalSize = "0.5rem"; + fontSize = "button"; + padding = "0.65em 1em"; + } + else { + finalSize = "0.375rem"; + fontSize = "caption"; + padding = "0.45em 0.775em"; + } + const validColors = [ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]; + const validColorIndex = validColors.findIndex((el) => el === color); + return (jsxRuntime.jsxs(MDBox, { ref: ref, display: "flex", alignItems: "center", p: padding, ...rest, children: [jsxRuntime.jsx(MDBox, { component: "i", display: "inline-block", width: finalSize, height: finalSize, borderRadius: "50%", bgColor: validColors[validColorIndex], variant: variant, mr: 1 }), jsxRuntime.jsx(MDTypography, { variant: fontSize, fontWeight: font.weight ? font.weight : "regular", color: font.color ? font.color : "dark", sx: { lineHeight: 0 }, children: badgeContent })] })); +}); +// Declaring default props for MDBadgeDot +MDBadgeDot.defaultProps = { + variant: "contained", + color: "info", + size: "xs", + font: {}, +}; + +function DefaultStatisticsCard({ title, count, percentage, dropdown }) { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + return (jsxRuntime.jsx(Card__default["default"], { children: jsxRuntime.jsx(MDBox, { p: 2, children: jsxRuntime.jsxs(Grid__default["default"], { container: true, children: [jsxRuntime.jsxs(Grid__default["default"], { item: true, xs: 7, children: [jsxRuntime.jsx(MDBox, { mb: 0.5, lineHeight: 1, children: jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "medium", color: "text", textTransform: "capitalize", children: title }) }), jsxRuntime.jsxs(MDBox, { lineHeight: 1, children: [jsxRuntime.jsx(MDTypography, { variant: "h5", fontWeight: "bold", children: count }), jsxRuntime.jsxs(MDTypography, { variant: "button", fontWeight: "bold", color: percentage.color, children: [percentage.value, "\u00A0", jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "regular", color: darkMode ? "text" : "secondary", children: percentage.label })] })] })] }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 5, children: dropdown && (jsxRuntime.jsxs(MDBox, { width: "100%", textAlign: "right", lineHeight: 1, children: [jsxRuntime.jsx(MDTypography, { variant: "caption", color: "secondary", fontWeight: "regular", sx: { cursor: "pointer" }, onClick: dropdown.action, children: dropdown.value }), dropdown.menu] })) })] }) }) })); +} +// Setting default values for the props of DefaultStatisticsCard +DefaultStatisticsCard.defaultProps = { + percentage: { + color: "success", + value: "", + label: "", + }, + dropdown: false, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function configs$2(labels, datasets) { + return { + data: { + labels, + datasets: [...datasets], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + color: "#c1c4ce5c", + }, + ticks: { + display: true, + padding: 10, + color: "#9ca2b7", + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + x: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: true, + borderDash: [5, 5], + color: "#c1c4ce5c", + }, + ticks: { + display: true, + color: "#9ca2b7", + padding: 10, + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +function DefaultLineChart({ icon, title, description, height, chart }) { + const chartDatasets = chart.datasets + ? chart.datasets.map((dataset) => ({ + ...dataset, + tension: 0, + pointRadius: 3, + borderWidth: 4, + backgroundColor: "transparent", + fill: true, + pointBackgroundColor: colors$1[dataset.color] + ? colors$1[dataset.color || "dark"].main + : colors$1.dark.main, + borderColor: colors$1[dataset.color] + ? colors$1[dataset.color || "dark"].main + : colors$1.dark.main, + maxBarThickness: 6, + })) + : []; + const { data, options } = configs$2(chart.labels || [], chartDatasets); + const renderChart = (jsxRuntime.jsxs(MDBox, { py: 2, pr: 2, pl: icon.component ? 1 : 2, children: [title || description ? (jsxRuntime.jsxs(MDBox, { display: "flex", px: description ? 1 : 0, pt: description ? 1 : 0, children: [icon.component && (jsxRuntime.jsx(MDBox, { width: "4rem", height: "4rem", bgColor: icon.color || "info", variant: "gradient", coloredShadow: icon.color || "info", borderRadius: "xl", display: "flex", justifyContent: "center", alignItems: "center", color: "white", mt: -5, mr: 2, children: jsxRuntime.jsx(Icon__default["default"], { fontSize: "medium", children: icon.component }) })), jsxRuntime.jsxs(MDBox, { mt: icon.component ? -2 : 0, children: [title && jsxRuntime.jsx(MDTypography, { variant: "h6", children: title }), jsxRuntime.jsx(MDBox, { mb: 2, children: jsxRuntime.jsx(MDTypography, { component: "div", variant: "button", color: "text", children: description }) })] })] })) : null, react.useMemo(() => (jsxRuntime.jsx(MDBox, { height: height, children: jsxRuntime.jsx(reactChartjs2.Line, { data: data, options: options }) })), [chart, height])] })); + return title || description ? jsxRuntime.jsx(Card__default["default"], { children: renderChart }) : renderChart; +} +// Declaring default props DefaultLineChart +DefaultLineChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", + height: "19.125rem", +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +function configs$1(labels, datasets) { + return { + data: { + labels, + datasets: [...datasets], + }, + options: { + indexAxis: "y", + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + color: "#c1c4ce5c", + }, + ticks: { + display: true, + padding: 10, + color: "#9ca2b7", + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + x: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: true, + drawTicks: true, + color: "#c1c4ce5c", + }, + ticks: { + display: true, + color: "#9ca2b7", + padding: 10, + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +function HorizontalBarChart({ icon, title, description, height, chart }) { + const chartDatasets = chart.datasets + ? chart.datasets.map((dataset) => ({ + ...dataset, + weight: 5, + borderWidth: 0, + borderRadius: 4, + backgroundColor: colors$1[dataset.color] + ? colors$1[dataset.color || "dark"].main + : colors$1.dark.main, + fill: false, + maxBarThickness: 35, + })) + : []; + const { data, options } = configs$1(chart.labels || [], chartDatasets); + const renderChart = (jsxRuntime.jsxs(MDBox, { py: 2, pr: 2, pl: icon.component ? 1 : 2, children: [title || description ? (jsxRuntime.jsxs(MDBox, { display: "flex", px: description ? 1 : 0, pt: description ? 1 : 0, children: [icon.component && (jsxRuntime.jsx(MDBox, { width: "4rem", height: "4rem", bgColor: icon.color || "info", variant: "gradient", coloredShadow: icon.color || "info", borderRadius: "xl", display: "flex", justifyContent: "center", alignItems: "center", color: "white", mt: -5, mr: 2, children: jsxRuntime.jsx(Icon__default["default"], { fontSize: "medium", children: icon.component }) })), jsxRuntime.jsxs(MDBox, { mt: icon.component ? -2 : 0, children: [title && jsxRuntime.jsx(MDTypography, { variant: "h6", children: title }), jsxRuntime.jsx(MDBox, { mb: 2, children: jsxRuntime.jsx(MDTypography, { component: "div", variant: "button", color: "text", children: description }) })] })] })) : null, react.useMemo(() => (jsxRuntime.jsx(MDBox, { height: height, children: jsxRuntime.jsx(reactChartjs2.Bar, { data: data, options: options }) })), [chart, height])] })); + return title || description ? jsxRuntime.jsx(Card__default["default"], { children: renderChart }) : renderChart; +} +// Declaring default props HorizontalBarChart +HorizontalBarChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", + height: "19.125rem", +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +// @ts-ignore +var MDPaginationItemRoot = styles.styled(MDButton)(({ theme, ownerState }) => { + const { borders, functions, typography, palette } = theme; + const { variant, paginationSize, active } = ownerState; + const { borderColor } = borders; + const { pxToRem } = functions; + const { fontWeightRegular, size: fontSize } = typography; + const { light } = palette; + // width, height, minWidth and minHeight values + let sizeValue = pxToRem(36); + if (paginationSize === "small") { + sizeValue = pxToRem(30); + } + else if (paginationSize === "large") { + sizeValue = pxToRem(46); + } + return { + borderColor, + margin: `0 ${pxToRem(2)}`, + pointerEvents: active ? "none" : "auto", + fontWeight: fontWeightRegular, + fontSize: fontSize.sm, + width: sizeValue, + minWidth: sizeValue, + height: sizeValue, + minHeight: sizeValue, + "&:hover, &:focus, &:active": { + transform: "none", + boxShadow: (variant !== "gradient" || variant !== "contained") && "none !important", + opacity: "1 !important", + }, + "&:hover": { + backgroundColor: light.main, + borderColor, + }, + }; +}); + +// The Pagination main context +const Context = react.createContext(null); +const MDPagination = react.forwardRef(({ item, variant, color, size, active, children, ...rest }, ref) => { + const context = react.useContext(Context); + const paginationSize = context ? context.size : undefined; + const providerValue = react.useMemo(() => ({ + variant, + color, + size, + }), [variant, color, size]); + return (jsxRuntime.jsx(Context.Provider, { value: providerValue, children: item ? (jsxRuntime.jsx(MDPaginationItemRoot, { ...rest, ref: ref, variant: active ? context.variant : "outlined", color: active ? context.color : "secondary", iconOnly: true, circular: true, ownerState: { variant, active, paginationSize }, children: children })) : (jsxRuntime.jsx(MDBox, { display: "flex", justifyContent: "flex-end", alignItems: "center", sx: { listStyle: "none" }, children: children })) })); +}); +// Declaring default props for MDPagination +MDPagination.defaultProps = { + item: false, + variant: "gradient", + color: "info", + size: "medium", + active: false, +}; + +function DataTableHeadCell({ width, children, sorted, align, ...rest }) { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + return (jsxRuntime.jsx(MDBox, { component: "th", width: width, py: 1.5, px: 3, sx: ({ palette: { light }, borders: { borderWidth } }) => ({ + borderBottom: `${borderWidth[1]} solid ${light.main}`, + }), children: jsxRuntime.jsxs(MDBox, { ...rest, position: "relative", textAlign: align, color: darkMode ? "white" : "secondary", opacity: 0.7, sx: ({ typography: { size, fontWeightBold } }) => ({ + fontSize: size.xxs, + fontWeight: fontWeightBold, + textTransform: "uppercase", + cursor: sorted && "pointer", + userSelect: sorted && "none", + }), children: [children, sorted && (jsxRuntime.jsxs(MDBox, { position: "absolute", top: 0, right: align !== "right" ? "16px" : 0, left: align === "right" ? "-5px" : "unset", sx: ({ typography: { size } }) => ({ + fontSize: size.lg, + }), children: [jsxRuntime.jsx(MDBox, { position: "absolute", top: -6, color: sorted === "asce" ? "text" : "secondary", opacity: sorted === "asce" ? 1 : 0.5, children: jsxRuntime.jsx(Icon__default["default"], { children: "arrow_drop_up" }) }), jsxRuntime.jsx(MDBox, { position: "absolute", top: 0, color: sorted === "desc" ? "text" : "secondary", opacity: sorted === "desc" ? 1 : 0.5, children: jsxRuntime.jsx(Icon__default["default"], { children: "arrow_drop_down" }) })] }))] }) })); +} +// Declaring default props for DataTableHeadCell +DataTableHeadCell.defaultProps = { + width: "auto", + sorted: "none", + align: "left", +}; + +function DataTableBodyCell({ noBorder, align, children }) { + return (jsxRuntime.jsx(MDBox, { component: "td", textAlign: align, py: 1.5, px: 3, sx: ({ palette: { light }, typography: { size }, borders: { borderWidth } }) => ({ + fontSize: size.sm, + borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${light.main}`, + }), children: jsxRuntime.jsx(MDBox, { display: "inline-block", width: "max-content", color: "text", sx: { verticalAlign: "middle" }, children: children }) })); +} +// Declaring default props for DataTableBodyCell +DataTableBodyCell.defaultProps = { + noBorder: false, + align: "left", +}; + +function DataTable({ entriesPerPage, canSearch, showTotalEntries, table, pagination, isSorted, noEndBorder, }) { + let defaultValue; + let entries; + if (entriesPerPage) { + defaultValue = entriesPerPage.defaultValue ? entriesPerPage.defaultValue : "10"; + entries = entriesPerPage.entries ? entriesPerPage.entries : ["10", "25", "50", "100"]; + } + const columns = react.useMemo(() => table.columns, [table]); + const data = react.useMemo(() => table.rows, [table]); + const tableInstance = reactTable.useTable({ columns, data, initialState: { pageIndex: 0 } }, reactTable.useGlobalFilter, reactTable.useSortBy, reactTable.usePagination); + const { getTableProps, getTableBodyProps, headerGroups, prepareRow, rows, page, pageOptions, canPreviousPage, canNextPage, gotoPage, nextPage, previousPage, setPageSize, setGlobalFilter, state: { pageIndex, pageSize, globalFilter }, } = tableInstance; + // Set the default value for the entries per page when component mounts + react.useEffect(() => setPageSize(defaultValue || 10), [defaultValue]); + // Set the entries per page value based on the select value + const setEntriesPerPage = (value) => setPageSize(value); + // Render the paginations + const renderPagination = pageOptions.map((option) => (jsxRuntime.jsx(MDPagination, { item: true, onClick: () => gotoPage(Number(option)), active: pageIndex === option, children: option + 1 }, option))); + // Handler for the input to set the pagination index + const handleInputPagination = ({ target: { value } }) => value > pageOptions.length || value < 0 ? gotoPage(0) : gotoPage(Number(value)); + // Customized page options starting from 1 + const customizedPageOptions = pageOptions.map((option) => option + 1); + // Setting value for the pagination input + const handleInputPaginationValue = ({ target: value }) => gotoPage(Number(value.value - 1)); + // Search input value state + const [search, setSearch] = react.useState(globalFilter); + // Search input state handle + const onSearchChange = reactTable.useAsyncDebounce((value) => { + setGlobalFilter(value || undefined); + }, 100); + // A function that sets the sorted value for the table + const setSortedValue = (column) => { + let sortedValue; + if (isSorted && column.isSorted) { + sortedValue = column.isSortedDesc ? "desc" : "asce"; + } + else if (isSorted) { + sortedValue = "none"; + } + else { + sortedValue = false; + } + return sortedValue; + }; + // Setting the entries starting point + const entriesStart = pageIndex === 0 ? pageIndex + 1 : pageIndex * pageSize + 1; + // Setting the entries ending point + let entriesEnd; + if (pageIndex === 0) { + entriesEnd = pageSize; + } + else if (pageIndex === pageOptions.length - 1) { + entriesEnd = rows.length; + } + else { + entriesEnd = pageSize * (pageIndex + 1); + } + return (jsxRuntime.jsxs(TableContainer__default["default"], { sx: { boxShadow: "none" }, children: [entriesPerPage || canSearch ? (jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", p: 3, children: [entriesPerPage && (jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsxRuntime.jsx(Autocomplete__default["default"], { disableClearable: true, value: pageSize.toString(), options: entries, onChange: (event, newValue) => { + setEntriesPerPage(parseInt(newValue, 10)); + }, size: "small", sx: { width: "5rem" }, renderInput: (params) => jsxRuntime.jsx(MDInput, { ...params }) }), jsxRuntime.jsx(MDTypography, { variant: "caption", color: "secondary", children: "\u00A0\u00A0entries per page" })] })), canSearch && (jsxRuntime.jsx(MDBox, { width: "12rem", ml: "auto", children: jsxRuntime.jsx(MDInput, { placeholder: "Search...", value: search, size: "small", fullWidth: true, onChange: ({ currentTarget }) => { + setSearch(search); + onSearchChange(currentTarget.value); + } }) }))] })) : null, jsxRuntime.jsxs(Table__default["default"], { ...getTableProps(), children: [jsxRuntime.jsx(MDBox, { component: "thead", children: headerGroups.map((headerGroup) => (jsxRuntime.jsx(TableRow__default["default"], { ...headerGroup.getHeaderGroupProps(), children: headerGroup.headers.map((column) => (jsxRuntime.jsx(DataTableHeadCell, { ...column.getHeaderProps(isSorted && column.getSortByToggleProps()), width: column.width ? column.width : "auto", align: column.align ? column.align : "left", sorted: setSortedValue(column), children: column.render("Header") }))) }))) }), jsxRuntime.jsx(TableBody__default["default"], { ...getTableBodyProps(), children: page.map((row, key) => { + prepareRow(row); + return (jsxRuntime.jsx(TableRow__default["default"], { ...row.getRowProps(), children: row.cells.map((cell) => (jsxRuntime.jsx(DataTableBodyCell, { noBorder: noEndBorder && rows.length - 1 === key, align: cell.column.align ? cell.column.align : "left", ...cell.getCellProps(), children: cell.render("Cell") }))) })); + }) })] }), jsxRuntime.jsxs(MDBox, { display: "flex", flexDirection: { xs: "column", sm: "row" }, justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, p: !showTotalEntries && pageOptions.length === 1 ? 0 : 3, children: [showTotalEntries && (jsxRuntime.jsx(MDBox, { mb: { xs: 3, sm: 0 }, children: jsxRuntime.jsxs(MDTypography, { variant: "button", color: "secondary", fontWeight: "regular", children: ["Showing ", entriesStart, " to ", entriesEnd, " of ", rows.length, " entries"] }) })), pageOptions.length > 1 && (jsxRuntime.jsxs(MDPagination, { variant: pagination.variant ? pagination.variant : "gradient", color: pagination.color ? pagination.color : "info", children: [canPreviousPage && (jsxRuntime.jsx(MDPagination, { item: true, onClick: () => previousPage(), children: jsxRuntime.jsx(Icon__default["default"], { sx: { fontWeight: "bold" }, children: "chevron_left" }) })), renderPagination.length > 6 ? (jsxRuntime.jsx(MDBox, { width: "5rem", mx: 1, children: jsxRuntime.jsx(MDInput, { inputProps: { type: "number", min: 1, max: customizedPageOptions.length }, value: customizedPageOptions[pageIndex], onChange: (event) => { + handleInputPagination(event); + handleInputPaginationValue(event); + } }) })) : (renderPagination), canNextPage && (jsxRuntime.jsx(MDPagination, { item: true, onClick: () => nextPage(), children: jsxRuntime.jsx(Icon__default["default"], { sx: { fontWeight: "bold" }, children: "chevron_right" }) }))] }))] })] })); +} +// Declaring default props for DataTable +DataTable.defaultProps = { + entriesPerPage: { defaultValue: 10, entries: ["5", "10", "15", "20", "25"] }, + canSearch: false, + showTotalEntries: true, + pagination: { variant: "gradient", color: "info" }, + isSorted: true, + noEndBorder: false, +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const { gradients, dark } = colors$1; +function configs(labels, datasets) { + const backgroundColors = []; + if (datasets.backgroundColors) { + datasets.backgroundColors.forEach((color) => gradients[color] + ? backgroundColors.push(gradients[color].state) + : backgroundColors.push(dark.main)); + } + else { + backgroundColors.push(dark.main); + } + return { + data: { + labels, + datasets: [ + { + label: datasets.label, + weight: 9, + cutout: 0, + tension: 0.9, + pointRadius: 2, + borderWidth: 2, + backgroundColor: backgroundColors, + fill: false, + data: datasets.data, + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: false, + drawTicks: false, + }, + ticks: { + display: false, + }, + }, + x: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: false, + drawTicks: false, + }, + ticks: { + display: false, + }, + }, + }, + }, + }; +} + +function PieChart({ icon, title, description, height, chart }) { + const { data, options } = configs(chart.labels || [], chart.datasets || {}); + const renderChart = (jsxRuntime.jsxs(MDBox, { py: 2, pr: 2, pl: icon.component ? 1 : 2, children: [title || description ? (jsxRuntime.jsxs(MDBox, { display: "flex", px: description ? 1 : 0, pt: description ? 1 : 0, children: [icon.component && (jsxRuntime.jsx(MDBox, { width: "4rem", height: "4rem", bgColor: icon.color || "info", variant: "gradient", coloredShadow: icon.color || "info", borderRadius: "xl", display: "flex", justifyContent: "center", alignItems: "center", color: "white", mt: -5, mr: 2, children: jsxRuntime.jsx(Icon__default["default"], { fontSize: "medium", children: icon.component }) })), jsxRuntime.jsxs(MDBox, { mt: icon.component ? -2 : 0, children: [title && jsxRuntime.jsx(MDTypography, { variant: "h6", children: title }), jsxRuntime.jsx(MDBox, { mb: 2, children: jsxRuntime.jsx(MDTypography, { component: "div", variant: "button", color: "text", children: description }) })] })] })) : null, react.useMemo(() => (jsxRuntime.jsx(MDBox, { height: height, children: jsxRuntime.jsx(reactChartjs2.Pie, { data: data, options: options }) })), [chart, height])] })); + return title || description ? jsxRuntime.jsx(Card__default["default"], { children: renderChart }) : renderChart; +} +// Declaring default props for PieChart +PieChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", + height: "19.125rem", +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const channelChartData = { + labels: ["Facebook", "Direct", "Organic", "Referral"], + datasets: { + label: "Projects", + backgroundColors: ["info", "primary", "dark", "secondary", "primary"], + data: [15, 20, 12, 60], + }, +}; + +function ChannelsChart() { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + return (jsxRuntime.jsxs(Card__default["default"], { sx: { height: "100%" }, children: [jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", pt: 2, px: 2, children: [jsxRuntime.jsx(MDTypography, { variant: "h6", children: "Channels" }), jsxRuntime.jsx(Tooltip__default["default"], { title: "See traffic channels", placement: "bottom", arrow: true, children: jsxRuntime.jsx(MDButton, { variant: "outlined", color: "secondary", size: "small", circular: true, iconOnly: true, children: jsxRuntime.jsx(Icon__default["default"], { children: "priority_high" }) }) })] }), jsxRuntime.jsx(MDBox, { mt: 3, children: jsxRuntime.jsxs(Grid__default["default"], { container: true, alignItems: "center", children: [jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 7, children: jsxRuntime.jsx(PieChart, { chart: channelChartData, height: "12.5rem" }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 5, children: jsxRuntime.jsxs(MDBox, { pr: 1, children: [jsxRuntime.jsx(MDBox, { mb: 1, children: jsxRuntime.jsx(MDBadgeDot, { color: "info", size: "sm", badgeContent: "Facebook" }) }), jsxRuntime.jsx(MDBox, { mb: 1, children: jsxRuntime.jsx(MDBadgeDot, { color: "primary", size: "sm", badgeContent: "Direct" }) }), jsxRuntime.jsx(MDBox, { mb: 1, children: jsxRuntime.jsx(MDBadgeDot, { color: "dark", size: "sm", badgeContent: "Organic" }) }), jsxRuntime.jsx(MDBox, { mb: 1, children: jsxRuntime.jsx(MDBadgeDot, { color: "secondary", size: "sm", badgeContent: "Referral" }) })] }) })] }) }), jsxRuntime.jsxs(MDBox, { pt: 4, pb: 2, px: 2, display: "flex", flexDirection: { xs: "column", sm: "row" }, mt: "auto", children: [jsxRuntime.jsx(MDBox, { width: { xs: "100%", sm: "60%" }, lineHeight: 1, children: jsxRuntime.jsxs(MDTypography, { variant: "button", color: "text", fontWeight: "light", children: ["More than ", jsxRuntime.jsx("strong", { children: "1,200,000" }), " sales are made using referral marketing, and", " ", jsxRuntime.jsx("strong", { children: "700,000" }), " are from social media."] }) }), jsxRuntime.jsx(MDBox, { width: { xs: "100%", sm: "40%" }, textAlign: "right", mt: { xs: 2, sm: "auto" }, children: jsxRuntime.jsx(MDButton, { color: darkMode ? "white" : "light", children: "read more" }) })] })] })); +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const defaultLineChartData = { + labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], + datasets: [ + { + label: "Facebook Ads", + color: "info", + data: [50, 100, 200, 190, 400, 350, 500, 450, 700], + }, + { + label: "Google Ads", + color: "dark", + data: [10, 30, 40, 120, 150, 220, 280, 250, 280], + }, + ], +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const horizontalBarChartData = { + labels: ["16-20", "21-25", "26-30", "31-36", "36-42", "42+"], + datasets: [ + { + label: "Sales by age", + color: "dark", + data: [15, 20, 12, 60, 20, 15], + }, + ], +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const salesTableData = [ + { + country: [US__default["default"], "united state"], + sales: 2500, + bounce: "29.9%", + }, + { + country: [DE__default["default"], "germany"], + sales: "3.900", + bounce: "40.22%", + }, + { + country: [GB__default["default"], "great britain"], + sales: "1.400", + bounce: "23.44%", + }, + { country: [BR__default["default"], "brasil"], sales: 562, bounce: "32.14%" }, + { country: [AU__default["default"], "australia"], sales: 400, bounce: "56.83%" }, +]; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +var MDAvatarRoot = styles.styled(Avatar__default["default"])(({ theme, ownerState }) => { + const { palette, functions, typography, boxShadows } = theme; + const { shadow, bgColor, size } = ownerState; + const { gradients, transparent, white } = palette; + const { pxToRem, linearGradient } = functions; + const { size: fontSize, fontWeightRegular } = typography; + // backgroundImage value + const backgroundValue = bgColor === "transparent" + ? transparent.main + : linearGradient(gradients[bgColor].main, gradients[bgColor].state); + // size value + let sizeValue; + switch (size) { + case "xs": + sizeValue = { + width: pxToRem(24), + height: pxToRem(24), + fontSize: fontSize.xs, + }; + break; + case "sm": + sizeValue = { + width: pxToRem(36), + height: pxToRem(36), + fontSize: fontSize.sm, + }; + break; + case "lg": + sizeValue = { + width: pxToRem(58), + height: pxToRem(58), + fontSize: fontSize.sm, + }; + break; + case "xl": + sizeValue = { + width: pxToRem(74), + height: pxToRem(74), + fontSize: fontSize.md, + }; + break; + case "xxl": + sizeValue = { + width: pxToRem(110), + height: pxToRem(110), + fontSize: fontSize.md, + }; + break; + default: { + sizeValue = { + width: pxToRem(48), + height: pxToRem(48), + fontSize: fontSize.md, + }; + } + } + return { + background: backgroundValue, + color: white.main, + fontWeight: fontWeightRegular, + boxShadow: boxShadows[shadow], + ...sizeValue, + }; +}); + +const MDAvatar = react.forwardRef(({ bgColor, size, shadow, ...rest }, ref) => (jsxRuntime.jsx(MDAvatarRoot, { ref: ref, ownerState: { shadow, bgColor, size }, ...rest }))); +// Declaring default props for MDAvatar +MDAvatar.defaultProps = { + bgColor: "transparent", + size: "md", + shadow: "none", +}; + +function ProductCell({ image, name, orders }) { + return (jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", pr: 2, children: [jsxRuntime.jsx(MDBox, { mr: 2, children: jsxRuntime.jsx(MDAvatar, { src: image, alt: name }) }), jsxRuntime.jsxs(MDBox, { display: "flex", flexDirection: "column", children: [jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "medium", children: name }), jsxRuntime.jsxs(MDTypography, { variant: "button", fontWeight: "regular", color: "secondary", children: [jsxRuntime.jsx(MDTypography, { component: "span", variant: "button", fontWeight: "regular", color: "success", children: orders }), " ", "orders"] })] })] })); +} + +function RefundsCell({ value, icon }) { + return (jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "center", alignItems: "center", px: 2, children: [jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: value }), jsxRuntime.jsx(MDBox, { color: icon.color, lineHeight: 0, children: jsxRuntime.jsx(Icon__default["default"], { sx: { fontWeight: "bold" }, fontSize: "small", children: icon.name }) })] })); +} + +function DefaultCell({ children }) { + return (jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: children })); +} + +const dataTableData$1 = { + columns: [ + { Header: "product", accessor: "product", width: "55%" }, + { Header: "value", accessor: "value" }, + { Header: "ads spent", accessor: "adsSpent", align: "center" }, + { Header: "refunds", accessor: "refunds", align: "center" }, + ], + rows: [ + { + product: jsxRuntime.jsx(ProductCell, { image: nikeV22__default["default"], name: "Nike v22 Running", orders: 8.232 }), + value: jsxRuntime.jsx(DefaultCell, { children: "$130.992" }), + adsSpent: jsxRuntime.jsx(DefaultCell, { children: "$9.500" }), + refunds: jsxRuntime.jsx(RefundsCell, { value: 13, icon: { color: "success", name: "keyboard_arrow_up" } }), + }, + { + product: (jsxRuntime.jsx(ProductCell, { image: businessKit__default["default"], name: "Business Kit (Mug + Notebook)", orders: 12.821 })), + value: jsxRuntime.jsx(DefaultCell, { children: "$80.250" }), + adsSpent: jsxRuntime.jsx(DefaultCell, { children: "$4.200" }), + refunds: jsxRuntime.jsx(RefundsCell, { value: 40, icon: { color: "error", name: "keyboard_arrow_down" } }), + }, + { + product: jsxRuntime.jsx(ProductCell, { image: blackChair__default["default"], name: "Black Chair", orders: 2.421 }), + value: jsxRuntime.jsx(DefaultCell, { children: "$40.600" }), + adsSpent: jsxRuntime.jsx(DefaultCell, { children: "$9.430" }), + refunds: jsxRuntime.jsx(RefundsCell, { value: 54, icon: { color: "success", name: "keyboard_arrow_up" } }), + }, + { + product: jsxRuntime.jsx(ProductCell, { image: wirelessCharger__default["default"], name: "Wireless Charger", orders: 5.921 }), + value: jsxRuntime.jsx(DefaultCell, { children: "$91.300" }), + adsSpent: jsxRuntime.jsx(DefaultCell, { children: "$7.364" }), + refunds: jsxRuntime.jsx(RefundsCell, { value: 5, icon: { color: "error", name: "keyboard_arrow_down" } }), + }, + { + product: (jsxRuntime.jsx(ProductCell, { image: tripKit__default["default"], name: "Mountain Trip Kit (Camera + Backpack)", orders: 921 })), + value: jsxRuntime.jsx(DefaultCell, { children: "$140.925" }), + adsSpent: jsxRuntime.jsx(DefaultCell, { children: "$20.531" }), + refunds: jsxRuntime.jsx(RefundsCell, { value: 121, icon: { color: "success", name: "keyboard_arrow_up" } }), + }, + ], +}; + +function Sales() { + // DefaultStatisticsCard state for the dropdown value + const [salesDropdownValue, setSalesDropdownValue] = react.useState("6 May - 7 May"); + const [customersDropdownValue, setCustomersDropdownValue] = react.useState("6 May - 7 May"); + const [revenueDropdownValue, setRevenueDropdownValue] = react.useState("6 May - 7 May"); + // DefaultStatisticsCard state for the dropdown action + const [salesDropdown, setSalesDropdown] = react.useState(null); + const [customersDropdown, setCustomersDropdown] = react.useState(null); + const [revenueDropdown, setRevenueDropdown] = react.useState(null); + // DefaultStatisticsCard handler for the dropdown action + const openSalesDropdown = ({ currentTarget }) => setSalesDropdown(currentTarget); + const closeSalesDropdown = ({ currentTarget }) => { + setSalesDropdown(null); + setSalesDropdownValue(currentTarget.innerText || salesDropdownValue); + }; + const openCustomersDropdown = ({ currentTarget }) => setCustomersDropdown(currentTarget); + const closeCustomersDropdown = ({ currentTarget }) => { + setCustomersDropdown(null); + setCustomersDropdownValue(currentTarget.innerText || salesDropdownValue); + }; + const openRevenueDropdown = ({ currentTarget }) => setRevenueDropdown(currentTarget); + const closeRevenueDropdown = ({ currentTarget }) => { + setRevenueDropdown(null); + setRevenueDropdownValue(currentTarget.innerText || salesDropdownValue); + }; + // Dropdown menu template for the DefaultStatisticsCard + const renderMenu = (state, close) => (jsxRuntime.jsxs(Menu__default["default"], { anchorEl: state, transformOrigin: { vertical: "top", horizontal: "center" }, open: Boolean(state), onClose: close, keepMounted: true, disableAutoFocusItem: true, children: [jsxRuntime.jsx(MenuItem__default["default"], { onClick: close, children: "Last 7 days" }), jsxRuntime.jsx(MenuItem__default["default"], { onClick: close, children: "Last week" }), jsxRuntime.jsx(MenuItem__default["default"], { onClick: close, children: "Last 30 days" })] })); + return (jsxRuntime.jsxs(DashboardLayout, { children: [jsxRuntime.jsx(DashboardNavbar, {}), jsxRuntime.jsxs(MDBox, { py: 3, children: [jsxRuntime.jsx(MDBox, { mb: 3, children: jsxRuntime.jsxs(Grid__default["default"], { container: true, spacing: 3, children: [jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, sm: 4, children: jsxRuntime.jsx(DefaultStatisticsCard, { title: "sales", count: "$230,220", percentage: { + color: "success", + value: "+55%", + label: "since last month", + }, dropdown: { + action: openSalesDropdown, + menu: renderMenu(salesDropdown, closeSalesDropdown), + value: salesDropdownValue, + } }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, sm: 4, children: jsxRuntime.jsx(DefaultStatisticsCard, { title: "customers", count: "3.200", percentage: { + color: "success", + value: "+12%", + label: "since last month", + }, dropdown: { + action: openCustomersDropdown, + menu: renderMenu(customersDropdown, closeCustomersDropdown), + value: customersDropdownValue, + } }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, sm: 4, children: jsxRuntime.jsx(DefaultStatisticsCard, { title: "avg. revenue", count: "$1.200", percentage: { + color: "secondary", + value: "+$213", + label: "since last month", + }, dropdown: { + action: openRevenueDropdown, + menu: renderMenu(revenueDropdown, closeRevenueDropdown), + value: revenueDropdownValue, + } }) })] }) }), jsxRuntime.jsx(MDBox, { mb: 3, children: jsxRuntime.jsxs(Grid__default["default"], { container: true, spacing: 3, children: [jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, sm: 6, lg: 4, children: jsxRuntime.jsx(ChannelsChart, {}) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, sm: 6, lg: 8, children: jsxRuntime.jsx(DefaultLineChart, { title: "Revenue", description: jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", children: [jsxRuntime.jsxs(MDBox, { display: "flex", ml: -1, children: [jsxRuntime.jsx(MDBadgeDot, { color: "info", size: "sm", badgeContent: "Facebook Ads" }), jsxRuntime.jsx(MDBadgeDot, { color: "dark", size: "sm", badgeContent: "Google Ads" })] }), jsxRuntime.jsx(MDBox, { mt: -4, mr: -1, position: "absolute", right: "1.5rem", children: jsxRuntime.jsx(Tooltip__default["default"], { title: "See which ads perform better", placement: "left", arrow: true, children: jsxRuntime.jsx(MDButton, { variant: "outlined", color: "secondary", size: "small", circular: true, iconOnly: true, children: jsxRuntime.jsx(Icon__default["default"], { children: "priority_high" }) }) }) })] }), chart: defaultLineChartData }) })] }) }), jsxRuntime.jsx(MDBox, { mb: 3, children: jsxRuntime.jsxs(Grid__default["default"], { container: true, spacing: 3, children: [jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, lg: 8, children: jsxRuntime.jsx(HorizontalBarChart, { title: "Sales by age", chart: horizontalBarChartData }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, lg: 4, children: jsxRuntime.jsx(SalesTable, { title: "Sales by Country", rows: salesTableData }) })] }) }), jsxRuntime.jsx(Grid__default["default"], { container: true, spacing: 3, children: jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, children: jsxRuntime.jsxs(Card__default["default"], { children: [jsxRuntime.jsx(MDBox, { pt: 3, px: 3, children: jsxRuntime.jsx(MDTypography, { variant: "h6", fontWeight: "medium", children: "Top Selling Products" }) }), jsxRuntime.jsx(MDBox, { py: 1, children: jsxRuntime.jsx(DataTable, { table: dataTableData$1, entriesPerPage: false, showTotalEntries: false, isSorted: false, noEndBorder: true }) })] }) }) })] }), jsxRuntime.jsx(Footer$1, {})] })); +} + +function ProfileInfoCard({ title, description, info, social, action, shadow }) { + const labels = []; + const values = []; + const { socialMediaColors } = colors$1; + const { size } = typography$1; + // Convert this form `objectKey` of the object key in to this `object key` + Object.keys(info).forEach((el) => { + if (el.match(/[A-Z\s]+/)) { + const uppercaseLetter = Array.from(el).find((i) => i.match(/[A-Z]+/)); + const newElement = el.replace(uppercaseLetter, ` ${uppercaseLetter.toLowerCase()}`); + labels.push(newElement); + } + else { + labels.push(el); + } + }); + // Push the object values into the values array + Object.values(info).forEach((el) => values.push(el)); + // Render the card info items + const renderItems = labels.map((label, key) => (jsxRuntime.jsxs(MDBox, { display: "flex", py: 1, pr: 2, children: [jsxRuntime.jsxs(MDTypography, { variant: "button", fontWeight: "bold", textTransform: "capitalize", children: [label, ": \u00A0"] }), jsxRuntime.jsxs(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: ["\u00A0", values[key]] })] }, label))); + // Render the card social media icons + const renderSocial = social.map(({ link, icon, color }) => (jsxRuntime.jsx(MDBox, { component: "a", href: link, target: "_blank", rel: "noreferrer", fontSize: size.lg, color: socialMediaColors[color].main, pr: 1, pl: 0.5, lineHeight: 1, children: icon }, color))); + return (jsxRuntime.jsxs(Card__default["default"], { sx: { height: "100%", boxShadow: !shadow && "none" }, children: [jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", pt: 2, px: 2, children: [jsxRuntime.jsx(MDTypography, { variant: "h6", fontWeight: "medium", textTransform: "capitalize", children: title }), jsxRuntime.jsx(MDTypography, { component: reactRouterDom.Link, to: action.route, variant: "body2", color: "secondary", children: jsxRuntime.jsx(Tooltip__default["default"], { title: action.tooltip, placement: "top", children: jsxRuntime.jsx(Icon__default["default"], { children: "edit" }) }) })] }), jsxRuntime.jsxs(MDBox, { p: 2, children: [jsxRuntime.jsx(MDBox, { mb: 2, lineHeight: 1, children: jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", fontWeight: "light", children: description }) }), jsxRuntime.jsx(MDBox, { opacity: 0.3, children: jsxRuntime.jsx(Divider__default["default"], {}) }), jsxRuntime.jsxs(MDBox, { children: [renderItems, jsxRuntime.jsxs(MDBox, { display: "flex", py: 1, pr: 2, children: [jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "bold", textTransform: "capitalize", children: "social: \u00A0" }), renderSocial] })] })] })] })); +} +// Declaring default props for ProfileInfoCard +ProfileInfoCard.defaultProps = { + shadow: true, +}; + +function ProfilesList({ title, profiles, shadow }) { + const renderProfiles = profiles.map(({ image, name, description, action }) => (jsxRuntime.jsxs(MDBox, { component: "li", display: "flex", alignItems: "center", py: 1, mb: 1, children: [jsxRuntime.jsx(MDBox, { mr: 2, children: jsxRuntime.jsx(MDAvatar, { src: image, alt: "something here", shadow: "md" }) }), jsxRuntime.jsxs(MDBox, { display: "flex", flexDirection: "column", alignItems: "flex-start", justifyContent: "center", children: [jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "medium", children: name }), jsxRuntime.jsx(MDTypography, { variant: "caption", color: "text", children: description })] }), jsxRuntime.jsx(MDBox, { ml: "auto", children: action.type === "internal" ? (jsxRuntime.jsx(MDButton, { component: reactRouterDom.Link, to: action.route, variant: "text", color: "info", children: action.label })) : (jsxRuntime.jsx(MDButton, { component: "a", href: action.route, target: "_blank", rel: "noreferrer", variant: "text", color: action.color, children: action.label })) })] }, name))); + return (jsxRuntime.jsxs(Card__default["default"], { sx: { height: "100%", boxShadow: !shadow && "none" }, children: [jsxRuntime.jsx(MDBox, { pt: 2, px: 2, children: jsxRuntime.jsx(MDTypography, { variant: "h6", fontWeight: "medium", textTransform: "capitalize", children: title }) }), jsxRuntime.jsx(MDBox, { p: 2, children: jsxRuntime.jsx(MDBox, { component: "ul", display: "flex", flexDirection: "column", p: 0, m: 0, children: renderProfiles }) })] })); +} +// Declaring defualt props for ProfilesList +ProfilesList.defaultProps = { + shadow: true, +}; + +function DefaultProjectCard({ image, label, title, description, action, authors, }) { + const renderAuthors = authors.map(({ image: media, name }) => (jsxRuntime.jsx(Tooltip__default["default"], { title: name, placement: "bottom", children: jsxRuntime.jsx(MDAvatar, { src: media, alt: name, size: "xs", sx: ({ borders: { borderWidth }, palette: { white } }) => ({ + border: `${borderWidth[2]} solid ${white.main}`, + cursor: "pointer", + position: "relative", + ml: -1.25, + "&:hover, &:focus": { + zIndex: "10", + }, + }) }) }, name))); + return (jsxRuntime.jsxs(Card__default["default"], { sx: { + display: "flex", + flexDirection: "column", + backgroundColor: "transparent", + boxShadow: "none", + overflow: "visible", + }, children: [jsxRuntime.jsx(MDBox, { position: "relative", width: "100.25%", shadow: "xl", borderRadius: "xl", children: jsxRuntime.jsx(CardMedia__default["default"], { src: image, component: "img", title: title, sx: { + maxWidth: "100%", + margin: 0, + boxShadow: ({ boxShadows: { md } }) => md, + objectFit: "cover", + objectPosition: "center", + } }) }), jsxRuntime.jsxs(MDBox, { mt: 1, mx: 0.5, children: [jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", textTransform: "capitalize", children: label }), jsxRuntime.jsx(MDBox, { mb: 1, children: action.type === "internal" ? (jsxRuntime.jsx(MDTypography, { component: reactRouterDom.Link, to: action.route, variant: "h5", textTransform: "capitalize", children: title })) : (jsxRuntime.jsx(MDTypography, { component: "a", href: action.route, target: "_blank", rel: "noreferrer", variant: "h5", textTransform: "capitalize", children: title })) }), jsxRuntime.jsx(MDBox, { mb: 3, lineHeight: 0, children: jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "light", color: "text", children: description }) }), jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [action.type === "internal" ? (jsxRuntime.jsx(MDButton, { component: reactRouterDom.Link, to: action.route, variant: "outlined", size: "small", color: action.color, children: action.label })) : (jsxRuntime.jsx(MDButton, { component: "a", href: action.route, target: "_blank", rel: "noreferrer", variant: "outlined", size: "small", color: action.color, children: action.label })), jsxRuntime.jsx(MDBox, { display: "flex", children: renderAuthors })] })] })] })); +} +// Declaring default props for DefaultProjectCard +DefaultProjectCard.defaultProps = { + authors: [], +}; + +function Header$1({ children }) { + const [tabsOrientation, setTabsOrientation] = react.useState("horizontal"); + const [tabValue, setTabValue] = react.useState(0); + react.useEffect(() => { + // A function that sets the orientation state of the tabs. + function handleTabsOrientation() { + return window.innerWidth < breakpoints$1.values.sm + ? setTabsOrientation("vertical") + : setTabsOrientation("horizontal"); + } + /** + The event listener that's calling the handleTabsOrientation function when resizing the window. + */ + window.addEventListener("resize", handleTabsOrientation); + // Call the handleTabsOrientation function to set the state with the initial value. + handleTabsOrientation(); + // Remove event listener on cleanup + return () => window.removeEventListener("resize", handleTabsOrientation); + }, [tabsOrientation]); + const handleSetTabValue = (event, newValue) => setTabValue(newValue); + return (jsxRuntime.jsxs(MDBox, { position: "relative", mb: 5, children: [jsxRuntime.jsx(MDBox, { display: "flex", alignItems: "center", position: "relative", minHeight: "18.75rem", borderRadius: "xl", sx: { + backgroundImage: ({ functions: { rgba, linearGradient }, palette: { gradients } }) => `${linearGradient(rgba(gradients.info.main, 0.6), rgba(gradients.info.state, 0.6))}, url(${backgroundImage__default["default"]})`, + backgroundSize: "cover", + backgroundPosition: "50%", + overflow: "hidden", + } }), jsxRuntime.jsxs(Card__default["default"], { sx: { + position: "relative", + mt: -8, + mx: 3, + py: 2, + px: 2, + }, children: [jsxRuntime.jsxs(Grid__default["default"], { container: true, spacing: 3, alignItems: "center", children: [jsxRuntime.jsx(Grid__default["default"], { item: true, children: jsxRuntime.jsx(MDAvatar, { src: burceMars__default["default"], alt: "profile-image", size: "xl", shadow: "sm" }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, children: jsxRuntime.jsxs(MDBox, { height: "100%", mt: 0.5, lineHeight: 1, children: [jsxRuntime.jsx(MDTypography, { variant: "h5", fontWeight: "medium", children: "Richard Davis" }), jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", fontWeight: "regular", children: "CEO / Co-Founder" })] }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, md: 6, lg: 4, sx: { ml: "auto" }, children: jsxRuntime.jsx(AppBar__default["default"], { position: "static", children: jsxRuntime.jsxs(Tabs__default["default"], { orientation: tabsOrientation, value: tabValue, onChange: handleSetTabValue, children: [jsxRuntime.jsx(Tab__default["default"], { label: "App", icon: jsxRuntime.jsx(Icon__default["default"], { fontSize: "small", sx: { mt: -0.25 }, children: "home" }) }), jsxRuntime.jsx(Tab__default["default"], { label: "Message", icon: jsxRuntime.jsx(Icon__default["default"], { fontSize: "small", sx: { mt: -0.25 }, children: "email" }) }), jsxRuntime.jsx(Tab__default["default"], { label: "Settings", icon: jsxRuntime.jsx(Icon__default["default"], { fontSize: "small", sx: { mt: -0.25 }, children: "settings" }) })] }) }) })] }), children] })] })); +} +// Declaring default props for Header +Header$1.defaultProps = { + children: "", +}; + +function PlatformSettings() { + const [followsMe, setFollowsMe] = react.useState(true); + const [answersPost, setAnswersPost] = react.useState(false); + const [mentionsMe, setMentionsMe] = react.useState(true); + const [newLaunches, setNewLaunches] = react.useState(false); + const [productUpdate, setProductUpdate] = react.useState(true); + const [newsletter, setNewsletter] = react.useState(false); + return (jsxRuntime.jsxs(Card__default["default"], { sx: { boxShadow: "none" }, children: [jsxRuntime.jsx(MDBox, { p: 2, children: jsxRuntime.jsx(MDTypography, { variant: "h6", fontWeight: "medium", textTransform: "capitalize", children: "platform settings" }) }), jsxRuntime.jsxs(MDBox, { pt: 1, pb: 2, px: 2, lineHeight: 1.25, children: [jsxRuntime.jsx(MDTypography, { variant: "caption", fontWeight: "bold", color: "text", textTransform: "uppercase", children: "account" }), jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", mb: 0.5, ml: -1.5, children: [jsxRuntime.jsx(MDBox, { mt: 0.5, children: jsxRuntime.jsx(Switch__default["default"], { checked: followsMe, onChange: () => setFollowsMe(!followsMe) }) }), jsxRuntime.jsx(MDBox, { width: "80%", ml: 0.5, children: jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: "Email me when someone follows me" }) })] }), jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", mb: 0.5, ml: -1.5, children: [jsxRuntime.jsx(MDBox, { mt: 0.5, children: jsxRuntime.jsx(Switch__default["default"], { checked: answersPost, onChange: () => setAnswersPost(!answersPost) }) }), jsxRuntime.jsx(MDBox, { width: "80%", ml: 0.5, children: jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: "Email me when someone answers on my post" }) })] }), jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", mb: 0.5, ml: -1.5, children: [jsxRuntime.jsx(MDBox, { mt: 0.5, children: jsxRuntime.jsx(Switch__default["default"], { checked: mentionsMe, onChange: () => setMentionsMe(!mentionsMe) }) }), jsxRuntime.jsx(MDBox, { width: "80%", ml: 0.5, children: jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: "Email me when someone mentions me" }) })] }), jsxRuntime.jsx(MDBox, { mt: 3, children: jsxRuntime.jsx(MDTypography, { variant: "caption", fontWeight: "bold", color: "text", textTransform: "uppercase", children: "application" }) }), jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", mb: 0.5, ml: -1.5, children: [jsxRuntime.jsx(MDBox, { mt: 0.5, children: jsxRuntime.jsx(Switch__default["default"], { checked: newLaunches, onChange: () => setNewLaunches(!newLaunches) }) }), jsxRuntime.jsx(MDBox, { width: "80%", ml: 0.5, children: jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: "New launches and projects" }) })] }), jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", mb: 0.5, ml: -1.5, children: [jsxRuntime.jsx(MDBox, { mt: 0.5, children: jsxRuntime.jsx(Switch__default["default"], { checked: productUpdate, onChange: () => setProductUpdate(!productUpdate) }) }), jsxRuntime.jsx(MDBox, { width: "80%", ml: 0.5, children: jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: "Monthly product updates" }) })] }), jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", mb: 0.5, ml: -1.5, children: [jsxRuntime.jsx(MDBox, { mt: 0.5, children: jsxRuntime.jsx(Switch__default["default"], { checked: newsletter, onChange: () => setNewsletter(!newsletter) }) }), jsxRuntime.jsx(MDBox, { width: "80%", ml: 0.5, children: jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: "Subscribe to newsletter" }) })] })] })] })); +} + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const profileListData = [ + { + image: kal__default["default"], + name: "Sophie B.", + description: "Hi! I need more information..", + action: { + type: "internal", + route: "/pages/profile/profile-overview", + color: "info", + label: "reply", + }, + }, + { + image: marie__default["default"], + name: "Anne Marie", + description: "Awesome work, can you..", + action: { + type: "internal", + route: "/pages/profile/profile-overview", + color: "info", + label: "reply", + }, + }, + { + image: ivana__default["default"], + name: "Ivanna", + description: "About files I can..", + action: { + type: "internal", + route: "/pages/profile/profile-overview", + color: "info", + label: "reply", + }, + }, + { + image: team4__default["default"], + name: "Peterson", + description: "Have a great afternoon..", + action: { + type: "internal", + route: "/pages/profile/profile-overview", + color: "info", + label: "reply", + }, + }, + { + image: team3__default["default"], + name: "Nick Daniel", + description: "Hi! I need more information..", + action: { + type: "internal", + route: "/pages/profile/profile-overview", + color: "info", + label: "reply", + }, + }, +]; + +function Overview() { + return (jsxRuntime.jsxs(DashboardLayout, { children: [jsxRuntime.jsx(DashboardNavbar, {}), jsxRuntime.jsx(MDBox, { mb: 2 }), jsxRuntime.jsxs(Header$1, { children: [jsxRuntime.jsx(MDBox, { mt: 5, mb: 3, children: jsxRuntime.jsxs(Grid__default["default"], { container: true, spacing: 1, children: [jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, md: 6, xl: 4, children: jsxRuntime.jsx(PlatformSettings, {}) }), jsxRuntime.jsxs(Grid__default["default"], { item: true, xs: 12, md: 6, xl: 4, sx: { display: "flex" }, children: [jsxRuntime.jsx(Divider__default["default"], { orientation: "vertical", sx: { ml: -2, mr: 1 } }), jsxRuntime.jsx(ProfileInfoCard, { title: "profile information", description: "Hi, I\u2019m Alec Thompson, Decisions: If you can\u2019t decide, the answer is no. If two equally difficult paths, choose the one more painful in the short term (pain avoidance is creating an illusion of equality).", info: { + fullName: "Alec M. Thompson", + mobile: "(44) 123 1234 123", + email: "alecthompson@mail.com", + location: "USA", + }, social: [ + { + link: "https://www.facebook.com/CreativeTim/", + icon: jsxRuntime.jsx(FacebookIcon__default["default"], {}), + color: "facebook", + }, + { + link: "https://twitter.com/creativetim", + icon: jsxRuntime.jsx(TwitterIcon__default["default"], {}), + color: "twitter", + }, + { + link: "https://www.instagram.com/creativetimofficial/", + icon: jsxRuntime.jsx(InstagramIcon__default["default"], {}), + color: "instagram", + }, + ], action: { route: "", tooltip: "Edit Profile" }, shadow: false }), jsxRuntime.jsx(Divider__default["default"], { orientation: "vertical", sx: { mx: 0 } })] }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, xl: 4, children: jsxRuntime.jsx(ProfilesList, { title: "conversations", profiles: profileListData, shadow: false }) })] }) }), jsxRuntime.jsxs(MDBox, { pt: 2, px: 2, lineHeight: 1.25, children: [jsxRuntime.jsx(MDTypography, { variant: "h6", fontWeight: "medium", children: "Projects" }), jsxRuntime.jsx(MDBox, { mb: 1, children: jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", children: "Architects design houses" }) })] }), jsxRuntime.jsx(MDBox, { p: 2, children: jsxRuntime.jsxs(Grid__default["default"], { container: true, spacing: 6, children: [jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, md: 6, xl: 3, children: jsxRuntime.jsx(DefaultProjectCard, { image: homeDecor1__default["default"], label: "project #2", title: "modern", description: "As Uber works through a huge amount of internal management turmoil.", action: { + type: "internal", + route: "/pages/profile/profile-overview", + color: "info", + label: "view project", + }, authors: [ + { image: team1__default["default"], name: "Elena Morison" }, + { image: team2__default["default"], name: "Ryan Milly" }, + { image: team3__default["default"], name: "Nick Daniel" }, + { image: team4__default["default"], name: "Peterson" }, + ] }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, md: 6, xl: 3, children: jsxRuntime.jsx(DefaultProjectCard, { image: homeDecor2__default["default"], label: "project #1", title: "scandinavian", description: "Music is something that everyone has their own specific opinion about.", action: { + type: "internal", + route: "/pages/profile/profile-overview", + color: "info", + label: "view project", + }, authors: [ + { image: team3__default["default"], name: "Nick Daniel" }, + { image: team4__default["default"], name: "Peterson" }, + { image: team1__default["default"], name: "Elena Morison" }, + { image: team2__default["default"], name: "Ryan Milly" }, + ] }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, md: 6, xl: 3, children: jsxRuntime.jsx(DefaultProjectCard, { image: homeDecor3__default["default"], label: "project #3", title: "minimalist", description: "Different people have different taste, and various types of music.", action: { + type: "internal", + route: "/pages/profile/profile-overview", + color: "info", + label: "view project", + }, authors: [ + { image: team4__default["default"], name: "Peterson" }, + { image: team3__default["default"], name: "Nick Daniel" }, + { image: team2__default["default"], name: "Ryan Milly" }, + { image: team1__default["default"], name: "Elena Morison" }, + ] }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, md: 6, xl: 3, children: jsxRuntime.jsx(DefaultProjectCard, { image: homeDecor4__default["default"], label: "project #4", title: "gothic", description: "Why would anyone pick blue over pink? Pink is obviously a better color.", action: { + type: "internal", + route: "/pages/profile/profile-overview", + color: "info", + label: "view project", + }, authors: [ + { image: team4__default["default"], name: "Peterson" }, + { image: team3__default["default"], name: "Nick Daniel" }, + { image: team2__default["default"], name: "Ryan Milly" }, + { image: team1__default["default"], name: "Elena Morison" }, + ] }) })] }) })] }), jsxRuntime.jsx(Footer$1, {})] })); +} + +function BaseLayout({ stickyNavbar, children }) { + const [tabsOrientation, setTabsOrientation] = react.useState("horizontal"); + const [tabValue, setTabValue] = react.useState(0); + react.useEffect(() => { + // A function that sets the orientation state of the tabs. + function handleTabsOrientation() { + return window.innerWidth < breakpoints$1.values.sm + ? setTabsOrientation("vertical") + : setTabsOrientation("horizontal"); + } + /** + The event listener that's calling the handleTabsOrientation function when resizing the window. + */ + window.addEventListener("resize", handleTabsOrientation); + // Call the handleTabsOrientation function to set the state with the initial value. + handleTabsOrientation(); + // Remove event listener on cleanup + return () => window.removeEventListener("resize", handleTabsOrientation); + }, [tabsOrientation]); + const handleSetTabValue = (event, newValue) => setTabValue(newValue); + return (jsxRuntime.jsxs(DashboardLayout, { children: [jsxRuntime.jsx(DashboardNavbar, { absolute: !stickyNavbar, isMini: true }), jsxRuntime.jsxs(MDBox, { mt: stickyNavbar ? 3 : 10, children: [jsxRuntime.jsx(Grid__default["default"], { container: true, children: jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, sm: 8, lg: 4, children: jsxRuntime.jsx(AppBar__default["default"], { position: "static", children: jsxRuntime.jsxs(Tabs__default["default"], { orientation: tabsOrientation, value: tabValue, onChange: handleSetTabValue, children: [jsxRuntime.jsx(Tab__default["default"], { label: "Messages" }), jsxRuntime.jsx(Tab__default["default"], { label: "Social" }), jsxRuntime.jsx(Tab__default["default"], { label: "Notifications" }), jsxRuntime.jsx(Tab__default["default"], { label: "Backup" })] }) }) }) }), children] }), jsxRuntime.jsx(Footer$1, {})] })); +} +// Declaring default props for BaseLayout +BaseLayout.defaultProps = { + stickyNavbar: false, +}; + +function Sidenav() { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + const sidenavItems = [ + { icon: "person", label: "profile", href: "profile" }, + { icon: "receipt_long", label: "basic info", href: "basic-info" }, + { icon: "lock", label: "change password", href: "change-password" }, + { icon: "security", label: "2FA", href: "2fa" }, + { icon: "badge", label: "accounts", href: "accounts" }, + { icon: "campaign", label: "notifications", href: "notifications" }, + { icon: "settings_applications", label: "sessions", href: "sessions" }, + { icon: "delete", label: "delete account", href: "delete-account" }, + ]; + const renderSidenavItems = sidenavItems.map(({ icon, label, href }, key) => { + const itemKey = `item-${key}`; + return (jsxRuntime.jsx(MDBox, { component: "li", pt: key === 0 ? 0 : 1, children: jsxRuntime.jsxs(MDTypography, { component: "a", href: `#${href}`, variant: "button", fontWeight: "regular", textTransform: "capitalize", sx: ({ borders: { borderRadius }, functions: { pxToRem }, palette: { light }, transitions, }) => ({ + display: "flex", + alignItems: "center", + borderRadius: borderRadius.md, + padding: `${pxToRem(10)} ${pxToRem(16)}`, + transition: transitions.create("background-color", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.shorter, + }), + "&:hover": { + backgroundColor: light.main, + }, + }), children: [jsxRuntime.jsx(MDBox, { mr: 1.5, lineHeight: 1, color: darkMode ? "white" : "dark", children: jsxRuntime.jsx(Icon__default["default"], { fontSize: "small", children: icon }) }), label] }) }, itemKey)); + }); + return (jsxRuntime.jsx(Card__default["default"], { sx: { + borderRadius: ({ borders: { borderRadius } }) => borderRadius.lg, + position: "sticky", + top: "1%", + }, children: jsxRuntime.jsx(MDBox, { component: "ul", display: "flex", flexDirection: "column", p: 2, m: 0, sx: { listStyle: "none" }, children: renderSidenavItems }) })); +} + +function Header() { + const [visible, setVisible] = react.useState(true); + const handleSetVisible = () => setVisible(!visible); + return (jsxRuntime.jsx(Card__default["default"], { id: "profile", children: jsxRuntime.jsx(MDBox, { p: 2, children: jsxRuntime.jsxs(Grid__default["default"], { container: true, spacing: 3, alignItems: "center", children: [jsxRuntime.jsx(Grid__default["default"], { item: true, children: jsxRuntime.jsx(MDAvatar, { src: burceMars__default["default"], alt: "profile-image", size: "xl", shadow: "sm" }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, children: jsxRuntime.jsxs(MDBox, { height: "100%", mt: 0.5, lineHeight: 1, children: [jsxRuntime.jsx(MDTypography, { variant: "h5", fontWeight: "medium", children: "Alex Thompson" }), jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", fontWeight: "medium", children: "CEO / Co-Founder" })] }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, md: 6, lg: 3, sx: { ml: "auto" }, children: jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: { md: "flex-end" }, alignItems: "center", lineHeight: 1, children: [jsxRuntime.jsxs(MDTypography, { variant: "caption", fontWeight: "regular", children: ["Switch to ", visible ? "invisible" : "visible"] }), jsxRuntime.jsx(MDBox, { ml: 1, children: jsxRuntime.jsx(Switch__default["default"], { checked: visible, onChange: handleSetVisible }) })] }) })] }) }) })); +} + +function FormField({ label, ...rest }) { + return (jsxRuntime.jsx(MDInput, { variant: "standard", label: label, fullWidth: true, InputLabelProps: { shrink: true }, ...rest })); +} +// Declaring default props for FormField +FormField.defaultProps = { + label: " ", +}; + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +const selectData = { + gender: ["Male", "Female"], + birthDate: [ + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December", + ], + days: [ + "1", + "2", + "3", + "4", + "5", + "6", + "7", + "8", + "9", + "10", + "11", + "12", + "13", + "14", + "15", + "16", + "17", + "18", + "19", + "20", + "21", + "22", + "23", + "24", + "25", + "26", + "27", + "28", + "29", + "30", + ], + years: [ + "1900", + "1901", + "1902", + "1903", + "1904", + "1905", + "1906", + "1907", + "1908", + "1909", + "1910", + "1911", + "1912", + "1913", + "1914", + "1915", + "1915", + "1915", + "1916", + "1917", + "1918", + "1919", + "1920", + "1921", + "1922", + "1923", + "1924", + "1925", + "1926", + "1927", + "1928", + "1929", + "1930", + "1931", + "1932", + "1933", + "1934", + "1935", + "1936", + "1937", + "1938", + "1939", + "1940", + "1941", + "1942", + "1943", + "1944", + "1945", + "1946", + "1947", + "1948", + "1949", + "1950", + "1951", + "1952", + "1953", + "1954", + "1955", + "1956", + "1957", + "1958", + "1959", + "1960", + "1961", + "1962", + "1963", + "1964", + "1965", + "1966", + "1967", + "1968", + "1969", + "1970", + "1971", + "1972", + "1973", + "1974", + "1975", + "1976", + "1977", + "1978", + "1979", + "1980", + "1981", + "1982", + "1983", + "1984", + "1985", + "1986", + "1987", + "1988", + "1989", + "1990", + "1991", + "1992", + "1993", + "1994", + "1995", + "1996", + "1997", + "1998", + "1999", + "2000", + "2001", + "2002", + "2003", + "2004", + "2005", + "2006", + "2007", + "2008", + "2009", + "2010", + "2011", + "2012", + "2013", + "2014", + "2015", + "2016", + "2017", + "2018", + "2019", + "2020", + "2021", + ], + skills: ["react", "vue", "angular", "svelte", "javascript"], +}; + +function BasicInfo() { + return (jsxRuntime.jsxs(Card__default["default"], { id: "basic-info", sx: { overflow: "visible" }, children: [jsxRuntime.jsx(MDBox, { p: 3, children: jsxRuntime.jsx(MDTypography, { variant: "h5", children: "Basic Info" }) }), jsxRuntime.jsx(MDBox, { component: "form", pb: 3, px: 3, children: jsxRuntime.jsxs(Grid__default["default"], { container: true, spacing: 3, children: [jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, sm: 6, children: jsxRuntime.jsx(FormField, { label: "First Name", placeholder: "Alec" }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, sm: 6, children: jsxRuntime.jsx(FormField, { label: "Last Name", placeholder: "Thompson" }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, children: jsxRuntime.jsxs(Grid__default["default"], { container: true, spacing: 3, children: [jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, sm: 4, children: jsxRuntime.jsx(Autocomplete__default["default"], { defaultValue: "Male", options: selectData.gender, renderInput: (params) => (jsxRuntime.jsx(FormField, { ...params, label: "I'm", InputLabelProps: { shrink: true } })) }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, sm: 8, children: jsxRuntime.jsxs(Grid__default["default"], { container: true, spacing: 3, children: [jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, sm: 5, children: jsxRuntime.jsx(Autocomplete__default["default"], { defaultValue: "February", options: selectData.birthDate, renderInput: (params) => (jsxRuntime.jsx(FormField, { ...params, label: "Birth Date", InputLabelProps: { shrink: true } })) }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, sm: 4, children: jsxRuntime.jsx(Autocomplete__default["default"], { defaultValue: "1", options: selectData.days, renderInput: (params) => (jsxRuntime.jsx(FormField, { ...params, InputLabelProps: { shrink: true } })) }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, sm: 3, children: jsxRuntime.jsx(Autocomplete__default["default"], { defaultValue: "2021", options: selectData.years, renderInput: (params) => (jsxRuntime.jsx(FormField, { ...params, InputLabelProps: { shrink: true } })) }) })] }) })] }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, sm: 6, children: jsxRuntime.jsx(FormField, { label: "Email", placeholder: "example@email.com", inputProps: { type: "email" } }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, sm: 6, children: jsxRuntime.jsx(FormField, { label: "confirmation email", placeholder: "example@email.com", inputProps: { type: "email" } }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, sm: 6, children: jsxRuntime.jsx(FormField, { label: "your location", placeholder: "Sydney, A" }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, sm: 6, children: jsxRuntime.jsx(FormField, { label: "Phone Number", placeholder: "+40 735 631 620", inputProps: { type: "number" } }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, md: 6, children: jsxRuntime.jsx(FormField, { label: "Language", placeholder: "English" }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, md: 6, children: jsxRuntime.jsx(Autocomplete__default["default"], { multiple: true, defaultValue: ["react", "angular"], options: selectData.skills, renderInput: (params) => jsxRuntime.jsx(FormField, { ...params, InputLabelProps: { shrink: true } }) }) })] }) })] })); +} + +function ChangePassword() { + const passwordRequirements = [ + "One special characters", + "Min 6 characters", + "One number (2 are recommended)", + "Change it often", + ]; + const renderPasswordRequirements = passwordRequirements.map((item, key) => { + const itemKey = `element-${key}`; + return (jsxRuntime.jsx(MDBox, { component: "li", color: "text", fontSize: "1.25rem", lineHeight: 1, children: jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", fontWeight: "regular", verticalAlign: "middle", children: item }) }, itemKey)); + }); + return (jsxRuntime.jsxs(Card__default["default"], { id: "change-password", children: [jsxRuntime.jsx(MDBox, { p: 3, children: jsxRuntime.jsx(MDTypography, { variant: "h5", children: "Change Password" }) }), jsxRuntime.jsxs(MDBox, { component: "form", pb: 3, px: 3, children: [jsxRuntime.jsxs(Grid__default["default"], { container: true, spacing: 3, children: [jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, children: jsxRuntime.jsx(MDInput, { fullWidth: true, label: "Current Password", inputProps: { type: "password", autoComplete: "" } }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, children: jsxRuntime.jsx(MDInput, { fullWidth: true, label: "New Password", inputProps: { type: "password", autoComplete: "" } }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, children: jsxRuntime.jsx(MDInput, { fullWidth: true, label: "Confirm New Password", inputProps: { type: "password", autoComplete: "" } }) })] }), jsxRuntime.jsx(MDBox, { mt: 6, mb: 1, children: jsxRuntime.jsx(MDTypography, { variant: "h5", children: "Password requirements" }) }), jsxRuntime.jsx(MDBox, { mb: 1, children: jsxRuntime.jsx(MDTypography, { variant: "body2", color: "text", children: "Please follow this guide for a strong password" }) }), jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", children: [jsxRuntime.jsx(MDBox, { component: "ul", m: 0, pl: 3.25, mb: { xs: 8, sm: 0 }, children: renderPasswordRequirements }), jsxRuntime.jsx(MDBox, { ml: "auto", children: jsxRuntime.jsx(MDButton, { variant: "gradient", color: "dark", size: "small", children: "update password" }) })] })] })] })); +} + +function Authentication() { + return (jsxRuntime.jsxs(Card__default["default"], { id: "2fa", sx: { overflow: "visible" }, children: [jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", p: 3, children: [jsxRuntime.jsx(MDTypography, { variant: "h5", children: "Two-factor authentication" }), jsxRuntime.jsx(MDBadge, { variant: "contained", color: "success", badgeContent: "enabled", container: true })] }), jsxRuntime.jsxs(MDBox, { p: 3, children: [jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsxRuntime.jsx(MDTypography, { variant: "body2", color: "text", children: "Security keys" }), jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsxRuntime.jsx(MDBox, { mx: { xs: 0, sm: 2 }, mb: { xs: 1, sm: 0 }, children: jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", fontWeight: "regular", children: "No Security keys" }) }), jsxRuntime.jsx(MDButton, { variant: "outlined", color: "dark", size: "small", children: "add" })] })] }), jsxRuntime.jsx(Divider__default["default"], {}), jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsxRuntime.jsx(MDTypography, { variant: "body2", color: "text", children: "SMS number" }), jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsxRuntime.jsx(MDBox, { mx: { xs: 0, sm: 2 }, mb: { xs: 1, sm: 0 }, children: jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", fontWeight: "regular", children: "+3012374423" }) }), jsxRuntime.jsx(MDButton, { variant: "outlined", color: "dark", size: "small", children: "edit" })] })] }), jsxRuntime.jsx(Divider__default["default"], {}), jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsxRuntime.jsx(MDTypography, { variant: "body2", color: "text", children: "Authenticator app" }), jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsxRuntime.jsx(MDBox, { mx: { xs: 0, sm: 2 }, mb: { xs: 1, sm: 0 }, children: jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", fontWeight: "regular", children: "Not Configured" }) }), jsxRuntime.jsx(MDButton, { variant: "outlined", color: "dark", size: "small", children: "set up" })] })] })] })] })); +} + +function Accounts() { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + const [slack2FA, setSlack2FA] = react.useState(true); + const [spotify2FA, setSpotify2FA] = react.useState(true); + const [atlassian2FA, setAtlassian2FA] = react.useState(true); + const [asana2FA, setAsana2FA] = react.useState(false); + const handleSetSlack2FA = () => setSlack2FA(!slack2FA); + const handleSetSpotify2FA = () => setSpotify2FA(!spotify2FA); + const handleSetAtlassian2FA = () => setAtlassian2FA(!atlassian2FA); + const handleSetAsana2FA = () => setAsana2FA(!asana2FA); + return (jsxRuntime.jsxs(Card__default["default"], { id: "accounts", children: [jsxRuntime.jsxs(MDBox, { p: 3, lineHeight: 1, children: [jsxRuntime.jsx(MDBox, { mb: 1, children: jsxRuntime.jsx(MDTypography, { variant: "h5", children: "Accounts" }) }), jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", children: "Here you can setup and manage your integration settings." })] }), jsxRuntime.jsxs(MDBox, { pt: 2, pb: 3, px: 3, children: [jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsxRuntime.jsx(MDAvatar, { src: logoSlack__default["default"], alt: "Slack logo", variant: "rounded" }), jsxRuntime.jsxs(MDBox, { ml: 2, children: [jsxRuntime.jsx(MDTypography, { variant: "h5", fontWeight: "medium", children: "Slack" }), jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "flex-end", children: [jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", children: "Show less" }), jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", sx: { lineHeight: 0 }, children: jsxRuntime.jsx(Icon__default["default"], { fontSize: "small", children: "expand_less" }) })] })] })] }), jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", justifyContent: "flex-end", width: { xs: "100%", sm: "auto" }, mt: { xs: 1, sm: 0 }, children: [jsxRuntime.jsx(MDBox, { lineHeight: 0, mx: 2, children: jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", children: slack2FA ? "Enabled" : "Disabled" }) }), jsxRuntime.jsx(MDBox, { mr: 1, children: jsxRuntime.jsx(Switch__default["default"], { checked: slack2FA, onChange: handleSetSlack2FA }) })] })] }), jsxRuntime.jsxs(MDBox, { ml: 2, pl: 6, pt: 2, lineHeight: 1, children: [jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", children: "You haven't added your Slack yet or you aren't authorized. Please add our Slack Bot to your account by clicking on here. When you've added the bot, send your verification code that you have received." }), jsxRuntime.jsxs(MDBox, { bgColor: darkMode ? "grey-900" : "grey-100", borderRadius: "lg", display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, my: 3, py: 1, pl: { xs: 1, sm: 2 }, pr: 1, children: [jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "medium", color: "text", children: "Verification Code" }), jsxRuntime.jsx(MDBox, { width: { xs: "100%", sm: "25%", md: "15%" }, mt: { xs: 1, sm: 0 }, children: jsxRuntime.jsx(Tooltip__default["default"], { title: "Copy", placement: "top", children: jsxRuntime.jsx(MDInput, { size: "small", value: "1172913" }) }) })] }), jsxRuntime.jsxs(MDBox, { bgColor: darkMode ? "grey-900" : "grey-100", borderRadius: "lg", display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, my: 3, py: 1, pl: { xs: 1, sm: 2 }, pr: 1, children: [jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "medium", color: "text", children: "Connected account" }), jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsxRuntime.jsx(MDBox, { mr: 2, mb: { xs: 1, sm: 0 }, lineHeight: 0, children: jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "medium", children: "hello@creative-tim.com" }) }), jsxRuntime.jsx(MDButton, { variant: "gradient", color: "dark", size: "small", children: "delete" })] })] })] }), jsxRuntime.jsx(Divider__default["default"], {}), jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsxRuntime.jsx(MDAvatar, { src: logoSpotify__default["default"], alt: "Slack logo", variant: "rounded" }), jsxRuntime.jsxs(MDBox, { ml: 2, lineHeight: 0, children: [jsxRuntime.jsx(MDTypography, { variant: "h5", fontWeight: "medium", children: "Spotify" }), jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", children: "Music" })] })] }), jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "flex-end", alignItems: "center", width: { xs: "100%", sm: "auto" }, mt: { xs: 1, sm: 0 }, children: [jsxRuntime.jsx(MDBox, { lineHeight: 0, mx: 2, children: jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", children: spotify2FA ? "Enabled" : "Disabled" }) }), jsxRuntime.jsx(MDBox, { mr: 1, children: jsxRuntime.jsx(Switch__default["default"], { checked: spotify2FA, onChange: handleSetSpotify2FA }) })] })] }), jsxRuntime.jsx(Divider__default["default"], {}), jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsxRuntime.jsx(MDAvatar, { src: logoAtlassian__default["default"], alt: "Slack logo", variant: "rounded" }), jsxRuntime.jsxs(MDBox, { ml: 2, lineHeight: 0, children: [jsxRuntime.jsx(MDTypography, { variant: "h5", fontWeight: "medium", children: "Atlassian" }), jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", children: "Payment vendor" })] })] }), jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "flex-end", alignItems: "center", width: { xs: "100%", sm: "auto" }, mt: { xs: 1, sm: 0 }, children: [jsxRuntime.jsx(MDBox, { lineHeight: 0, mx: 2, children: jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", children: atlassian2FA ? "Enabled" : "Disabled" }) }), jsxRuntime.jsx(MDBox, { mr: 1, children: jsxRuntime.jsx(Switch__default["default"], { checked: atlassian2FA, onChange: handleSetAtlassian2FA }) })] })] }), jsxRuntime.jsx(Divider__default["default"], {}), jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsxRuntime.jsx(MDAvatar, { src: logoAsana__default["default"], alt: "Slack logo", variant: "rounded" }), jsxRuntime.jsxs(MDBox, { ml: 2, lineHeight: 0, children: [jsxRuntime.jsx(MDTypography, { variant: "h5", fontWeight: "medium", children: "Asana" }), jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", children: "Organize your team" })] })] }), jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", justifyContent: "flex-end", width: { xs: "100%", sm: "auto" }, mt: { xs: 1, sm: 0 }, children: [jsxRuntime.jsx(MDBox, { lineHeight: 0, mx: 2, children: jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", children: asana2FA ? "Enabled" : "Disabled" }) }), jsxRuntime.jsx(MDBox, { mr: 1, children: jsxRuntime.jsx(Switch__default["default"], { checked: asana2FA, onChange: handleSetAsana2FA }) })] })] })] })] })); +} + +function TableCell({ width, align, padding, noBorder, children }) { + return (jsxRuntime.jsx(MDBox, { component: "th", width: width, pt: padding[0], pr: padding[1], pb: padding[2], pl: padding[3], textAlign: align, sx: { + border: ({ borders: { borderWidth }, palette: { light } }) => noBorder ? 0 : `${borderWidth[1]} solid ${light.main}`, + }, children: jsxRuntime.jsx(MDTypography, { component: "div", variant: "body2", color: "text", children: children }) })); +} +// Declaring default props for TableCell +TableCell.defaultProps = { + width: "auto", + align: "left", + padding: [], + noBorder: false, +}; + +function Notifications() { + return (jsxRuntime.jsxs(Card__default["default"], { id: "notifications", children: [jsxRuntime.jsxs(MDBox, { p: 3, lineHeight: 1, children: [jsxRuntime.jsx(MDBox, { mb: 1, children: jsxRuntime.jsx(MDTypography, { variant: "h5", children: "Notifications" }) }), jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", children: "Choose how you receive notifications. These notification settings apply to the things you\u2019re watching." })] }), jsxRuntime.jsx(MDBox, { pb: 3, px: 3, children: jsxRuntime.jsx(MDBox, { minWidth: "auto", sx: { overflow: "scroll" }, children: jsxRuntime.jsxs(Table__default["default"], { sx: { minWidth: "36rem" }, children: [jsxRuntime.jsx(MDBox, { component: "thead", children: jsxRuntime.jsxs(TableRow__default["default"], { children: [jsxRuntime.jsx(TableCell, { width: "100%", padding: [1.5, 3, 1.5, 0.5], children: "Activity" }), jsxRuntime.jsx(TableCell, { align: "center", padding: [1.5, 6, 1.5, 6], children: "Email" }), jsxRuntime.jsx(TableCell, { align: "center", padding: [1.5, 6, 1.5, 6], children: "Push" }), jsxRuntime.jsx(TableCell, { align: "center", padding: [1.5, 6, 1.5, 6], children: "SMS" })] }) }), jsxRuntime.jsxs(TableBody__default["default"], { children: [jsxRuntime.jsxs(TableRow__default["default"], { children: [jsxRuntime.jsx(TableCell, { padding: [1, 1, 1, 0.5], children: jsxRuntime.jsxs(MDBox, { lineHeight: 1.4, children: [jsxRuntime.jsx(MDTypography, { display: "block", variant: "button", fontWeight: "regular", children: "Mentions" }), jsxRuntime.jsx(MDTypography, { variant: "caption", color: "text", fontWeight: "regular", children: "Notify when another user mentions you in a comment" })] }) }), jsxRuntime.jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsxRuntime.jsx(Switch__default["default"], { defaultChecked: true }) }), jsxRuntime.jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsxRuntime.jsx(Switch__default["default"], {}) }), jsxRuntime.jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsxRuntime.jsx(Switch__default["default"], {}) })] }), jsxRuntime.jsxs(TableRow__default["default"], { children: [jsxRuntime.jsx(TableCell, { padding: [1, 1, 1, 0.5], children: jsxRuntime.jsxs(MDBox, { lineHeight: 1.4, children: [jsxRuntime.jsx(MDTypography, { display: "block", variant: "button", fontWeight: "regular", children: "Comments" }), jsxRuntime.jsx(MDTypography, { variant: "caption", color: "text", fontWeight: "regular", children: "Notify when another user comments your item." })] }) }), jsxRuntime.jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsxRuntime.jsx(Switch__default["default"], { defaultChecked: true }) }), jsxRuntime.jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsxRuntime.jsx(Switch__default["default"], { defaultChecked: true }) }), jsxRuntime.jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsxRuntime.jsx(Switch__default["default"], {}) })] }), jsxRuntime.jsxs(TableRow__default["default"], { children: [jsxRuntime.jsx(TableCell, { padding: [1, 1, 1, 0.5], children: jsxRuntime.jsxs(MDBox, { lineHeight: 1.4, children: [jsxRuntime.jsx(MDTypography, { display: "block", variant: "button", fontWeight: "regular", children: "Follows" }), jsxRuntime.jsx(MDTypography, { variant: "caption", color: "text", fontWeight: "regular", children: "Notify when another user follows you." })] }) }), jsxRuntime.jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsxRuntime.jsx(Switch__default["default"], {}) }), jsxRuntime.jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsxRuntime.jsx(Switch__default["default"], { defaultChecked: true }) }), jsxRuntime.jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsxRuntime.jsx(Switch__default["default"], {}) })] }), jsxRuntime.jsxs(TableRow__default["default"], { children: [jsxRuntime.jsx(TableCell, { padding: [1, 1, 1, 0.5], noBorder: true, children: jsxRuntime.jsx(MDTypography, { display: "block", variant: "button", color: "text", children: "Log in from a new device" }) }), jsxRuntime.jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], noBorder: true, children: jsxRuntime.jsx(Switch__default["default"], { defaultChecked: true }) }), jsxRuntime.jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], noBorder: true, children: jsxRuntime.jsx(Switch__default["default"], { defaultChecked: true }) }), jsxRuntime.jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], noBorder: true, children: jsxRuntime.jsx(Switch__default["default"], { defaultChecked: true }) })] })] })] }) }) })] })); +} + +function Sessions() { + const actionButtonStyles = { + "& .material-icons-round": { + transform: `translateX(0)`, + transition: "all 200ms cubic-bezier(0.34,1.61,0.7,1.3)", + }, + "&:hover .material-icons-round, &:focus .material-icons-round": { + transform: `translateX(4px)`, + }, + }; + return (jsxRuntime.jsxs(Card__default["default"], { id: "sessions", children: [jsxRuntime.jsxs(MDBox, { p: 3, lineHeight: 1, children: [jsxRuntime.jsx(MDBox, { mb: 1, children: jsxRuntime.jsx(MDTypography, { variant: "h5", children: "Sessions" }) }), jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", fontWeight: "regular", children: "This is a list of devices that have logged into your account. Remove those that you do not recognize." })] }), jsxRuntime.jsxs(MDBox, { pb: 3, px: 3, sx: { overflow: "auto" }, children: [jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", width: { xs: "max-content", sm: "100%" }, children: [jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsxRuntime.jsx(MDBox, { textAlign: "center", color: "text", px: { xs: 0, md: 1.5 }, opacity: 0.6, children: jsxRuntime.jsx(Icon__default["default"], { children: "desktop_windows" }) }), jsxRuntime.jsxs(MDBox, { height: "100%", ml: 2, lineHeight: 1, mr: 2, children: [jsxRuntime.jsx(MDTypography, { display: "block", variant: "button", fontWeight: "regular", color: "text", children: "Bucharest 68.133.163.201" }), jsxRuntime.jsx(MDTypography, { variant: "caption", color: "text", children: "Your current session" })] })] }), jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsxRuntime.jsx(MDBadge, { variant: "contained", size: "xs", badgeContent: "active", color: "success", container: true }), jsxRuntime.jsx(MDBox, { mx: 2, lineHeight: 1, children: jsxRuntime.jsx(MDTypography, { variant: "button", color: "secondary", fontWeight: "regular", children: "EU" }) }), jsxRuntime.jsxs(MDTypography, { component: "a", href: "#", variant: "button", color: "info", fontWeight: "regular", sx: actionButtonStyles, children: ["See more\u00A0", jsxRuntime.jsx(Icon__default["default"], { sx: { fontWeight: "bold", verticalAlign: "middle" }, children: "arrow_forward" })] })] })] }), jsxRuntime.jsx(Divider__default["default"], {}), jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", width: { xs: "max-content", sm: "100%" }, children: [jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", mr: 2, children: [jsxRuntime.jsx(MDBox, { textAlign: "center", color: "text", px: { xs: 0, md: 1.5 }, opacity: 0.6, children: jsxRuntime.jsx(Icon__default["default"], { children: "desktop_windows" }) }), jsxRuntime.jsx(MDBox, { ml: 2, children: jsxRuntime.jsx(MDTypography, { display: "block", variant: "body2", fontWeight: "regular", color: "text", children: "Chrome on macOS" }) })] }), jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsxRuntime.jsx(MDBox, { mx: 2, lineHeight: 1, children: jsxRuntime.jsx(MDTypography, { variant: "button", color: "secondary", fontWeight: "regular", children: "US" }) }), jsxRuntime.jsxs(MDTypography, { component: "a", href: "#", variant: "button", color: "info", fontWeight: "regular", sx: actionButtonStyles, children: ["See more\u00A0", jsxRuntime.jsx(Icon__default["default"], { sx: { fontWeight: "bold", verticalAlign: "middle" }, children: "arrow_forward" })] })] })] }), jsxRuntime.jsx(Divider__default["default"], {}), jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", width: { xs: "max-content", sm: "100%" }, children: [jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", mr: 2, children: [jsxRuntime.jsx(MDBox, { textAlign: "center", color: "text", px: { xs: 0, md: 1.5 }, opacity: 0.6, children: jsxRuntime.jsx(Icon__default["default"], { children: "phone_iphone" }) }), jsxRuntime.jsx(MDBox, { ml: 2, children: jsxRuntime.jsx(MDTypography, { display: "block", variant: "body2", fontWeight: "regular", color: "text", children: "Safari on iPhone" }) })] }), jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsxRuntime.jsx(MDBox, { mx: 2, lineHeight: 1, children: jsxRuntime.jsx(MDTypography, { variant: "button", color: "secondary", fontWeight: "regular", children: "US" }) }), jsxRuntime.jsxs(MDTypography, { component: "a", href: "#", variant: "button", color: "info", fontWeight: "regular", sx: actionButtonStyles, children: ["See more\u00A0", jsxRuntime.jsx(Icon__default["default"], { sx: { fontWeight: "bold", verticalAlign: "middle" }, children: "arrow_forward" })] })] })] })] })] })); +} + +function DeleteAccount() { + return (jsxRuntime.jsx(Card__default["default"], { id: "delete-account", children: jsxRuntime.jsxs(MDBox, { pr: 3, display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsxRuntime.jsxs(MDBox, { p: 3, lineHeight: 1, children: [jsxRuntime.jsx(MDBox, { mb: 1, children: jsxRuntime.jsx(MDTypography, { variant: "h5", children: "Delete Account" }) }), jsxRuntime.jsx(MDTypography, { variant: "button", color: "text", children: "Once you delete your account, there is no going back. Please be certain." })] }), jsxRuntime.jsxs(MDBox, { display: "flex", flexDirection: { xs: "column", sm: "row" }, children: [jsxRuntime.jsx(MDButton, { variant: "outlined", color: "secondary", children: "deactivate" }), jsxRuntime.jsx(MDBox, { ml: { xs: 0, sm: 1 }, mt: { xs: 1, sm: 0 }, children: jsxRuntime.jsx(MDButton, { variant: "gradient", color: "error", sx: { height: "100%" }, children: "delete account" }) })] })] }) })); +} + +function Settings() { + return (jsxRuntime.jsx(BaseLayout, { children: jsxRuntime.jsx(MDBox, { mt: 4, children: jsxRuntime.jsxs(Grid__default["default"], { container: true, spacing: 3, children: [jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, lg: 3, children: jsxRuntime.jsx(Sidenav, {}) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, lg: 9, children: jsxRuntime.jsx(MDBox, { mb: 3, children: jsxRuntime.jsxs(Grid__default["default"], { container: true, spacing: 3, children: [jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, children: jsxRuntime.jsx(Header, {}) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, children: jsxRuntime.jsx(BasicInfo, {}) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, children: jsxRuntime.jsx(ChangePassword, {}) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, children: jsxRuntime.jsx(Authentication, {}) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, children: jsxRuntime.jsx(Accounts, {}) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, children: jsxRuntime.jsx(Notifications, {}) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, children: jsxRuntime.jsx(Sessions, {}) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 12, children: jsxRuntime.jsx(DeleteAccount, {}) })] }) }) })] }) }) })); +} + +function DefaultNavbarDropdown({ name, icon, children, collapseStatus, light, href, route, collapse, ...rest }) { + const linkComponent = { + component: "a", + href, + target: "_blank", + rel: "noreferrer", + }; + const routeComponent = { + component: reactRouterDom.Link, + to: route, + }; + return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(MDBox, { ...rest, mx: 1, p: 1, display: "flex", alignItems: "baseline", color: light ? "white" : "dark", opacity: light ? 1 : 0.6, sx: { cursor: "pointer", userSelect: "none" }, ...(route && routeComponent), ...(href && linkComponent), children: [jsxRuntime.jsx(MDTypography, { variant: "body2", lineHeight: 1, color: "inherit", sx: { alignSelf: "center", "& *": { verticalAlign: "middle" } }, children: icon }), jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "regular", textTransform: "capitalize", color: light ? "white" : "dark", sx: { fontWeight: "100%", ml: 1, mr: 0.25 }, children: name }), jsxRuntime.jsx(MDTypography, { variant: "body2", color: light ? "white" : "dark", ml: "auto", children: jsxRuntime.jsx(Icon__default["default"], { sx: { fontWeight: "normal", verticalAlign: "middle" }, children: collapse && "keyboard_arrow_down" }) })] }), children && (jsxRuntime.jsx(Collapse__default["default"], { in: Boolean(collapseStatus), timeout: 400, unmountOnExit: true, children: children }))] })); +} +// Declaring default props for DefaultNavbarDropdown +DefaultNavbarDropdown.defaultProps = { + icon: false, + children: false, + collapseStatus: false, + light: false, + href: "", + route: "", +}; + +function DefaultNavbarMobile({ routes, open }) { + const [collapse, setCollapse] = react.useState(""); + const handleSetCollapse = (name) => collapse === name ? setCollapse(false) : setCollapse(name); + const renderNavbarItems = routes.map(({ name, icon, collapse: routeCollapses, href, route, collapse: navCollapse }) => (jsxRuntime.jsx(DefaultNavbarDropdown, { name: name, icon: icon, collapseStatus: name === collapse, onClick: () => handleSetCollapse(name), href: href, route: route, collapse: Boolean(navCollapse), children: jsxRuntime.jsx(MDBox, { sx: { height: "15rem", maxHeight: "15rem", overflowY: "scroll" }, children: routeCollapses && + routeCollapses.map((item) => (jsxRuntime.jsx(MDBox, { px: 2, children: item.collapse ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MDTypography, { display: "block", variant: "button", fontWeight: "bold", textTransform: "capitalize", py: 1, px: 0.5, children: item.name }), item.collapse.map((el) => (jsxRuntime.jsx(MDTypography, { component: el.route ? reactRouterDom.Link : Link__default["default"], to: el.route ? el.route : "", href: el.href ? el.href : "", target: el.href ? "_blank" : "", rel: el.href ? "noreferrer" : "noreferrer", minWidth: "11.25rem", display: "block", variant: "button", color: "text", textTransform: "capitalize", fontWeight: "regular", py: 0.625, px: 2, sx: ({ palette: { grey, dark }, borders: { borderRadius } }) => ({ + borderRadius: borderRadius.md, + cursor: "pointer", + transition: "all 300ms linear", + "&:hover": { + backgroundColor: grey[200], + color: dark.main, + }, + }), children: el.name }, el.name)))] })) : (jsxRuntime.jsxs(MDBox, { display: "block", component: item.route ? reactRouterDom.Link : Link__default["default"], to: item.route ? item.route : "", href: item.href ? item.href : "", target: item.href ? "_blank" : "", rel: item.href ? "noreferrer" : "noreferrer", sx: ({ palette: { grey, dark }, borders: { borderRadius } }) => ({ + borderRadius: borderRadius.md, + cursor: "pointer", + transition: "all 300ms linear", + py: 1, + px: 1.625, + "&:hover": { + backgroundColor: grey[200], + color: dark.main, + "& *": { + color: dark.main, + }, + }, + }), children: [jsxRuntime.jsx(MDTypography, { display: "block", variant: "button", fontWeight: "bold", textTransform: "capitalize", children: item.name }), jsxRuntime.jsx(MDTypography, { display: "block", variant: "button", color: "text", fontWeight: "regular", sx: { transition: "all 300ms linear" }, children: item.description })] }, item.key)) }, item.name))) }) }, name))); + return (jsxRuntime.jsx(Collapse__default["default"], { in: Boolean(open), timeout: "auto", unmountOnExit: true, children: jsxRuntime.jsx(MDBox, { width: "calc(100% + 1.625rem)", my: 2, ml: -2, children: renderNavbarItems }) })); +} + +function NewGrow(props) { + return jsxRuntime.jsx(Grow__default["default"], { ...props }); +} +function DefaultNavbar({ routes, brand, transparent, light, action }) { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + const [dropdown, setDropdown] = react.useState(""); + const [dropdownEl, setDropdownEl] = react.useState(""); + const [dropdownName, setDropdownName] = react.useState(""); + const [nestedDropdown, setNestedDropdown] = react.useState(""); + const [nestedDropdownEl, setNestedDropdownEl] = react.useState(""); + const [nestedDropdownName, setNestedDropdownName] = react.useState(""); + const [arrowRef, setArrowRef] = react.useState(null); + const [mobileNavbar, setMobileNavbar] = react.useState(false); + const [mobileView, setMobileView] = react.useState(false); + const openMobileNavbar = () => setMobileNavbar(!mobileNavbar); + react.useEffect(() => { + // A function that sets the display state for the DefaultNavbarMobile. + function displayMobileNavbar() { + if (window.innerWidth < breakpoints$1.values.lg) { + setMobileView(true); + setMobileNavbar(false); + } + else { + setMobileView(false); + setMobileNavbar(false); + } + } + /** + The event listener that's calling the displayMobileNavbar function when + resizing the window. + */ + window.addEventListener("resize", displayMobileNavbar); + // Call the displayMobileNavbar function to set the state with the initial value. + displayMobileNavbar(); + // Remove event listener on cleanup + return () => window.removeEventListener("resize", displayMobileNavbar); + }, []); + const renderNavbarItems = routes.map(({ name, icon, href, route, collapse }) => (jsxRuntime.jsx(DefaultNavbarDropdown, { name: name, icon: icon, href: href, route: route, collapse: Boolean(collapse), onMouseEnter: ({ currentTarget }) => { + if (collapse) { + setDropdown(currentTarget); + setDropdownEl(currentTarget); + setDropdownName(name); + } + }, onMouseLeave: () => collapse && setDropdown(null), light: light }, name))); + // Render the routes on the dropdown menu + const renderRoutes = routes.map(({ name, collapse, columns, rowsPerColumn }) => { + let template; + // Render the dropdown menu that should be display as columns + if (collapse && columns && name === dropdownName) { + const calculateColumns = collapse.reduce((resultArray, item, index) => { + const chunkIndex = Math.floor(index / rowsPerColumn); + if (!resultArray[chunkIndex]) { + resultArray[chunkIndex] = []; + } + resultArray[chunkIndex].push(item); + return resultArray; + }, []); + template = (jsxRuntime.jsx(Grid__default["default"], { container: true, spacing: 3, py: 1, px: 1.5, children: calculateColumns.map((cols, key) => { + const gridKey = `grid-${key}`; + const dividerKey = `divider-${key}`; + return (jsxRuntime.jsxs(Grid__default["default"], { item: true, xs: 12 / columns, sx: { position: "relative" }, children: [cols.map((col, index) => (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsxs(MDBox, { width: "100%", display: "flex", alignItems: "center", py: 1, mt: index !== 0 ? 2 : 0, children: [jsxRuntime.jsx(MDBox, { display: "flex", justifyContent: "center", alignItems: "center", width: "1.5rem", height: "1.5rem", borderRadius: "md", color: "text", mr: 1, fontSize: "1rem", lineHeight: 1, children: col.icon }), jsxRuntime.jsx(MDTypography, { display: "block", variant: "button", fontWeight: "bold", textTransform: "capitalize", children: col.name })] }), col.collapse.map((item) => (jsxRuntime.jsx(MDTypography, { component: item.route ? reactRouterDom.Link : Link__default["default"], to: item.route ? item.route : "", href: item.href ? item.href : (e) => e.preventDefault(), target: item.href ? "_blank" : "", rel: item.href ? "noreferrer" : "noreferrer", minWidth: "11.25rem", display: "block", variant: "button", color: "text", textTransform: "capitalize", fontWeight: "regular", py: 0.625, px: 2, sx: ({ palette: { grey, dark }, borders: { borderRadius } }) => ({ + borderRadius: borderRadius.md, + cursor: "pointer", + transition: "all 300ms linear", + "&:hover": { + backgroundColor: grey[200], + color: dark.main, + }, + }), children: item.name }, item.name)))] }, col.name))), key !== 0 && (jsxRuntime.jsx(Divider__default["default"], { orientation: "vertical", sx: { + position: "absolute", + top: "50%", + left: "-4px", + transform: "translateY(-45%)", + height: "90%", + } }, dividerKey))] }, gridKey)); + }) }, name)); + // Render the dropdown menu that should be display as list items + } + else if (collapse && name === dropdownName) { + template = collapse.map((item) => { + const linkComponent = { + component: Link__default["default"], + href: item.href, + target: "_blank", + rel: "noreferrer", + }; + const routeComponent = { + component: reactRouterDom.Link, + to: item.route, + }; + return (jsxRuntime.jsxs(MDTypography, { ...(item.route ? routeComponent : linkComponent), display: "flex", justifyContent: "space-between", alignItems: "center", variant: "button", textTransform: "capitalize", minWidth: item.description ? "14rem" : "12rem", color: item.description ? "dark" : "text", fontWeight: item.description ? "bold" : "regular", py: item.description ? 1 : 0.625, px: 2, sx: ({ palette: { grey, dark }, borders: { borderRadius } }) => ({ + borderRadius: borderRadius.md, + cursor: "pointer", + transition: "all 300ms linear", + "&:hover": { + backgroundColor: grey[200], + color: dark.main, + "& *": { + color: dark.main, + }, + }, + }), onMouseEnter: ({ currentTarget }) => { + if (item.dropdown) { + setNestedDropdown(currentTarget); + setNestedDropdownEl(currentTarget); + setNestedDropdownName(item.name); + } + }, onMouseLeave: () => { + if (item.dropdown) { + setNestedDropdown(null); + } + }, children: [item.description ? (jsxRuntime.jsxs(MDBox, { display: "flex", py: 0.25, fontSize: "1rem", color: "text", children: [typeof item.icon === "string" ? (jsxRuntime.jsx(Icon__default["default"], { color: "inherit", children: item.icon })) : (jsxRuntime.jsx(MDBox, { color: "inherit", children: item.icon })), jsxRuntime.jsxs(MDBox, { pl: 1, lineHeight: 0, children: [jsxRuntime.jsx(MDTypography, { variant: "button", display: "block", fontWeight: "bold", textTransform: "capitalize", children: item.name }), jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: item.description })] })] })) : (jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", color: "text", children: [jsxRuntime.jsx(Icon__default["default"], { sx: { mr: 1 }, children: item.icon }), item.name] })), item.collapse && (jsxRuntime.jsx(Icon__default["default"], { sx: { fontWeight: "normal", verticalAlign: "middle", mr: -0.5 }, children: "keyboard_arrow_right" }))] }, item.name)); + }); + } + return template; + }); + // Routes dropdown menu + const dropdownMenu = (jsxRuntime.jsx(Popper__default["default"], { anchorEl: dropdown, popperRef: null, open: Boolean(dropdown), placement: "top-start", transition: true, style: { zIndex: 10 }, modifiers: [ + { + name: "arrow", + enabled: true, + options: { + element: arrowRef, + }, + }, + ], onMouseEnter: () => setDropdown(dropdownEl), onMouseLeave: () => { + if (!nestedDropdown) { + setDropdown(null); + setDropdownName(""); + } + }, children: ({ TransitionProps }) => (jsxRuntime.jsx(NewGrow, { ...TransitionProps, sx: { + transformOrigin: "left top", + background: ({ palette: { white } }) => white.main, + }, children: jsxRuntime.jsxs(MDBox, { borderRadius: "lg", children: [jsxRuntime.jsx(MDTypography, { variant: "h1", color: "white", children: jsxRuntime.jsx(Icon__default["default"], { ref: setArrowRef, sx: { mt: -3 }, children: "arrow_drop_up" }) }), jsxRuntime.jsx(MDBox, { shadow: "lg", borderRadius: "lg", p: 1.625, mt: 1, children: renderRoutes })] }) })) })); + // Render routes that are nested inside the dropdown menu routes + const renderNestedRoutes = routes.map(({ collapse, columns }) => collapse && !columns + ? collapse.map(({ name: parentName, collapse: nestedCollapse }) => { + let template; + if (parentName === nestedDropdownName) { + template = + nestedCollapse && + nestedCollapse.map((item) => { + const linkComponent = { + component: Link__default["default"], + href: item.href, + target: "_blank", + rel: "noreferrer", + }; + const routeComponent = { + component: reactRouterDom.Link, + to: item.route, + }; + return (jsxRuntime.jsxs(MDTypography, { ...(item.route ? routeComponent : linkComponent), display: "flex", justifyContent: "space-between", alignItems: "center", variant: "button", textTransform: "capitalize", minWidth: item.description ? "14rem" : "12rem", color: item.description ? "dark" : "text", fontWeight: item.description ? "bold" : "regular", py: item.description ? 1 : 0.625, px: 2, sx: ({ palette: { grey, dark }, borders: { borderRadius } }) => ({ + borderRadius: borderRadius.md, + cursor: "pointer", + transition: "all 300ms linear", + "&:hover": { + backgroundColor: grey[200], + color: dark.main, + "& *": { + color: dark.main, + }, + }, + }), children: [item.description ? (jsxRuntime.jsxs(MDBox, { children: [item.name, jsxRuntime.jsx(MDTypography, { display: "block", variant: "button", color: "text", fontWeight: "regular", sx: { transition: "all 300ms linear" }, children: item.description })] })) : (item.name), item.collapse && (jsxRuntime.jsx(Icon__default["default"], { fontSize: "small", sx: { fontWeight: "normal", verticalAlign: "middle", mr: -0.5 }, children: "keyboard_arrow_right" }))] }, item.name)); + }); + } + return template; + }) + : null); + // Dropdown menu for the nested dropdowns + const nestedDropdownMenu = (jsxRuntime.jsx(Popper__default["default"], { anchorEl: nestedDropdown, popperRef: null, open: Boolean(nestedDropdown), placement: "right-start", transition: true, style: { zIndex: 10 }, onMouseEnter: () => { + setNestedDropdown(nestedDropdownEl); + }, onMouseLeave: () => { + setNestedDropdown(null); + setNestedDropdownName(""); + setDropdown(null); + }, children: ({ TransitionProps }) => (jsxRuntime.jsx(NewGrow, { ...TransitionProps, sx: { + transformOrigin: "left top", + background: ({ palette: { white } }) => white.main, + }, children: jsxRuntime.jsx(MDBox, { ml: 2.5, mt: -2.5, borderRadius: "lg", children: jsxRuntime.jsx(MDBox, { shadow: "lg", borderRadius: "lg", py: 1.5, px: 1, mt: 2, children: renderNestedRoutes }) }) })) })); + return (jsxRuntime.jsxs(Container__default["default"], { children: [jsxRuntime.jsxs(MDBox, { py: 1, px: { xs: 4, sm: transparent ? 2 : 3, lg: transparent ? 0 : 2 }, my: 3, mx: 3, width: "calc(100% - 48px)", borderRadius: "lg", shadow: transparent ? "none" : "md", color: light ? "white" : "dark", display: "flex", justifyContent: "space-between", alignItems: "center", position: "absolute", left: 0, zIndex: 3, sx: ({ palette: { transparent: transparentColor, white, background }, functions: { rgba }, }) => ({ + backgroundColor: transparent + ? transparentColor.main + : rgba(darkMode ? background.sidenav : white.main, 0.8), + backdropFilter: transparent ? "none" : `saturate(200%) blur(30px)`, + }), children: [jsxRuntime.jsx(MDBox, { component: reactRouterDom.Link, to: "/", py: transparent ? 1.5 : 0.75, lineHeight: 1, pl: { xs: 0, lg: 1 }, children: jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "bold", color: light ? "white" : "dark", children: brand }) }), jsxRuntime.jsx(MDBox, { color: "inherit", display: { xs: "none", lg: "flex" }, m: 0, p: 0, children: renderNavbarItems }), action && + (action.type === "internal" ? (jsxRuntime.jsx(MDBox, { display: { xs: "none", lg: "inline-block" }, children: jsxRuntime.jsx(MDButton, { component: reactRouterDom.Link, to: action.route, variant: "gradient", color: action.color ? action.color : "info", size: "small", children: action.label }) })) : (jsxRuntime.jsx(MDBox, { display: { xs: "none", lg: "inline-block" }, children: jsxRuntime.jsx(MDButton, { component: "a", href: action.route, target: "_blank", rel: "noreferrer", variant: "gradient", color: action.color ? action.color : "info", size: "small", sx: { mt: -0.3 }, children: action.label }) }))), jsxRuntime.jsx(MDBox, { display: { xs: "inline-block", lg: "none" }, lineHeight: 0, py: 1.5, pl: 1.5, color: "inherit", sx: { cursor: "pointer" }, onClick: openMobileNavbar, children: mobileView && jsxRuntime.jsx(DefaultNavbarMobile, { routes: routes, open: mobileNavbar }) })] }), dropdownMenu, nestedDropdownMenu] })); +} +// Declaring default props for DefaultNavbar +DefaultNavbar.defaultProps = { + brand: "Material Dashboard PRO", + transparent: false, + light: false, + action: false, +}; + +function PageLayout({ background, children }) { + const [, dispatch] = useMaterialUIController(); + const { pathname } = reactRouterDom.useLocation(); + react.useEffect(() => { + setLayout(dispatch, "page"); + }, [pathname]); + return (jsxRuntime.jsx(MDBox, { width: "100vw", height: "100%", minHeight: "100vh", bgColor: background, sx: { overflowX: "hidden" }, children: children })); +} +// Declaring default props for PageLayout +PageLayout.defaultProps = { + background: "default", +}; + +const pageRoutes = [ + { + name: "pages", + columns: 3, + rowsPerColumn: 2, + collapse: [ + { + name: "dashboards", + icon: jsxRuntime.jsx(Icon__default["default"], { children: "dashboard" }), + collapse: [ + { + name: "analytics", + route: "/dashboards/analytics", + }, + { + name: "sales", + route: "/dashboards/sales", + }, + ], + }, + { + name: "users", + icon: jsxRuntime.jsx(Icon__default["default"], { children: "people" }), + collapse: [ + { + name: "reports", + route: "/pages/users/reports", + }, + ], + }, + { + name: "extra", + icon: jsxRuntime.jsx(Icon__default["default"], { children: "queue_play_next" }), + collapse: [ + { + name: "pricing page", + route: "/pages/pricing-page", + }, + { name: "RTL", route: "/pages/rtl" }, + { name: "widgets", route: "/pages/widgets" }, + { name: "charts", route: "/pages/charts" }, + { + name: "notfications", + route: "/pages/notifications", + }, + ], + }, + { + name: "projects", + icon: jsxRuntime.jsx(Icon__default["default"], { children: "precision_manufacturing" }), + collapse: [ + { + name: "timeline", + route: "/pages/projects/timeline", + }, + ], + }, + { + name: "account", + icon: jsxRuntime.jsx(Icon__default["default"], { children: "account_balance" }), + collapse: [ + { + name: "settings", + route: "/pages/account/setting", + }, + { + name: "billing", + route: "/pages/account/billing", + }, + { + name: "invoice", + route: "/pages/account/invoice", + }, + ], + }, + { + name: "profile", + icon: jsxRuntime.jsx(Icon__default["default"], { children: "badge" }), + collapse: [ + { + name: "profile overview", + route: "/pages/profile/profile-overview", + }, + { + name: "all projects", + route: "/pages/profile/all-projects", + }, + ], + }, + ], + }, + { + name: "authenticaton", + collapse: [ + { + name: "sign in", + dropdown: true, + icon: jsxRuntime.jsx(Icon__default["default"], { children: "login" }), + collapse: [ + { + name: "basic", + route: "/authentication/sign-in/basic", + }, + { + name: "cover", + route: "/authentication/sign-in/cover", + }, + { + name: "illustration", + route: "/authentication/sign-in/illustration", + }, + ], + }, + { + name: "sign up", + dropdown: true, + icon: jsxRuntime.jsx(Icon__default["default"], { children: "assignment" }), + collapse: [ + { + name: "cover", + route: "/authentication/sign-up/cover", + }, + ], + }, + { + name: "reset password", + dropdown: true, + icon: jsxRuntime.jsx(Icon__default["default"], { children: "restart_alt" }), + collapse: [ + { + name: "cover", + route: "/authentication/reset-password/cover", + }, + ], + }, + ], + }, + { + name: "application", + collapse: [ + { + name: "kanban", + route: "/applications/kanban", + icon: "widgets", + }, + { + name: "wizard", + route: "/applications/wizard", + icon: "import_contacts", + }, + { + name: "data tables", + route: "/applications/data-tables", + icon: "backup_table", + }, + { + name: "calendar", + route: "/applications/calendar", + icon: "event", + }, + ], + }, + { + name: "ecommerce", + columns: 2, + rowsPerColumn: 1, + collapse: [ + { + name: "orders", + icon: jsxRuntime.jsx(Icon__default["default"], { children: "shopping_cart" }), + collapse: [ + { + name: "order list", + route: "/ecommerce/orders/order-list", + }, + { + name: "order details", + route: "/ecommerce/orders/order-details", + }, + ], + }, + { + name: "products", + icon: jsxRuntime.jsx(Icon__default["default"], { children: "memory" }), + collapse: [ + { + name: "new product", + route: "/ecommerce/products/new-product", + }, + { + name: "edit product", + route: "/ecommerce/products/edit-product", + }, + { + name: "product page", + route: "/ecommerce/products/product-page", + }, + ], + }, + ], + }, + { + name: "docs", + collapse: [ + { + name: "getting started", + href: "https://www.creative-tim.com/learning-lab/react/quick-start/material-dashboard/", + description: "All about overview, quick start, license and contents", + icon: jsxRuntime.jsx(Icon__default["default"], { children: "article" }), + }, + { + name: "foundation", + href: "https://www.creative-tim.com/learning-lab/react/colors/material-dashboard/", + description: "See our colors, icons and typography", + icon: jsxRuntime.jsx(Icon__default["default"], { children: "grading" }), + }, + { + name: "components", + href: "https://www.creative-tim.com/learning-lab/react/alerts/material-dashboard/", + description: "Explore our collection of fully designed components", + icon: jsxRuntime.jsx(Icon__default["default"], { children: "apps" }), + }, + { + name: "plugins", + href: "https://www.creative-tim.com/learning-lab/react/datepicker/material-dashboard/", + description: "Check how you can integrate our plugins", + icon: jsxRuntime.jsx(Icon__default["default"], { children: "extension" }), + }, + ], + }, +]; + +function Footer({ light }) { + const { size } = typography$1; + return (jsxRuntime.jsx(MDBox, { position: "absolute", width: "100%", bottom: 0, py: 4, children: jsxRuntime.jsx(Container__default["default"], { children: jsxRuntime.jsxs(MDBox, { width: "100%", display: "flex", flexDirection: { xs: "column", lg: "row" }, justifyContent: "space-between", alignItems: "center", px: 1.5, children: [jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "center", alignItems: "center", flexWrap: "wrap", color: light ? "white" : "text", fontSize: size.sm, children: ["\u00A9 ", new Date().getFullYear(), ", made with", jsxRuntime.jsx(MDBox, { fontSize: size.md, color: light ? "white" : "dark", mb: -0.5, mx: 0.25, children: jsxRuntime.jsx(Icon__default["default"], { color: "inherit", fontSize: "inherit", children: "favorite" }) }), "by", jsxRuntime.jsx(Link__default["default"], { href: "https://www.creative-tim.com/", target: "_blank", children: jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "medium", color: light ? "white" : "dark", children: "\u00A0Creative Tim\u00A0" }) }), "for a better web."] }), jsxRuntime.jsxs(MDBox, { component: "ul", sx: ({ breakpoints }) => ({ + display: "flex", + flexWrap: "wrap", + alignItems: "center", + justifyContent: "center", + listStyle: "none", + mt: 3, + mb: 0, + p: 0, + [breakpoints.up("lg")]: { + mt: 0, + }, + }), children: [jsxRuntime.jsx(MDBox, { component: "li", pr: 2, lineHeight: 1, children: jsxRuntime.jsx(Link__default["default"], { href: "https://www.creative-tim.com/", target: "_blank", children: jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "regular", color: light ? "white" : "dark", children: "Creative Tim" }) }) }), jsxRuntime.jsx(MDBox, { component: "li", px: 2, lineHeight: 1, children: jsxRuntime.jsx(Link__default["default"], { href: "https://www.creative-tim.com/presentation", target: "_blank", children: jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "regular", color: light ? "white" : "dark", children: "About Us" }) }) }), jsxRuntime.jsx(MDBox, { component: "li", px: 2, lineHeight: 1, children: jsxRuntime.jsx(Link__default["default"], { href: "https://www.creative-tim.com/blog", target: "_blank", children: jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "regular", color: light ? "white" : "dark", children: "Blog" }) }) }), jsxRuntime.jsx(MDBox, { component: "li", pl: 2, lineHeight: 1, children: jsxRuntime.jsx(Link__default["default"], { href: "https://www.creative-tim.com/license", target: "_blank", children: jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "regular", color: light ? "white" : "dark", children: "License" }) }) })] })] }) }) })); +} +// Declaring default props for Footer +Footer.defaultProps = { + light: false, +}; + +function BasicLayout({ image, children }) { + return (jsxRuntime.jsxs(PageLayout, { children: [jsxRuntime.jsx(DefaultNavbar, { routes: pageRoutes, action: { + type: "external", + route: "https://creative-tim.com/product/material-dashboard-2-pro-react-ts", + label: "buy now", + color: "info", + }, transparent: true, light: true }), jsxRuntime.jsx(MDBox, { position: "absolute", width: "100%", minHeight: "100vh", sx: { + backgroundImage: ({ functions: { linearGradient, rgba }, palette: { gradients }, }) => image && + `${linearGradient(rgba(gradients.dark.main, 0.6), rgba(gradients.dark.state, 0.6))}, url(${image})`, + backgroundSize: "cover", + backgroundPosition: "center", + backgroundRepeat: "no-repeat", + } }), jsxRuntime.jsx(MDBox, { px: 1, width: "100%", height: "100vh", mx: "auto", children: jsxRuntime.jsx(Grid__default["default"], { container: true, spacing: 1, justifyContent: "center", alignItems: "center", height: "100%", children: jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 11, sm: 9, md: 5, lg: 4, xl: 3, children: children }) }) }), jsxRuntime.jsx(Footer, { light: true })] })); +} + +function Basic() { + const [rememberMe, setRememberMe] = react.useState(false); + const handleSetRememberMe = () => setRememberMe(!rememberMe); + return (jsxRuntime.jsx(BasicLayout, { image: bgImage__default["default"], children: jsxRuntime.jsxs(Card__default["default"], { children: [jsxRuntime.jsxs(MDBox, { variant: "gradient", bgColor: "info", borderRadius: "lg", coloredShadow: "info", mx: 2, mt: -3, p: 2, mb: 1, textAlign: "center", children: [jsxRuntime.jsx(MDTypography, { variant: "h4", fontWeight: "medium", color: "white", mt: 1, children: "Sign in" }), jsxRuntime.jsxs(Grid__default["default"], { container: true, spacing: 3, justifyContent: "center", sx: { mt: 1, mb: 2 }, children: [jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 2, children: jsxRuntime.jsx(MDTypography, { component: Link__default["default"], href: "#", variant: "body1", color: "white", children: jsxRuntime.jsx(FacebookIcon__default["default"], { color: "inherit" }) }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 2, children: jsxRuntime.jsx(MDTypography, { component: Link__default["default"], href: "#", variant: "body1", color: "white", children: jsxRuntime.jsx(GitHubIcon__default["default"], { color: "inherit" }) }) }), jsxRuntime.jsx(Grid__default["default"], { item: true, xs: 2, children: jsxRuntime.jsx(MDTypography, { component: Link__default["default"], href: "#", variant: "body1", color: "white", children: jsxRuntime.jsx(GoogleIcon__default["default"], { color: "inherit" }) }) })] })] }), jsxRuntime.jsx(MDBox, { pt: 4, pb: 3, px: 3, children: jsxRuntime.jsxs(MDBox, { component: "form", role: "form", children: [jsxRuntime.jsx(MDBox, { mb: 2, children: jsxRuntime.jsx(MDInput, { type: "email", label: "Email", fullWidth: true }) }), jsxRuntime.jsx(MDBox, { mb: 2, children: jsxRuntime.jsx(MDInput, { type: "password", label: "Password", fullWidth: true }) }), jsxRuntime.jsxs(MDBox, { display: "flex", alignItems: "center", ml: -1, children: [jsxRuntime.jsx(Switch__default["default"], { checked: rememberMe, onChange: handleSetRememberMe }), jsxRuntime.jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", onClick: handleSetRememberMe, sx: { cursor: "pointer", userSelect: "none", ml: -1 }, children: "\u00A0\u00A0Remember me" })] }), jsxRuntime.jsx(MDBox, { mt: 4, mb: 1, children: jsxRuntime.jsx(MDButton, { variant: "gradient", color: "info", fullWidth: true, children: "sign in" }) }), jsxRuntime.jsx(MDBox, { mt: 3, mb: 1, textAlign: "center", children: jsxRuntime.jsxs(MDTypography, { variant: "button", color: "text", children: ["Don't have an account?", " ", jsxRuntime.jsx(MDTypography, { component: reactRouterDom.Link, to: "/authentication/sign-up/cover", variant: "button", color: "info", fontWeight: "medium", textGradient: true, children: "Sign up" })] }) })] }) })] }) })); +} + +// import DefaultCell from "../../layouts/ecommerce/orders/order-list/components/DefaultCell"; +// import team2 from "../../assets/images/team-2.jpg"; +// import team3 from "../../assets/images/team-3.jpg"; +const qController$1 = new QController.QController("http://localhost:8000"); +console.log(qController$1); +/* +function entityCell({ value }: any) { + const [name, data] = value; + return ( + + ); +} + + */ +let dataTableData = { + columns: [], + rows: [], +}; +function EntityList({ table }) { + const [menu, setMenu] = react.useState(null); + const openMenu = (event) => setMenu(event.currentTarget); + const closeMenu = () => setMenu(null); + (async () => { + await qController$1.loadTableMetaData(table.name).then((tableMetaData) => { + // alert(typeof tableMetaData); + // alert(typeof tableMetaData.fields); + // alert(Object.keys(tableMetaData.fields)); + dataTableData = { + columns: [], + rows: [], + }; + dataTableData.columns.push({ Header: "derp", accessor: "derp", width: "20%" }); + Object.keys(tableMetaData.fields).forEach((key) => { + dataTableData.columns.push({ + Header: key, + accessor: key, + }); + }); + qController$1.query(table.name).then((results) => { + alert(results.length); + results.forEach((record) => { + alert(record); + const row = new Map(); + Object.keys(record.values).forEach((key) => { + row.set(key, record.values.get(key)); + }); + alert(row); + dataTableData.rows.push(row); + }); + }); + dataTableData.rows.push({ + id: "234", + firstName: "tim", + lastName: "chambers", + modifyDate: "8/27/2020", + email: "tim@tim.tim", + createDate: "8/27/2020", + birthDate: "8/27/2020", + }); + /* + Object.keys(tableMetaData.fields).forEach((key) => { + dataTableData.columns.push({ + Header: key, + accessor: key, + Cell: entityCell, + }); + }); + + dataTableData.rows = [ + { + id: "#10421", + date: "1 Nov, 10:20 AM", + status: "paid", + customer: ["Orlando Imieto", { image: team2 }], + product: "Nike Sport V2", + revenue: "$140,20", + }, + ]; + + alert(dataTableData.rows.length); + + */ + }); + })(); + const renderMenu = (jsxRuntime.jsxs(Menu__default["default"], { anchorEl: menu, anchorOrigin: { vertical: "bottom", horizontal: "left" }, transformOrigin: { vertical: "top", horizontal: "left" }, open: Boolean(menu), onClose: closeMenu, keepMounted: true, children: [jsxRuntime.jsx(MenuItem__default["default"], { onClick: closeMenu, children: "Status: Paid" }), jsxRuntime.jsx(MenuItem__default["default"], { onClick: closeMenu, children: "Status: Refunded" }), jsxRuntime.jsx(MenuItem__default["default"], { onClick: closeMenu, children: "Status: Canceled" }), jsxRuntime.jsx(Divider__default["default"], { sx: { margin: "0.5rem 0" } }), jsxRuntime.jsx(MenuItem__default["default"], { onClick: closeMenu, children: jsxRuntime.jsx(MDTypography, { variant: "button", color: "error", fontWeight: "regular", children: "Remove Filter" }) })] })); + return (jsxRuntime.jsxs(DashboardLayout, { children: [jsxRuntime.jsx(DashboardNavbar, {}), jsxRuntime.jsxs(MDBox, { my: 3, children: [jsxRuntime.jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "flex-start", mb: 2, children: [jsxRuntime.jsxs(MDButton, { variant: "gradient", color: "info", children: ["new ", table.label] }), jsxRuntime.jsxs(MDBox, { display: "flex", children: [jsxRuntime.jsxs(MDButton, { variant: menu ? "contained" : "outlined", color: "dark", onClick: openMenu, children: ["filters\u00A0", jsxRuntime.jsx(Icon__default["default"], { children: "keyboard_arrow_down" })] }), renderMenu, jsxRuntime.jsx(MDBox, { ml: 1, children: jsxRuntime.jsxs(MDButton, { variant: "outlined", color: "dark", children: [jsxRuntime.jsx(Icon__default["default"], { children: "description" }), "\u00A0export csv"] }) })] })] }), jsxRuntime.jsx(Card__default["default"], { children: jsxRuntime.jsx(DataTable, { table: dataTableData, entriesPerPage: false, canSearch: true }) })] }), jsxRuntime.jsx(Footer$1, {})] })); +} + +// import { QTableMetaData } from "qqq-frontend-core/lib/model/metaData/QTableMetaData"; +// import thing from "qqq-frontend-core/lib/qqq-frontend-core.js"; +// import QController from "qqq-frontend-core/lib/qqq-frontend-core.js"; +// import {QTableMetaData} from "qqq-frontend-core/lib/model/metaData/QTableMetaData"; +// import {QFieldMetaData} from "qqq-frontend-core/lib/model/metaData/QFieldMetaData"; +// import {QFieldType} from "qqq-frontend-core/lib/model/metaData/QFieldType"; +const qqqRoutes = [ + { + type: "collapse", + name: "Brooklyn Alice", + key: "brooklyn-alice", + icon: jsxRuntime.jsx(MDAvatar, { src: team3__default["default"], alt: "Brooklyn Alice", size: "sm" }), + collapse: [ + { + name: "My Profile", + key: "my-profile", + route: "/pages/profile/profile-overview", + component: jsxRuntime.jsx(Overview, {}), + }, + { + name: "Settings", + key: "profile-settings", + route: "/pages/account/settings", + component: jsxRuntime.jsx(Settings, {}), + }, + { + name: "Logout", + key: "logout", + route: "/authentication/sign-in/basic", + component: jsxRuntime.jsx(Basic, {}), + }, + ], + }, + { type: "divider", key: "divider-0" }, + { + type: "collapse", + name: "Dashboards", + key: "dashboards", + icon: jsxRuntime.jsx(Icon__default["default"], { fontSize: "medium", children: "dashboard" }), + collapse: [ + { + name: "Analytics", + key: "analytics", + route: "/dashboards/analytics", + component: jsxRuntime.jsx(Analytics, {}), + }, + { + name: "Sales", + key: "sales", + route: "/dashboards/sales", + component: jsxRuntime.jsx(Sales, {}), + }, + ], + }, + /* + { type: "title", title: "Pages", key: "title-pages" }, + { + type: "collapse", + name: "Pages", + key: "pages", + icon: image, + collapse: [ + { + name: "Profile", + key: "profile", + collapse: [ + { + name: "Profile Overview", + key: "profile-overview", + route: "/pages/profile/profile-overview", + component: , + }, + { + name: "All Projects", + key: "all-projects", + route: "/pages/profile/all-projects", + component: , + }, + ], + }, + { + name: "Users", + key: "users", + collapse: [ + { + name: "New User", + key: "new-user", + route: "/pages/users/new-user", + component: , + }, + ], + }, + { + name: "Account", + key: "account", + collapse: [ + { + name: "Settings", + key: "settings", + route: "/pages/account/settings", + component: , + }, + { + name: "Billing", + key: "billing", + route: "/pages/account/billing", + component: , + }, + { + name: "Invoice", + key: "invoice", + route: "/pages/account/invoice", + component: , + }, + ], + }, + { + name: "Projects", + key: "projects", + collapse: [ + { + name: "Timeline", + key: "timeline", + route: "/pages/projects/timeline", + component: , + }, + ], + }, + { + name: "Pricing Page", + key: "pricing-page", + route: "/pages/pricing-page", + component: , + }, + { name: "RTL", key: "rtl", route: "/pages/rtl", component: }, + { name: "Widgets", key: "widgets", route: "/pages/widgets", component: }, + { name: "Charts", key: "charts", route: "/pages/charts", component: }, + { + name: "Notfications", + key: "notifications", + route: "/pages/notifications", + component: , + }, + ], + }, + { + type: "collapse", + name: "Applications", + key: "applications", + icon: apps, + collapse: [ + { + name: "Kanban", + key: "kanban", + route: "/applications/kanban", + component: , + }, + { + name: "Wizard", + key: "wizard", + route: "/applications/wizard", + component: , + }, + { + name: "Data Tables", + key: "data-tables", + route: "/applications/data-tables", + component: , + }, + { + name: "Calendar", + key: "calendar", + route: "/applications/calendar", + component: , + }, + ], + }, + { + type: "collapse", + name: "Ecommerce", + key: "ecommerce", + icon: shopping_basket, + collapse: [ + { + name: "Products", + key: "products", + collapse: [ + { + name: "New Product", + key: "new-product", + route: "/ecommerce/products/new-product", + component: , + }, + { + name: "Edit Product", + key: "edit-product", + route: "/ecommerce/products/edit-product", + component: , + }, + { + name: "Product Page", + key: "product-page", + route: "/ecommerce/products/product-page", + component: , + }, + ], + }, + { + name: "Orders", + key: "orders", + collapse: [ + { + name: "Order List", + key: "order-list", + route: "/ecommerce/orders/order-list", + component: , + }, + { + name: "Order Details", + key: "order-details", + route: "/ecommerce/orders/order-details", + component: , + }, + ], + }, + { + name: "Orders", + key: "orders", + collapse: [ + { + name: "Order List", + key: "order-list", + route: "/ecommerce/orders/order-list", + component: , + }, + { + name: "Order Details", + key: "order-details", + route: "/ecommerce/orders/order-details", + component: , + }, + ], + }, + ], + }, + { + type: "collapse", + name: "Authentication", + key: "authentication", + icon: content_paste, + collapse: [ + { + name: "Sign In", + key: "sign-in", + collapse: [ + { + name: "Basic", + key: "basic", + route: "/authentication/sign-in/basic", + component: , + }, + { + name: "Cover", + key: "cover", + route: "/authentication/sign-in/cover", + component: , + }, + { + name: "Illustration", + key: "illustration", + route: "/authentication/sign-in/illustration", + component: , + }, + ], + }, + { + name: "Sign Up", + key: "sign-up", + collapse: [ + { + name: "Cover", + key: "cover", + route: "/authentication/sign-up/cover", + component: , + }, + ], + }, + { + name: "Reset Password", + key: "reset-password", + collapse: [ + { + name: "Cover", + key: "cover", + route: "/authentication/reset-password/cover", + component: , + }, + ], + }, + ], + }, + */ + { type: "divider", key: "divider-1" }, + { type: "title", title: "Tables", key: "title-docs" }, +]; +const qController = new QController.QController("http://localhost:8000"); +console.log(qController); +(async () => { + await qController.loadMetaData().then((metaData) => { + console.log(`metaData: ${metaData}`); + const tableList = []; + metaData.forEach((value, key) => { + const table = metaData.get(key); + tableList.push({ + name: table.label, + key: table.name, + route: `/${table.name}/list`, + component: jsxRuntime.jsx(EntityList, { table: table }), + }); + }); + const tables = { + type: "collapse", + name: "Tables", + key: "tables", + icon: jsxRuntime.jsx(Icon__default["default"], { fontSize: "medium", children: "dashboard" }), + collapse: tableList, + }; + qqqRoutes.push(tables); + }); +})(); + +function App() { + const [controller, dispatch] = useMaterialUIController(); + const { miniSidenav, direction, layout, openConfigurator, sidenavColor, transparentSidenav, whiteSidenav, darkMode, } = controller; + const [onMouseEnter, setOnMouseEnter] = react.useState(false); + const [rtlCache, setRtlCache] = react.useState(null); + const { pathname } = reactRouterDom.useLocation(); + // Cache for the rtl + react.useMemo(() => { + const pluginRtl = rtlPlugin__default["default"]; + const cacheRtl = createCache__default["default"]({ + key: "rtl", + stylisPlugins: [pluginRtl], + }); + setRtlCache(cacheRtl); + }, []); + // Open sidenav when mouse enter on mini sidenav + const handleOnMouseEnter = () => { + if (miniSidenav && !onMouseEnter) { + setMiniSidenav(dispatch, false); + setOnMouseEnter(true); + } + }; + // Close sidenav when mouse leave mini sidenav + const handleOnMouseLeave = () => { + if (onMouseEnter) { + setMiniSidenav(dispatch, true); + setOnMouseEnter(false); + } + }; + // Change the openConfigurator state + const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator); + // Setting the dir attribute for the body element + react.useEffect(() => { + document.body.setAttribute("dir", direction); + }, [direction]); + // Setting page scroll to 0 when changing the route + react.useEffect(() => { + document.documentElement.scrollTop = 0; + document.scrollingElement.scrollTop = 0; + }, [pathname]); + const getRoutes = (allRoutes) => allRoutes.map((route) => { + if (route.collapse) { + return getRoutes(route.collapse); + } + if (route.route) { + return jsxRuntime.jsx(reactRouterDom.Route, { path: route.route, element: route.component }, route.key); + } + return null; + }); + const configsButton = (jsxRuntime.jsx(MDBox, { display: "flex", justifyContent: "center", alignItems: "center", width: "3.25rem", height: "3.25rem", bgColor: "white", shadow: "sm", borderRadius: "50%", position: "fixed", right: "2rem", bottom: "2rem", zIndex: 99, color: "dark", sx: { cursor: "pointer" }, onClick: handleConfiguratorOpen, children: jsxRuntime.jsx(Icon__default["default"], { fontSize: "small", color: "inherit", children: "settings" }) })); + return direction === "rtl" ? (jsxRuntime.jsx(react$1.CacheProvider, { value: rtlCache, children: jsxRuntime.jsxs(styles.ThemeProvider, { theme: darkMode ? themeDarkRTL : themeRTL, children: [jsxRuntime.jsx(CssBaseline__default["default"], {}), layout === "dashboard" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Sidenav$1, { color: sidenavColor, brand: (transparentSidenav && !darkMode) || whiteSidenav ? brandDark__default["default"] : brandWhite__default["default"], brandName: "Material Dashboard PRO", routes: qqqRoutes, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave }), jsxRuntime.jsx(Configurator, {}), configsButton] })), layout === "vr" && jsxRuntime.jsx(Configurator, {}), jsxRuntime.jsxs(reactRouterDom.Routes, { children: [getRoutes(qqqRoutes), jsxRuntime.jsx(reactRouterDom.Route, { path: "*", element: jsxRuntime.jsx(reactRouterDom.Navigate, { to: "/dashboards/analytics" }) })] })] }) })) : (jsxRuntime.jsxs(styles.ThemeProvider, { theme: darkMode ? themeDark : theme, children: [jsxRuntime.jsx(CssBaseline__default["default"], {}), layout === "dashboard" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Sidenav$1, { color: sidenavColor, brand: (transparentSidenav && !darkMode) || whiteSidenav ? brandDark__default["default"] : brandWhite__default["default"], brandName: "Material Dashboard PRO", routes: qqqRoutes, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave }), jsxRuntime.jsx(Configurator, {}), configsButton] })), layout === "vr" && jsxRuntime.jsx(Configurator, {}), jsxRuntime.jsxs(reactRouterDom.Routes, { children: [getRoutes(qqqRoutes), jsxRuntime.jsx(reactRouterDom.Route, { path: "*", element: jsxRuntime.jsx(reactRouterDom.Navigate, { to: "/dashboards/analytics" }) })] })] })); +} + +ReactDOM__default["default"].render(jsxRuntime.jsx(reactRouterDom.BrowserRouter, { children: jsxRuntime.jsx(MaterialUIControllerProvider, { children: jsxRuntime.jsx(App, {}) }) }), document.getElementById("root")); diff --git a/package.json b/package.json new file mode 100644 index 0000000..9cd719f --- /dev/null +++ b/package.json @@ -0,0 +1,106 @@ +{ + "name": "qqq-frontend-material-dashboard", + "version": "1.0.0", + "description": "React + TypeScript version of Material Dashboard 2 PRO by Creative Tim", + "dependencies": { + "@asseinfo/react-kanban": "2.2.0", + "@emotion/cache": "11.7.1", + "@emotion/react": "11.7.1", + "@emotion/styled": "11.6.0", + "@fullcalendar/daygrid": "5.10.0", + "@fullcalendar/interaction": "5.10.0", + "@fullcalendar/react": "5.10.0", + "@fullcalendar/timegrid": "5.10.0", + "@mui/icons-material": "5.4.1", + "@mui/material": "5.4.1", + "@mui/styled-engine": "5.4.1", + "@react-jvectormap/core": "1.0.1", + "@react-jvectormap/world": "1.0.0", + "@testing-library/jest-dom": "5.16.2", + "@testing-library/react": "12.1.2", + "@testing-library/user-event": "13.5.0", + "@types/jest": "27.4.0", + "@types/node": "16.11.21", + "@types/react": "17.0.38", + "@types/react-dom": "17.0.11", + "chart.js": "3.4.1", + "chroma-js": "2.4.2", + "dropzone": "5.9.2", + "flatpickr": "4.6.9", + "formik": "2.2.9", + "html-react-parser": "1.4.8", + "qqq-frontend-core": "file:.yalc/qqq-frontend-core", + "react": "17.0.2", + "react-chartjs-2": "3.0.4", + "react-dom": "17.0.2", + "react-flatpickr": "3.10.7", + "react-github-btn": "1.2.1", + "react-images-viewer": "1.7.1", + "react-quill": "1.3.5", + "react-router-dom": "6.2.1", + "react-scripts": "5.0.0", + "react-table": "7.7.0", + "stylis": "4.0.13", + "stylis-plugin-rtl": "2.1.1", + "uuid": "8.3.2", + "web-vitals": "2.1.4", + "yup": "0.32.11" + }, + "scripts": { + "build": "rollup -c", + "clean": "rm -rf node_modules package-lock.json", + "eject": "react-scripts eject", + "install-legacy-peer-deps": "npm install --legacy-peer-deps", + "start": "react-scripts start", + "test": "react-scripts test" + }, + "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": { + "@types/chroma-js": "2.1.3", + "@types/dropzone": "5.7.4", + "@types/react-flatpickr": "3.8.5", + "@types/react-table": "7.7.9", + "@types/uuid": "8.3.4", + "@typescript-eslint/eslint-plugin": "5.10.2", + "@typescript-eslint/parser": "5.10.2", + "eslint": "8.8.0", + "eslint-config-airbnb": "19.0.4", + "eslint-config-prettier": "8.3.0", + "eslint-import-resolver-typescript": "2.5.0", + "eslint-plugin-import": "2.25.4", + "eslint-plugin-jsx-a11y": "6.5.1", + "eslint-plugin-prettier": "4.0.0", + "eslint-plugin-react": "7.28.0", + "eslint-plugin-react-hooks": "4.3.0", + "prettier": "2.5.1", + "rollup": "^2.10.4", + "rollup-plugin-copy": "^3.4.0", + "rollup-plugin-copy-assets": "^2.0.3", + "rollup-plugin-postcss": "^3.1.1", + "rollup-plugin-typescript2": "^0.27.1", + "typescript": "^4.7.3" + }, + "main": "dist/index.js", + "module": "dist/index.es.js", + "types": "dist/index.d.ts", + "files": [ + "dist/**/*" + ] +} diff --git a/public/apple-icon.png b/public/apple-icon.png new file mode 100644 index 0000000..a20470f Binary files /dev/null and b/public/apple-icon.png differ diff --git a/public/favicon.png b/public/favicon.png new file mode 100644 index 0000000..7d8b7d0 Binary files /dev/null and b/public/favicon.png differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..2204d85 --- /dev/null +++ b/public/index.html @@ -0,0 +1,38 @@ + + + + + + + + + + + Material Dashboard 2 PRO React TS + + + + + +
+ + diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..9d6b42e --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "Material Dashboard", + "name": "Material Dashboard 2 PRO React TS", + "icons": [ + { + "src": "favicon.png", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/png" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#1A73E8", + "background_color": "#ffffff" +} diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..e9e57dc --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/rollup.config.ts b/rollup.config.ts new file mode 100644 index 0000000..3536569 --- /dev/null +++ b/rollup.config.ts @@ -0,0 +1,36 @@ +import typescript from 'rollup-plugin-typescript2'; +import pkg from './package.json'; +import postcss from 'rollup-plugin-postcss'; +import copy from 'rollup-plugin-copy-assets' + +export default { + input: 'src/index.tsx', + output: [ + { + file: pkg.main, + format: 'cjs', + }, + { + file: pkg.module, + format: 'es', + }, + ], + external: [ + ...Object.keys(pkg.dependencies || {}), + ...Object.keys(pkg.peerDependencies || {}), + ], + plugins: [ + typescript({ + typescript: require('typescript'), + }), + postcss({ + modules: true, + namedExports: true + }), + copy({ + assets: [ + "src/assets/images" + ] + }) + ], +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..38a3a49 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,211 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useState, useEffect, useMemo, JSXElementConstructor, Key, ReactElement } from "react"; + +// react-router components +import { Routes, Route, Navigate, useLocation } from "react-router-dom"; + +// @mui material components +import { ThemeProvider } from "@mui/material/styles"; +import CssBaseline from "@mui/material/CssBaseline"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; + +// Material Dashboard 2 PRO React TS exampless +import Sidenav from "examples/Sidenav"; +import Configurator from "examples/Configurator"; + +// Material Dashboard 2 PRO React TS themes +import theme from "assets/theme"; +import themeRTL from "assets/theme/theme-rtl"; + +// Material Dashboard 2 PRO React TS Dark Mode themes +import themeDark from "assets/theme-dark"; +import themeDarkRTL from "assets/theme-dark/theme-rtl"; + +// RTL plugins +import rtlPlugin from "stylis-plugin-rtl"; +import { CacheProvider } from "@emotion/react"; +import createCache from "@emotion/cache"; + +// Material Dashboard 2 PRO React TS routes +import routes from "qqq/qqqRoutes"; + +// Material Dashboard 2 PRO React TS contexts +import { useMaterialUIController, setMiniSidenav, setOpenConfigurator } from "context"; + +// Images +import brandWhite from "assets/images/logo-ct.png"; +import brandDark from "assets/images/logo-ct-dark.png"; +import EntityCreate from "./qqq/pages/entity-create"; + +export default function App() { + const [controller, dispatch] = useMaterialUIController(); + const { + miniSidenav, + direction, + layout, + openConfigurator, + sidenavColor, + transparentSidenav, + whiteSidenav, + darkMode, + } = controller; + const [onMouseEnter, setOnMouseEnter] = useState(false); + const [rtlCache, setRtlCache] = useState(null); + const { pathname } = useLocation(); + + // Cache for the rtl + useMemo(() => { + const pluginRtl: any = rtlPlugin; + const cacheRtl = createCache({ + key: "rtl", + stylisPlugins: [pluginRtl], + }); + + setRtlCache(cacheRtl); + }, []); + + // Open sidenav when mouse enter on mini sidenav + const handleOnMouseEnter = () => { + if (miniSidenav && !onMouseEnter) { + setMiniSidenav(dispatch, false); + setOnMouseEnter(true); + } + }; + + // Close sidenav when mouse leave mini sidenav + const handleOnMouseLeave = () => { + if (onMouseEnter) { + setMiniSidenav(dispatch, true); + setOnMouseEnter(false); + } + }; + + // Change the openConfigurator state + const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator); + + // Setting the dir attribute for the body element + useEffect(() => { + document.body.setAttribute("dir", direction); + }, [direction]); + + // Setting page scroll to 0 when changing the route + useEffect(() => { + document.documentElement.scrollTop = 0; + document.scrollingElement.scrollTop = 0; + }, [pathname]); + + const getRoutes = (allRoutes: any[]): any => + allRoutes.map( + (route: { + collapse: any; + route: string; + component: ReactElement>; + key: Key; + }) => { + if (route.collapse) { + return getRoutes(route.collapse); + } + + if (route.route) { + return ; + } + + return null; + } + ); + + const configsButton = ( + + + settings + + + ); + + const entityCreateElement = ; + + return direction === "rtl" ? ( + + + + {layout === "dashboard" && ( + <> + + + {configsButton} + + )} + {layout === "vr" && } + + {getRoutes(routes)} + } /> + ; + + + + ) : ( + + + {layout === "dashboard" && ( + <> + + + {configsButton} + + )} + {layout === "vr" && } + + {getRoutes(routes)} + } /> + ; + + + ); +} diff --git a/src/assets/images/apple-icon.png b/src/assets/images/apple-icon.png new file mode 100644 index 0000000..a20470f Binary files /dev/null and b/src/assets/images/apple-icon.png differ diff --git a/src/assets/images/bg-player.jpeg b/src/assets/images/bg-player.jpeg new file mode 100644 index 0000000..179a34e Binary files /dev/null and b/src/assets/images/bg-player.jpeg differ diff --git a/src/assets/images/bg-pricing.jpg b/src/assets/images/bg-pricing.jpg new file mode 100644 index 0000000..94470d2 Binary files /dev/null and b/src/assets/images/bg-pricing.jpg differ diff --git a/src/assets/images/bg-profile.jpeg b/src/assets/images/bg-profile.jpeg new file mode 100644 index 0000000..2a1df5f Binary files /dev/null and b/src/assets/images/bg-profile.jpeg differ diff --git a/src/assets/images/bg-reset-cover.jpeg b/src/assets/images/bg-reset-cover.jpeg new file mode 100644 index 0000000..b2151d4 Binary files /dev/null and b/src/assets/images/bg-reset-cover.jpeg differ diff --git a/src/assets/images/bg-sign-in-basic.jpeg b/src/assets/images/bg-sign-in-basic.jpeg new file mode 100644 index 0000000..2564849 Binary files /dev/null and b/src/assets/images/bg-sign-in-basic.jpeg differ diff --git a/src/assets/images/bg-sign-in-cover.jpeg b/src/assets/images/bg-sign-in-cover.jpeg new file mode 100644 index 0000000..cc5ae7e Binary files /dev/null and b/src/assets/images/bg-sign-in-cover.jpeg differ diff --git a/src/assets/images/bg-sign-up-cover.jpeg b/src/assets/images/bg-sign-up-cover.jpeg new file mode 100644 index 0000000..576ae5b Binary files /dev/null and b/src/assets/images/bg-sign-up-cover.jpeg differ diff --git a/src/assets/images/bg-smart-home-1.jpg b/src/assets/images/bg-smart-home-1.jpg new file mode 100644 index 0000000..b9f051c Binary files /dev/null and b/src/assets/images/bg-smart-home-1.jpg differ diff --git a/src/assets/images/bg-smart-home-2.jpg b/src/assets/images/bg-smart-home-2.jpg new file mode 100644 index 0000000..13b82a0 Binary files /dev/null and b/src/assets/images/bg-smart-home-2.jpg differ diff --git a/src/assets/images/bruce-mars.jpg b/src/assets/images/bruce-mars.jpg new file mode 100644 index 0000000..335cf58 Binary files /dev/null and b/src/assets/images/bruce-mars.jpg differ diff --git a/src/assets/images/down-arrow-dark.svg b/src/assets/images/down-arrow-dark.svg new file mode 100644 index 0000000..11bb8d8 --- /dev/null +++ b/src/assets/images/down-arrow-dark.svg @@ -0,0 +1,11 @@ + + + down-arrow + + + + + + + + diff --git a/src/assets/images/down-arrow-white.svg b/src/assets/images/down-arrow-white.svg new file mode 100644 index 0000000..f13dc2f --- /dev/null +++ b/src/assets/images/down-arrow-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/down-arrow.svg b/src/assets/images/down-arrow.svg new file mode 100644 index 0000000..8a5fb42 --- /dev/null +++ b/src/assets/images/down-arrow.svg @@ -0,0 +1,11 @@ + + + down-arrow + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/drake.jpg b/src/assets/images/drake.jpg new file mode 100644 index 0000000..b2f8318 Binary files /dev/null and b/src/assets/images/drake.jpg differ diff --git a/src/assets/images/ecommerce/adidas-hoodie.jpeg b/src/assets/images/ecommerce/adidas-hoodie.jpeg new file mode 100644 index 0000000..a45a7a8 Binary files /dev/null and b/src/assets/images/ecommerce/adidas-hoodie.jpeg differ diff --git a/src/assets/images/ecommerce/alchimia-chair.jpeg b/src/assets/images/ecommerce/alchimia-chair.jpeg new file mode 100644 index 0000000..bbefb5a Binary files /dev/null and b/src/assets/images/ecommerce/alchimia-chair.jpeg differ diff --git a/src/assets/images/ecommerce/bang-sound.jpeg b/src/assets/images/ecommerce/bang-sound.jpeg new file mode 100644 index 0000000..345a55a Binary files /dev/null and b/src/assets/images/ecommerce/bang-sound.jpeg differ diff --git a/src/assets/images/ecommerce/black-chair.jpeg b/src/assets/images/ecommerce/black-chair.jpeg new file mode 100644 index 0000000..c1543ef Binary files /dev/null and b/src/assets/images/ecommerce/black-chair.jpeg differ diff --git a/src/assets/images/ecommerce/black-mug.jpeg b/src/assets/images/ecommerce/black-mug.jpeg new file mode 100644 index 0000000..d607afe Binary files /dev/null and b/src/assets/images/ecommerce/black-mug.jpeg differ diff --git a/src/assets/images/ecommerce/blue-shoe.jpeg b/src/assets/images/ecommerce/blue-shoe.jpeg new file mode 100644 index 0000000..d78c464 Binary files /dev/null and b/src/assets/images/ecommerce/blue-shoe.jpeg differ diff --git a/src/assets/images/ecommerce/burberry.jpeg b/src/assets/images/ecommerce/burberry.jpeg new file mode 100644 index 0000000..112db61 Binary files /dev/null and b/src/assets/images/ecommerce/burberry.jpeg differ diff --git a/src/assets/images/ecommerce/chair-pink.jpeg b/src/assets/images/ecommerce/chair-pink.jpeg new file mode 100644 index 0000000..b368b12 Binary files /dev/null and b/src/assets/images/ecommerce/chair-pink.jpeg differ diff --git a/src/assets/images/ecommerce/chair-steel.jpeg b/src/assets/images/ecommerce/chair-steel.jpeg new file mode 100644 index 0000000..4733aa1 Binary files /dev/null and b/src/assets/images/ecommerce/chair-steel.jpeg differ diff --git a/src/assets/images/ecommerce/chair-wood.jpeg b/src/assets/images/ecommerce/chair-wood.jpeg new file mode 100644 index 0000000..7fe757a Binary files /dev/null and b/src/assets/images/ecommerce/chair-wood.jpeg differ diff --git a/src/assets/images/ecommerce/d&g-skirt.jpeg b/src/assets/images/ecommerce/d&g-skirt.jpeg new file mode 100644 index 0000000..2e7e6c7 Binary files /dev/null and b/src/assets/images/ecommerce/d&g-skirt.jpeg differ diff --git a/src/assets/images/ecommerce/fendi-coat.jpeg b/src/assets/images/ecommerce/fendi-coat.jpeg new file mode 100644 index 0000000..486e1aa Binary files /dev/null and b/src/assets/images/ecommerce/fendi-coat.jpeg differ diff --git a/src/assets/images/ecommerce/gold-glasses.jpeg b/src/assets/images/ecommerce/gold-glasses.jpeg new file mode 100644 index 0000000..1baf7f4 Binary files /dev/null and b/src/assets/images/ecommerce/gold-glasses.jpeg differ diff --git a/src/assets/images/ecommerce/green-sofa.jpeg b/src/assets/images/ecommerce/green-sofa.jpeg new file mode 100644 index 0000000..9563dcd Binary files /dev/null and b/src/assets/images/ecommerce/green-sofa.jpeg differ diff --git a/src/assets/images/ecommerce/heron-tshirt.jpeg b/src/assets/images/ecommerce/heron-tshirt.jpeg new file mode 100644 index 0000000..05f2761 Binary files /dev/null and b/src/assets/images/ecommerce/heron-tshirt.jpeg differ diff --git a/src/assets/images/ecommerce/living-chair.jpeg b/src/assets/images/ecommerce/living-chair.jpeg new file mode 100644 index 0000000..1aa7d9c Binary files /dev/null and b/src/assets/images/ecommerce/living-chair.jpeg differ diff --git a/src/assets/images/ecommerce/macbook-pro.jpeg b/src/assets/images/ecommerce/macbook-pro.jpeg new file mode 100644 index 0000000..4504016 Binary files /dev/null and b/src/assets/images/ecommerce/macbook-pro.jpeg differ diff --git a/src/assets/images/ecommerce/mcqueen-shirt.jpeg b/src/assets/images/ecommerce/mcqueen-shirt.jpeg new file mode 100644 index 0000000..1debf7e Binary files /dev/null and b/src/assets/images/ecommerce/mcqueen-shirt.jpeg differ diff --git a/src/assets/images/ecommerce/metro-chair.jpeg b/src/assets/images/ecommerce/metro-chair.jpeg new file mode 100644 index 0000000..0bdeff3 Binary files /dev/null and b/src/assets/images/ecommerce/metro-chair.jpeg differ diff --git a/src/assets/images/ecommerce/off-white-jacket.jpeg b/src/assets/images/ecommerce/off-white-jacket.jpeg new file mode 100644 index 0000000..51713f5 Binary files /dev/null and b/src/assets/images/ecommerce/off-white-jacket.jpeg differ diff --git a/src/assets/images/ecommerce/orange-sofa.jpeg b/src/assets/images/ecommerce/orange-sofa.jpeg new file mode 100644 index 0000000..1b5928e Binary files /dev/null and b/src/assets/images/ecommerce/orange-sofa.jpeg differ diff --git a/src/assets/images/ecommerce/photo-tools.jpeg b/src/assets/images/ecommerce/photo-tools.jpeg new file mode 100644 index 0000000..1b8c3b5 Binary files /dev/null and b/src/assets/images/ecommerce/photo-tools.jpeg differ diff --git a/src/assets/images/ecommerce/undercover.jpeg b/src/assets/images/ecommerce/undercover.jpeg new file mode 100644 index 0000000..6a7b451 Binary files /dev/null and b/src/assets/images/ecommerce/undercover.jpeg differ diff --git a/src/assets/images/ecommerce/wooden-table.jpeg b/src/assets/images/ecommerce/wooden-table.jpeg new file mode 100644 index 0000000..98ace3b Binary files /dev/null and b/src/assets/images/ecommerce/wooden-table.jpeg differ diff --git a/src/assets/images/ecommerce/yellow-chair.jpeg b/src/assets/images/ecommerce/yellow-chair.jpeg new file mode 100644 index 0000000..81d526e Binary files /dev/null and b/src/assets/images/ecommerce/yellow-chair.jpeg differ diff --git a/src/assets/images/ecommerce/yohji-yamamoto.jpeg b/src/assets/images/ecommerce/yohji-yamamoto.jpeg new file mode 100644 index 0000000..25ecff0 Binary files /dev/null and b/src/assets/images/ecommerce/yohji-yamamoto.jpeg differ diff --git a/src/assets/images/favicon.png b/src/assets/images/favicon.png new file mode 100644 index 0000000..7d8b7d0 Binary files /dev/null and b/src/assets/images/favicon.png differ diff --git a/src/assets/images/home-decor-1.jpg b/src/assets/images/home-decor-1.jpg new file mode 100644 index 0000000..3469eb2 Binary files /dev/null and b/src/assets/images/home-decor-1.jpg differ diff --git a/src/assets/images/home-decor-2.jpg b/src/assets/images/home-decor-2.jpg new file mode 100644 index 0000000..3ffb21a Binary files /dev/null and b/src/assets/images/home-decor-2.jpg differ diff --git a/src/assets/images/home-decor-3.jpg b/src/assets/images/home-decor-3.jpg new file mode 100644 index 0000000..3e3539a Binary files /dev/null and b/src/assets/images/home-decor-3.jpg differ diff --git a/src/assets/images/home-decor-4.jpeg b/src/assets/images/home-decor-4.jpeg new file mode 100644 index 0000000..de22614 Binary files /dev/null and b/src/assets/images/home-decor-4.jpeg differ diff --git a/src/assets/images/icons/flags/AU.png b/src/assets/images/icons/flags/AU.png new file mode 100644 index 0000000..13fd089 Binary files /dev/null and b/src/assets/images/icons/flags/AU.png differ diff --git a/src/assets/images/icons/flags/BR.png b/src/assets/images/icons/flags/BR.png new file mode 100644 index 0000000..91e3862 Binary files /dev/null and b/src/assets/images/icons/flags/BR.png differ diff --git a/src/assets/images/icons/flags/DE.png b/src/assets/images/icons/flags/DE.png new file mode 100644 index 0000000..5029361 Binary files /dev/null and b/src/assets/images/icons/flags/DE.png differ diff --git a/src/assets/images/icons/flags/GB.png b/src/assets/images/icons/flags/GB.png new file mode 100644 index 0000000..b2f1b3b Binary files /dev/null and b/src/assets/images/icons/flags/GB.png differ diff --git a/src/assets/images/icons/flags/US.png b/src/assets/images/icons/flags/US.png new file mode 100644 index 0000000..5b42a56 Binary files /dev/null and b/src/assets/images/icons/flags/US.png differ diff --git a/src/assets/images/illustrations/illustration-lock.jpg b/src/assets/images/illustrations/illustration-lock.jpg new file mode 100644 index 0000000..cd3cb14 Binary files /dev/null and b/src/assets/images/illustrations/illustration-lock.jpg differ diff --git a/src/assets/images/illustrations/illustration-reset.jpg b/src/assets/images/illustrations/illustration-reset.jpg new file mode 100644 index 0000000..6eb7826 Binary files /dev/null and b/src/assets/images/illustrations/illustration-reset.jpg differ diff --git a/src/assets/images/illustrations/illustration-verification.jpg b/src/assets/images/illustrations/illustration-verification.jpg new file mode 100644 index 0000000..5216168 Binary files /dev/null and b/src/assets/images/illustrations/illustration-verification.jpg differ diff --git a/src/assets/images/illustrations/pattern-tree.svg b/src/assets/images/illustrations/pattern-tree.svg new file mode 100644 index 0000000..970acbb --- /dev/null +++ b/src/assets/images/illustrations/pattern-tree.svg @@ -0,0 +1,20 @@ + + + pattern-2 + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/ivana-square.jpg b/src/assets/images/ivana-square.jpg new file mode 100644 index 0000000..f6308ce Binary files /dev/null and b/src/assets/images/ivana-square.jpg differ diff --git a/src/assets/images/ivana-squares.jpg b/src/assets/images/ivana-squares.jpg new file mode 100644 index 0000000..a63739f Binary files /dev/null and b/src/assets/images/ivana-squares.jpg differ diff --git a/src/assets/images/ivancik.jpg b/src/assets/images/ivancik.jpg new file mode 100644 index 0000000..9b808c8 Binary files /dev/null and b/src/assets/images/ivancik.jpg differ diff --git a/src/assets/images/kal-visuals-square.jpg b/src/assets/images/kal-visuals-square.jpg new file mode 100644 index 0000000..1f1bf08 Binary files /dev/null and b/src/assets/images/kal-visuals-square.jpg differ diff --git a/src/assets/images/logo-ct-dark.png b/src/assets/images/logo-ct-dark.png new file mode 100644 index 0000000..4c2b251 Binary files /dev/null and b/src/assets/images/logo-ct-dark.png differ diff --git a/src/assets/images/logo-ct.png b/src/assets/images/logo-ct.png new file mode 100644 index 0000000..5f9cf4a Binary files /dev/null and b/src/assets/images/logo-ct.png differ diff --git a/src/assets/images/logos/gray-logos/logo-coinbase.svg b/src/assets/images/logos/gray-logos/logo-coinbase.svg new file mode 100644 index 0000000..1854688 --- /dev/null +++ b/src/assets/images/logos/gray-logos/logo-coinbase.svg @@ -0,0 +1,16 @@ + + + Logos + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/logos/gray-logos/logo-nasa.svg b/src/assets/images/logos/gray-logos/logo-nasa.svg new file mode 100644 index 0000000..282f50f --- /dev/null +++ b/src/assets/images/logos/gray-logos/logo-nasa.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/src/assets/images/logos/gray-logos/logo-netflix.svg b/src/assets/images/logos/gray-logos/logo-netflix.svg new file mode 100644 index 0000000..9579c0d --- /dev/null +++ b/src/assets/images/logos/gray-logos/logo-netflix.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/src/assets/images/logos/gray-logos/logo-pinterest.svg b/src/assets/images/logos/gray-logos/logo-pinterest.svg new file mode 100644 index 0000000..734ffb1 --- /dev/null +++ b/src/assets/images/logos/gray-logos/logo-pinterest.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/src/assets/images/logos/gray-logos/logo-spotify.svg b/src/assets/images/logos/gray-logos/logo-spotify.svg new file mode 100644 index 0000000..eb7862f --- /dev/null +++ b/src/assets/images/logos/gray-logos/logo-spotify.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/src/assets/images/logos/gray-logos/logo-vodafone.svg b/src/assets/images/logos/gray-logos/logo-vodafone.svg new file mode 100644 index 0000000..b22cbe7 --- /dev/null +++ b/src/assets/images/logos/gray-logos/logo-vodafone.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/src/assets/images/logos/mastercard.png b/src/assets/images/logos/mastercard.png new file mode 100644 index 0000000..1057c90 Binary files /dev/null and b/src/assets/images/logos/mastercard.png differ diff --git a/src/assets/images/logos/visa.png b/src/assets/images/logos/visa.png new file mode 100644 index 0000000..8d3a35e Binary files /dev/null and b/src/assets/images/logos/visa.png differ diff --git a/src/assets/images/marie.jpg b/src/assets/images/marie.jpg new file mode 100644 index 0000000..ad0b807 Binary files /dev/null and b/src/assets/images/marie.jpg differ diff --git a/src/assets/images/meeting.jpg b/src/assets/images/meeting.jpg new file mode 100644 index 0000000..3ba178c Binary files /dev/null and b/src/assets/images/meeting.jpg differ diff --git a/src/assets/images/office-dark.jpg b/src/assets/images/office-dark.jpg new file mode 100644 index 0000000..923d753 Binary files /dev/null and b/src/assets/images/office-dark.jpg differ diff --git a/src/assets/images/product-12.jpg b/src/assets/images/product-12.jpg new file mode 100644 index 0000000..43f3013 Binary files /dev/null and b/src/assets/images/product-12.jpg differ diff --git a/src/assets/images/products/product-1-min.jpg b/src/assets/images/products/product-1-min.jpg new file mode 100644 index 0000000..2f7777d Binary files /dev/null and b/src/assets/images/products/product-1-min.jpg differ diff --git a/src/assets/images/products/product-11.jpg b/src/assets/images/products/product-11.jpg new file mode 100644 index 0000000..df459b8 Binary files /dev/null and b/src/assets/images/products/product-11.jpg differ diff --git a/src/assets/images/products/product-2-min.jpg b/src/assets/images/products/product-2-min.jpg new file mode 100644 index 0000000..dc4c8c4 Binary files /dev/null and b/src/assets/images/products/product-2-min.jpg differ diff --git a/src/assets/images/products/product-3-min.jpg b/src/assets/images/products/product-3-min.jpg new file mode 100644 index 0000000..8b7dd63 Binary files /dev/null and b/src/assets/images/products/product-3-min.jpg differ diff --git a/src/assets/images/products/product-4-min.jpg b/src/assets/images/products/product-4-min.jpg new file mode 100644 index 0000000..015a9f1 Binary files /dev/null and b/src/assets/images/products/product-4-min.jpg differ diff --git a/src/assets/images/products/product-5-min.jpg b/src/assets/images/products/product-5-min.jpg new file mode 100644 index 0000000..7f48d17 Binary files /dev/null and b/src/assets/images/products/product-5-min.jpg differ diff --git a/src/assets/images/products/product-6-min.jpg b/src/assets/images/products/product-6-min.jpg new file mode 100644 index 0000000..68e5995 Binary files /dev/null and b/src/assets/images/products/product-6-min.jpg differ diff --git a/src/assets/images/products/product-7-min.jpg b/src/assets/images/products/product-7-min.jpg new file mode 100644 index 0000000..6b1d37d Binary files /dev/null and b/src/assets/images/products/product-7-min.jpg differ diff --git a/src/assets/images/products/product-details-1.jpg b/src/assets/images/products/product-details-1.jpg new file mode 100644 index 0000000..99a47f2 Binary files /dev/null and b/src/assets/images/products/product-details-1.jpg differ diff --git a/src/assets/images/products/product-details-2.jpg b/src/assets/images/products/product-details-2.jpg new file mode 100644 index 0000000..571b770 Binary files /dev/null and b/src/assets/images/products/product-details-2.jpg differ diff --git a/src/assets/images/products/product-details-3.jpg b/src/assets/images/products/product-details-3.jpg new file mode 100644 index 0000000..0f39a0d Binary files /dev/null and b/src/assets/images/products/product-details-3.jpg differ diff --git a/src/assets/images/products/product-details-4.jpg b/src/assets/images/products/product-details-4.jpg new file mode 100644 index 0000000..1c3a344 Binary files /dev/null and b/src/assets/images/products/product-details-4.jpg differ diff --git a/src/assets/images/products/product-details-5.jpg b/src/assets/images/products/product-details-5.jpg new file mode 100644 index 0000000..9399999 Binary files /dev/null and b/src/assets/images/products/product-details-5.jpg differ diff --git a/src/assets/images/shapes/pattern-lines.svg b/src/assets/images/shapes/pattern-lines.svg new file mode 100644 index 0000000..3292387 --- /dev/null +++ b/src/assets/images/shapes/pattern-lines.svg @@ -0,0 +1,91 @@ + + + pattern-lines + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/shapes/waves-white.svg b/src/assets/images/shapes/waves-white.svg new file mode 100644 index 0000000..b2f04fd --- /dev/null +++ b/src/assets/images/shapes/waves-white.svg @@ -0,0 +1,324 @@ + + + Artboard + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/small-logos/bootstrap.svg b/src/assets/images/small-logos/bootstrap.svg new file mode 100644 index 0000000..030c53e --- /dev/null +++ b/src/assets/images/small-logos/bootstrap.svg @@ -0,0 +1,9 @@ + + + bootstrap + + + + + + \ No newline at end of file diff --git a/src/assets/images/small-logos/creative-tim.svg b/src/assets/images/small-logos/creative-tim.svg new file mode 100644 index 0000000..83bebb9 --- /dev/null +++ b/src/assets/images/small-logos/creative-tim.svg @@ -0,0 +1,7 @@ + + + creative-tim + + + + \ No newline at end of file diff --git a/src/assets/images/small-logos/devto.svg b/src/assets/images/small-logos/devto.svg new file mode 100644 index 0000000..51fa2ce --- /dev/null +++ b/src/assets/images/small-logos/devto.svg @@ -0,0 +1,9 @@ + + + devto + + + + + + \ No newline at end of file diff --git a/src/assets/images/small-logos/github.svg b/src/assets/images/small-logos/github.svg new file mode 100644 index 0000000..bfa7a11 --- /dev/null +++ b/src/assets/images/small-logos/github.svg @@ -0,0 +1,10 @@ + + + github + + + + + + + \ No newline at end of file diff --git a/src/assets/images/small-logos/google-webdev.svg b/src/assets/images/small-logos/google-webdev.svg new file mode 100644 index 0000000..5bc9d2e --- /dev/null +++ b/src/assets/images/small-logos/google-webdev.svg @@ -0,0 +1,11 @@ + + + google-webdev + + + + \ No newline at end of file diff --git a/src/assets/images/small-logos/icon-bulb.svg b/src/assets/images/small-logos/icon-bulb.svg new file mode 100644 index 0000000..2d7bdaf --- /dev/null +++ b/src/assets/images/small-logos/icon-bulb.svg @@ -0,0 +1,37 @@ + + + icon-bulb + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/small-logos/icon-sun-cloud.png b/src/assets/images/small-logos/icon-sun-cloud.png new file mode 100644 index 0000000..25643d6 Binary files /dev/null and b/src/assets/images/small-logos/icon-sun-cloud.png differ diff --git a/src/assets/images/small-logos/logo-asana.svg b/src/assets/images/small-logos/logo-asana.svg new file mode 100644 index 0000000..c37d9bf --- /dev/null +++ b/src/assets/images/small-logos/logo-asana.svg @@ -0,0 +1,16 @@ + + + Logos + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/small-logos/logo-atlassian.svg b/src/assets/images/small-logos/logo-atlassian.svg new file mode 100644 index 0000000..6df6825 --- /dev/null +++ b/src/assets/images/small-logos/logo-atlassian.svg @@ -0,0 +1,16 @@ + + + Logos + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/small-logos/logo-invision.svg b/src/assets/images/small-logos/logo-invision.svg new file mode 100644 index 0000000..44e72b6 --- /dev/null +++ b/src/assets/images/small-logos/logo-invision.svg @@ -0,0 +1,10 @@ + + + Logos + + + + + + + \ No newline at end of file diff --git a/src/assets/images/small-logos/logo-jira.svg b/src/assets/images/small-logos/logo-jira.svg new file mode 100644 index 0000000..dac3ddb --- /dev/null +++ b/src/assets/images/small-logos/logo-jira.svg @@ -0,0 +1,21 @@ + + + Logos + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/small-logos/logo-slack.svg b/src/assets/images/small-logos/logo-slack.svg new file mode 100644 index 0000000..6b8eba6 --- /dev/null +++ b/src/assets/images/small-logos/logo-slack.svg @@ -0,0 +1,12 @@ + + + Logos + + + + \ No newline at end of file diff --git a/src/assets/images/small-logos/logo-spotify.svg b/src/assets/images/small-logos/logo-spotify.svg new file mode 100644 index 0000000..1c930b3 --- /dev/null +++ b/src/assets/images/small-logos/logo-spotify.svg @@ -0,0 +1,9 @@ + + + Logos + + + + + + \ No newline at end of file diff --git a/src/assets/images/small-logos/logo-xd.svg b/src/assets/images/small-logos/logo-xd.svg new file mode 100644 index 0000000..5cd1bd4 --- /dev/null +++ b/src/assets/images/small-logos/logo-xd.svg @@ -0,0 +1,11 @@ + + + Logos + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/team-1.jpg b/src/assets/images/team-1.jpg new file mode 100644 index 0000000..8f95305 Binary files /dev/null and b/src/assets/images/team-1.jpg differ diff --git a/src/assets/images/team-2.jpg b/src/assets/images/team-2.jpg new file mode 100644 index 0000000..976c115 Binary files /dev/null and b/src/assets/images/team-2.jpg differ diff --git a/src/assets/images/team-3.jpg b/src/assets/images/team-3.jpg new file mode 100644 index 0000000..324ad7d Binary files /dev/null and b/src/assets/images/team-3.jpg differ diff --git a/src/assets/images/team-4.jpg b/src/assets/images/team-4.jpg new file mode 100644 index 0000000..abfa43f Binary files /dev/null and b/src/assets/images/team-4.jpg differ diff --git a/src/assets/images/team-5.jpg b/src/assets/images/team-5.jpg new file mode 100644 index 0000000..8b7f184 Binary files /dev/null and b/src/assets/images/team-5.jpg differ diff --git a/src/assets/theme-dark/base/borders.ts b/src/assets/theme-dark/base/borders.ts new file mode 100644 index 0000000..4b2c4a4 --- /dev/null +++ b/src/assets/theme-dark/base/borders.ts @@ -0,0 +1,76 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + * The base border styles for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material. + * You can add new border width, border color or border radius using this file. + * You can customized the borders value for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file. + */ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; +import rgba from "assets/theme-dark/functions/rgba"; + +const { white } = colors; + +// types +interface Types { + borderColor: string; + borderWidth: { + 0: number; + 1: string; + 2: string; + 3: string; + 4: string; + 5: string; + }; + borderRadius: { + xs: string; + sm: string; + md: string; + lg: string; + xl: string; + xxl: string; + section: string; + }; +} + +const borders: Types = { + borderColor: rgba(white.main, 0.4), + + borderWidth: { + 0: 0, + 1: pxToRem(1), + 2: pxToRem(2), + 3: pxToRem(3), + 4: pxToRem(4), + 5: pxToRem(5), + }, + + borderRadius: { + xs: pxToRem(1.6), + sm: pxToRem(2), + md: pxToRem(6), + lg: pxToRem(8), + xl: pxToRem(12), + xxl: pxToRem(16), + section: pxToRem(160), + }, +}; + +export default borders; diff --git a/src/assets/theme-dark/base/boxShadows.ts b/src/assets/theme-dark/base/boxShadows.ts new file mode 100644 index 0000000..c510b0a --- /dev/null +++ b/src/assets/theme-dark/base/boxShadows.ts @@ -0,0 +1,148 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + * The base box-shadow styles for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material. + * You can add new box-shadow using this file. + * You can customized the box-shadow for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file. + */ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import boxShadow from "assets/theme-dark/functions/boxShadow"; + +const { black, dark, tabs, coloredShadows } = colors; + +// types +interface Types { + xs: string; + sm: string; + md: string; + lg: string; + xl: string; + xxl: string; + inset: string; + colored: + | { + primary: string; + secondary: string; + info: string; + success: string; + warning: string; + error: string; + light: string; + dark: string; + } + | any; + navbarBoxShadow: string; + sliderBoxShadow: { + thumb: string; + }; + tabsBoxShadow: { + indicator: string; + }; +} + +const boxShadows: Types = { + xs: boxShadow([0, 2], [9, -5], black.main, 0.15), + sm: boxShadow([0, 5], [10, 0], black.main, 0.12), + md: `${boxShadow([0, 2], [2, 0], black.main, 0.14)}, ${boxShadow( + [0, 3], + [1, -2], + black.main, + 0.2 + )}, ${boxShadow([0, 1], [5, 0], black.main, 0.12)}`, + lg: `${boxShadow([0, 10], [15, -3], black.main, 0.1)}, ${boxShadow( + [0, 4], + [6, -2], + black.main, + 0.05 + )}`, + xl: `${boxShadow([0, 20], [25, -5], black.main, 0.1)}, ${boxShadow( + [0, 10], + [10, -5], + black.main, + 0.04 + )}`, + xxl: boxShadow([0, 20], [27, 0], black.main, 0.05), + inset: boxShadow([0, 1], [2, 0], black.main, 0.075, "inset"), + colored: { + primary: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.primary, + 0.4 + )}`, + secondary: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.secondary, + 0.4 + )}`, + info: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.info, + 0.4 + )}`, + success: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.success, + 0.4 + )}`, + warning: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.warning, + 0.4 + )}`, + error: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.error, + 0.4 + )}`, + light: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.light, + 0.4 + )}`, + dark: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.dark, + 0.4 + )}`, + }, + + navbarBoxShadow: `${boxShadow([0, 0], [1, 1], dark.main, 0.9, "inset")}, ${boxShadow( + [0, 20], + [27, 0], + black.main, + 0.05 + )}`, + sliderBoxShadow: { + thumb: boxShadow([0, 1], [13, 0], black.main, 0.2), + }, + tabsBoxShadow: { + indicator: boxShadow([0, 1], [5, 1], tabs.indicator.boxShadow, 1), + }, +}; + +export default boxShadows; diff --git a/src/assets/theme-dark/base/breakpoints.ts b/src/assets/theme-dark/base/breakpoints.ts new file mode 100644 index 0000000..5d3fef5 --- /dev/null +++ b/src/assets/theme-dark/base/breakpoints.ts @@ -0,0 +1,33 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + * The base breakpoints for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material. + * You can add new breakpoints using this file. + * You can customized the breakpoints for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file. + */ + +const breakpoints = { + values: { + xs: 0, + sm: 576, + md: 768, + lg: 992, + xl: 1200, + xxl: 1400, + }, +}; + +export default breakpoints; diff --git a/src/assets/theme-dark/base/colors.ts b/src/assets/theme-dark/base/colors.ts new file mode 100644 index 0000000..36105c2 --- /dev/null +++ b/src/assets/theme-dark/base/colors.ts @@ -0,0 +1,391 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + * The base colors for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material. + * You can add new color using this file. + * You can customized the colors for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file. + */ + +// types +interface ColorsTypes { + main: string; + focus: string; +} + +interface GradientsTypes { + main: string; + state: string; +} + +interface SocialMediaColorsTypes { + main: string; + dark: string; +} + +interface BadgeColorsTypes { + background: string; + text: string; +} + +interface Types { + background: + | { + default: string; + sidenav?: string; + card?: string; + } + | any; + white: + | { + main: string; + focus: string; + } + | any; + text: + | { + main: string; + focus: string; + primary?: string; + secondary?: string; + disabled?: string; + } + | any; + transparent: + | { + main: string; + } + | any; + black: + | { + light: string; + main: string; + focus: string; + } + | any; + primary: ColorsTypes | any; + secondary: ColorsTypes | any; + info: ColorsTypes | any; + success: ColorsTypes | any; + warning: ColorsTypes | any; + error: ColorsTypes | any; + light: ColorsTypes | any; + dark: ColorsTypes | any; + grey: + | { + [key: string | number]: string; + } + | any; + gradients: + | { + primary: GradientsTypes; + secondary: GradientsTypes; + info: GradientsTypes; + success: GradientsTypes; + warning: GradientsTypes; + error: GradientsTypes; + light: GradientsTypes; + dark: GradientsTypes; + } + | any; + socialMediaColors: + | { + facebook: SocialMediaColorsTypes; + twitter: SocialMediaColorsTypes; + instagram: SocialMediaColorsTypes; + linkedin: SocialMediaColorsTypes; + pinterest: SocialMediaColorsTypes; + youtube: SocialMediaColorsTypes; + vimeo: SocialMediaColorsTypes; + slack: SocialMediaColorsTypes; + dribbble: SocialMediaColorsTypes; + github: SocialMediaColorsTypes; + reddit: SocialMediaColorsTypes; + tumblr: SocialMediaColorsTypes; + } + | any; + badgeColors: + | { + primary: BadgeColorsTypes; + secondary: BadgeColorsTypes; + info: BadgeColorsTypes; + success: BadgeColorsTypes; + warning: BadgeColorsTypes; + error: BadgeColorsTypes; + light: BadgeColorsTypes; + dark: BadgeColorsTypes; + } + | any; + coloredShadows: + | { + [key: string]: string; + } + | any; + inputBorderColor: string; + tabs: + | { + indicator: + | { + boxShadow: string; + } + | any; + } + | any; +} + +const colors: Types = { + background: { + default: "#1a2035", + sidenav: "#1f283e", + card: "#202940", + }, + + text: { + main: "#ffffffcc", + focus: "#ffffffcc", + }, + + transparent: { + main: "transparent", + }, + + white: { + main: "#ffffff", + focus: "#ffffff", + }, + + black: { + light: "#000000", + main: "#000000", + focus: "#000000", + }, + + primary: { + main: "#e91e63", + focus: "#e91e63", + }, + + secondary: { + main: "#7b809a", + focus: "#8f93a9", + }, + + info: { + main: "#1A73E8", + focus: "#1662C4", + }, + + success: { + main: "#4CAF50", + focus: "#67bb6a", + }, + + warning: { + main: "#fb8c00", + focus: "#fc9d26", + }, + + error: { + main: "#F44335", + focus: "#f65f53", + }, + + light: { + main: "#f0f2f566", + focus: "#f0f2f566", + }, + + dark: { + main: "#344767", + focus: "#2c3c58", + }, + + grey: { + 100: "#f8f9fa", + 200: "#f0f2f5", + 300: "#dee2e6", + 400: "#ced4da", + 500: "#adb5bd", + 600: "#6c757d", + 700: "#495057", + 800: "#343a40", + 900: "#212529", + }, + + gradients: { + primary: { + main: "#EC407A", + state: "#D81B60", + }, + + secondary: { + main: "#747b8a", + state: "#495361", + }, + + info: { + main: "#49a3f1", + state: "#1A73E8", + }, + + success: { + main: "#66BB6A", + state: "#43A047", + }, + + warning: { + main: "#FFA726", + state: "#FB8C00", + }, + + error: { + main: "#EF5350", + state: "#E53935", + }, + + light: { + main: "#EBEFF4", + state: "#CED4DA", + }, + + dark: { + main: "#323a54", + state: "#1a2035", + }, + }, + + socialMediaColors: { + facebook: { + main: "#3b5998", + dark: "#344e86", + }, + + twitter: { + main: "#55acee", + dark: "#3ea1ec", + }, + + instagram: { + main: "#125688", + dark: "#0e456d", + }, + + linkedin: { + main: "#0077b5", + dark: "#00669c", + }, + + pinterest: { + main: "#cc2127", + dark: "#b21d22", + }, + + youtube: { + main: "#e52d27", + dark: "#d41f1a", + }, + + vimeo: { + main: "#1ab7ea", + dark: "#13a3d2", + }, + + slack: { + main: "#3aaf85", + dark: "#329874", + }, + + dribbble: { + main: "#ea4c89", + dark: "#e73177", + }, + + github: { + main: "#24292e", + dark: "#171a1d", + }, + + reddit: { + main: "#ff4500", + dark: "#e03d00", + }, + + tumblr: { + main: "#35465c", + dark: "#2a3749", + }, + }, + + badgeColors: { + primary: { + background: "#f8b3ca", + text: "#cc084b", + }, + + secondary: { + background: "#d7d9e1", + text: "#6c757d", + }, + + info: { + background: "#aecef7", + text: "#095bc6", + }, + + success: { + background: "#bce2be", + text: "#339537", + }, + + warning: { + background: "#ffd59f", + text: "#c87000", + }, + + error: { + background: "#fcd3d0", + text: "#f61200", + }, + + light: { + background: "#ffffff", + text: "#c7d3de", + }, + + dark: { + background: "#8097bf", + text: "#1e2e4a", + }, + }, + + coloredShadows: { + primary: "#e91e62", + secondary: "#110e0e", + info: "#00bbd4", + success: "#4caf4f", + warning: "#ff9900", + error: "#f44336", + light: "#adb5bd", + dark: "#404040", + }, + + inputBorderColor: "#d2d6da", + + tabs: { + indicator: { boxShadow: "#ddd" }, + }, +}; + +export default colors; diff --git a/src/assets/theme-dark/base/globals.ts b/src/assets/theme-dark/base/globals.ts new file mode 100644 index 0000000..69425d6 --- /dev/null +++ b/src/assets/theme-dark/base/globals.ts @@ -0,0 +1,41 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; + +const { info, dark } = colors; + +const globals = { + html: { + scrollBehavior: "smooth", + }, + "*, *::before, *::after": { + margin: 0, + padding: 0, + }, + "a, a:link, a:visited": { + textDecoration: "none !important", + }, + "a.link, .link, a.link:link, .link:link, a.link:visited, .link:visited": { + color: `${dark.main} !important`, + transition: "color 150ms ease-in !important", + }, + "a.link:hover, .link:hover, a.link:focus, .link:focus": { + color: `${info.main} !important`, + }, +}; + +export default globals; diff --git a/src/assets/theme-dark/base/typography.ts b/src/assets/theme-dark/base/typography.ts new file mode 100644 index 0000000..6123aad --- /dev/null +++ b/src/assets/theme-dark/base/typography.ts @@ -0,0 +1,320 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + * The base typography styles for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material. + * You can add new typography style using this file. + * You can customized the typography styles for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file. + */ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +const { white } = colors; + +// types +interface DisplayTypes { + fontFamily: string; + color: string; + fontWeight: number; + lineHeight: number; + fontSize: string; +} + +interface Types { + fontFamily: string; + fontWeightLighter: number; + fontWeightLight: number; + fontWeightRegular: number; + fontWeightMedium: number; + fontWeightBold: number; + h1: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + h2: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + h3: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + h4: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + h5: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + h6: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + subtitle1: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + }; + subtitle2: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + }; + body1: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + }; + body2: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + }; + button: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + textTransform: any; + }; + caption: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + }; + overline: { + fontFamily: string; + }; + d1: DisplayTypes; + d2: DisplayTypes; + d3: DisplayTypes; + d4: DisplayTypes; + d5: DisplayTypes; + d6: DisplayTypes; + size: { + xxs: string; + xs: string; + sm: string; + md: string; + lg: string; + xl: string; + "2xl": string; + "3xl": string; + }; + lineHeight: { + sm: number; + md: number; + lg: number; + }; +} + +const baseProperties = { + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeightLighter: 100, + fontWeightLight: 300, + fontWeightRegular: 400, + fontWeightMedium: 600, + fontWeightBold: 700, + fontSizeXXS: pxToRem(10.4), + fontSizeXS: pxToRem(12), + fontSizeSM: pxToRem(14), + fontSizeMD: pxToRem(16), + fontSizeLG: pxToRem(18), + fontSizeXL: pxToRem(20), + fontSize2XL: pxToRem(24), + fontSize3XL: pxToRem(30), +}; + +const baseHeadingProperties = { + fontFamily: baseProperties.fontFamily, + color: white.main, + fontWeight: baseProperties.fontWeightBold, +}; + +const baseDisplayProperties = { + fontFamily: baseProperties.fontFamily, + color: white.main, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.2, +}; + +const typography: Types = { + fontFamily: baseProperties.fontFamily, + fontWeightLighter: baseProperties.fontWeightLighter, + fontWeightLight: baseProperties.fontWeightLight, + fontWeightRegular: baseProperties.fontWeightRegular, + fontWeightMedium: baseProperties.fontWeightMedium, + fontWeightBold: baseProperties.fontWeightBold, + + h1: { + fontSize: pxToRem(48), + lineHeight: 1.25, + ...baseHeadingProperties, + }, + + h2: { + fontSize: pxToRem(36), + lineHeight: 1.3, + ...baseHeadingProperties, + }, + + h3: { + fontSize: pxToRem(30), + lineHeight: 1.375, + ...baseHeadingProperties, + }, + + h4: { + fontSize: pxToRem(24), + lineHeight: 1.375, + ...baseHeadingProperties, + }, + + h5: { + fontSize: pxToRem(20), + lineHeight: 1.375, + ...baseHeadingProperties, + }, + + h6: { + fontSize: pxToRem(16), + lineHeight: 1.625, + ...baseHeadingProperties, + }, + + subtitle1: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeXL, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.625, + }, + + subtitle2: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeMD, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.6, + }, + + body1: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeXL, + fontWeight: baseProperties.fontWeightRegular, + lineHeight: 1.625, + }, + + body2: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeMD, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.6, + }, + + button: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeSM, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.5, + textTransform: "uppercase", + }, + + caption: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeXS, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.25, + }, + + overline: { + fontFamily: baseProperties.fontFamily, + }, + + d1: { + fontSize: pxToRem(80), + ...baseDisplayProperties, + }, + + d2: { + fontSize: pxToRem(72), + ...baseDisplayProperties, + }, + + d3: { + fontSize: pxToRem(64), + ...baseDisplayProperties, + }, + + d4: { + fontSize: pxToRem(56), + ...baseDisplayProperties, + }, + + d5: { + fontSize: pxToRem(48), + ...baseDisplayProperties, + }, + + d6: { + fontSize: pxToRem(40), + ...baseDisplayProperties, + }, + + size: { + xxs: baseProperties.fontSizeXXS, + xs: baseProperties.fontSizeXS, + sm: baseProperties.fontSizeSM, + md: baseProperties.fontSizeMD, + lg: baseProperties.fontSizeLG, + xl: baseProperties.fontSizeXL, + "2xl": baseProperties.fontSize2XL, + "3xl": baseProperties.fontSize3XL, + }, + + lineHeight: { + sm: 1.25, + md: 1.5, + lg: 2, + }, +}; + +export default typography; diff --git a/src/assets/theme-dark/components/appBar.ts b/src/assets/theme-dark/components/appBar.ts new file mode 100644 index 0000000..425e419 --- /dev/null +++ b/src/assets/theme-dark/components/appBar.ts @@ -0,0 +1,31 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// types +type Types = any; + +const appBar: Types = { + defaultProps: { + color: "transparent", + }, + + styleOverrides: { + root: { + boxShadow: "none", + }, + }, +}; + +export default appBar; diff --git a/src/assets/theme-dark/components/avatar.ts b/src/assets/theme-dark/components/avatar.ts new file mode 100644 index 0000000..41dd9a1 --- /dev/null +++ b/src/assets/theme-dark/components/avatar.ts @@ -0,0 +1,40 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme-dark/base/borders"; + +const { borderRadius } = borders; + +// types +type Types = any; + +const avatar: Types = { + styleOverrides: { + root: { + transition: "all 200ms ease-in-out", + }, + + rounded: { + borderRadius: borderRadius.lg, + }, + + img: { + height: "auto", + }, + }, +}; + +export default avatar; diff --git a/src/assets/theme-dark/components/breadcrumbs.ts b/src/assets/theme-dark/components/breadcrumbs.ts new file mode 100644 index 0000000..aa33ea9 --- /dev/null +++ b/src/assets/theme-dark/components/breadcrumbs.ts @@ -0,0 +1,39 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; +import typography from "assets/theme-dark/base/typography"; + +const { grey } = colors; +const { size } = typography; + +// types +type Types = any; + +const breadcrumbs: Types = { + styleOverrides: { + li: { + lineHeight: 0, + }, + + separator: { + fontSize: size.sm, + color: grey[600], + }, + }, +}; + +export default breadcrumbs; diff --git a/src/assets/theme-dark/components/button/contained.ts b/src/assets/theme-dark/components/button/contained.ts new file mode 100644 index 0000000..cbc3451 --- /dev/null +++ b/src/assets/theme-dark/components/button/contained.ts @@ -0,0 +1,91 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; +import typography from "assets/theme-dark/base/typography"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +const { white, text, info, secondary } = colors; +const { size } = typography; + +const contained = { + base: { + backgroundColor: white.main, + minHeight: pxToRem(37), + color: text.main, + padding: `${pxToRem(9)} ${pxToRem(24)}`, + + "&:hover": { + backgroundColor: white.main, + }, + + "&:active, &:active:focus, &:active:hover": { + opacity: 0.85, + }, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(16)} !important`, + }, + }, + + small: { + minHeight: pxToRem(29), + padding: `${pxToRem(6)} ${pxToRem(18)}`, + fontSize: size.xs, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(12)} !important`, + }, + }, + + large: { + minHeight: pxToRem(44), + padding: `${pxToRem(12)} ${pxToRem(64)}`, + fontSize: size.sm, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(22)} !important`, + }, + }, + + primary: { + backgroundColor: info.main, + + "&:hover": { + backgroundColor: info.main, + }, + + "&:focus:not(:hover)": { + backgroundColor: info.focus, + }, + }, + + secondary: { + backgroundColor: secondary.main, + + "&:hover": { + backgroundColor: secondary.main, + }, + + "&:focus:not(:hover)": { + backgroundColor: secondary.focus, + }, + }, +}; + +export default contained; diff --git a/src/assets/theme-dark/components/button/index.ts b/src/assets/theme-dark/components/button/index.ts new file mode 100644 index 0000000..68df8ec --- /dev/null +++ b/src/assets/theme-dark/components/button/index.ts @@ -0,0 +1,49 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React Button Styles +import root from "assets/theme-dark/components/button/root"; +import contained from "assets/theme-dark/components/button/contained"; +import outlined from "assets/theme-dark/components/button/outlined"; +import buttonText from "assets/theme-dark/components/button/text"; + +// types +type Types = any; + +const button: Types = { + defaultProps: { + disableRipple: false, + }, + styleOverrides: { + root: { ...root }, + contained: { ...contained.base }, + containedSizeSmall: { ...contained.small }, + containedSizeLarge: { ...contained.large }, + containedPrimary: { ...contained.primary }, + containedSecondary: { ...contained.secondary }, + outlined: { ...outlined.base }, + outlinedSizeSmall: { ...outlined.small }, + outlinedSizeLarge: { ...outlined.large }, + outlinedPrimary: { ...outlined.primary }, + outlinedSecondary: { ...outlined.secondary }, + text: { ...buttonText.base }, + textSizeSmall: { ...buttonText.small }, + textSizeLarge: { ...buttonText.large }, + textPrimary: { ...buttonText.primary }, + textSecondary: { ...buttonText.secondary }, + }, +}; + +export default button; diff --git a/src/assets/theme-dark/components/button/outlined.ts b/src/assets/theme-dark/components/button/outlined.ts new file mode 100644 index 0000000..1897ea1 --- /dev/null +++ b/src/assets/theme-dark/components/button/outlined.ts @@ -0,0 +1,82 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; +import typography from "assets/theme-dark/base/typography"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +const { transparent, light, info, secondary } = colors; +const { size } = typography; + +const outlined = { + base: { + minHeight: pxToRem(39), + color: light.main, + borderColor: light.main, + padding: `${pxToRem(9)} ${pxToRem(24)}`, + + "&:hover": { + opacity: 0.75, + backgroundColor: transparent.main, + }, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(16)} !important`, + }, + }, + + small: { + minHeight: pxToRem(31), + padding: `${pxToRem(6)} ${pxToRem(18)}`, + fontSize: size.xs, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(12)} !important`, + }, + }, + + large: { + minHeight: pxToRem(46), + padding: `${pxToRem(12)} ${pxToRem(64)}`, + fontSize: size.sm, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(22)} !important`, + }, + }, + + primary: { + backgroundColor: transparent.main, + borderColor: info.main, + + "&:hover": { + backgroundColor: transparent.main, + }, + }, + + secondary: { + backgroundColor: transparent.main, + borderColor: secondary.main, + + "&:hover": { + backgroundColor: transparent.main, + }, + }, +}; + +export default outlined; diff --git a/src/assets/theme-dark/components/button/root.ts b/src/assets/theme-dark/components/button/root.ts new file mode 100644 index 0000000..f291791 --- /dev/null +++ b/src/assets/theme-dark/components/button/root.ts @@ -0,0 +1,53 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme-dark/base/typography"; +import borders from "assets/theme-dark/base/borders"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +const { fontWeightBold, size } = typography; +const { borderRadius } = borders; + +const root = { + display: "inline-flex", + justifyContent: "center", + alignItems: "center", + fontSize: size.xs, + fontWeight: fontWeightBold, + borderRadius: borderRadius.lg, + padding: `${pxToRem(6.302)} ${pxToRem(16.604)}`, + lineHeight: 1.4, + textAlign: "center", + textTransform: "uppercase", + userSelect: "none", + backgroundSize: "150% !important", + backgroundPositionX: "25% !important", + transition: "all 150ms ease-in", + + "&:disabled": { + pointerEvent: "none", + opacity: 0.65, + }, + + "& .material-icons": { + fontSize: pxToRem(15), + marginTop: pxToRem(-2), + }, +}; + +export default root; diff --git a/src/assets/theme-dark/components/button/text.ts b/src/assets/theme-dark/components/button/text.ts new file mode 100644 index 0000000..c5f91bd --- /dev/null +++ b/src/assets/theme-dark/components/button/text.ts @@ -0,0 +1,104 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; +import typography from "assets/theme-dark/base/typography"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +const { text, info, secondary, transparent } = colors; +const { size } = typography; + +const buttonText = { + base: { + backgroundColor: transparent.main, + minHeight: pxToRem(37), + color: text.main, + boxShadow: "none", + padding: `${pxToRem(9)} ${pxToRem(24)}`, + + "&:hover": { + backgroundColor: transparent.main, + boxShadow: "none", + }, + + "&:focus": { + boxShadow: "none", + }, + + "&:active, &:active:focus, &:active:hover": { + opacity: 0.85, + boxShadow: "none", + }, + + "&:disabled": { + boxShadow: "none", + }, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(16)} !important`, + }, + }, + + small: { + minHeight: pxToRem(29), + padding: `${pxToRem(6)} ${pxToRem(18)}`, + fontSize: size.xs, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(12)} !important`, + }, + }, + + large: { + minHeight: pxToRem(44), + padding: `${pxToRem(12)} ${pxToRem(64)}`, + fontSize: size.sm, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(22)} !important`, + }, + }, + + primary: { + color: info.main, + + "&:hover": { + color: info.main, + }, + + "&:focus:not(:hover)": { + color: info.focus, + boxShadow: "none", + }, + }, + + secondary: { + color: secondary.main, + + "&:hover": { + color: secondary.main, + }, + + "&:focus:not(:hover)": { + color: secondary.focus, + boxShadow: "none", + }, + }, +}; + +export default buttonText; diff --git a/src/assets/theme-dark/components/buttonBase.ts b/src/assets/theme-dark/components/buttonBase.ts new file mode 100644 index 0000000..f91be4a --- /dev/null +++ b/src/assets/theme-dark/components/buttonBase.ts @@ -0,0 +1,25 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// types +type Types = any; + +const buttonBase: Types = { + defaultProps: { + disableRipple: false, + }, +}; + +export default buttonBase; diff --git a/src/assets/theme-dark/components/card/cardContent.ts b/src/assets/theme-dark/components/card/cardContent.ts new file mode 100644 index 0000000..d966161 --- /dev/null +++ b/src/assets/theme-dark/components/card/cardContent.ts @@ -0,0 +1,32 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +// types +type Types = any; + +const cardContent: Types = { + styleOverrides: { + root: { + marginTop: 0, + marginBottom: 0, + padding: `${pxToRem(8)} ${pxToRem(24)} ${pxToRem(24)}`, + }, + }, +}; + +export default cardContent; diff --git a/src/assets/theme-dark/components/card/cardMedia.ts b/src/assets/theme-dark/components/card/cardMedia.ts new file mode 100644 index 0000000..e644c66 --- /dev/null +++ b/src/assets/theme-dark/components/card/cardMedia.ts @@ -0,0 +1,40 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme-dark/base/borders"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +const { borderRadius } = borders; + +// types +type Types = any; + +const cardMedia: Types = { + styleOverrides: { + root: { + borderRadius: borderRadius.xl, + margin: `${pxToRem(16)} ${pxToRem(16)} 0`, + }, + + media: { + width: "auto", + }, + }, +}; + +export default cardMedia; diff --git a/src/assets/theme-dark/components/card/index.ts b/src/assets/theme-dark/components/card/index.ts new file mode 100644 index 0000000..bbf13a5 --- /dev/null +++ b/src/assets/theme-dark/components/card/index.ts @@ -0,0 +1,50 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; +import borders from "assets/theme-dark/base/borders"; +import boxShadows from "assets/theme-dark/base/boxShadows"; + +// Material Dashboard 2 PRO React Helper Function +import rgba from "assets/theme-dark/functions/rgba"; + +const { black, background } = colors; +const { borderWidth, borderRadius } = borders; +const { md } = boxShadows; + +// types +type Types = any; + +const card: Types = { + styleOverrides: { + root: { + display: "flex", + flexDirection: "column", + position: "relative", + minWidth: 0, + wordWrap: "break-word", + backgroundImage: "none", + backgroundColor: background.card, + backgroundClip: "border-box", + border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`, + borderRadius: borderRadius.xl, + boxShadow: md, + overflow: "visible", + }, + }, +}; + +export default card; diff --git a/src/assets/theme-dark/components/container.ts b/src/assets/theme-dark/components/container.ts new file mode 100644 index 0000000..77f0f34 --- /dev/null +++ b/src/assets/theme-dark/components/container.ts @@ -0,0 +1,77 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import breakpoints from "assets/theme-dark/base/breakpoints"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +// types +type Types = any; + +const { + values: { sm, md, lg, xl, xxl }, +} = breakpoints; + +const SM = `@media (min-width: ${sm}px)`; +const MD = `@media (min-width: ${md}px)`; +const LG = `@media (min-width: ${lg}px)`; +const XL = `@media (min-width: ${xl}px)`; +const XXL = `@media (min-width: ${xxl}px)`; + +const sharedClasses = { + paddingRight: `${pxToRem(24)} !important`, + paddingLeft: `${pxToRem(24)} !important`, + marginRight: "auto !important", + marginLeft: "auto !important", + width: "100% !important", + position: "relative", +}; + +const container: Types = { + [SM]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "540px !important", + }, + }, + [MD]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "720px !important", + }, + }, + [LG]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "960px !important", + }, + }, + [XL]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "1140px !important", + }, + }, + [XXL]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "1320px !important", + }, + }, +}; + +export default container; diff --git a/src/assets/theme-dark/components/dialog/dialogActions.ts b/src/assets/theme-dark/components/dialog/dialogActions.ts new file mode 100644 index 0000000..5aef775 --- /dev/null +++ b/src/assets/theme-dark/components/dialog/dialogActions.ts @@ -0,0 +1,30 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +// types +type Types = any; + +const dialogActions: Types = { + styleOverrides: { + root: { + padding: pxToRem(16), + }, + }, +}; + +export default dialogActions; diff --git a/src/assets/theme-dark/components/dialog/dialogContent.ts b/src/assets/theme-dark/components/dialog/dialogContent.ts new file mode 100644 index 0000000..dd24b94 --- /dev/null +++ b/src/assets/theme-dark/components/dialog/dialogContent.ts @@ -0,0 +1,47 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme-dark/base/typography"; +import borders from "assets/theme-dark/base/borders"; +import colors from "assets/theme-dark/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; +import rgba from "assets/theme-dark/functions/rgba"; + +const { size } = typography; +const { white } = colors; +const { borderWidth, borderColor } = borders; + +// types +type Types = any; + +const dialogContent: Types = { + styleOverrides: { + root: { + padding: pxToRem(16), + fontSize: size.md, + color: rgba(white.main, 0.8), + }, + + dividers: { + borderTop: `${borderWidth[1]} solid ${rgba(borderColor, 0.6)}`, + borderBottom: `${borderWidth[1]} solid ${rgba(borderColor, 0.6)}`, + }, + }, +}; + +export default dialogContent; diff --git a/src/assets/theme-dark/components/dialog/dialogContentText.ts b/src/assets/theme-dark/components/dialog/dialogContentText.ts new file mode 100644 index 0000000..e1fabc9 --- /dev/null +++ b/src/assets/theme-dark/components/dialog/dialogContentText.ts @@ -0,0 +1,38 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme-dark/base/typography"; +import colors from "assets/theme-dark/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import rgba from "assets/theme-dark/functions/rgba"; + +const { size } = typography; +const { white } = colors; + +// types +type Types = any; + +const dialogContentText: Types = { + styleOverrides: { + root: { + fontSize: size.md, + color: rgba(white.main, 0.8), + }, + }, +}; + +export default dialogContentText; diff --git a/src/assets/theme-dark/components/dialog/dialogTitle.ts b/src/assets/theme-dark/components/dialog/dialogTitle.ts new file mode 100644 index 0000000..8e7411f --- /dev/null +++ b/src/assets/theme-dark/components/dialog/dialogTitle.ts @@ -0,0 +1,36 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme-dark/base/typography"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +const { size } = typography; + +// types +type Types = any; + +const dialogTitle: Types = { + styleOverrides: { + root: { + padding: pxToRem(16), + fontSize: size.xl, + }, + }, +}; + +export default dialogTitle; diff --git a/src/assets/theme-dark/components/dialog/index.ts b/src/assets/theme-dark/components/dialog/index.ts new file mode 100644 index 0000000..ed960ef --- /dev/null +++ b/src/assets/theme-dark/components/dialog/index.ts @@ -0,0 +1,39 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme-dark/base/borders"; +import boxShadows from "assets/theme-dark/base/boxShadows"; + +const { borderRadius } = borders; +const { xxl } = boxShadows; + +// types +type Types = any; + +const dialog: Types = { + styleOverrides: { + paper: { + borderRadius: borderRadius.lg, + boxShadow: xxl, + }, + + paperFullScreen: { + borderRadius: 0, + }, + }, +}; + +export default dialog; diff --git a/src/assets/theme-dark/components/divider.ts b/src/assets/theme-dark/components/divider.ts new file mode 100644 index 0000000..0af72a5 --- /dev/null +++ b/src/assets/theme-dark/components/divider.ts @@ -0,0 +1,71 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import rgba from "assets/theme-dark/functions/rgba"; +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +const { dark, transparent, white } = colors; + +// types +type Types = any; + +const divider: Types = { + styleOverrides: { + root: { + backgroundColor: transparent.main, + backgroundImage: `linear-gradient(to right, ${rgba(dark.main, 0)}, ${white.main}, ${rgba( + dark.main, + 0 + )}) !important`, + height: pxToRem(1), + margin: `${pxToRem(16)} 0`, + borderBottom: "none", + opacity: 0.25, + }, + + vertical: { + backgroundColor: transparent.main, + backgroundImage: `linear-gradient(to bottom, ${rgba(dark.main, 0)}, ${white.main}, ${rgba( + dark.main, + 0 + )}) !important`, + width: pxToRem(1), + height: "100%", + margin: `0 ${pxToRem(16)}`, + borderRight: "none", + }, + + light: { + backgroundColor: transparent.main, + backgroundImage: `linear-gradient(to right, ${rgba(white.main, 0)}, ${rgba( + dark.main, + 0.4 + )}, ${rgba(white.main, 0)}) !important`, + + "&.MuiDivider-vertical": { + backgroundImage: `linear-gradient(to bottom, ${rgba(white.main, 0)}, ${rgba( + dark.main, + 0.4 + )}, ${rgba(white.main, 0)}) !important`, + }, + }, + }, +}; + +export default divider; diff --git a/src/assets/theme-dark/components/flatpickr.ts b/src/assets/theme-dark/components/flatpickr.ts new file mode 100644 index 0000000..909d5f3 --- /dev/null +++ b/src/assets/theme-dark/components/flatpickr.ts @@ -0,0 +1,58 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import rgba from "assets/theme-dark/functions/rgba"; + +const { info, white, gradients } = colors; + +// types +type Types = any; + +const flatpickr: Types = { + ".flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.nextMonthDay:hover, .flatpickr-day.nextMonthDay:focus": + { + background: rgba(info.main, 0.28), + border: "none", + }, + + ".flatpickr-day.today": { + background: info.main, + color: white.main, + border: "none", + + "&:hover, &:focus": { + background: `${info.focus} !important`, + }, + }, + + ".flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.nextMonthDay.selected, .flatpickr-day.nextMonthDay.selected:hover, .flatpickr-day.nextMonthDay.selected:focus": + { + background: `${gradients.info.state} !important`, + color: white.main, + border: "none", + }, + + ".flatpickr-months .flatpickr-next-month:hover svg, .flatpickr-months .flatpickr-prev-month:hover svg": + { + color: `${info.main} !important`, + fill: `${info.main} !important`, + }, +}; + +export default flatpickr; diff --git a/src/assets/theme-dark/components/form/autocomplete.ts b/src/assets/theme-dark/components/form/autocomplete.ts new file mode 100644 index 0000000..8a1f72b --- /dev/null +++ b/src/assets/theme-dark/components/form/autocomplete.ts @@ -0,0 +1,112 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import boxShadows from "assets/theme-dark/base/boxShadows"; +import typography from "assets/theme-dark/base/typography"; +import colors from "assets/theme-dark/base/colors"; +import borders from "assets/theme-dark/base/borders"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; +import rgba from "assets/theme-dark/functions/rgba"; + +const { md } = boxShadows; +const { size } = typography; +const { text, transparent, light, dark, gradients, background, white } = colors; +const { borderRadius } = borders; + +// types +type Types = any; + +const autocompletle: Types = { + styleOverrides: { + popper: { + boxShadow: md, + padding: pxToRem(8), + fontSize: size.sm, + color: text.main, + textAlign: "left", + backgroundColor: `${background.card} !important`, + borderRadius: borderRadius.md, + }, + + paper: { + boxShadow: "none", + backgroundColor: transparent.main, + }, + + option: { + padding: `${pxToRem(4.8)} ${pxToRem(16)}`, + borderRadius: borderRadius.md, + fontSize: size.sm, + color: text.main, + transition: "background-color 300ms ease, color 300ms ease", + + "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { + backgroundColor: rgba(light.main, 0.2), + color: white.main, + }, + + '&[aria-selected="true"]': { + backgroundColor: `${rgba(light.main, 0.2)} !important`, + color: `${white.main} !important`, + }, + }, + + noOptions: { + fontSize: size.sm, + color: text.main, + }, + + groupLabel: { + color: dark.main, + }, + + loading: { + fontSize: size.sm, + color: text.main, + }, + + tag: { + display: "flex", + alignItems: "center", + height: "auto", + padding: pxToRem(4), + backgroundColor: gradients.dark.state, + color: white.main, + + "& .MuiChip-label": { + lineHeight: 1.2, + padding: `0 ${pxToRem(10)} 0 ${pxToRem(4)}`, + }, + + "& .MuiSvgIcon-root, & .MuiSvgIcon-root:hover, & .MuiSvgIcon-root:focus": { + color: white.main, + marginRight: 0, + }, + }, + + popupIndicator: { + color: text.main, + }, + + clearIndicator: { + color: text.main, + }, + }, +}; + +export default autocompletle; diff --git a/src/assets/theme-dark/components/form/checkbox.ts b/src/assets/theme-dark/components/form/checkbox.ts new file mode 100644 index 0000000..b5fa60e --- /dev/null +++ b/src/assets/theme-dark/components/form/checkbox.ts @@ -0,0 +1,86 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme-dark/base/borders"; +import colors from "assets/theme-dark/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; +import linearGradient from "assets/theme-dark/functions/linearGradient"; + +const { borderWidth, borderColor } = borders; +const { transparent, info } = colors; + +// types +type Types = any; + +const checkbox: Types = { + styleOverrides: { + root: { + "& .MuiSvgIcon-root": { + backgroundPosition: "center", + backgroundSize: "contain", + backgroundRepeat: "no-repeat", + width: pxToRem(20), + height: pxToRem(20), + color: transparent.main, + border: `${borderWidth[1]} solid ${borderColor}`, + borderRadius: pxToRem(5.6), + }, + + "&:hover": { + backgroundColor: transparent.main, + }, + + "&.Mui-focusVisible": { + border: `${borderWidth[2]} solid ${info.main} !important`, + }, + }, + + colorPrimary: { + color: borderColor, + + "&.Mui-checked": { + color: info.main, + + "& .MuiSvgIcon-root": { + backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient( + info.main, + info.main + )}`, + borderColor: info.main, + }, + }, + }, + + colorSecondary: { + color: borderColor, + + "& .MuiSvgIcon-root": { + color: info.main, + "&.Mui-checked": { + backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient( + info.main, + info.main + )}`, + borderColor: info.main, + }, + }, + }, + }, +}; + +export default checkbox; diff --git a/src/assets/theme-dark/components/form/formControlLabel.ts b/src/assets/theme-dark/components/form/formControlLabel.ts new file mode 100644 index 0000000..b8a936b --- /dev/null +++ b/src/assets/theme-dark/components/form/formControlLabel.ts @@ -0,0 +1,53 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; +import typography from "assets/theme-dark/base/typography"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +const { white } = colors; +const { size, fontWeightBold } = typography; + +// types +type Types = any; + +const formControlLabel: Types = { + styleOverrides: { + root: { + display: "block", + minHeight: pxToRem(24), + marginBottom: pxToRem(2), + }, + + label: { + display: "inline-block", + fontSize: size.sm, + fontWeight: fontWeightBold, + color: white.main, + lineHeight: 1, + transform: `translateY(${pxToRem(1)})`, + marginLeft: pxToRem(4), + + "&.Mui-disabled": { + color: white.main, + }, + }, + }, +}; + +export default formControlLabel; diff --git a/src/assets/theme-dark/components/form/formLabel.ts b/src/assets/theme-dark/components/form/formLabel.ts new file mode 100644 index 0000000..f4e5410 --- /dev/null +++ b/src/assets/theme-dark/components/form/formLabel.ts @@ -0,0 +1,32 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; + +const { text } = colors; + +// types +type Types = any; + +const formLabel: Types = { + styleOverrides: { + root: { + color: text.main, + }, + }, +}; + +export default formLabel; diff --git a/src/assets/theme-dark/components/form/input.ts b/src/assets/theme-dark/components/form/input.ts new file mode 100644 index 0000000..530ddd1 --- /dev/null +++ b/src/assets/theme-dark/components/form/input.ts @@ -0,0 +1,60 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; +import typography from "assets/theme-dark/base/typography"; +import borders from "assets/theme-dark/base/borders"; + +// Material Dashboard 2 PRO React TS Helper Functions +import rgba from "assets/theme-dark/functions/rgba"; + +const { info, inputBorderColor, dark, grey, white } = colors; +const { size } = typography; +const { borderWidth } = borders; + +// types +type Types = any; + +const input: Types = { + styleOverrides: { + root: { + fontSize: size.sm, + color: dark.main, + + "&:hover:not(.Mui-disabled):before": { + borderBottom: `${borderWidth[1]} solid ${rgba(inputBorderColor, 0.6)}`, + }, + + "&:before": { + borderColor: rgba(inputBorderColor, 0.6), + }, + + "&:after": { + borderColor: info.main, + }, + + input: { + color: white.main, + + "&::-webkit-input-placeholder": { + color: grey[100], + }, + }, + }, + }, +}; + +export default input; diff --git a/src/assets/theme-dark/components/form/inputLabel.ts b/src/assets/theme-dark/components/form/inputLabel.ts new file mode 100644 index 0000000..231e01f --- /dev/null +++ b/src/assets/theme-dark/components/form/inputLabel.ts @@ -0,0 +1,63 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; +import typography from "assets/theme-dark/base/typography"; + +const { text, info } = colors; +const { size } = typography; + +// types +type Types = any; + +const inputLabel: Types = { + styleOverrides: { + root: { + fontSize: size.sm, + color: text.main, + lineHeight: 0.9, + + "&.Mui-focused": { + color: info.main, + }, + + "&.MuiInputLabel-shrink": { + lineHeight: 1.5, + fontSize: size.md, + + "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { + fontSize: "0.85em", + }, + }, + }, + + sizeSmall: { + fontSize: size.xs, + lineHeight: 1.625, + + "&.MuiInputLabel-shrink": { + lineHeight: 1.6, + fontSize: size.sm, + + "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { + fontSize: "0.72em", + }, + }, + }, + }, +}; + +export default inputLabel; diff --git a/src/assets/theme-dark/components/form/inputOutlined.ts b/src/assets/theme-dark/components/form/inputOutlined.ts new file mode 100644 index 0000000..1d86e7f --- /dev/null +++ b/src/assets/theme-dark/components/form/inputOutlined.ts @@ -0,0 +1,76 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; +import borders from "assets/theme-dark/base/borders"; +import typography from "assets/theme-dark/base/typography"; + +// // Material Dashboard 2 PRO React TSUI Dashboard PRO helper functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; +import rgba from "assets/theme-dark/functions/rgba"; + +const { inputBorderColor, info, grey, transparent, white } = colors; +const { borderRadius } = borders; +const { size } = typography; + +// types +type Types = any; + +const inputOutlined: Types = { + styleOverrides: { + root: { + backgroundColor: transparent.main, + fontSize: size.sm, + borderRadius: borderRadius.md, + + "&:hover .MuiOutlinedInput-notchedOutline": { + borderColor: rgba(inputBorderColor, 0.6), + }, + + "&.Mui-focused": { + "& .MuiOutlinedInput-notchedOutline": { + borderColor: info.main, + }, + }, + }, + + notchedOutline: { + borderColor: rgba(inputBorderColor, 0.6), + }, + + input: { + color: white.main, + padding: pxToRem(12), + backgroundColor: transparent.main, + + "&::-webkit-input-placeholder": { + color: grey[100], + }, + }, + + inputSizeSmall: { + fontSize: size.xs, + padding: pxToRem(10), + }, + + multiline: { + color: grey[700], + padding: 0, + }, + }, +}; + +export default inputOutlined; diff --git a/src/assets/theme-dark/components/form/radio.ts b/src/assets/theme-dark/components/form/radio.ts new file mode 100644 index 0000000..0e20a23 --- /dev/null +++ b/src/assets/theme-dark/components/form/radio.ts @@ -0,0 +1,100 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme-dark/base/borders"; +import colors from "assets/theme-dark/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; +import linearGradient from "assets/theme-dark/functions/linearGradient"; + +const { borderWidth, borderColor } = borders; +const { transparent, info } = colors; + +// types +type Types = any; + +const radio: Types = { + styleOverrides: { + root: { + "& .MuiSvgIcon-root": { + width: pxToRem(20), + height: pxToRem(20), + color: transparent.main, + border: `${borderWidth[1]} solid ${borderColor}`, + borderRadius: "50%", + }, + + "&:after": { + transition: "opacity 250ms ease-in-out", + content: `""`, + position: "absolute", + width: pxToRem(14), + height: pxToRem(14), + borderRadius: "50%", + backgroundImage: linearGradient(info.main, info.main), + opacity: 0, + left: 0, + right: 0, + top: 0, + bottom: 0, + margin: "auto", + }, + + "&:hover": { + backgroundColor: transparent.main, + }, + + "&.Mui-focusVisible": { + border: `${borderWidth[2]} solid ${info.main} !important`, + }, + }, + + colorPrimary: { + color: borderColor, + + "&.Mui-checked": { + color: info.main, + + "& .MuiSvgIcon-root": { + borderColor: info.main, + }, + + "&:after": { + opacity: 1, + }, + }, + }, + + colorSecondary: { + color: borderColor, + + "&.Mui-checked": { + color: info.main, + + "& .MuiSvgIcon-root": { + borderColor: info.main, + }, + + "&:after": { + opacity: 1, + }, + }, + }, + }, +}; + +export default radio; diff --git a/src/assets/theme-dark/components/form/select.ts b/src/assets/theme-dark/components/form/select.ts new file mode 100644 index 0000000..cbdfc4d --- /dev/null +++ b/src/assets/theme-dark/components/form/select.ts @@ -0,0 +1,52 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +const { transparent } = colors; + +// types +type Types = any; + +const select: Types = { + styleOverrides: { + select: { + display: "grid", + alignItems: "center", + padding: `0 ${pxToRem(12)} !important`, + + "& .Mui-selected": { + backgroundColor: transparent.main, + }, + }, + + selectMenu: { + background: "none", + height: "none", + minHeight: "none", + overflow: "unset", + }, + + icon: { + display: "none", + }, + }, +}; + +export default select; diff --git a/src/assets/theme-dark/components/form/switchButton.ts b/src/assets/theme-dark/components/form/switchButton.ts new file mode 100644 index 0000000..7e48225 --- /dev/null +++ b/src/assets/theme-dark/components/form/switchButton.ts @@ -0,0 +1,91 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; +import borders from "assets/theme-dark/base/borders"; +import boxShadows from "assets/theme-dark/base/boxShadows"; + +// Material Dashboard 2 PRO React TS Helper Functions +// import rgba from "assets/theme-dark/functions/rgba"; +import pxToRem from "assets/theme-dark/functions/pxToRem"; +import linearGradient from "assets/theme-dark/functions/linearGradient"; + +const { white, gradients, grey, transparent } = colors; +const { borderWidth } = borders; +const { md } = boxShadows; + +// types +type Types = any; + +const switchButton: Types = { + defaultProps: { + disableRipple: false, + }, + + styleOverrides: { + switchBase: { + color: gradients.dark.main, + + "&:hover": { + backgroundColor: transparent.main, + }, + + "&.Mui-checked": { + color: gradients.dark.main, + + "&:hover": { + backgroundColor: transparent.main, + }, + + "& .MuiSwitch-thumb": { + borderColor: `${gradients.dark.main} !important`, + }, + + "& + .MuiSwitch-track": { + backgroundColor: `${gradients.dark.main} !important`, + borderColor: `${gradients.dark.main} !important`, + opacity: 1, + }, + }, + + "&.Mui-disabled + .MuiSwitch-track": { + opacity: "0.3 !important", + }, + + "&.Mui-focusVisible .MuiSwitch-thumb": { + backgroundImage: linearGradient(gradients.info.main, gradients.info.state), + }, + }, + + thumb: { + backgroundColor: white.main, + boxShadow: md, + border: `${borderWidth[1]} solid ${grey[400]}`, + }, + + track: { + width: pxToRem(32), + height: pxToRem(15), + backgroundColor: grey[400], + border: `${borderWidth[1]} solid ${grey[400]}`, + opacity: 1, + }, + + checked: {}, + }, +}; + +export default switchButton; diff --git a/src/assets/theme-dark/components/form/textField.ts b/src/assets/theme-dark/components/form/textField.ts new file mode 100644 index 0000000..eb49a4a --- /dev/null +++ b/src/assets/theme-dark/components/form/textField.ts @@ -0,0 +1,32 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; + +const { transparent } = colors; + +// types +type Types = any; + +const textField: Types = { + styleOverrides: { + root: { + backgroundColor: transparent.main, + }, + }, +}; + +export default textField; diff --git a/src/assets/theme-dark/components/icon.ts b/src/assets/theme-dark/components/icon.ts new file mode 100644 index 0000000..2353b0f --- /dev/null +++ b/src/assets/theme-dark/components/icon.ts @@ -0,0 +1,43 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +// types +type Types = any; + +const icon: Types = { + defaultProps: { + baseClassName: "material-icons-round", + fontSize: "inherit", + }, + + styleOverrides: { + fontSizeInherit: { + fontSize: "inherit !important", + }, + + fontSizeSmall: { + fontSize: `${pxToRem(20)} !important`, + }, + + fontSizeLarge: { + fontSize: `${pxToRem(36)} !important`, + }, + }, +}; + +export default icon; diff --git a/src/assets/theme-dark/components/iconButton.ts b/src/assets/theme-dark/components/iconButton.ts new file mode 100644 index 0000000..12e24c3 --- /dev/null +++ b/src/assets/theme-dark/components/iconButton.ts @@ -0,0 +1,34 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; + +const { transparent } = colors; + +// types +type Types = any; + +const iconButton: Types = { + styleOverrides: { + root: { + "&:hover": { + backgroundColor: transparent.main, + }, + }, + }, +}; + +export default iconButton; diff --git a/src/assets/theme-dark/components/linearProgress.ts b/src/assets/theme-dark/components/linearProgress.ts new file mode 100644 index 0000000..c795d4e --- /dev/null +++ b/src/assets/theme-dark/components/linearProgress.ts @@ -0,0 +1,56 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme-dark/base/borders"; +import colors from "assets/theme-dark/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +const { borderRadius } = borders; +const { light } = colors; + +// types +type Types = any; + +const linearProgress: Types = { + styleOverrides: { + root: { + height: pxToRem(6), + borderRadius: borderRadius.md, + overflow: "visible", + position: "relative", + }, + + colorPrimary: { + backgroundColor: light.main, + }, + + colorSecondary: { + backgroundColor: light.main, + }, + + bar: { + height: pxToRem(6), + borderRadius: borderRadius.sm, + position: "absolute", + transform: `translate(0, 0) !important`, + transition: "width 0.6s ease !important", + }, + }, +}; + +export default linearProgress; diff --git a/src/assets/theme-dark/components/link.ts b/src/assets/theme-dark/components/link.ts new file mode 100644 index 0000000..0aaf207 --- /dev/null +++ b/src/assets/theme-dark/components/link.ts @@ -0,0 +1,26 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// types +type Types = any; + +const link: Types = { + defaultProps: { + underline: "none", + color: "inherit", + }, +}; + +export default link; diff --git a/src/assets/theme-dark/components/list/index.ts b/src/assets/theme-dark/components/list/index.ts new file mode 100644 index 0000000..cddfdae --- /dev/null +++ b/src/assets/theme-dark/components/list/index.ts @@ -0,0 +1,28 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// types +type Types = any; + +const list: Types = { + styleOverrides: { + padding: { + paddingTop: 0, + paddingBottom: 0, + }, + }, +}; + +export default list; diff --git a/src/assets/theme-dark/components/list/listItem.ts b/src/assets/theme-dark/components/list/listItem.ts new file mode 100644 index 0000000..bcd022c --- /dev/null +++ b/src/assets/theme-dark/components/list/listItem.ts @@ -0,0 +1,32 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// types +type Types = any; + +const listItem: Types = { + defaultProps: { + disableGutters: true, + }, + + styleOverrides: { + root: { + paddingTop: 0, + paddingBottom: 0, + }, + }, +}; + +export default listItem; diff --git a/src/assets/theme-dark/components/list/listItemText.ts b/src/assets/theme-dark/components/list/listItemText.ts new file mode 100644 index 0000000..7ca6d40 --- /dev/null +++ b/src/assets/theme-dark/components/list/listItemText.ts @@ -0,0 +1,28 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// types +type Types = any; + +const listItemText: Types = { + styleOverrides: { + root: { + marginTop: 0, + marginBottom: 0, + }, + }, +}; + +export default listItemText; diff --git a/src/assets/theme-dark/components/menu/index.ts b/src/assets/theme-dark/components/menu/index.ts new file mode 100644 index 0000000..220ecad --- /dev/null +++ b/src/assets/theme-dark/components/menu/index.ts @@ -0,0 +1,52 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import boxShadows from "assets/theme-dark/base/boxShadows"; +import typography from "assets/theme-dark/base/typography"; +import colors from "assets/theme-dark/base/colors"; +import borders from "assets/theme-dark/base/borders"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +const { md } = boxShadows; +const { size } = typography; +const { text, background } = colors; +const { borderRadius } = borders; + +// types +type Types = any; + +const menu: Types = { + defaultProps: { + disableAutoFocusItem: true, + }, + + styleOverrides: { + paper: { + minWidth: pxToRem(160), + boxShadow: md, + padding: `${pxToRem(16)} ${pxToRem(8)}`, + fontSize: size.sm, + color: text.main, + textAlign: "left", + backgroundColor: `${background.card} !important`, + borderRadius: borderRadius.md, + }, + }, +}; + +export default menu; diff --git a/src/assets/theme-dark/components/menu/menuItem.ts b/src/assets/theme-dark/components/menu/menuItem.ts new file mode 100644 index 0000000..4a5406c --- /dev/null +++ b/src/assets/theme-dark/components/menu/menuItem.ts @@ -0,0 +1,51 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; +import borders from "assets/theme-dark/base/borders"; +import typography from "assets/theme-dark/base/typography"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; +import rgba from "assets/theme-dark/functions/rgba"; + +const { dark, white } = colors; +const { borderRadius } = borders; +const { size } = typography; + +// types +type Types = any; + +const menuItem: Types = { + styleOverrides: { + root: { + minWidth: pxToRem(160), + minHeight: "unset", + padding: `${pxToRem(4.8)} ${pxToRem(16)}`, + borderRadius: borderRadius.md, + fontSize: size.sm, + color: rgba(white.main, 0.8), + transition: "background-color 300ms ease, color 300ms ease", + + "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { + backgroundColor: dark.main, + color: white.main, + }, + }, + }, +}; + +export default menuItem; diff --git a/src/assets/theme-dark/components/popover.ts b/src/assets/theme-dark/components/popover.ts new file mode 100644 index 0000000..7d47f67 --- /dev/null +++ b/src/assets/theme-dark/components/popover.ts @@ -0,0 +1,38 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; +import boxShadows from "assets/theme-dark/base/boxShadows"; +import borders from "assets/theme-dark/base/borders"; + +const { transparent } = colors; +const { lg } = boxShadows; +const { borderRadius } = borders; + +// types +type Types = any; + +const popover: Types = { + styleOverrides: { + paper: { + backgroundColor: transparent.main, + boxShadow: lg, + borderRadius: borderRadius.md, + }, + }, +}; + +export default popover; diff --git a/src/assets/theme-dark/components/sidenav.ts b/src/assets/theme-dark/components/sidenav.ts new file mode 100644 index 0000000..32d85bb --- /dev/null +++ b/src/assets/theme-dark/components/sidenav.ts @@ -0,0 +1,52 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; +import borders from "assets/theme-dark/base/borders"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +const { background } = colors; +const { borderRadius } = borders; + +// types +type Types = any; + +const sidenav: Types = { + styleOverrides: { + root: { + width: pxToRem(250), + whiteSpace: "nowrap", + border: "none", + }, + + paper: { + width: pxToRem(250), + backgroundColor: background.sidenav, + height: `calc(100vh - ${pxToRem(32)})`, + margin: pxToRem(16), + borderRadius: borderRadius.xl, + border: "none", + }, + + paperAnchorDockedLeft: { + borderRight: "none", + }, + }, +}; + +export default sidenav; diff --git a/src/assets/theme-dark/components/slider.ts b/src/assets/theme-dark/components/slider.ts new file mode 100644 index 0000000..0c034c7 --- /dev/null +++ b/src/assets/theme-dark/components/slider.ts @@ -0,0 +1,84 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; +import boxShadows from "assets/theme/base/boxShadows"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; +import boxShadow from "assets/theme/functions/boxShadow"; + +const { grey, white, black, info } = colors; +const { borderRadius, borderWidth } = borders; +const { sliderBoxShadow } = boxShadows; + +// types +type Types = any; + +const slider: Types = { + styleOverrides: { + root: { + width: "100%", + + "& .MuiSlider-active, & .Mui-focusVisible": { + boxShadow: "none !important", + }, + + "& .MuiSlider-valueLabel": { + color: black.main, + }, + }, + + rail: { + height: pxToRem(2), + background: grey[200], + borderRadius: borderRadius.sm, + opacity: 1, + }, + + track: { + background: info.main, + height: pxToRem(2), + position: "relative", + border: "none", + borderRadius: borderRadius.lg, + zIndex: 1, + }, + + thumb: { + width: pxToRem(14), + height: pxToRem(14), + backgroundColor: white.main, + zIndex: 10, + boxShadow: sliderBoxShadow.thumb, + border: `${borderWidth[1]} solid ${info.main}`, + transition: "all 200ms linear", + + "&:hover": { + boxShadow: "none", + }, + + "&:active": { + transform: "translate(-50%, -50%) scale(1.4)", + }, + + "&.Mui-active": { boxShadow: boxShadow([0, 0], [0, 14], info.main, 0.16) }, + }, + }, +}; + +export default slider; diff --git a/src/assets/theme-dark/components/stepper/index.ts b/src/assets/theme-dark/components/stepper/index.ts new file mode 100644 index 0000000..d00a7c2 --- /dev/null +++ b/src/assets/theme-dark/components/stepper/index.ts @@ -0,0 +1,47 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; +import borders from "assets/theme-dark/base/borders"; +import boxShadows from "assets/theme-dark/base/boxShadows"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; +import linearGradient from "assets/theme-dark/functions/linearGradient"; + +const { transparent, gradients } = colors; +const { borderRadius } = borders; +const { colored } = boxShadows; + +// types +type Types = any; + +const stepper: Types = { + styleOverrides: { + root: { + background: linearGradient(gradients.info.main, gradients.info.state), + padding: `${pxToRem(24)} 0 ${pxToRem(16)}`, + borderRadius: borderRadius.lg, + boxShadow: colored.info, + + "&.MuiPaper-root": { + backgroundColor: transparent.main, + }, + }, + }, +}; + +export default stepper; diff --git a/src/assets/theme-dark/components/stepper/step.ts b/src/assets/theme-dark/components/stepper/step.ts new file mode 100644 index 0000000..aed1689 --- /dev/null +++ b/src/assets/theme-dark/components/stepper/step.ts @@ -0,0 +1,30 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +// types +type Types = any; + +const step: Types = { + styleOverrides: { + root: { + padding: `0 ${pxToRem(6)}`, + }, + }, +}; + +export default step; diff --git a/src/assets/theme-dark/components/stepper/stepConnector.ts b/src/assets/theme-dark/components/stepper/stepConnector.ts new file mode 100644 index 0000000..e22b08a --- /dev/null +++ b/src/assets/theme-dark/components/stepper/stepConnector.ts @@ -0,0 +1,55 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme-dark/base/borders"; +import colors from "assets/theme-dark/base/colors"; + +const { white } = colors; +const { borderWidth } = borders; + +// types +type Types = any; + +const stepConnector: Types = { + styleOverrides: { + root: { + color: "#9fc9ff", + transition: "all 200ms linear", + + "&.Mui-active": { + color: white.main, + }, + + "&.Mui-completed": { + color: white.main, + }, + }, + + alternativeLabel: { + top: "14%", + left: "-50%", + right: "50%", + }, + + line: { + borderWidth: `${borderWidth[2]} !important`, + borderColor: "currentColor", + opacity: 0.5, + }, + }, +}; + +export default stepConnector; diff --git a/src/assets/theme-dark/components/stepper/stepIcon.ts b/src/assets/theme-dark/components/stepper/stepIcon.ts new file mode 100644 index 0000000..a93efc5 --- /dev/null +++ b/src/assets/theme-dark/components/stepper/stepIcon.ts @@ -0,0 +1,60 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; +import boxShadow from "assets/theme-dark/functions/boxShadow"; + +const { white } = colors; + +// types +type Types = any; + +const stepIcon: Types = { + styleOverrides: { + root: { + background: "#9fc9ff", + fill: "#9fc9ff", + stroke: "#9fc9ff", + strokeWidth: pxToRem(10), + width: pxToRem(13), + height: pxToRem(13), + borderRadius: "50%", + zIndex: 99, + transition: "all 200ms linear", + + "&.Mui-active": { + background: white.main, + fill: white.main, + stroke: white.main, + borderColor: white.main, + boxShadow: boxShadow([0, 0], [0, 2], white.main, 1), + }, + + "&.Mui-completed": { + background: white.main, + fill: white.main, + stroke: white.main, + borderColor: white.main, + boxShadow: boxShadow([0, 0], [0, 2], white.main, 1), + }, + }, + }, +}; + +export default stepIcon; diff --git a/src/assets/theme-dark/components/stepper/stepLabel.ts b/src/assets/theme-dark/components/stepper/stepLabel.ts new file mode 100644 index 0000000..f1511fe --- /dev/null +++ b/src/assets/theme-dark/components/stepper/stepLabel.ts @@ -0,0 +1,52 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme-dark/base/typography"; +import colors from "assets/theme-dark/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; +import rgba from "assets/theme-dark/functions/rgba"; + +const { size, fontWeightRegular } = typography; +const { white } = colors; + +// types +type Types = any; + +const stepLabel: Types = { + styleOverrides: { + label: { + marginTop: `${pxToRem(8)} !important`, + fontWeight: fontWeightRegular, + fontSize: size.xs, + color: "#9fc9ff", + textTransform: "uppercase", + + "&.Mui-active": { + fontWeight: `${fontWeightRegular} !important`, + color: `${rgba(white.main, 0.8)} !important`, + }, + + "&.Mui-completed": { + fontWeight: `${fontWeightRegular} !important`, + color: `${rgba(white.main, 0.8)} !important`, + }, + }, + }, +}; + +export default stepLabel; diff --git a/src/assets/theme-dark/components/svgIcon.ts b/src/assets/theme-dark/components/svgIcon.ts new file mode 100644 index 0000000..885b379 --- /dev/null +++ b/src/assets/theme-dark/components/svgIcon.ts @@ -0,0 +1,42 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +// types +type Types = any; + +const svgIcon: Types = { + defaultProps: { + fontSize: "inherit", + }, + + styleOverrides: { + fontSizeInherit: { + fontSize: "inherit !important", + }, + + fontSizeSmall: { + fontSize: `${pxToRem(20)} !important`, + }, + + fontSizeLarge: { + fontSize: `${pxToRem(36)} !important`, + }, + }, +}; + +export default svgIcon; diff --git a/src/assets/theme-dark/components/table/tableCell.ts b/src/assets/theme-dark/components/table/tableCell.ts new file mode 100644 index 0000000..dc0ec46 --- /dev/null +++ b/src/assets/theme-dark/components/table/tableCell.ts @@ -0,0 +1,38 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme-dark/base/borders"; +import colors from "assets/theme-dark/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +const { borderWidth } = borders; +const { light } = colors; + +// types +type Types = any; + +const tableCell: Types = { + styleOverrides: { + root: { + padding: `${pxToRem(12)} ${pxToRem(16)}`, + borderBottom: `${borderWidth[1]} solid ${light.main}`, + }, + }, +}; + +export default tableCell; diff --git a/src/assets/theme-dark/components/table/tableContainer.ts b/src/assets/theme-dark/components/table/tableContainer.ts new file mode 100644 index 0000000..c41860a --- /dev/null +++ b/src/assets/theme-dark/components/table/tableContainer.ts @@ -0,0 +1,38 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; +import boxShadows from "assets/theme-dark/base/boxShadows"; +import borders from "assets/theme-dark/base/borders"; + +const { background } = colors; +const { md } = boxShadows; +const { borderRadius } = borders; + +// types +type Types = any; + +const tableContainer: Types = { + styleOverrides: { + root: { + backgroundColor: background.card, + boxShadow: md, + borderRadius: borderRadius.xl, + }, + }, +}; + +export default tableContainer; diff --git a/src/assets/theme-dark/components/table/tableHead.ts b/src/assets/theme-dark/components/table/tableHead.ts new file mode 100644 index 0000000..5f36e5c --- /dev/null +++ b/src/assets/theme-dark/components/table/tableHead.ts @@ -0,0 +1,37 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme-dark/base/borders"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +const { borderRadius } = borders; + +// types +type Types = any; + +const tableHead: Types = { + styleOverrides: { + root: { + display: "block", + padding: `${pxToRem(16)} ${pxToRem(16)} 0 ${pxToRem(16)}`, + borderRadius: `${borderRadius.xl} ${borderRadius.xl} 0 0`, + }, + }, +}; + +export default tableHead; diff --git a/src/assets/theme-dark/components/tabs/index.ts b/src/assets/theme-dark/components/tabs/index.ts new file mode 100644 index 0000000..4f79ca9 --- /dev/null +++ b/src/assets/theme-dark/components/tabs/index.ts @@ -0,0 +1,68 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; +import borders from "assets/theme-dark/base/borders"; +import boxShadows from "assets/theme-dark/base/boxShadows"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +const { background } = colors; +const { borderRadius } = borders; +const { md } = boxShadows; + +// types +type Types = any; + +const tabs: Types = { + styleOverrides: { + root: { + position: "relative", + backgroundColor: background.card, + borderRadius: borderRadius.xl, + minHeight: "unset", + padding: pxToRem(4), + }, + + flexContainer: { + height: "100%", + position: "relative", + zIndex: 10, + }, + + fixed: { + overflow: "unset !important", + overflowX: "unset !important", + }, + + vertical: { + "& .MuiTabs-indicator": { + width: "100%", + }, + }, + + indicator: { + height: "100%", + borderRadius: borderRadius.lg, + backgroundColor: background.default, + boxShadow: md, + transition: "all 500ms ease", + }, + }, +}; + +export default tabs; diff --git a/src/assets/theme-dark/components/tabs/tab.ts b/src/assets/theme-dark/components/tabs/tab.ts new file mode 100644 index 0000000..d5b580d --- /dev/null +++ b/src/assets/theme-dark/components/tabs/tab.ts @@ -0,0 +1,68 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme-dark/base/typography"; +import borders from "assets/theme-dark/base/borders"; +import colors from "assets/theme-dark/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +const { size, fontWeightRegular } = typography; +const { borderRadius } = borders; +const { white } = colors; + +// types +type Types = any; + +const tab: Types = { + styleOverrides: { + root: { + display: "flex", + alignItems: "center", + flexDirection: "row", + flex: "1 1 auto", + textAlign: "center", + maxWidth: "unset !important", + minWidth: "unset !important", + minHeight: "unset !important", + fontSize: size.md, + fontWeight: fontWeightRegular, + textTransform: "none", + lineHeight: "inherit", + padding: pxToRem(4), + borderRadius: borderRadius.lg, + color: `${white.main} !important`, + opacity: "1 !important", + + "& .material-icons, .material-icons-round": { + marginBottom: "0 !important", + marginRight: pxToRem(6), + }, + + "& svg": { + marginBottom: "0 !important", + marginRight: pxToRem(6), + }, + }, + + labelIcon: { + paddingTop: pxToRem(4), + }, + }, +}; + +export default tab; diff --git a/src/assets/theme-dark/components/tooltip.ts b/src/assets/theme-dark/components/tooltip.ts new file mode 100644 index 0000000..6ae87a4 --- /dev/null +++ b/src/assets/theme-dark/components/tooltip.ts @@ -0,0 +1,59 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Fade from "@mui/material/Fade"; + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; +import typography from "assets/theme-dark/base/typography"; +import borders from "assets/theme-dark/base/borders"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme-dark/functions/pxToRem"; + +const { black, white } = colors; +const { size, fontWeightRegular } = typography; +const { borderRadius } = borders; + +// types +type Types = any; + +const tooltip: Types = { + defaultProps: { + arrow: true, + TransitionComponent: Fade, + }, + + styleOverrides: { + tooltip: { + maxWidth: pxToRem(200), + backgroundColor: black.main, + color: white.main, + fontSize: size.sm, + fontWeight: fontWeightRegular, + textAlign: "center", + borderRadius: borderRadius.md, + opacity: 0.7, + padding: `${pxToRem(5)} ${pxToRem(8)} ${pxToRem(4)}`, + }, + + arrow: { + color: black.main, + }, + }, +}; + +export default tooltip; diff --git a/src/assets/theme-dark/functions/boxShadow.ts b/src/assets/theme-dark/functions/boxShadow.ts new file mode 100644 index 0000000..a4e7d08 --- /dev/null +++ b/src/assets/theme-dark/functions/boxShadow.ts @@ -0,0 +1,40 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + The boxShadow() function helps you to create a box shadow for an element + */ + +// Material Dashboard 2 PRO React TS Helper Functions +import rgba from "assets/theme/functions/rgba"; +import pxToRem from "assets/theme/functions/pxToRem"; + +function boxShadow( + offset: number[], + radius: number[], + color: string, + opacity: number, + inset: string = "" +): string { + const [x, y] = offset; + const [blur, spread] = radius; + + return `${inset} ${pxToRem(x)} ${pxToRem(y)} ${pxToRem(blur)} ${pxToRem(spread)} ${rgba( + color, + opacity + )}`; +} + +export default boxShadow; diff --git a/src/assets/theme-dark/functions/gradientChartLine.ts b/src/assets/theme-dark/functions/gradientChartLine.ts new file mode 100644 index 0000000..78310e5 --- /dev/null +++ b/src/assets/theme-dark/functions/gradientChartLine.ts @@ -0,0 +1,35 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + The gradientChartLine() function helps you to create a gradient color for the chart line + */ + +// Material Dashboard 2 PRO React TS Helper Functions +import rgba from "assets/theme/functions/rgba"; + +function gradientChartLine(chart: any, color: string, opacity: number = 0.2): any { + const ctx = chart.getContext("2d"); + const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50); + const primaryColor = rgba(color, opacity).toString(); + + gradientStroke.addColorStop(1, primaryColor); + gradientStroke.addColorStop(0.2, "rgba(72, 72, 176, 0.0)"); + gradientStroke.addColorStop(0, "rgba(203, 12, 159, 0)"); + + return gradientStroke; +} + +export default gradientChartLine; diff --git a/src/assets/theme-dark/functions/hexToRgb.ts b/src/assets/theme-dark/functions/hexToRgb.ts new file mode 100644 index 0000000..fc13aeb --- /dev/null +++ b/src/assets/theme-dark/functions/hexToRgb.ts @@ -0,0 +1,28 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + The hexToRgb() function helps you to change the hex color code to rgb + using chroma-js library. + */ + +// chroma-js is a library for all kinds of color conversions and color scales. +import chroma from "chroma-js"; + +function hexToRgb(color: string): string { + return chroma(color).rgb().join(", "); +} + +export default hexToRgb; diff --git a/src/assets/theme-dark/functions/linearGradient.ts b/src/assets/theme-dark/functions/linearGradient.ts new file mode 100644 index 0000000..4c562c5 --- /dev/null +++ b/src/assets/theme-dark/functions/linearGradient.ts @@ -0,0 +1,24 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + The linearGradient() function helps you to create a linear gradient color background + */ + +function linearGradient(color: string, colorState: string, angle: number = 195): string { + return `linear-gradient(${angle}deg, ${color}, ${colorState})`; +} + +export default linearGradient; diff --git a/src/assets/theme-dark/functions/pxToRem.ts b/src/assets/theme-dark/functions/pxToRem.ts new file mode 100644 index 0000000..35e8103 --- /dev/null +++ b/src/assets/theme-dark/functions/pxToRem.ts @@ -0,0 +1,24 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + The pxToRem() function helps you to convert a px unit into a rem unit, + */ + +function pxToRem(number: number, baseNumber: number = 16): string { + return `${number / baseNumber}rem`; +} + +export default pxToRem; diff --git a/src/assets/theme-dark/functions/rgba.ts b/src/assets/theme-dark/functions/rgba.ts new file mode 100644 index 0000000..d914902 --- /dev/null +++ b/src/assets/theme-dark/functions/rgba.ts @@ -0,0 +1,28 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + The rgba() function helps you to create a rgba color code, it uses the hexToRgb() function + to convert the hex code into rgb for using it inside the rgba color format. + */ + +// Material Dashboard 2 PRO React TS Helper Functions +import hexToRgb from "assets/theme/functions/hexToRgb"; + +function rgba(color: string, opacity: number): string { + return `rgba(${hexToRgb(color)}, ${opacity})`; +} + +export default rgba; diff --git a/src/assets/theme-dark/index.ts b/src/assets/theme-dark/index.ts new file mode 100644 index 0000000..24f005d --- /dev/null +++ b/src/assets/theme-dark/index.ts @@ -0,0 +1,160 @@ +/** +========================================================= +* Material Dashboard 2 PRO React - v2.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-material-ui +* Copyright 2021 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import { createTheme } from "@mui/material/styles"; +// import Fade from "@mui/material/Fade"; + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; +import breakpoints from "assets/theme-dark/base/breakpoints"; +import typography from "assets/theme-dark/base/typography"; +import boxShadows from "assets/theme-dark/base/boxShadows"; +import borders from "assets/theme-dark/base/borders"; +import globals from "assets/theme-dark/base/globals"; + +// Material Dashboard 2 PRO React TS Helper Functions +import boxShadow from "assets/theme-dark/functions/boxShadow"; +import hexToRgb from "assets/theme-dark/functions/hexToRgb"; +import linearGradient from "assets/theme-dark/functions/linearGradient"; +import pxToRem from "assets/theme-dark/functions/pxToRem"; +import rgba from "assets/theme-dark/functions/rgba"; + +// Material Dashboard 2 PRO React TS components base styles for @mui material components +import sidenav from "assets/theme-dark/components/sidenav"; +import list from "assets/theme-dark/components/list"; +import listItem from "assets/theme-dark/components/list/listItem"; +import listItemText from "assets/theme-dark/components/list/listItemText"; +import card from "assets/theme-dark/components/card"; +import cardMedia from "assets/theme-dark/components/card/cardMedia"; +import cardContent from "assets/theme-dark/components/card/cardContent"; +import button from "assets/theme-dark/components/button"; +import iconButton from "assets/theme-dark/components/iconButton"; +import input from "assets/theme-dark/components/form/input"; +import inputLabel from "assets/theme-dark/components/form/inputLabel"; +import inputOutlined from "assets/theme-dark/components/form/inputOutlined"; +import textField from "assets/theme-dark/components/form/textField"; +import menu from "assets/theme-dark/components/menu"; +import menuItem from "assets/theme-dark/components/menu/menuItem"; +import switchButton from "assets/theme-dark/components/form/switchButton"; +import divider from "assets/theme-dark/components/divider"; +import tableContainer from "assets/theme-dark/components/table/tableContainer"; +import tableHead from "assets/theme-dark/components/table/tableHead"; +import tableCell from "assets/theme-dark/components/table/tableCell"; +import linearProgress from "assets/theme-dark/components/linearProgress"; +import breadcrumbs from "assets/theme-dark/components/breadcrumbs"; +import slider from "assets/theme-dark/components/slider"; +import avatar from "assets/theme-dark/components/avatar"; +import tooltip from "assets/theme-dark/components/tooltip"; +import appBar from "assets/theme-dark/components/appBar"; +import tabs from "assets/theme-dark/components/tabs"; +import tab from "assets/theme-dark/components/tabs/tab"; +import stepper from "assets/theme-dark/components/stepper"; +import step from "assets/theme-dark/components/stepper/step"; +import stepConnector from "assets/theme-dark/components/stepper/stepConnector"; +import stepLabel from "assets/theme-dark/components/stepper/stepLabel"; +import stepIcon from "assets/theme-dark/components/stepper/stepIcon"; +import select from "assets/theme-dark/components/form/select"; +import formControlLabel from "assets/theme-dark/components/form/formControlLabel"; +import formLabel from "assets/theme-dark/components/form/formLabel"; +import checkbox from "assets/theme-dark/components/form/checkbox"; +import radio from "assets/theme-dark/components/form/radio"; +import autocomplete from "assets/theme-dark/components/form/autocomplete"; +import flatpickr from "assets/theme-dark/components/flatpickr"; +import container from "assets/theme-dark/components/container"; +import popover from "assets/theme-dark/components/popover"; +import buttonBase from "assets/theme-dark/components/buttonBase"; +import icon from "assets/theme-dark/components/icon"; +import svgIcon from "assets/theme-dark/components/svgIcon"; +import link from "assets/theme-dark/components/link"; +import dialog from "assets/theme-dark/components/dialog"; +import dialogTitle from "assets/theme-dark/components/dialog/dialogTitle"; +import dialogContent from "assets/theme-dark/components/dialog/dialogContent"; +import dialogContentText from "assets/theme-dark/components/dialog/dialogContentText"; +import dialogActions from "assets/theme-dark/components/dialog/dialogActions"; + +export default createTheme({ + breakpoints: { ...breakpoints }, + palette: { ...colors }, + typography: { ...typography }, + boxShadows: { ...boxShadows }, + borders: { ...borders }, + functions: { + boxShadow, + hexToRgb, + linearGradient, + pxToRem, + rgba, + }, + + components: { + MuiCssBaseline: { + styleOverrides: { + ...globals, + ...flatpickr, + ...container, + }, + }, + MuiDrawer: { ...sidenav }, + MuiList: { ...list }, + MuiListItem: { ...listItem }, + MuiListItemText: { ...listItemText }, + MuiCard: { ...card }, + MuiCardMedia: { ...cardMedia }, + MuiCardContent: { ...cardContent }, + MuiButton: { ...button }, + MuiIconButton: { ...iconButton }, + MuiInput: { ...input }, + MuiInputLabel: { ...inputLabel }, + MuiOutlinedInput: { ...inputOutlined }, + MuiTextField: { ...textField }, + MuiMenu: { ...menu }, + MuiMenuItem: { ...menuItem }, + MuiSwitch: { ...switchButton }, + MuiDivider: { ...divider }, + MuiTableContainer: { ...tableContainer }, + MuiTableHead: { ...tableHead }, + MuiTableCell: { ...tableCell }, + MuiLinearProgress: { ...linearProgress }, + MuiBreadcrumbs: { ...breadcrumbs }, + MuiSlider: { ...slider }, + MuiAvatar: { ...avatar }, + MuiTooltip: { ...tooltip }, + MuiAppBar: { ...appBar }, + MuiTabs: { ...tabs }, + MuiTab: { ...tab }, + MuiStepper: { ...stepper }, + MuiStep: { ...step }, + MuiStepConnector: { ...stepConnector }, + MuiStepLabel: { ...stepLabel }, + MuiStepIcon: { ...stepIcon }, + MuiSelect: { ...select }, + MuiFormControlLabel: { ...formControlLabel }, + MuiFormLabel: { ...formLabel }, + MuiCheckbox: { ...checkbox }, + MuiRadio: { ...radio }, + MuiAutocomplete: { ...autocomplete }, + MuiPopover: { ...popover }, + MuiButtonBase: { ...buttonBase }, + MuiIcon: { ...icon }, + MuiSvgIcon: { ...svgIcon }, + MuiLink: { ...link }, + MuiDialog: { ...dialog }, + MuiDialogTitle: { ...dialogTitle }, + MuiDialogContent: { ...dialogContent }, + MuiDialogContentText: { ...dialogContentText }, + MuiDialogActions: { ...dialogActions }, + }, +}); diff --git a/src/assets/theme-dark/theme-rtl.ts b/src/assets/theme-dark/theme-rtl.ts new file mode 100644 index 0000000..59b8e05 --- /dev/null +++ b/src/assets/theme-dark/theme-rtl.ts @@ -0,0 +1,161 @@ +/** +========================================================= +* Material Dashboard 2 PRO React - v2.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-material-ui +* Copyright 2021 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import { createTheme } from "@mui/material/styles"; +// import Fade from "@mui/material/Fade"; + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme-dark/base/colors"; +import breakpoints from "assets/theme-dark/base/breakpoints"; +import typography from "assets/theme-dark/base/typography"; +import boxShadows from "assets/theme-dark/base/boxShadows"; +import borders from "assets/theme-dark/base/borders"; +import globals from "assets/theme-dark/base/globals"; + +// Material Dashboard 2 PRO React TS Helper Functions +import boxShadow from "assets/theme-dark/functions/boxShadow"; +import hexToRgb from "assets/theme-dark/functions/hexToRgb"; +import linearGradient from "assets/theme-dark/functions/linearGradient"; +import pxToRem from "assets/theme-dark/functions/pxToRem"; +import rgba from "assets/theme-dark/functions/rgba"; + +// Material Dashboard 2 PRO React TS components base styles for @mui material components +import sidenav from "assets/theme-dark/components/sidenav"; +import list from "assets/theme-dark/components/list"; +import listItem from "assets/theme-dark/components/list/listItem"; +import listItemText from "assets/theme-dark/components/list/listItemText"; +import card from "assets/theme-dark/components/card"; +import cardMedia from "assets/theme-dark/components/card/cardMedia"; +import cardContent from "assets/theme-dark/components/card/cardContent"; +import button from "assets/theme-dark/components/button"; +import iconButton from "assets/theme-dark/components/iconButton"; +import input from "assets/theme-dark/components/form/input"; +import inputLabel from "assets/theme-dark/components/form/inputLabel"; +import inputOutlined from "assets/theme-dark/components/form/inputOutlined"; +import textField from "assets/theme-dark/components/form/textField"; +import menu from "assets/theme-dark/components/menu"; +import menuItem from "assets/theme-dark/components/menu/menuItem"; +import switchButton from "assets/theme-dark/components/form/switchButton"; +import divider from "assets/theme-dark/components/divider"; +import tableContainer from "assets/theme-dark/components/table/tableContainer"; +import tableHead from "assets/theme-dark/components/table/tableHead"; +import tableCell from "assets/theme-dark/components/table/tableCell"; +import linearProgress from "assets/theme-dark/components/linearProgress"; +import breadcrumbs from "assets/theme-dark/components/breadcrumbs"; +import slider from "assets/theme-dark/components/slider"; +import avatar from "assets/theme-dark/components/avatar"; +import tooltip from "assets/theme-dark/components/tooltip"; +import appBar from "assets/theme-dark/components/appBar"; +import tabs from "assets/theme-dark/components/tabs"; +import tab from "assets/theme-dark/components/tabs/tab"; +import stepper from "assets/theme-dark/components/stepper"; +import step from "assets/theme-dark/components/stepper/step"; +import stepConnector from "assets/theme-dark/components/stepper/stepConnector"; +import stepLabel from "assets/theme-dark/components/stepper/stepLabel"; +import stepIcon from "assets/theme-dark/components/stepper/stepIcon"; +import select from "assets/theme-dark/components/form/select"; +import formControlLabel from "assets/theme-dark/components/form/formControlLabel"; +import formLabel from "assets/theme-dark/components/form/formLabel"; +import checkbox from "assets/theme-dark/components/form/checkbox"; +import radio from "assets/theme-dark/components/form/radio"; +import autocomplete from "assets/theme-dark/components/form/autocomplete"; +import flatpickr from "assets/theme-dark/components/flatpickr"; +import container from "assets/theme-dark/components/container"; +import popover from "assets/theme-dark/components/popover"; +import buttonBase from "assets/theme-dark/components/buttonBase"; +import icon from "assets/theme-dark/components/icon"; +import svgIcon from "assets/theme-dark/components/svgIcon"; +import link from "assets/theme-dark/components/link"; +import dialog from "assets/theme-dark/components/dialog"; +import dialogTitle from "assets/theme-dark/components/dialog/dialogTitle"; +import dialogContent from "assets/theme-dark/components/dialog/dialogContent"; +import dialogContentText from "assets/theme-dark/components/dialog/dialogContentText"; +import dialogActions from "assets/theme-dark/components/dialog/dialogActions"; + +export default createTheme({ + direction: "rtl", + breakpoints: { ...breakpoints }, + palette: { ...colors }, + typography: { ...typography }, + boxShadows: { ...boxShadows }, + borders: { ...borders }, + functions: { + boxShadow, + hexToRgb, + linearGradient, + pxToRem, + rgba, + }, + + components: { + MuiCssBaseline: { + styleOverrides: { + ...globals, + ...flatpickr, + ...container, + }, + }, + MuiDrawer: { ...sidenav }, + MuiList: { ...list }, + MuiListItem: { ...listItem }, + MuiListItemText: { ...listItemText }, + MuiCard: { ...card }, + MuiCardMedia: { ...cardMedia }, + MuiCardContent: { ...cardContent }, + MuiButton: { ...button }, + MuiIconButton: { ...iconButton }, + MuiInput: { ...input }, + MuiInputLabel: { ...inputLabel }, + MuiOutlinedInput: { ...inputOutlined }, + MuiTextField: { ...textField }, + MuiMenu: { ...menu }, + MuiMenuItem: { ...menuItem }, + MuiSwitch: { ...switchButton }, + MuiDivider: { ...divider }, + MuiTableContainer: { ...tableContainer }, + MuiTableHead: { ...tableHead }, + MuiTableCell: { ...tableCell }, + MuiLinearProgress: { ...linearProgress }, + MuiBreadcrumbs: { ...breadcrumbs }, + MuiSlider: { ...slider }, + MuiAvatar: { ...avatar }, + MuiTooltip: { ...tooltip }, + MuiAppBar: { ...appBar }, + MuiTabs: { ...tabs }, + MuiTab: { ...tab }, + MuiStepper: { ...stepper }, + MuiStep: { ...step }, + MuiStepConnector: { ...stepConnector }, + MuiStepLabel: { ...stepLabel }, + MuiStepIcon: { ...stepIcon }, + MuiSelect: { ...select }, + MuiFormControlLabel: { ...formControlLabel }, + MuiFormLabel: { ...formLabel }, + MuiCheckbox: { ...checkbox }, + MuiRadio: { ...radio }, + MuiAutocomplete: { ...autocomplete }, + MuiPopover: { ...popover }, + MuiButtonBase: { ...buttonBase }, + MuiIcon: { ...icon }, + MuiSvgIcon: { ...svgIcon }, + MuiLink: { ...link }, + MuiDialog: { ...dialog }, + MuiDialogTitle: { ...dialogTitle }, + MuiDialogContent: { ...dialogContent }, + MuiDialogContentText: { ...dialogContentText }, + MuiDialogActions: { ...dialogActions }, + }, +}); diff --git a/src/assets/theme/base/borders.ts b/src/assets/theme/base/borders.ts new file mode 100644 index 0000000..9e579da --- /dev/null +++ b/src/assets/theme/base/borders.ts @@ -0,0 +1,75 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + * The base border styles for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material. + * You can add new border width, border color or border radius using this file. + * You can customized the borders value for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file. + */ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { grey } = colors; + +// types +interface Types { + borderColor: string; + borderWidth: { + 0: number; + 1: string; + 2: string; + 3: string; + 4: string; + 5: string; + }; + borderRadius: { + xs: string; + sm: string; + md: string; + lg: string; + xl: string; + xxl: string; + section: string; + }; +} + +const borders: Types = { + borderColor: grey[300], + + borderWidth: { + 0: 0, + 1: pxToRem(1), + 2: pxToRem(2), + 3: pxToRem(3), + 4: pxToRem(4), + 5: pxToRem(5), + }, + + borderRadius: { + xs: pxToRem(1.6), + sm: pxToRem(2), + md: pxToRem(6), + lg: pxToRem(8), + xl: pxToRem(12), + xxl: pxToRem(16), + section: pxToRem(160), + }, +}; + +export default borders; diff --git a/src/assets/theme/base/boxShadows.ts b/src/assets/theme/base/boxShadows.ts new file mode 100644 index 0000000..4fc58ab --- /dev/null +++ b/src/assets/theme/base/boxShadows.ts @@ -0,0 +1,148 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + * The base box-shadow styles for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material. + * You can add new box-shadow using this file. + * You can customized the box-shadow for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file. + */ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import boxShadow from "assets/theme/functions/boxShadow"; + +const { black, white, tabs, coloredShadows } = colors; + +// types +interface Types { + xs: string; + sm: string; + md: string; + lg: string; + xl: string; + xxl: string; + inset: string; + colored: + | { + primary: string; + secondary: string; + info: string; + success: string; + warning: string; + error: string; + light: string; + dark: string; + } + | any; + navbarBoxShadow: string; + sliderBoxShadow: { + thumb: string; + }; + tabsBoxShadow: { + indicator: string; + }; +} + +const boxShadows: Types = { + xs: boxShadow([0, 2], [9, -5], black.main, 0.15), + sm: boxShadow([0, 5], [10, 0], black.main, 0.12), + md: `${boxShadow([0, 4], [6, -1], black.main, 0.1)}, ${boxShadow( + [0, 2], + [4, -1], + black.main, + 0.06 + )}`, + lg: `${boxShadow([0, 10], [15, -3], black.main, 0.1)}, ${boxShadow( + [0, 4], + [6, -2], + black.main, + 0.05 + )}`, + xl: `${boxShadow([0, 20], [25, -5], black.main, 0.1)}, ${boxShadow( + [0, 10], + [10, -5], + black.main, + 0.04 + )}`, + xxl: boxShadow([0, 20], [27, 0], black.main, 0.05), + inset: boxShadow([0, 1], [2, 0], black.main, 0.075, "inset"), + colored: { + primary: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.primary, + 0.4 + )}`, + secondary: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.secondary, + 0.4 + )}`, + info: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.info, + 0.4 + )}`, + success: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.success, + 0.4 + )}`, + warning: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.warning, + 0.4 + )}`, + error: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.error, + 0.4 + )}`, + light: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.light, + 0.4 + )}`, + dark: `${boxShadow([0, 4], [20, 0], black.main, 0.14)}, ${boxShadow( + [0, 7], + [10, -5], + coloredShadows.dark, + 0.4 + )}`, + }, + + navbarBoxShadow: `${boxShadow([0, 0], [1, 1], white.main, 0.9, "inset")}, ${boxShadow( + [0, 20], + [27, 0], + black.main, + 0.05 + )}`, + sliderBoxShadow: { + thumb: boxShadow([0, 1], [13, 0], black.main, 0.2), + }, + tabsBoxShadow: { + indicator: boxShadow([0, 1], [5, 1], tabs.indicator.boxShadow, 1), + }, +}; + +export default boxShadows; diff --git a/src/assets/theme/base/breakpoints.ts b/src/assets/theme/base/breakpoints.ts new file mode 100644 index 0000000..5d3fef5 --- /dev/null +++ b/src/assets/theme/base/breakpoints.ts @@ -0,0 +1,33 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + * The base breakpoints for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material. + * You can add new breakpoints using this file. + * You can customized the breakpoints for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file. + */ + +const breakpoints = { + values: { + xs: 0, + sm: 576, + md: 768, + lg: 992, + xl: 1200, + xxl: 1400, + }, +}; + +export default breakpoints; diff --git a/src/assets/theme/base/colors.ts b/src/assets/theme/base/colors.ts new file mode 100644 index 0000000..5334376 --- /dev/null +++ b/src/assets/theme/base/colors.ts @@ -0,0 +1,389 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + * The base colors for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material. + * You can add new color using this file. + * You can customized the colors for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file. + */ + +// types +interface ColorsTypes { + main: string; + focus: string; +} + +interface GradientsTypes { + main: string; + state: string; +} + +interface SocialMediaColorsTypes { + main: string; + dark: string; +} + +interface BadgeColorsTypes { + background: string; + text: string; +} + +interface Types { + background: + | { + default: string; + sidenav?: string; + card?: string; + } + | any; + white: + | { + main: string; + focus: string; + } + | any; + text: + | { + main: string; + focus: string; + primary?: string; + secondary?: string; + disabled?: string; + } + | any; + transparent: + | { + main: string; + } + | any; + black: + | { + light: string; + main: string; + focus: string; + } + | any; + primary: ColorsTypes | any; + secondary: ColorsTypes | any; + info: ColorsTypes | any; + success: ColorsTypes | any; + warning: ColorsTypes | any; + error: ColorsTypes | any; + light: ColorsTypes | any; + dark: ColorsTypes | any; + grey: + | { + [key: string | number]: string; + } + | any; + gradients: + | { + primary: GradientsTypes; + secondary: GradientsTypes; + info: GradientsTypes; + success: GradientsTypes; + warning: GradientsTypes; + error: GradientsTypes; + light: GradientsTypes; + dark: GradientsTypes; + } + | any; + socialMediaColors: + | { + facebook: SocialMediaColorsTypes; + twitter: SocialMediaColorsTypes; + instagram: SocialMediaColorsTypes; + linkedin: SocialMediaColorsTypes; + pinterest: SocialMediaColorsTypes; + youtube: SocialMediaColorsTypes; + vimeo: SocialMediaColorsTypes; + slack: SocialMediaColorsTypes; + dribbble: SocialMediaColorsTypes; + github: SocialMediaColorsTypes; + reddit: SocialMediaColorsTypes; + tumblr: SocialMediaColorsTypes; + } + | any; + badgeColors: + | { + primary: BadgeColorsTypes; + secondary: BadgeColorsTypes; + info: BadgeColorsTypes; + success: BadgeColorsTypes; + warning: BadgeColorsTypes; + error: BadgeColorsTypes; + light: BadgeColorsTypes; + dark: BadgeColorsTypes; + } + | any; + coloredShadows: + | { + [key: string]: string; + } + | any; + inputBorderColor: string; + tabs: + | { + indicator: + | { + boxShadow: string; + } + | any; + } + | any; +} + +const colors: Types = { + background: { + default: "#f0f2f5", + }, + + text: { + main: "#7b809a", + focus: "#7b809a", + }, + + transparent: { + main: "transparent", + }, + + white: { + main: "#ffffff", + focus: "#ffffff", + }, + + black: { + light: "#000000", + main: "#000000", + focus: "#000000", + }, + + primary: { + main: "#e91e63", + focus: "#e91e63", + }, + + secondary: { + main: "#7b809a", + focus: "#8f93a9", + }, + + info: { + main: "#1A73E8", + focus: "#1662C4", + }, + + success: { + main: "#4CAF50", + focus: "#67bb6a", + }, + + warning: { + main: "#fb8c00", + focus: "#fc9d26", + }, + + error: { + main: "#F44335", + focus: "#f65f53", + }, + + light: { + main: "#f0f2f5", + focus: "#f0f2f5", + }, + + dark: { + main: "#344767", + focus: "#2c3c58", + }, + + grey: { + 100: "#f8f9fa", + 200: "#f0f2f5", + 300: "#dee2e6", + 400: "#ced4da", + 500: "#adb5bd", + 600: "#6c757d", + 700: "#495057", + 800: "#343a40", + 900: "#212529", + }, + + gradients: { + primary: { + main: "#EC407A", + state: "#D81B60", + }, + + secondary: { + main: "#747b8a", + state: "#495361", + }, + + info: { + main: "#49a3f1", + state: "#1A73E8", + }, + + success: { + main: "#66BB6A", + state: "#43A047", + }, + + warning: { + main: "#FFA726", + state: "#FB8C00", + }, + + error: { + main: "#EF5350", + state: "#E53935", + }, + + light: { + main: "#EBEFF4", + state: "#CED4DA", + }, + + dark: { + main: "#42424a", + state: "#191919", + }, + }, + + socialMediaColors: { + facebook: { + main: "#3b5998", + dark: "#344e86", + }, + + twitter: { + main: "#55acee", + dark: "#3ea1ec", + }, + + instagram: { + main: "#125688", + dark: "#0e456d", + }, + + linkedin: { + main: "#0077b5", + dark: "#00669c", + }, + + pinterest: { + main: "#cc2127", + dark: "#b21d22", + }, + + youtube: { + main: "#e52d27", + dark: "#d41f1a", + }, + + vimeo: { + main: "#1ab7ea", + dark: "#13a3d2", + }, + + slack: { + main: "#3aaf85", + dark: "#329874", + }, + + dribbble: { + main: "#ea4c89", + dark: "#e73177", + }, + + github: { + main: "#24292e", + dark: "#171a1d", + }, + + reddit: { + main: "#ff4500", + dark: "#e03d00", + }, + + tumblr: { + main: "#35465c", + dark: "#2a3749", + }, + }, + + badgeColors: { + primary: { + background: "#f8b3ca", + text: "#cc084b", + }, + + secondary: { + background: "#d7d9e1", + text: "#6c757d", + }, + + info: { + background: "#aecef7", + text: "#095bc6", + }, + + success: { + background: "#bce2be", + text: "#339537", + }, + + warning: { + background: "#ffd59f", + text: "#c87000", + }, + + error: { + background: "#fcd3d0", + text: "#f61200", + }, + + light: { + background: "#ffffff", + text: "#c7d3de", + }, + + dark: { + background: "#8097bf", + text: "#1e2e4a", + }, + }, + + coloredShadows: { + primary: "#e91e62", + secondary: "#110e0e", + info: "#00bbd4", + success: "#4caf4f", + warning: "#ff9900", + error: "#f44336", + light: "#adb5bd", + dark: "#404040", + }, + + inputBorderColor: "#d2d6da", + + tabs: { + indicator: { boxShadow: "#ddd" }, + }, +}; + +export default colors; diff --git a/src/assets/theme/base/globals.ts b/src/assets/theme/base/globals.ts new file mode 100644 index 0000000..f392c56 --- /dev/null +++ b/src/assets/theme/base/globals.ts @@ -0,0 +1,41 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +const { info, dark } = colors; + +const globals = { + html: { + scrollBehavior: "smooth", + }, + "*, *::before, *::after": { + margin: 0, + padding: 0, + }, + "a, a:link, a:visited": { + textDecoration: "none !important", + }, + "a.link, .link, a.link:link, .link:link, a.link:visited, .link:visited": { + color: `${dark.main} !important`, + transition: "color 150ms ease-in !important", + }, + "a.link:hover, .link:hover, a.link:focus, .link:focus": { + color: `${info.main} !important`, + }, +}; + +export default globals; diff --git a/src/assets/theme/base/typography.ts b/src/assets/theme/base/typography.ts new file mode 100644 index 0000000..cce492b --- /dev/null +++ b/src/assets/theme/base/typography.ts @@ -0,0 +1,320 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + * The base typography styles for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material. + * You can add new typography style using this file. + * You can customized the typography styles for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file. + */ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { dark } = colors; + +// types +interface DisplayTypes { + fontFamily: string; + color: string; + fontWeight: number; + lineHeight: number; + fontSize: string; +} + +interface Types { + fontFamily: string; + fontWeightLighter: number; + fontWeightLight: number; + fontWeightRegular: number; + fontWeightMedium: number; + fontWeightBold: number; + h1: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + h2: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + h3: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + h4: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + h5: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + h6: { + fontFamily: string; + fontSize: string; + fontWeight: number; + color: string; + lineHeight: number; + }; + subtitle1: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + }; + subtitle2: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + }; + body1: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + }; + body2: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + }; + button: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + textTransform: any; + }; + caption: { + fontFamily: string; + fontSize: string; + fontWeight: number; + lineHeight: number; + }; + overline: { + fontFamily: string; + }; + d1: DisplayTypes; + d2: DisplayTypes; + d3: DisplayTypes; + d4: DisplayTypes; + d5: DisplayTypes; + d6: DisplayTypes; + size: { + xxs: string; + xs: string; + sm: string; + md: string; + lg: string; + xl: string; + "2xl": string; + "3xl": string; + }; + lineHeight: { + sm: number; + md: number; + lg: number; + }; +} + +const baseProperties = { + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeightLighter: 100, + fontWeightLight: 300, + fontWeightRegular: 400, + fontWeightMedium: 600, + fontWeightBold: 700, + fontSizeXXS: pxToRem(10.4), + fontSizeXS: pxToRem(12), + fontSizeSM: pxToRem(14), + fontSizeMD: pxToRem(16), + fontSizeLG: pxToRem(18), + fontSizeXL: pxToRem(20), + fontSize2XL: pxToRem(24), + fontSize3XL: pxToRem(30), +}; + +const baseHeadingProperties = { + fontFamily: baseProperties.fontFamily, + color: dark.main, + fontWeight: baseProperties.fontWeightBold, +}; + +const baseDisplayProperties = { + fontFamily: baseProperties.fontFamily, + color: dark.main, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.2, +}; + +const typography: Types = { + fontFamily: baseProperties.fontFamily, + fontWeightLighter: baseProperties.fontWeightLighter, + fontWeightLight: baseProperties.fontWeightLight, + fontWeightRegular: baseProperties.fontWeightRegular, + fontWeightMedium: baseProperties.fontWeightMedium, + fontWeightBold: baseProperties.fontWeightBold, + + h1: { + fontSize: pxToRem(48), + lineHeight: 1.25, + ...baseHeadingProperties, + }, + + h2: { + fontSize: pxToRem(36), + lineHeight: 1.3, + ...baseHeadingProperties, + }, + + h3: { + fontSize: pxToRem(30), + lineHeight: 1.375, + ...baseHeadingProperties, + }, + + h4: { + fontSize: pxToRem(24), + lineHeight: 1.375, + ...baseHeadingProperties, + }, + + h5: { + fontSize: pxToRem(20), + lineHeight: 1.375, + ...baseHeadingProperties, + }, + + h6: { + fontSize: pxToRem(16), + lineHeight: 1.625, + ...baseHeadingProperties, + }, + + subtitle1: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeXL, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.625, + }, + + subtitle2: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeMD, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.6, + }, + + body1: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeXL, + fontWeight: baseProperties.fontWeightRegular, + lineHeight: 1.625, + }, + + body2: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeMD, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.6, + }, + + button: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeSM, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.5, + textTransform: "uppercase", + }, + + caption: { + fontFamily: baseProperties.fontFamily, + fontSize: baseProperties.fontSizeXS, + fontWeight: baseProperties.fontWeightLight, + lineHeight: 1.25, + }, + + overline: { + fontFamily: baseProperties.fontFamily, + }, + + d1: { + fontSize: pxToRem(80), + ...baseDisplayProperties, + }, + + d2: { + fontSize: pxToRem(72), + ...baseDisplayProperties, + }, + + d3: { + fontSize: pxToRem(64), + ...baseDisplayProperties, + }, + + d4: { + fontSize: pxToRem(56), + ...baseDisplayProperties, + }, + + d5: { + fontSize: pxToRem(48), + ...baseDisplayProperties, + }, + + d6: { + fontSize: pxToRem(40), + ...baseDisplayProperties, + }, + + size: { + xxs: baseProperties.fontSizeXXS, + xs: baseProperties.fontSizeXS, + sm: baseProperties.fontSizeSM, + md: baseProperties.fontSizeMD, + lg: baseProperties.fontSizeLG, + xl: baseProperties.fontSizeXL, + "2xl": baseProperties.fontSize2XL, + "3xl": baseProperties.fontSize3XL, + }, + + lineHeight: { + sm: 1.25, + md: 1.5, + lg: 2, + }, +}; + +export default typography; diff --git a/src/assets/theme/components/appBar.ts b/src/assets/theme/components/appBar.ts new file mode 100644 index 0000000..425e419 --- /dev/null +++ b/src/assets/theme/components/appBar.ts @@ -0,0 +1,31 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// types +type Types = any; + +const appBar: Types = { + defaultProps: { + color: "transparent", + }, + + styleOverrides: { + root: { + boxShadow: "none", + }, + }, +}; + +export default appBar; diff --git a/src/assets/theme/components/avatar.ts b/src/assets/theme/components/avatar.ts new file mode 100644 index 0000000..8d4b469 --- /dev/null +++ b/src/assets/theme/components/avatar.ts @@ -0,0 +1,40 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme/base/borders"; + +const { borderRadius } = borders; + +// types +type Types = any; + +const avatar: Types = { + styleOverrides: { + root: { + transition: "all 200ms ease-in-out", + }, + + rounded: { + borderRadius: borderRadius.lg, + }, + + img: { + height: "auto", + }, + }, +}; + +export default avatar; diff --git a/src/assets/theme/components/breadcrumbs.ts b/src/assets/theme/components/breadcrumbs.ts new file mode 100644 index 0000000..2df6924 --- /dev/null +++ b/src/assets/theme/components/breadcrumbs.ts @@ -0,0 +1,39 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +const { grey } = colors; +const { size } = typography; + +// types +type Types = any; + +const breadcrumbs: Types = { + styleOverrides: { + li: { + lineHeight: 0, + }, + + separator: { + fontSize: size.sm, + color: grey[600], + }, + }, +}; + +export default breadcrumbs; diff --git a/src/assets/theme/components/button/contained.ts b/src/assets/theme/components/button/contained.ts new file mode 100644 index 0000000..fb39334 --- /dev/null +++ b/src/assets/theme/components/button/contained.ts @@ -0,0 +1,91 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { white, text, info, secondary } = colors; +const { size } = typography; + +const contained = { + base: { + backgroundColor: white.main, + minHeight: pxToRem(40), + color: text.main, + padding: `${pxToRem(10)} ${pxToRem(24)}`, + + "&:hover": { + backgroundColor: white.main, + }, + + "&:active, &:active:focus, &:active:hover": { + opacity: 0.85, + }, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(16)} !important`, + }, + }, + + small: { + minHeight: pxToRem(32), + padding: `${pxToRem(6)} ${pxToRem(16)}`, + fontSize: size.xs, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(12)} !important`, + }, + }, + + large: { + minHeight: pxToRem(47), + padding: `${pxToRem(12)} ${pxToRem(28)}`, + fontSize: size.sm, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(22)} !important`, + }, + }, + + primary: { + backgroundColor: info.main, + + "&:hover": { + backgroundColor: info.main, + }, + + "&:focus:not(:hover)": { + backgroundColor: info.focus, + }, + }, + + secondary: { + backgroundColor: secondary.main, + + "&:hover": { + backgroundColor: secondary.main, + }, + + "&:focus:not(:hover)": { + backgroundColor: secondary.focus, + }, + }, +}; + +export default contained; diff --git a/src/assets/theme/components/button/index.ts b/src/assets/theme/components/button/index.ts new file mode 100644 index 0000000..69fadfc --- /dev/null +++ b/src/assets/theme/components/button/index.ts @@ -0,0 +1,49 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React Button Styles +import root from "assets/theme/components/button/root"; +import contained from "assets/theme/components/button/contained"; +import outlined from "assets/theme/components/button/outlined"; +import text from "assets/theme/components/button/text"; + +// types +type Types = any; + +const button: Types = { + defaultProps: { + disableRipple: false, + }, + styleOverrides: { + root: { ...root }, + contained: { ...contained.base }, + containedSizeSmall: { ...contained.small }, + containedSizeLarge: { ...contained.large }, + containedPrimary: { ...contained.primary }, + containedSecondary: { ...contained.secondary }, + outlined: { ...outlined.base }, + outlinedSizeSmall: { ...outlined.small }, + outlinedSizeLarge: { ...outlined.large }, + outlinedPrimary: { ...outlined.primary }, + outlinedSecondary: { ...outlined.secondary }, + text: { ...text.base }, + textSizeSmall: { ...text.small }, + textSizeLarge: { ...text.large }, + textPrimary: { ...text.primary }, + textSecondary: { ...text.secondary }, + }, +}; + +export default button; diff --git a/src/assets/theme/components/button/outlined.ts b/src/assets/theme/components/button/outlined.ts new file mode 100644 index 0000000..c324a5d --- /dev/null +++ b/src/assets/theme/components/button/outlined.ts @@ -0,0 +1,82 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { transparent, light, info, secondary } = colors; +const { size } = typography; + +const outlined = { + base: { + minHeight: pxToRem(40), + color: light.main, + borderColor: light.main, + padding: `${pxToRem(10)} ${pxToRem(24)}`, + + "&:hover": { + opacity: 0.75, + backgroundColor: transparent.main, + }, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(16)} !important`, + }, + }, + + small: { + minHeight: pxToRem(32), + padding: `${pxToRem(6)} ${pxToRem(16)}`, + fontSize: size.xs, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(12)} !important`, + }, + }, + + large: { + minHeight: pxToRem(47), + padding: `${pxToRem(12)} ${pxToRem(28)}`, + fontSize: size.sm, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(22)} !important`, + }, + }, + + primary: { + backgroundColor: transparent.main, + borderColor: info.main, + + "&:hover": { + backgroundColor: transparent.main, + }, + }, + + secondary: { + backgroundColor: transparent.main, + borderColor: secondary.main, + + "&:hover": { + backgroundColor: transparent.main, + }, + }, +}; + +export default outlined; diff --git a/src/assets/theme/components/button/root.ts b/src/assets/theme/components/button/root.ts new file mode 100644 index 0000000..a713dda --- /dev/null +++ b/src/assets/theme/components/button/root.ts @@ -0,0 +1,53 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme/base/typography"; +import borders from "assets/theme/base/borders"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { fontWeightBold, size } = typography; +const { borderRadius } = borders; + +const root = { + display: "inline-flex", + justifyContent: "center", + alignItems: "center", + fontSize: size.xs, + fontWeight: fontWeightBold, + borderRadius: borderRadius.lg, + padding: `${pxToRem(6.302)} ${pxToRem(16.604)}`, + lineHeight: 1.4, + textAlign: "center", + textTransform: "uppercase", + userSelect: "none", + backgroundSize: "150% !important", + backgroundPositionX: "25% !important", + transition: "all 150ms ease-in", + + "&:disabled": { + pointerEvent: "none", + opacity: 0.65, + }, + + "& .material-icons": { + fontSize: pxToRem(15), + marginTop: pxToRem(-2), + }, +}; + +export default root; diff --git a/src/assets/theme/components/button/text.ts b/src/assets/theme/components/button/text.ts new file mode 100644 index 0000000..e4d295d --- /dev/null +++ b/src/assets/theme/components/button/text.ts @@ -0,0 +1,104 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { text, info, secondary, transparent } = colors; +const { size } = typography; + +const buttonText = { + base: { + backgroundColor: transparent.main, + minHeight: pxToRem(40), + color: text.main, + boxShadow: "none", + padding: `${pxToRem(10)} ${pxToRem(24)}`, + + "&:hover": { + backgroundColor: transparent.main, + boxShadow: "none", + }, + + "&:focus": { + boxShadow: "none", + }, + + "&:active, &:active:focus, &:active:hover": { + opacity: 0.85, + boxShadow: "none", + }, + + "&:disabled": { + boxShadow: "none", + }, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(16)} !important`, + }, + }, + + small: { + minHeight: pxToRem(32), + padding: `${pxToRem(6)} ${pxToRem(16)}`, + fontSize: size.xs, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(12)} !important`, + }, + }, + + large: { + minHeight: pxToRem(47), + padding: `${pxToRem(12)} ${pxToRem(28)}`, + fontSize: size.sm, + + "& .material-icon, .material-icons-round, svg": { + fontSize: `${pxToRem(22)} !important`, + }, + }, + + primary: { + color: info.main, + + "&:hover": { + color: info.main, + }, + + "&:focus:not(:hover)": { + color: info.focus, + boxShadow: "none", + }, + }, + + secondary: { + color: secondary.main, + + "&:hover": { + color: secondary.main, + }, + + "&:focus:not(:hover)": { + color: secondary.focus, + boxShadow: "none", + }, + }, +}; + +export default buttonText; diff --git a/src/assets/theme/components/buttonBase.ts b/src/assets/theme/components/buttonBase.ts new file mode 100644 index 0000000..f91be4a --- /dev/null +++ b/src/assets/theme/components/buttonBase.ts @@ -0,0 +1,25 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// types +type Types = any; + +const buttonBase: Types = { + defaultProps: { + disableRipple: false, + }, +}; + +export default buttonBase; diff --git a/src/assets/theme/components/card/cardContent.ts b/src/assets/theme/components/card/cardContent.ts new file mode 100644 index 0000000..9f02af3 --- /dev/null +++ b/src/assets/theme/components/card/cardContent.ts @@ -0,0 +1,32 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +// types +type Types = any; + +const cardContent: Types = { + styleOverrides: { + root: { + marginTop: 0, + marginBottom: 0, + padding: `${pxToRem(8)} ${pxToRem(24)} ${pxToRem(24)}`, + }, + }, +}; + +export default cardContent; diff --git a/src/assets/theme/components/card/cardMedia.ts b/src/assets/theme/components/card/cardMedia.ts new file mode 100644 index 0000000..da5843f --- /dev/null +++ b/src/assets/theme/components/card/cardMedia.ts @@ -0,0 +1,40 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme/base/borders"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { borderRadius } = borders; + +// types +type Types = any; + +const cardMedia: Types = { + styleOverrides: { + root: { + borderRadius: borderRadius.xl, + margin: `${pxToRem(16)} ${pxToRem(16)} 0`, + }, + + media: { + width: "auto", + }, + }, +}; + +export default cardMedia; diff --git a/src/assets/theme/components/card/index.ts b/src/assets/theme/components/card/index.ts new file mode 100644 index 0000000..eb72fd7 --- /dev/null +++ b/src/assets/theme/components/card/index.ts @@ -0,0 +1,50 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; +import boxShadows from "assets/theme/base/boxShadows"; + +// Material Dashboard 2 PRO React Helper Function +import rgba from "assets/theme/functions/rgba"; + +const { black, white } = colors; +const { borderWidth, borderRadius } = borders; +const { md } = boxShadows; + +// types +// types +type Types = any; + +const card: Types = { + styleOverrides: { + root: { + display: "flex", + flexDirection: "column", + position: "relative", + minWidth: 0, + wordWrap: "break-word", + backgroundColor: white.main, + backgroundClip: "border-box", + border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`, + borderRadius: borderRadius.xl, + boxShadow: md, + overflow: "visible", + }, + }, +}; + +export default card; diff --git a/src/assets/theme/components/container.ts b/src/assets/theme/components/container.ts new file mode 100644 index 0000000..c41d078 --- /dev/null +++ b/src/assets/theme/components/container.ts @@ -0,0 +1,77 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import breakpoints from "assets/theme/base/breakpoints"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +// types +type Types = any; + +const { + values: { sm, md, lg, xl, xxl }, +} = breakpoints; + +const SM = `@media (min-width: ${sm}px)`; +const MD = `@media (min-width: ${md}px)`; +const LG = `@media (min-width: ${lg}px)`; +const XL = `@media (min-width: ${xl}px)`; +const XXL = `@media (min-width: ${xxl}px)`; + +const sharedClasses = { + paddingRight: `${pxToRem(24)} !important`, + paddingLeft: `${pxToRem(24)} !important`, + marginRight: "auto !important", + marginLeft: "auto !important", + width: "100% !important", + position: "relative", +}; + +const container: Types = { + [SM]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "540px !important", + }, + }, + [MD]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "720px !important", + }, + }, + [LG]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "960px !important", + }, + }, + [XL]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "1140px !important", + }, + }, + [XXL]: { + ".MuiContainer-root": { + ...sharedClasses, + maxWidth: "1320px !important", + }, + }, +}; + +export default container; diff --git a/src/assets/theme/components/dialog/dialogActions.ts b/src/assets/theme/components/dialog/dialogActions.ts new file mode 100644 index 0000000..5d672f1 --- /dev/null +++ b/src/assets/theme/components/dialog/dialogActions.ts @@ -0,0 +1,30 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +// types +type Types = any; + +const dialogActions: Types = { + styleOverrides: { + root: { + padding: pxToRem(16), + }, + }, +}; + +export default dialogActions; diff --git a/src/assets/theme/components/dialog/dialogContent.ts b/src/assets/theme/components/dialog/dialogContent.ts new file mode 100644 index 0000000..04a3609 --- /dev/null +++ b/src/assets/theme/components/dialog/dialogContent.ts @@ -0,0 +1,46 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme/base/typography"; +import borders from "assets/theme/base/borders"; +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { size } = typography; +const { text } = colors; +const { borderWidth, borderColor } = borders; + +// types +type Types = any; + +const dialogContent: Types = { + styleOverrides: { + root: { + padding: pxToRem(16), + fontSize: size.md, + color: text.main, + }, + + dividers: { + borderTop: `${borderWidth[1]} solid ${borderColor}`, + borderBottom: `${borderWidth[1]} solid ${borderColor}`, + }, + }, +}; + +export default dialogContent; diff --git a/src/assets/theme/components/dialog/dialogContentText.ts b/src/assets/theme/components/dialog/dialogContentText.ts new file mode 100644 index 0000000..c3a8b50 --- /dev/null +++ b/src/assets/theme/components/dialog/dialogContentText.ts @@ -0,0 +1,35 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme/base/typography"; +import colors from "assets/theme/base/colors"; + +const { size } = typography; +const { text } = colors; + +// types +type Types = any; + +const dialogContentText: Types = { + styleOverrides: { + root: { + fontSize: size.md, + color: text.main, + }, + }, +}; + +export default dialogContentText; diff --git a/src/assets/theme/components/dialog/dialogTitle.ts b/src/assets/theme/components/dialog/dialogTitle.ts new file mode 100644 index 0000000..331b319 --- /dev/null +++ b/src/assets/theme/components/dialog/dialogTitle.ts @@ -0,0 +1,36 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme/base/typography"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { size } = typography; + +// types +type Types = any; + +const dialogTitle: Types = { + styleOverrides: { + root: { + padding: pxToRem(16), + fontSize: size.xl, + }, + }, +}; + +export default dialogTitle; diff --git a/src/assets/theme/components/dialog/index.ts b/src/assets/theme/components/dialog/index.ts new file mode 100644 index 0000000..08cbc4c --- /dev/null +++ b/src/assets/theme/components/dialog/index.ts @@ -0,0 +1,39 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme/base/borders"; +import boxShadows from "assets/theme/base/boxShadows"; + +const { borderRadius } = borders; +const { xxl } = boxShadows; + +// types +type Types = any; + +const dialog: Types = { + styleOverrides: { + paper: { + borderRadius: borderRadius.lg, + boxShadow: xxl, + }, + + paperFullScreen: { + borderRadius: 0, + }, + }, +}; + +export default dialog; diff --git a/src/assets/theme/components/divider.ts b/src/assets/theme/components/divider.ts new file mode 100644 index 0000000..3cc9846 --- /dev/null +++ b/src/assets/theme/components/divider.ts @@ -0,0 +1,71 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import rgba from "assets/theme/functions/rgba"; +import pxToRem from "assets/theme/functions/pxToRem"; + +const { dark, transparent, white } = colors; + +// types +type Types = any; + +const divider: Types = { + styleOverrides: { + root: { + backgroundColor: transparent.main, + backgroundImage: `linear-gradient(to right, ${rgba(dark.main, 0)}, ${rgba( + dark.main, + 0.4 + )}, ${rgba(dark.main, 0)}) !important`, + height: pxToRem(1), + margin: `${pxToRem(16)} 0`, + borderBottom: "none", + opacity: 0.25, + }, + + vertical: { + backgroundColor: transparent.main, + backgroundImage: `linear-gradient(to bottom, ${rgba(dark.main, 0)}, ${rgba( + dark.main, + 0.4 + )}, ${rgba(dark.main, 0)}) !important`, + width: pxToRem(1), + height: "100%", + margin: `0 ${pxToRem(16)}`, + borderRight: "none", + }, + + light: { + backgroundColor: transparent.main, + backgroundImage: `linear-gradient(to right, ${rgba(white.main, 0)}, ${white.main}, ${rgba( + white.main, + 0 + )}) !important`, + + "&.MuiDivider-vertical": { + backgroundImage: `linear-gradient(to bottom, ${rgba(white.main, 0)}, ${white.main}, ${rgba( + white.main, + 0 + )}) !important`, + }, + }, + }, +}; + +export default divider; diff --git a/src/assets/theme/components/flatpickr.ts b/src/assets/theme/components/flatpickr.ts new file mode 100644 index 0000000..15e5a0a --- /dev/null +++ b/src/assets/theme/components/flatpickr.ts @@ -0,0 +1,58 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import rgba from "assets/theme/functions/rgba"; + +const { info, white, gradients } = colors; + +// types +type Types = any; + +const flatpickr: Types = { + ".flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.nextMonthDay:hover, .flatpickr-day.nextMonthDay:focus": + { + background: rgba(info.main, 0.28), + border: "none", + }, + + ".flatpickr-day.today": { + background: info.main, + color: white.main, + border: "none", + + "&:hover, &:focus": { + background: `${info.focus} !important`, + }, + }, + + ".flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.nextMonthDay.selected, .flatpickr-day.nextMonthDay.selected:hover, .flatpickr-day.nextMonthDay.selected:focus": + { + background: `${gradients.info.state} !important`, + color: white.main, + border: "none", + }, + + ".flatpickr-months .flatpickr-next-month:hover svg, .flatpickr-months .flatpickr-prev-month:hover svg": + { + color: `${info.main} !important`, + fill: `${info.main} !important`, + }, +}; + +export default flatpickr; diff --git a/src/assets/theme/components/form/autocomplete.ts b/src/assets/theme/components/form/autocomplete.ts new file mode 100644 index 0000000..ed002bc --- /dev/null +++ b/src/assets/theme/components/form/autocomplete.ts @@ -0,0 +1,103 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import boxShadows from "assets/theme/base/boxShadows"; +import typography from "assets/theme/base/typography"; +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { lg } = boxShadows; +const { size } = typography; +const { text, white, transparent, light, dark, gradients } = colors; +const { borderRadius } = borders; + +// types +type Types = any; + +const autocomplete: Types = { + styleOverrides: { + popper: { + boxShadow: lg, + padding: pxToRem(8), + fontSize: size.sm, + color: text.main, + textAlign: "left", + backgroundColor: `${white.main} !important`, + borderRadius: borderRadius.md, + }, + + paper: { + boxShadow: "none", + backgroundColor: transparent.main, + }, + + option: { + padding: `${pxToRem(4.8)} ${pxToRem(16)}`, + borderRadius: borderRadius.md, + fontSize: size.sm, + color: text.main, + transition: "background-color 300ms ease, color 300ms ease", + + "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { + backgroundColor: light.main, + color: dark.main, + }, + + '&[aria-selected="true"]': { + backgroundColor: `${light.main} !important`, + color: `${dark.main} !important`, + }, + }, + + noOptions: { + fontSize: size.sm, + color: text.main, + }, + + groupLabel: { + color: dark.main, + }, + + loading: { + fontSize: size.sm, + color: text.main, + }, + + tag: { + display: "flex", + alignItems: "center", + height: "auto", + padding: pxToRem(4), + backgroundColor: gradients.dark.state, + color: white.main, + + "& .MuiChip-label": { + lineHeight: 1.2, + padding: `0 ${pxToRem(10)} 0 ${pxToRem(4)}`, + }, + + "& .MuiSvgIcon-root, & .MuiSvgIcon-root:hover, & .MuiSvgIcon-root:focus": { + color: white.main, + marginRight: 0, + }, + }, + }, +}; + +export default autocomplete; diff --git a/src/assets/theme/components/form/checkbox.ts b/src/assets/theme/components/form/checkbox.ts new file mode 100644 index 0000000..825bc12 --- /dev/null +++ b/src/assets/theme/components/form/checkbox.ts @@ -0,0 +1,86 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme/base/borders"; +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; +import linearGradient from "assets/theme/functions/linearGradient"; + +const { borderWidth, borderColor } = borders; +const { transparent, info } = colors; + +// types +type Types = any; + +const checkbox: Types = { + styleOverrides: { + root: { + "& .MuiSvgIcon-root": { + backgroundPosition: "center", + backgroundSize: "contain", + backgroundRepeat: "no-repeat", + width: pxToRem(20), + height: pxToRem(20), + color: transparent.main, + border: `${borderWidth[1]} solid ${borderColor}`, + borderRadius: pxToRem(5.6), + }, + + "&:hover": { + backgroundColor: transparent.main, + }, + + "&.Mui-focusVisible": { + border: `${borderWidth[2]} solid ${info.main} !important`, + }, + }, + + colorPrimary: { + color: borderColor, + + "&.Mui-checked": { + color: info.main, + + "& .MuiSvgIcon-root": { + backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient( + info.main, + info.main + )}`, + borderColor: info.main, + }, + }, + }, + + colorSecondary: { + color: borderColor, + + "& .MuiSvgIcon-root": { + color: info.main, + "&.Mui-checked": { + backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient( + info.main, + info.main + )}`, + borderColor: info.main, + }, + }, + }, + }, +}; + +export default checkbox; diff --git a/src/assets/theme/components/form/formControlLabel.ts b/src/assets/theme/components/form/formControlLabel.ts new file mode 100644 index 0000000..e807e1e --- /dev/null +++ b/src/assets/theme/components/form/formControlLabel.ts @@ -0,0 +1,53 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { dark } = colors; +const { size, fontWeightBold } = typography; + +// types +type Types = any; + +const formControlLabel: Types = { + styleOverrides: { + root: { + display: "block", + minHeight: pxToRem(24), + marginBottom: pxToRem(2), + }, + + label: { + display: "inline-block", + fontSize: size.sm, + fontWeight: fontWeightBold, + color: dark.main, + lineHeight: 1, + transform: `translateY(${pxToRem(1)})`, + marginLeft: pxToRem(4), + + "&.Mui-disabled": { + color: dark.main, + }, + }, + }, +}; + +export default formControlLabel; diff --git a/src/assets/theme/components/form/formLabel.ts b/src/assets/theme/components/form/formLabel.ts new file mode 100644 index 0000000..028f5b2 --- /dev/null +++ b/src/assets/theme/components/form/formLabel.ts @@ -0,0 +1,32 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +const { text } = colors; + +// types +type Types = any; + +const formLabel: Types = { + styleOverrides: { + root: { + color: text.main, + }, + }, +}; + +export default formLabel; diff --git a/src/assets/theme/components/form/input.ts b/src/assets/theme/components/form/input.ts new file mode 100644 index 0000000..6a6f3bc --- /dev/null +++ b/src/assets/theme/components/form/input.ts @@ -0,0 +1,49 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; +import borders from "assets/theme/base/borders"; + +const { info, inputBorderColor, dark } = colors; +const { size } = typography; +const { borderWidth } = borders; + +// types +type Types = any; + +const input: Types = { + styleOverrides: { + root: { + fontSize: size.sm, + color: dark.main, + + "&:hover:not(.Mui-disabled):before": { + borderBottom: `${borderWidth[1]} solid ${inputBorderColor}`, + }, + + "&:before": { + borderColor: inputBorderColor, + }, + + "&:after": { + borderColor: info.main, + }, + }, + }, +}; + +export default input; diff --git a/src/assets/theme/components/form/inputLabel.ts b/src/assets/theme/components/form/inputLabel.ts new file mode 100644 index 0000000..7cf8d03 --- /dev/null +++ b/src/assets/theme/components/form/inputLabel.ts @@ -0,0 +1,63 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +const { text, info } = colors; +const { size } = typography; + +// types +type Types = any; + +const inputLabel: Types = { + styleOverrides: { + root: { + fontSize: size.sm, + color: text.main, + lineHeight: 0.9, + + "&.Mui-focused": { + color: info.main, + }, + + "&.MuiInputLabel-shrink": { + lineHeight: 1.5, + fontSize: size.md, + + "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { + fontSize: "0.85em", + }, + }, + }, + + sizeSmall: { + fontSize: size.xs, + lineHeight: 1.625, + + "&.MuiInputLabel-shrink": { + lineHeight: 1.6, + fontSize: size.sm, + + "~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": { + fontSize: "0.72em", + }, + }, + }, + }, +}; + +export default inputLabel; diff --git a/src/assets/theme/components/form/inputOutlined.ts b/src/assets/theme/components/form/inputOutlined.ts new file mode 100644 index 0000000..c14fd51 --- /dev/null +++ b/src/assets/theme/components/form/inputOutlined.ts @@ -0,0 +1,71 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; +import typography from "assets/theme/base/typography"; + +// // Material Dashboard 2 PRO React TSUI Dashboard PRO helper functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { inputBorderColor, info, grey, transparent } = colors; +const { borderRadius } = borders; +const { size } = typography; + +// types +type Types = any; + +const inputOutlined: Types = { + styleOverrides: { + root: { + backgroundColor: transparent.main, + fontSize: size.sm, + borderRadius: borderRadius.md, + + "&:hover .MuiOutlinedInput-notchedOutline": { + borderColor: inputBorderColor, + }, + + "&.Mui-focused": { + "& .MuiOutlinedInput-notchedOutline": { + borderColor: info.main, + }, + }, + }, + + notchedOutline: { + borderColor: inputBorderColor, + }, + + input: { + color: grey[700], + padding: pxToRem(12), + backgroundColor: transparent.main, + }, + + inputSizeSmall: { + fontSize: size.xs, + padding: pxToRem(10), + }, + + multiline: { + color: grey[700], + padding: 0, + }, + }, +}; + +export default inputOutlined; diff --git a/src/assets/theme/components/form/radio.ts b/src/assets/theme/components/form/radio.ts new file mode 100644 index 0000000..c6153e0 --- /dev/null +++ b/src/assets/theme/components/form/radio.ts @@ -0,0 +1,100 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme/base/borders"; +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; +import linearGradient from "assets/theme/functions/linearGradient"; + +const { borderWidth, borderColor } = borders; +const { transparent, info } = colors; + +// types +type Types = any; + +const radio: Types = { + styleOverrides: { + root: { + "& .MuiSvgIcon-root": { + width: pxToRem(20), + height: pxToRem(20), + color: transparent.main, + border: `${borderWidth[1]} solid ${borderColor}`, + borderRadius: "50%", + }, + + "&:after": { + transition: "opacity 250ms ease-in-out", + content: `""`, + position: "absolute", + width: pxToRem(14), + height: pxToRem(14), + borderRadius: "50%", + backgroundImage: linearGradient(info.main, info.main), + opacity: 0, + left: 0, + right: 0, + top: 0, + bottom: 0, + margin: "auto", + }, + + "&:hover": { + backgroundColor: transparent.main, + }, + + "&.Mui-focusVisible": { + border: `${borderWidth[2]} solid ${info.main} !important`, + }, + }, + + colorPrimary: { + color: borderColor, + + "&.Mui-checked": { + color: info.main, + + "& .MuiSvgIcon-root": { + borderColor: info.main, + }, + + "&:after": { + opacity: 1, + }, + }, + }, + + colorSecondary: { + color: borderColor, + + "&.Mui-checked": { + color: info.main, + + "& .MuiSvgIcon-root": { + borderColor: info.main, + }, + + "&:after": { + opacity: 1, + }, + }, + }, + }, +}; + +export default radio; diff --git a/src/assets/theme/components/form/select.ts b/src/assets/theme/components/form/select.ts new file mode 100644 index 0000000..e23e59e --- /dev/null +++ b/src/assets/theme/components/form/select.ts @@ -0,0 +1,52 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { transparent } = colors; + +// types +type Types = any; + +const select: Types = { + styleOverrides: { + select: { + display: "grid", + alignItems: "center", + padding: `0 ${pxToRem(12)} !important`, + + "& .Mui-selected": { + backgroundColor: transparent.main, + }, + }, + + selectMenu: { + background: "none", + height: "none", + minHeight: "none", + overflow: "unset", + }, + + icon: { + display: "none", + }, + }, +}; + +export default select; diff --git a/src/assets/theme/components/form/switchButton.ts b/src/assets/theme/components/form/switchButton.ts new file mode 100644 index 0000000..6897a94 --- /dev/null +++ b/src/assets/theme/components/form/switchButton.ts @@ -0,0 +1,90 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; +import boxShadows from "assets/theme/base/boxShadows"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; +import linearGradient from "assets/theme/functions/linearGradient"; + +const { white, gradients, grey, transparent } = colors; +const { borderWidth } = borders; +const { md } = boxShadows; + +// types +type Types = any; + +const switchButton: Types = { + defaultProps: { + disableRipple: false, + }, + + styleOverrides: { + switchBase: { + color: gradients.dark.main, + + "&:hover": { + backgroundColor: transparent.main, + }, + + "&.Mui-checked": { + color: gradients.dark.main, + + "&:hover": { + backgroundColor: transparent.main, + }, + + "& .MuiSwitch-thumb": { + borderColor: `${gradients.dark.main} !important`, + }, + + "& + .MuiSwitch-track": { + backgroundColor: `${gradients.dark.main} !important`, + borderColor: `${gradients.dark.main} !important`, + opacity: 1, + }, + }, + + "&.Mui-disabled + .MuiSwitch-track": { + opacity: "0.3 !important", + }, + + "&.Mui-focusVisible .MuiSwitch-thumb": { + backgroundImage: linearGradient(gradients.info.main, gradients.info.state), + }, + }, + + thumb: { + backgroundColor: white.main, + boxShadow: md, + border: `${borderWidth[1]} solid ${grey[400]}`, + }, + + track: { + width: pxToRem(32), + height: pxToRem(15), + backgroundColor: grey[400], + border: `${borderWidth[1]} solid ${grey[400]}`, + opacity: 1, + }, + + checked: {}, + }, +}; + +export default switchButton; diff --git a/src/assets/theme/components/form/textField.ts b/src/assets/theme/components/form/textField.ts new file mode 100644 index 0000000..0358b09 --- /dev/null +++ b/src/assets/theme/components/form/textField.ts @@ -0,0 +1,32 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +const { transparent } = colors; + +// types +type Types = any; + +const textField: Types = { + styleOverrides: { + root: { + backgroundColor: transparent.main, + }, + }, +}; + +export default textField; diff --git a/src/assets/theme/components/icon.ts b/src/assets/theme/components/icon.ts new file mode 100644 index 0000000..9170ea3 --- /dev/null +++ b/src/assets/theme/components/icon.ts @@ -0,0 +1,43 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +// types +type Types = any; + +const icon: Types = { + defaultProps: { + baseClassName: "material-icons-round", + fontSize: "inherit", + }, + + styleOverrides: { + fontSizeInherit: { + fontSize: "inherit !important", + }, + + fontSizeSmall: { + fontSize: `${pxToRem(20)} !important`, + }, + + fontSizeLarge: { + fontSize: `${pxToRem(36)} !important`, + }, + }, +}; + +export default icon; diff --git a/src/assets/theme/components/iconButton.ts b/src/assets/theme/components/iconButton.ts new file mode 100644 index 0000000..4a9e513 --- /dev/null +++ b/src/assets/theme/components/iconButton.ts @@ -0,0 +1,34 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +const { transparent } = colors; + +// types +type Types = any; + +const iconButton: Types = { + styleOverrides: { + root: { + "&:hover": { + backgroundColor: transparent.main, + }, + }, + }, +}; + +export default iconButton; diff --git a/src/assets/theme/components/linearProgress.ts b/src/assets/theme/components/linearProgress.ts new file mode 100644 index 0000000..7b71257 --- /dev/null +++ b/src/assets/theme/components/linearProgress.ts @@ -0,0 +1,56 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme/base/borders"; +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { borderRadius } = borders; +const { light } = colors; + +// types +type Types = any; + +const linearProgress: Types = { + styleOverrides: { + root: { + height: pxToRem(6), + borderRadius: borderRadius.md, + overflow: "visible", + position: "relative", + }, + + colorPrimary: { + backgroundColor: light.main, + }, + + colorSecondary: { + backgroundColor: light.main, + }, + + bar: { + height: pxToRem(6), + borderRadius: borderRadius.sm, + position: "absolute", + transform: `translate(0, 0) !important`, + transition: "width 0.6s ease !important", + }, + }, +}; + +export default linearProgress; diff --git a/src/assets/theme/components/link.ts b/src/assets/theme/components/link.ts new file mode 100644 index 0000000..0aaf207 --- /dev/null +++ b/src/assets/theme/components/link.ts @@ -0,0 +1,26 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// types +type Types = any; + +const link: Types = { + defaultProps: { + underline: "none", + color: "inherit", + }, +}; + +export default link; diff --git a/src/assets/theme/components/list/index.ts b/src/assets/theme/components/list/index.ts new file mode 100644 index 0000000..cddfdae --- /dev/null +++ b/src/assets/theme/components/list/index.ts @@ -0,0 +1,28 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// types +type Types = any; + +const list: Types = { + styleOverrides: { + padding: { + paddingTop: 0, + paddingBottom: 0, + }, + }, +}; + +export default list; diff --git a/src/assets/theme/components/list/listItem.ts b/src/assets/theme/components/list/listItem.ts new file mode 100644 index 0000000..bcd022c --- /dev/null +++ b/src/assets/theme/components/list/listItem.ts @@ -0,0 +1,32 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// types +type Types = any; + +const listItem: Types = { + defaultProps: { + disableGutters: true, + }, + + styleOverrides: { + root: { + paddingTop: 0, + paddingBottom: 0, + }, + }, +}; + +export default listItem; diff --git a/src/assets/theme/components/list/listItemText.ts b/src/assets/theme/components/list/listItemText.ts new file mode 100644 index 0000000..7ca6d40 --- /dev/null +++ b/src/assets/theme/components/list/listItemText.ts @@ -0,0 +1,28 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// types +type Types = any; + +const listItemText: Types = { + styleOverrides: { + root: { + marginTop: 0, + marginBottom: 0, + }, + }, +}; + +export default listItemText; diff --git a/src/assets/theme/components/menu/index.ts b/src/assets/theme/components/menu/index.ts new file mode 100644 index 0000000..68c6795 --- /dev/null +++ b/src/assets/theme/components/menu/index.ts @@ -0,0 +1,52 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import boxShadows from "assets/theme/base/boxShadows"; +import typography from "assets/theme/base/typography"; +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { lg } = boxShadows; +const { size } = typography; +const { text, white } = colors; +const { borderRadius } = borders; + +// types +type Types = any; + +const menu: Types = { + defaultProps: { + disableAutoFocusItem: true, + }, + + styleOverrides: { + paper: { + minWidth: pxToRem(160), + boxShadow: lg, + padding: `${pxToRem(16)} ${pxToRem(8)}`, + fontSize: size.sm, + color: text.main, + textAlign: "left", + backgroundColor: `${white.main} !important`, + borderRadius: borderRadius.md, + }, + }, +}; + +export default menu; diff --git a/src/assets/theme/components/menu/menuItem.ts b/src/assets/theme/components/menu/menuItem.ts new file mode 100644 index 0000000..e9a62e0 --- /dev/null +++ b/src/assets/theme/components/menu/menuItem.ts @@ -0,0 +1,50 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; +import typography from "assets/theme/base/typography"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { light, text, dark } = colors; +const { borderRadius } = borders; +const { size } = typography; + +// types +type Types = any; + +const menuItem: Types = { + styleOverrides: { + root: { + minWidth: pxToRem(160), + minHeight: "unset", + padding: `${pxToRem(4.8)} ${pxToRem(16)}`, + borderRadius: borderRadius.md, + fontSize: size.sm, + color: text.main, + transition: "background-color 300ms ease, color 300ms ease", + + "&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": { + backgroundColor: light.main, + color: dark.main, + }, + }, + }, +}; + +export default menuItem; diff --git a/src/assets/theme/components/popover.ts b/src/assets/theme/components/popover.ts new file mode 100644 index 0000000..8e41af5 --- /dev/null +++ b/src/assets/theme/components/popover.ts @@ -0,0 +1,42 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import boxShadows from "assets/theme/base/boxShadows"; +import borders from "assets/theme/base/borders"; + +const { transparent } = colors; +const { lg } = boxShadows; +const { borderRadius } = borders; + +// types +type Types = any; + +const popover: Types = { + styleOverrides: { + paper: { + backgroundColor: transparent.main, + boxShadow: lg, + padding: pxToRem(8), + borderRadius: borderRadius.md, + }, + }, +}; + +export default popover; diff --git a/src/assets/theme/components/sidenav.ts b/src/assets/theme/components/sidenav.ts new file mode 100644 index 0000000..f97505a --- /dev/null +++ b/src/assets/theme/components/sidenav.ts @@ -0,0 +1,52 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { white } = colors; +const { borderRadius } = borders; + +// types +type Types = any; + +const sidenav: Types = { + styleOverrides: { + root: { + width: pxToRem(250), + whiteSpace: "nowrap", + border: "none", + }, + + paper: { + width: pxToRem(250), + backgroundColor: white.main, + height: `calc(100vh - ${pxToRem(32)})`, + margin: pxToRem(16), + borderRadius: borderRadius.xl, + border: "none", + }, + + paperAnchorDockedLeft: { + borderRight: "none", + }, + }, +}; + +export default sidenav; diff --git a/src/assets/theme/components/slider.ts b/src/assets/theme/components/slider.ts new file mode 100644 index 0000000..0c034c7 --- /dev/null +++ b/src/assets/theme/components/slider.ts @@ -0,0 +1,84 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; +import boxShadows from "assets/theme/base/boxShadows"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; +import boxShadow from "assets/theme/functions/boxShadow"; + +const { grey, white, black, info } = colors; +const { borderRadius, borderWidth } = borders; +const { sliderBoxShadow } = boxShadows; + +// types +type Types = any; + +const slider: Types = { + styleOverrides: { + root: { + width: "100%", + + "& .MuiSlider-active, & .Mui-focusVisible": { + boxShadow: "none !important", + }, + + "& .MuiSlider-valueLabel": { + color: black.main, + }, + }, + + rail: { + height: pxToRem(2), + background: grey[200], + borderRadius: borderRadius.sm, + opacity: 1, + }, + + track: { + background: info.main, + height: pxToRem(2), + position: "relative", + border: "none", + borderRadius: borderRadius.lg, + zIndex: 1, + }, + + thumb: { + width: pxToRem(14), + height: pxToRem(14), + backgroundColor: white.main, + zIndex: 10, + boxShadow: sliderBoxShadow.thumb, + border: `${borderWidth[1]} solid ${info.main}`, + transition: "all 200ms linear", + + "&:hover": { + boxShadow: "none", + }, + + "&:active": { + transform: "translate(-50%, -50%) scale(1.4)", + }, + + "&.Mui-active": { boxShadow: boxShadow([0, 0], [0, 14], info.main, 0.16) }, + }, + }, +}; + +export default slider; diff --git a/src/assets/theme/components/stepper/index.ts b/src/assets/theme/components/stepper/index.ts new file mode 100644 index 0000000..d3c9827 --- /dev/null +++ b/src/assets/theme/components/stepper/index.ts @@ -0,0 +1,47 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; +import boxShadows from "assets/theme/base/boxShadows"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; +import linearGradient from "assets/theme/functions/linearGradient"; + +const { transparent, gradients } = colors; +const { borderRadius } = borders; +const { colored } = boxShadows; + +// types +type Types = any; + +const stepper: Types = { + styleOverrides: { + root: { + background: linearGradient(gradients.info.main, gradients.info.state), + padding: `${pxToRem(24)} 0 ${pxToRem(16)}`, + borderRadius: borderRadius.lg, + boxShadow: colored.info, + + "&.MuiPaper-root": { + backgroundColor: transparent.main, + }, + }, + }, +}; + +export default stepper; diff --git a/src/assets/theme/components/stepper/step.ts b/src/assets/theme/components/stepper/step.ts new file mode 100644 index 0000000..ebab7a5 --- /dev/null +++ b/src/assets/theme/components/stepper/step.ts @@ -0,0 +1,30 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +// types +type Types = any; + +const step: Types = { + styleOverrides: { + root: { + padding: `0 ${pxToRem(6)}`, + }, + }, +}; + +export default step; diff --git a/src/assets/theme/components/stepper/stepConnector.ts b/src/assets/theme/components/stepper/stepConnector.ts new file mode 100644 index 0000000..0bd6828 --- /dev/null +++ b/src/assets/theme/components/stepper/stepConnector.ts @@ -0,0 +1,55 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme/base/borders"; +import colors from "assets/theme/base/colors"; + +const { white } = colors; +const { borderWidth } = borders; + +// types +type Types = any; + +const stepConnector: Types = { + styleOverrides: { + root: { + color: "#9fc9ff", + transition: "all 200ms linear", + + "&.Mui-active": { + color: white.main, + }, + + "&.Mui-completed": { + color: white.main, + }, + }, + + alternativeLabel: { + top: "14%", + left: "-50%", + right: "50%", + }, + + line: { + borderWidth: `${borderWidth[2]} !important`, + borderColor: "currentColor", + opacity: 0.5, + }, + }, +}; + +export default stepConnector; diff --git a/src/assets/theme/components/stepper/stepIcon.ts b/src/assets/theme/components/stepper/stepIcon.ts new file mode 100644 index 0000000..50a8bf3 --- /dev/null +++ b/src/assets/theme/components/stepper/stepIcon.ts @@ -0,0 +1,60 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; +import boxShadow from "assets/theme/functions/boxShadow"; + +const { white } = colors; + +// types +type Types = any; + +const stepIcon: Types = { + styleOverrides: { + root: { + background: "#9fc9ff", + fill: "#9fc9ff", + stroke: "#9fc9ff", + strokeWidth: pxToRem(10), + width: pxToRem(13), + height: pxToRem(13), + borderRadius: "50%", + zIndex: 99, + transition: "all 200ms linear", + + "&.Mui-active": { + background: white.main, + fill: white.main, + stroke: white.main, + borderColor: white.main, + boxShadow: boxShadow([0, 0], [0, 2], white.main, 1), + }, + + "&.Mui-completed": { + background: white.main, + fill: white.main, + stroke: white.main, + borderColor: white.main, + boxShadow: boxShadow([0, 0], [0, 2], white.main, 1), + }, + }, + }, +}; + +export default stepIcon; diff --git a/src/assets/theme/components/stepper/stepLabel.ts b/src/assets/theme/components/stepper/stepLabel.ts new file mode 100644 index 0000000..93867a2 --- /dev/null +++ b/src/assets/theme/components/stepper/stepLabel.ts @@ -0,0 +1,52 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme/base/typography"; +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; +import rgba from "assets/theme/functions/rgba"; + +const { size, fontWeightRegular } = typography; +const { white } = colors; + +// types +type Types = any; + +const stepLabel: Types = { + styleOverrides: { + label: { + marginTop: `${pxToRem(8)} !important`, + fontWeight: fontWeightRegular, + fontSize: size.xs, + color: "#9fc9ff", + textTransform: "uppercase", + + "&.Mui-active": { + fontWeight: `${fontWeightRegular} !important`, + color: `${rgba(white.main, 0.8)} !important`, + }, + + "&.Mui-completed": { + fontWeight: `${fontWeightRegular} !important`, + color: `${rgba(white.main, 0.8)} !important`, + }, + }, + }, +}; + +export default stepLabel; diff --git a/src/assets/theme/components/svgIcon.ts b/src/assets/theme/components/svgIcon.ts new file mode 100644 index 0000000..627602c --- /dev/null +++ b/src/assets/theme/components/svgIcon.ts @@ -0,0 +1,42 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +// types +type Types = any; + +const svgIcon: Types = { + defaultProps: { + fontSize: "inherit", + }, + + styleOverrides: { + fontSizeInherit: { + fontSize: "inherit !important", + }, + + fontSizeSmall: { + fontSize: `${pxToRem(20)} !important`, + }, + + fontSizeLarge: { + fontSize: `${pxToRem(36)} !important`, + }, + }, +}; + +export default svgIcon; diff --git a/src/assets/theme/components/table/tableCell.ts b/src/assets/theme/components/table/tableCell.ts new file mode 100644 index 0000000..982f3bb --- /dev/null +++ b/src/assets/theme/components/table/tableCell.ts @@ -0,0 +1,38 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme/base/borders"; +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { borderWidth } = borders; +const { light } = colors; + +// types +type Types = any; + +const tableCell: Types = { + styleOverrides: { + root: { + padding: `${pxToRem(12)} ${pxToRem(16)}`, + borderBottom: `${borderWidth[1]} solid ${light.main}`, + }, + }, +}; + +export default tableCell; diff --git a/src/assets/theme/components/table/tableContainer.ts b/src/assets/theme/components/table/tableContainer.ts new file mode 100644 index 0000000..3095fe7 --- /dev/null +++ b/src/assets/theme/components/table/tableContainer.ts @@ -0,0 +1,38 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import boxShadows from "assets/theme/base/boxShadows"; +import borders from "assets/theme/base/borders"; + +const { white } = colors; +const { md } = boxShadows; +const { borderRadius } = borders; + +// types +type Types = any; + +const tableContainer: Types = { + styleOverrides: { + root: { + backgroundColor: white.main, + boxShadow: md, + borderRadius: borderRadius.xl, + }, + }, +}; + +export default tableContainer; diff --git a/src/assets/theme/components/table/tableHead.ts b/src/assets/theme/components/table/tableHead.ts new file mode 100644 index 0000000..167f024 --- /dev/null +++ b/src/assets/theme/components/table/tableHead.ts @@ -0,0 +1,37 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import borders from "assets/theme/base/borders"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { borderRadius } = borders; + +// types +type Types = any; + +const tableHead: Types = { + styleOverrides: { + root: { + display: "block", + padding: `${pxToRem(16)} ${pxToRem(16)} 0 ${pxToRem(16)}`, + borderRadius: `${borderRadius.xl} ${borderRadius.xl} 0 0`, + }, + }, +}; + +export default tableHead; diff --git a/src/assets/theme/components/tabs/index.ts b/src/assets/theme/components/tabs/index.ts new file mode 100644 index 0000000..d85b14a --- /dev/null +++ b/src/assets/theme/components/tabs/index.ts @@ -0,0 +1,68 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import borders from "assets/theme/base/borders"; +import boxShadows from "assets/theme/base/boxShadows"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { grey, white } = colors; +const { borderRadius } = borders; +const { tabsBoxShadow } = boxShadows; + +// types +type Types = any; + +const tabs: Types = { + styleOverrides: { + root: { + position: "relative", + backgroundColor: grey[100], + borderRadius: borderRadius.xl, + minHeight: "unset", + padding: pxToRem(4), + }, + + flexContainer: { + height: "100%", + position: "relative", + zIndex: 10, + }, + + fixed: { + overflow: "unset !important", + overflowX: "unset !important", + }, + + vertical: { + "& .MuiTabs-indicator": { + width: "100%", + }, + }, + + indicator: { + height: "100%", + borderRadius: borderRadius.lg, + backgroundColor: white.main, + boxShadow: tabsBoxShadow.indicator, + transition: "all 500ms ease", + }, + }, +}; + +export default tabs; diff --git a/src/assets/theme/components/tabs/tab.ts b/src/assets/theme/components/tabs/tab.ts new file mode 100644 index 0000000..a878fe6 --- /dev/null +++ b/src/assets/theme/components/tabs/tab.ts @@ -0,0 +1,68 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme/base/typography"; +import borders from "assets/theme/base/borders"; +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { size, fontWeightRegular } = typography; +const { borderRadius } = borders; +const { dark } = colors; + +// types +type Types = any; + +const tab: Types = { + styleOverrides: { + root: { + display: "flex", + alignItems: "center", + flexDirection: "row", + flex: "1 1 auto", + textAlign: "center", + maxWidth: "unset !important", + minWidth: "unset !important", + minHeight: "unset !important", + fontSize: size.md, + fontWeight: fontWeightRegular, + textTransform: "none", + lineHeight: "inherit", + padding: pxToRem(4), + borderRadius: borderRadius.lg, + color: `${dark.main} !important`, + opacity: "1 !important", + + "& .material-icons, .material-icons-round": { + marginBottom: "0 !important", + marginRight: pxToRem(6), + }, + + "& svg": { + marginBottom: "0 !important", + marginRight: pxToRem(6), + }, + }, + + labelIcon: { + paddingTop: pxToRem(4), + }, + }, +}; + +export default tab; diff --git a/src/assets/theme/components/tooltip.ts b/src/assets/theme/components/tooltip.ts new file mode 100644 index 0000000..ee9862a --- /dev/null +++ b/src/assets/theme/components/tooltip.ts @@ -0,0 +1,59 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Fade from "@mui/material/Fade"; + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; +import borders from "assets/theme/base/borders"; + +// Material Dashboard 2 PRO React TS Helper Functions +import pxToRem from "assets/theme/functions/pxToRem"; + +const { black, light } = colors; +const { size, fontWeightRegular } = typography; +const { borderRadius } = borders; + +// types +type Types = any; + +const tooltip: Types = { + defaultProps: { + arrow: true, + TransitionComponent: Fade, + }, + + styleOverrides: { + tooltip: { + maxWidth: pxToRem(200), + backgroundColor: black.main, + color: light.main, + fontSize: size.sm, + fontWeight: fontWeightRegular, + textAlign: "center", + borderRadius: borderRadius.md, + opacity: 0.7, + padding: `${pxToRem(5)} ${pxToRem(8)} ${pxToRem(4)}`, + }, + + arrow: { + color: black.main, + }, + }, +}; + +export default tooltip; diff --git a/src/assets/theme/functions/boxShadow.ts b/src/assets/theme/functions/boxShadow.ts new file mode 100644 index 0000000..a4e7d08 --- /dev/null +++ b/src/assets/theme/functions/boxShadow.ts @@ -0,0 +1,40 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + The boxShadow() function helps you to create a box shadow for an element + */ + +// Material Dashboard 2 PRO React TS Helper Functions +import rgba from "assets/theme/functions/rgba"; +import pxToRem from "assets/theme/functions/pxToRem"; + +function boxShadow( + offset: number[], + radius: number[], + color: string, + opacity: number, + inset: string = "" +): string { + const [x, y] = offset; + const [blur, spread] = radius; + + return `${inset} ${pxToRem(x)} ${pxToRem(y)} ${pxToRem(blur)} ${pxToRem(spread)} ${rgba( + color, + opacity + )}`; +} + +export default boxShadow; diff --git a/src/assets/theme/functions/gradientChartLine.ts b/src/assets/theme/functions/gradientChartLine.ts new file mode 100644 index 0000000..78310e5 --- /dev/null +++ b/src/assets/theme/functions/gradientChartLine.ts @@ -0,0 +1,35 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + The gradientChartLine() function helps you to create a gradient color for the chart line + */ + +// Material Dashboard 2 PRO React TS Helper Functions +import rgba from "assets/theme/functions/rgba"; + +function gradientChartLine(chart: any, color: string, opacity: number = 0.2): any { + const ctx = chart.getContext("2d"); + const gradientStroke = ctx.createLinearGradient(0, 230, 0, 50); + const primaryColor = rgba(color, opacity).toString(); + + gradientStroke.addColorStop(1, primaryColor); + gradientStroke.addColorStop(0.2, "rgba(72, 72, 176, 0.0)"); + gradientStroke.addColorStop(0, "rgba(203, 12, 159, 0)"); + + return gradientStroke; +} + +export default gradientChartLine; diff --git a/src/assets/theme/functions/hexToRgb.ts b/src/assets/theme/functions/hexToRgb.ts new file mode 100644 index 0000000..fc13aeb --- /dev/null +++ b/src/assets/theme/functions/hexToRgb.ts @@ -0,0 +1,28 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + The hexToRgb() function helps you to change the hex color code to rgb + using chroma-js library. + */ + +// chroma-js is a library for all kinds of color conversions and color scales. +import chroma from "chroma-js"; + +function hexToRgb(color: string): string { + return chroma(color).rgb().join(", "); +} + +export default hexToRgb; diff --git a/src/assets/theme/functions/linearGradient.ts b/src/assets/theme/functions/linearGradient.ts new file mode 100644 index 0000000..4c562c5 --- /dev/null +++ b/src/assets/theme/functions/linearGradient.ts @@ -0,0 +1,24 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + The linearGradient() function helps you to create a linear gradient color background + */ + +function linearGradient(color: string, colorState: string, angle: number = 195): string { + return `linear-gradient(${angle}deg, ${color}, ${colorState})`; +} + +export default linearGradient; diff --git a/src/assets/theme/functions/pxToRem.ts b/src/assets/theme/functions/pxToRem.ts new file mode 100644 index 0000000..35e8103 --- /dev/null +++ b/src/assets/theme/functions/pxToRem.ts @@ -0,0 +1,24 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + The pxToRem() function helps you to convert a px unit into a rem unit, + */ + +function pxToRem(number: number, baseNumber: number = 16): string { + return `${number / baseNumber}rem`; +} + +export default pxToRem; diff --git a/src/assets/theme/functions/rgba.ts b/src/assets/theme/functions/rgba.ts new file mode 100644 index 0000000..d914902 --- /dev/null +++ b/src/assets/theme/functions/rgba.ts @@ -0,0 +1,28 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + The rgba() function helps you to create a rgba color code, it uses the hexToRgb() function + to convert the hex code into rgb for using it inside the rgba color format. + */ + +// Material Dashboard 2 PRO React TS Helper Functions +import hexToRgb from "assets/theme/functions/hexToRgb"; + +function rgba(color: string, opacity: number): string { + return `rgba(${hexToRgb(color)}, ${opacity})`; +} + +export default rgba; diff --git a/src/assets/theme/index.ts b/src/assets/theme/index.ts new file mode 100644 index 0000000..d04ba7a --- /dev/null +++ b/src/assets/theme/index.ts @@ -0,0 +1,159 @@ +/** +========================================================= +* Material Dashboard 2 PRO React - v2.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-material-ui +* Copyright 2021 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import { createTheme } from "@mui/material"; + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import breakpoints from "assets/theme/base/breakpoints"; +import typography from "assets/theme/base/typography"; +import boxShadows from "assets/theme/base/boxShadows"; +import borders from "assets/theme/base/borders"; +import globals from "assets/theme/base/globals"; + +// Material Dashboard 2 PRO React TS Helper Functions +import boxShadow from "assets/theme/functions/boxShadow"; +import hexToRgb from "assets/theme/functions/hexToRgb"; +import linearGradient from "assets/theme/functions/linearGradient"; +import pxToRem from "assets/theme/functions/pxToRem"; +import rgba from "assets/theme/functions/rgba"; + +// Material Dashboard 2 PRO React TS components base styles for @mui material components +import sidenav from "assets/theme/components/sidenav"; +import list from "assets/theme/components/list"; +import listItem from "assets/theme/components/list/listItem"; +import listItemText from "assets/theme/components/list/listItemText"; +import card from "assets/theme/components/card"; +import cardMedia from "assets/theme/components/card/cardMedia"; +import cardContent from "assets/theme/components/card/cardContent"; +import button from "assets/theme/components/button"; +import iconButton from "assets/theme/components/iconButton"; +import input from "assets/theme/components/form/input"; +import inputLabel from "assets/theme/components/form/inputLabel"; +import inputOutlined from "assets/theme/components/form/inputOutlined"; +import textField from "assets/theme/components/form/textField"; +import menu from "assets/theme/components/menu"; +import menuItem from "assets/theme/components/menu/menuItem"; +import switchButton from "assets/theme/components/form/switchButton"; +import divider from "assets/theme/components/divider"; +import tableContainer from "assets/theme/components/table/tableContainer"; +import tableHead from "assets/theme/components/table/tableHead"; +import tableCell from "assets/theme/components/table/tableCell"; +import linearProgress from "assets/theme/components/linearProgress"; +import breadcrumbs from "assets/theme/components/breadcrumbs"; +import slider from "assets/theme/components/slider"; +import avatar from "assets/theme/components/avatar"; +import tooltip from "assets/theme/components/tooltip"; +import appBar from "assets/theme/components/appBar"; +import tabs from "assets/theme/components/tabs"; +import tab from "assets/theme/components/tabs/tab"; +import stepper from "assets/theme/components/stepper"; +import step from "assets/theme/components/stepper/step"; +import stepConnector from "assets/theme/components/stepper/stepConnector"; +import stepLabel from "assets/theme/components/stepper/stepLabel"; +import stepIcon from "assets/theme/components/stepper/stepIcon"; +import select from "assets/theme/components/form/select"; +import formControlLabel from "assets/theme/components/form/formControlLabel"; +import formLabel from "assets/theme/components/form/formLabel"; +import checkbox from "assets/theme/components/form/checkbox"; +import radio from "assets/theme/components/form/radio"; +import autocomplete from "assets/theme/components/form/autocomplete"; +import flatpickr from "assets/theme/components/flatpickr"; +import container from "assets/theme/components/container"; +import popover from "assets/theme/components/popover"; +import buttonBase from "assets/theme/components/buttonBase"; +import icon from "assets/theme/components/icon"; +import svgIcon from "assets/theme/components/svgIcon"; +import link from "assets/theme/components/link"; +import dialog from "assets/theme/components/dialog"; +import dialogTitle from "assets/theme/components/dialog/dialogTitle"; +import dialogContent from "assets/theme/components/dialog/dialogContent"; +import dialogContentText from "assets/theme/components/dialog/dialogContentText"; +import dialogActions from "assets/theme/components/dialog/dialogActions"; + +export default createTheme({ + breakpoints: { ...breakpoints }, + palette: { ...colors }, + typography: { ...typography }, + boxShadows: { ...boxShadows }, + borders: { ...borders }, + functions: { + boxShadow, + hexToRgb, + linearGradient, + pxToRem, + rgba, + }, + + components: { + MuiCssBaseline: { + styleOverrides: { + ...globals, + ...flatpickr, + ...container, + }, + }, + MuiDrawer: { ...sidenav }, + MuiList: { ...list }, + MuiListItem: { ...listItem }, + MuiListItemText: { ...listItemText }, + MuiCard: { ...card }, + MuiCardMedia: { ...cardMedia }, + MuiCardContent: { ...cardContent }, + MuiButton: { ...button }, + MuiIconButton: { ...iconButton }, + MuiInput: { ...input }, + MuiInputLabel: { ...inputLabel }, + MuiOutlinedInput: { ...inputOutlined }, + MuiTextField: { ...textField }, + MuiMenu: { ...menu }, + MuiMenuItem: { ...menuItem }, + MuiSwitch: { ...switchButton }, + MuiDivider: { ...divider }, + MuiTableContainer: { ...tableContainer }, + MuiTableHead: { ...tableHead }, + MuiTableCell: { ...tableCell }, + MuiLinearProgress: { ...linearProgress }, + MuiBreadcrumbs: { ...breadcrumbs }, + MuiSlider: { ...slider }, + MuiAvatar: { ...avatar }, + MuiTooltip: { ...tooltip }, + MuiAppBar: { ...appBar }, + MuiTabs: { ...tabs }, + MuiTab: { ...tab }, + MuiStepper: { ...stepper }, + MuiStep: { ...step }, + MuiStepConnector: { ...stepConnector }, + MuiStepLabel: { ...stepLabel }, + MuiStepIcon: { ...stepIcon }, + MuiSelect: { ...select }, + MuiFormControlLabel: { ...formControlLabel }, + MuiFormLabel: { ...formLabel }, + MuiCheckbox: { ...checkbox }, + MuiRadio: { ...radio }, + MuiAutocomplete: { ...autocomplete }, + MuiPopover: { ...popover }, + MuiButtonBase: { ...buttonBase }, + MuiIcon: { ...icon }, + MuiSvgIcon: { ...svgIcon }, + MuiLink: { ...link }, + MuiDialog: { ...dialog }, + MuiDialogTitle: { ...dialogTitle }, + MuiDialogContent: { ...dialogContent }, + MuiDialogContentText: { ...dialogContentText }, + MuiDialogActions: { ...dialogActions }, + }, +}); diff --git a/src/assets/theme/theme-rtl.ts b/src/assets/theme/theme-rtl.ts new file mode 100644 index 0000000..6ba1cf5 --- /dev/null +++ b/src/assets/theme/theme-rtl.ts @@ -0,0 +1,161 @@ +/** +========================================================= +* Material Dashboard 2 PRO React - v2.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-material-ui +* Copyright 2021 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import { createTheme } from "@mui/material/styles"; +// import Fade from "@mui/material/Fade"; + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import breakpoints from "assets/theme/base/breakpoints"; +import typography from "assets/theme/base/typography"; +import boxShadows from "assets/theme/base/boxShadows"; +import borders from "assets/theme/base/borders"; +import globals from "assets/theme/base/globals"; + +// Material Dashboard 2 PRO React TS Helper Functions +import boxShadow from "assets/theme/functions/boxShadow"; +import hexToRgb from "assets/theme/functions/hexToRgb"; +import linearGradient from "assets/theme/functions/linearGradient"; +import pxToRem from "assets/theme/functions/pxToRem"; +import rgba from "assets/theme/functions/rgba"; + +// Material Dashboard 2 PRO React TS components base styles for @mui material components +import sidenav from "assets/theme/components/sidenav"; +import list from "assets/theme/components/list"; +import listItem from "assets/theme/components/list/listItem"; +import listItemText from "assets/theme/components/list/listItemText"; +import card from "assets/theme/components/card"; +import cardMedia from "assets/theme/components/card/cardMedia"; +import cardContent from "assets/theme/components/card/cardContent"; +import button from "assets/theme/components/button"; +import iconButton from "assets/theme/components/iconButton"; +import input from "assets/theme/components/form/input"; +import inputLabel from "assets/theme/components/form/inputLabel"; +import inputOutlined from "assets/theme/components/form/inputOutlined"; +import textField from "assets/theme/components/form/textField"; +import menu from "assets/theme/components/menu"; +import menuItem from "assets/theme/components/menu/menuItem"; +import switchButton from "assets/theme/components/form/switchButton"; +import divider from "assets/theme/components/divider"; +import tableContainer from "assets/theme/components/table/tableContainer"; +import tableHead from "assets/theme/components/table/tableHead"; +import tableCell from "assets/theme/components/table/tableCell"; +import linearProgress from "assets/theme/components/linearProgress"; +import breadcrumbs from "assets/theme/components/breadcrumbs"; +import slider from "assets/theme/components/slider"; +import avatar from "assets/theme/components/avatar"; +import tooltip from "assets/theme/components/tooltip"; +import appBar from "assets/theme/components/appBar"; +import tabs from "assets/theme/components/tabs"; +import tab from "assets/theme/components/tabs/tab"; +import stepper from "assets/theme/components/stepper"; +import step from "assets/theme/components/stepper/step"; +import stepConnector from "assets/theme/components/stepper/stepConnector"; +import stepLabel from "assets/theme/components/stepper/stepLabel"; +import stepIcon from "assets/theme/components/stepper/stepIcon"; +import select from "assets/theme/components/form/select"; +import formControlLabel from "assets/theme/components/form/formControlLabel"; +import formLabel from "assets/theme/components/form/formLabel"; +import checkbox from "assets/theme/components/form/checkbox"; +import radio from "assets/theme/components/form/radio"; +import autocomplete from "assets/theme/components/form/autocomplete"; +import flatpickr from "assets/theme/components/flatpickr"; +import container from "assets/theme/components/container"; +import popover from "assets/theme/components/popover"; +import buttonBase from "assets/theme/components/buttonBase"; +import icon from "assets/theme/components/icon"; +import svgIcon from "assets/theme/components/svgIcon"; +import link from "assets/theme/components/link"; +import dialog from "assets/theme/components/dialog"; +import dialogTitle from "assets/theme/components/dialog/dialogTitle"; +import dialogContent from "assets/theme/components/dialog/dialogContent"; +import dialogContentText from "assets/theme/components/dialog/dialogContentText"; +import dialogActions from "assets/theme/components/dialog/dialogActions"; + +export default createTheme({ + direction: "rtl", + breakpoints: { ...breakpoints }, + palette: { ...colors }, + typography: { ...typography }, + boxShadows: { ...boxShadows }, + borders: { ...borders }, + functions: { + boxShadow, + hexToRgb, + linearGradient, + pxToRem, + rgba, + }, + + components: { + MuiCssBaseline: { + styleOverrides: { + ...globals, + ...flatpickr, + ...container, + }, + }, + MuiDrawer: { ...sidenav }, + MuiList: { ...list }, + MuiListItem: { ...listItem }, + MuiListItemText: { ...listItemText }, + MuiCard: { ...card }, + MuiCardMedia: { ...cardMedia }, + MuiCardContent: { ...cardContent }, + MuiButton: { ...button }, + MuiIconButton: { ...iconButton }, + MuiInput: { ...input }, + MuiInputLabel: { ...inputLabel }, + MuiOutlinedInput: { ...inputOutlined }, + MuiTextField: { ...textField }, + MuiMenu: { ...menu }, + MuiMenuItem: { ...menuItem }, + MuiSwitch: { ...switchButton }, + MuiDivider: { ...divider }, + MuiTableContainer: { ...tableContainer }, + MuiTableHead: { ...tableHead }, + MuiTableCell: { ...tableCell }, + MuiLinearProgress: { ...linearProgress }, + MuiBreadcrumbs: { ...breadcrumbs }, + MuiSlider: { ...slider }, + MuiAvatar: { ...avatar }, + MuiTooltip: { ...tooltip }, + MuiAppBar: { ...appBar }, + MuiTabs: { ...tabs }, + MuiTab: { ...tab }, + MuiStepper: { ...stepper }, + MuiStep: { ...step }, + MuiStepConnector: { ...stepConnector }, + MuiStepLabel: { ...stepLabel }, + MuiStepIcon: { ...stepIcon }, + MuiSelect: { ...select }, + MuiFormControlLabel: { ...formControlLabel }, + MuiFormLabel: { ...formLabel }, + MuiCheckbox: { ...checkbox }, + MuiRadio: { ...radio }, + MuiAutocomplete: { ...autocomplete }, + MuiPopover: { ...popover }, + MuiButtonBase: { ...buttonBase }, + MuiIcon: { ...icon }, + MuiSvgIcon: { ...svgIcon }, + MuiLink: { ...link }, + MuiDialog: { ...dialog }, + MuiDialogTitle: { ...dialogTitle }, + MuiDialogContent: { ...dialogContent }, + MuiDialogContentText: { ...dialogContentText }, + MuiDialogActions: { ...dialogActions }, + }, +}); diff --git a/src/components/MDAlert/MDAlertCloseIcon.tsx b/src/components/MDAlert/MDAlertCloseIcon.tsx new file mode 100644 index 0000000..efe0f2d --- /dev/null +++ b/src/components/MDAlert/MDAlertCloseIcon.tsx @@ -0,0 +1,35 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import { styled } from "@mui/material"; + +export default styled("span")(({ theme }) => { + const { palette, typography, functions } = theme; + + const { white } = palette; + const { size, fontWeightMedium } = typography; + const { pxToRem } = functions; + + return { + color: white.main, + fontSize: size.xl, + padding: `${pxToRem(9)} ${pxToRem(6)} ${pxToRem(8)}`, + marginLeft: pxToRem(40), + fontWeight: fontWeightMedium, + cursor: "pointer", + lineHeight: 0, + }; +}); diff --git a/src/components/MDAlert/MDAlertRoot.tsx b/src/components/MDAlert/MDAlertRoot.tsx new file mode 100644 index 0000000..7f02ef4 --- /dev/null +++ b/src/components/MDAlert/MDAlertRoot.tsx @@ -0,0 +1,48 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Box from "@mui/material/Box"; +import { styled, Theme } from "@mui/material"; + +export default styled(Box)(({ theme, ownerState }: { theme?: Theme; ownerState: any }) => { + const { palette, typography, borders, functions } = theme; + const { color } = ownerState; + + const { white, gradients } = palette; + const { size, fontWeightMedium } = typography; + const { borderRadius } = borders; + const { pxToRem, linearGradient } = functions; + + // backgroundImage value + const backgroundImageValue = gradients[color] + ? linearGradient(gradients[color].main, gradients[color].state) + : linearGradient(gradients.info.main, gradients.info.state); + + return { + display: "flex", + justifyContent: "space-between", + alignItems: "center", + minHeight: pxToRem(60), + backgroundImage: backgroundImageValue, + color: white.main, + position: "relative", + padding: pxToRem(16), + marginBottom: pxToRem(16), + borderRadius: borderRadius.md, + fontSize: size.md, + fontWeight: fontWeightMedium, + }; +}); diff --git a/src/components/MDAlert/index.tsx b/src/components/MDAlert/index.tsx new file mode 100644 index 0000000..1777ef8 --- /dev/null +++ b/src/components/MDAlert/index.tsx @@ -0,0 +1,77 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useState, ReactNode } from "react"; + +// @mui material components +import Fade from "@mui/material/Fade"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; + +// Custom styles for the MDAlert +import MDAlertRoot from "components/MDAlert/MDAlertRoot"; +import MDAlertCloseIcon from "components/MDAlert/MDAlertCloseIcon"; + +// Declaring props types for MDAlert +interface Props { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + dismissible?: boolean; + children: ReactNode; + [key: string]: any; +} + +function MDAlert({ color, dismissible, children, ...rest }: Props): JSX.Element | null { + const [alertStatus, setAlertStatus] = useState("mount"); + + const handleAlertStatus = () => setAlertStatus("fadeOut"); + + // The base template for the alert + const alertTemplate: any = (mount: boolean = true) => ( + + + + {children} + + {dismissible ? ( + + × + + ) : null} + + + ); + + switch (true) { + case alertStatus === "mount": + return alertTemplate(); + case alertStatus === "fadeOut": + setTimeout(() => setAlertStatus("unmount"), 400); + return alertTemplate(false); + default: + alertTemplate(); + break; + } + + return null; +} + +// Declaring default props for MDAlert +MDAlert.defaultProps = { + color: "info", + dismissible: false, +}; + +export default MDAlert; diff --git a/src/components/MDAvatar/MDAvatarRoot.tsx b/src/components/MDAvatar/MDAvatarRoot.tsx new file mode 100644 index 0000000..ec0e89c --- /dev/null +++ b/src/components/MDAvatar/MDAvatarRoot.tsx @@ -0,0 +1,89 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Avatar from "@mui/material/Avatar"; +import { styled, Theme } from "@mui/material/styles"; + +export default styled(Avatar)(({ theme, ownerState }: { theme?: Theme | any; ownerState: any }) => { + const { palette, functions, typography, boxShadows } = theme; + const { shadow, bgColor, size } = ownerState; + + const { gradients, transparent, white } = palette; + const { pxToRem, linearGradient } = functions; + const { size: fontSize, fontWeightRegular } = typography; + + // backgroundImage value + const backgroundValue = + bgColor === "transparent" + ? transparent.main + : linearGradient(gradients[bgColor].main, gradients[bgColor].state); + + // size value + let sizeValue; + + switch (size) { + case "xs": + sizeValue = { + width: pxToRem(24), + height: pxToRem(24), + fontSize: fontSize.xs, + }; + break; + case "sm": + sizeValue = { + width: pxToRem(36), + height: pxToRem(36), + fontSize: fontSize.sm, + }; + break; + case "lg": + sizeValue = { + width: pxToRem(58), + height: pxToRem(58), + fontSize: fontSize.sm, + }; + break; + case "xl": + sizeValue = { + width: pxToRem(74), + height: pxToRem(74), + fontSize: fontSize.md, + }; + break; + case "xxl": + sizeValue = { + width: pxToRem(110), + height: pxToRem(110), + fontSize: fontSize.md, + }; + break; + default: { + sizeValue = { + width: pxToRem(48), + height: pxToRem(48), + fontSize: fontSize.md, + }; + } + } + + return { + background: backgroundValue, + color: white.main, + fontWeight: fontWeightRegular, + boxShadow: boxShadows[shadow], + ...sizeValue, + }; +}); diff --git a/src/components/MDAvatar/index.tsx b/src/components/MDAvatar/index.tsx new file mode 100644 index 0000000..1517e75 --- /dev/null +++ b/src/components/MDAvatar/index.tsx @@ -0,0 +1,52 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { FC, forwardRef } from "react"; + +// @mui material components +import { AvatarProps } from "@mui/material"; + +// Custom styles for MDAvatar +import MDAvatarRoot from "components/MDAvatar/MDAvatarRoot"; + +// declare props types for MDAvatar +interface Props extends AvatarProps { + bgColor?: + | "transparent" + | "primary" + | "secondary" + | "info" + | "success" + | "warning" + | "error" + | "light" + | "dark"; + size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl"; + shadow?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "inset"; + [key: string]: any; +} + +const MDAvatar: FC = forwardRef(({ bgColor, size, shadow, ...rest }, ref) => ( + +)); + +// Declaring default props for MDAvatar +MDAvatar.defaultProps = { + bgColor: "transparent", + size: "md", + shadow: "none", +}; + +export default MDAvatar; diff --git a/src/components/MDBadge/MDBadgeRoot.tsx b/src/components/MDBadge/MDBadgeRoot.tsx new file mode 100644 index 0000000..636d5b2 --- /dev/null +++ b/src/components/MDBadge/MDBadgeRoot.tsx @@ -0,0 +1,134 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Badge from "@mui/material/Badge"; +import { styled, Theme } from "@mui/material/styles"; + +export default styled(Badge)(({ theme, ownerState }: { theme?: Theme; ownerState: any }) => { + const { palette, typography, borders, functions } = theme; + const { color, circular, border, size, indicator, variant, container, children } = ownerState; + + const { white, dark, gradients, badgeColors } = palette; + const { size: fontSize, fontWeightBold } = typography; + const { borderRadius, borderWidth } = borders; + const { pxToRem, linearGradient } = functions; + + // padding values + const paddings: { [key: string]: string } = { + xs: "0.45em 0.775em", + sm: "0.55em 0.9em", + md: "0.65em 1em", + lg: "0.85em 1.375em", + }; + + // fontSize value + const fontSizeValue = size === "xs" ? fontSize.xxs : fontSize.xs; + + // border value + const borderValue = border ? `${borderWidth[3]} solid ${white.main}` : "none"; + + // borderRadius value + const borderRadiusValue = circular ? borderRadius.section : borderRadius.md; + + // styles for the badge with indicator={true} + const indicatorStyles = (sizeProp: string) => { + let widthValue = pxToRem(20); + let heightValue = pxToRem(20); + + if (sizeProp === "medium") { + widthValue = pxToRem(24); + heightValue = pxToRem(24); + } else if (sizeProp === "large") { + widthValue = pxToRem(32); + heightValue = pxToRem(32); + } + + return { + width: widthValue, + height: heightValue, + display: "grid", + placeItems: "center", + textAlign: "center", + borderRadius: "50%", + padding: 0, + border: borderValue, + }; + }; + + // styles for the badge with variant="gradient" + const gradientStyles = (colorProp: string) => { + const backgroundValue = gradients[colorProp] + ? linearGradient(gradients[colorProp].main, gradients[colorProp].state) + : linearGradient(gradients.info.main, gradients.info.state); + const colorValue = colorProp === "light" ? dark.main : white.main; + + return { + background: backgroundValue, + color: colorValue, + }; + }; + + // styles for the badge with variant="contained" + const containedStyles = (colorProp: string) => { + const backgroundValue = badgeColors[colorProp] + ? badgeColors[colorProp].background + : badgeColors.info.background; + let colorValue = badgeColors[colorProp] ? badgeColors[colorProp].text : badgeColors.info.text; + + if (colorProp === "light") { + colorValue = dark.main; + } + return { + background: backgroundValue, + color: colorValue, + }; + }; + + // styles for the badge with no children and container={false} + const standAloneStyles = () => ({ + position: "static", + marginLeft: pxToRem(8), + transform: "none", + fontSize: pxToRem(9), + }); + + // styles for the badge with container={true} + const containerStyles = () => ({ + position: "relative", + transform: "none", + }); + + return { + "& .MuiBadge-badge": { + height: "auto", + padding: paddings[size] || paddings.xs, + fontSize: fontSizeValue, + fontWeight: fontWeightBold, + textTransform: "uppercase", + lineHeight: 1, + textAlign: "center", + whiteSpace: "nowrap", + verticalAlign: "baseline", + border: borderValue, + borderRadius: borderRadiusValue, + ...(indicator && indicatorStyles(size)), + ...(variant === "gradient" && gradientStyles(color)), + ...(variant === "contained" && containedStyles(color)), + ...(!children && !container && standAloneStyles()), + ...(container && containerStyles()), + }, + }; +}); diff --git a/src/components/MDBadge/index.tsx b/src/components/MDBadge/index.tsx new file mode 100644 index 0000000..a5d5c9f --- /dev/null +++ b/src/components/MDBadge/index.tsx @@ -0,0 +1,62 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { FC, ReactNode, forwardRef } from "react"; + +// @mui material components +import { BadgeProps } from "@mui/material"; + +// Custom styles for the MDBadge +import MDBadgeRoot from "components/MDBadge/MDBadgeRoot"; + +// declaring props types for MDBadge +interface Props extends Omit { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + variant?: "gradient" | "contained"; + size?: "xs" | "sm" | "md" | "lg"; + circular?: boolean; + indicator?: boolean; + border?: boolean; + children?: ReactNode; + container?: boolean; + [key: string]: any; +} + +const MDBadge: FC = forwardRef( + ({ color, variant, size, circular, indicator, border, container, children, ...rest }, ref) => ( + + {children} + + ) +); + +// declaring default props for MDBadge +MDBadge.defaultProps = { + color: "info", + variant: "gradient", + size: "sm", + circular: false, + indicator: false, + border: false, + container: false, + children: false, +}; + +export default MDBadge; diff --git a/src/components/MDBadgeDot/index.tsx b/src/components/MDBadgeDot/index.tsx new file mode 100644 index 0000000..549f6a0 --- /dev/null +++ b/src/components/MDBadgeDot/index.tsx @@ -0,0 +1,107 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { FC, forwardRef } from "react"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// declaring props types for MDBadgeDot +interface Props { + variant?: "gradient" | "contained"; + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + size?: "xs" | "sm" | "md" | "lg"; + badgeContent: string; + font?: + | { + color: string; + weight: string; + } + | any; + [key: string]: any; +} + +const MDBadgeDot: FC = forwardRef( + ({ variant, color, size, badgeContent, font = {}, ...rest }, ref) => { + let finalSize; + let fontSize: any; + let padding; + + if (size === "sm") { + finalSize = "0.5rem"; + fontSize = "caption"; + padding = "0.45em 0.775em"; + } else if (size === "lg") { + finalSize = "0.625rem"; + fontSize = "body2"; + padding = "0.85em 1.375em"; + } else if (size === "md") { + finalSize = "0.5rem"; + fontSize = "button"; + padding = "0.65em 1em"; + } else { + finalSize = "0.375rem"; + fontSize = "caption"; + padding = "0.45em 0.775em"; + } + + const validColors = [ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]; + + const validColorIndex = validColors.findIndex((el) => el === color); + + return ( + + + + {badgeContent} + + + ); + } +); + +// Declaring default props for MDBadgeDot +MDBadgeDot.defaultProps = { + variant: "contained", + color: "info", + size: "xs", + font: {}, +}; + +export default MDBadgeDot; diff --git a/src/components/MDBox/MDBoxRoot.tsx b/src/components/MDBox/MDBoxRoot.tsx new file mode 100644 index 0000000..cb51618 --- /dev/null +++ b/src/components/MDBox/MDBoxRoot.tsx @@ -0,0 +1,122 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Box from "@mui/material/Box"; +import { styled, Theme } from "@mui/material/styles"; + +export default styled(Box)(({ theme, ownerState }: { theme?: Theme | any; ownerState: any }) => { + const { palette, functions, borders, boxShadows } = theme; + const { variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow } = ownerState; + + const { gradients, grey, white } = palette; + const { linearGradient } = functions; + const { borderRadius: radius } = borders; + const { colored } = boxShadows; + + const greyColors: { [key: string]: string } = { + "grey-100": grey[100], + "grey-200": grey[200], + "grey-300": grey[300], + "grey-400": grey[400], + "grey-500": grey[500], + "grey-600": grey[600], + "grey-700": grey[700], + "grey-800": grey[800], + "grey-900": grey[900], + }; + + const validGradients = [ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "dark", + "light", + ]; + + const validColors = [ + "transparent", + "white", + "black", + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + "text", + "grey-100", + "grey-200", + "grey-300", + "grey-400", + "grey-500", + "grey-600", + "grey-700", + "grey-800", + "grey-900", + ]; + + const validBorderRadius = ["xs", "sm", "md", "lg", "xl", "xxl", "section"]; + const validBoxShadows = ["xs", "sm", "md", "lg", "xl", "xxl", "inset"]; + + // background value + let backgroundValue = bgColor; + + if (variant === "gradient") { + backgroundValue = validGradients.find((el) => el === bgColor) + ? linearGradient(gradients[bgColor].main, gradients[bgColor].state) + : white.main; + } else if (validColors.find((el) => el === bgColor)) { + backgroundValue = palette[bgColor] ? palette[bgColor].main : greyColors[bgColor]; + } else { + backgroundValue = bgColor; + } + + // color value + let colorValue = color; + + if (validColors.find((el) => el === color)) { + colorValue = palette[color] ? palette[color].main : greyColors[color]; + } + + // borderRadius value + let borderRadiusValue = borderRadius; + + if (validBorderRadius.find((el) => el === borderRadius)) { + borderRadiusValue = radius[borderRadius]; + } + + // boxShadow value + let boxShadowValue = "none"; + + if (validBoxShadows.find((el) => el === shadow)) { + boxShadowValue = boxShadows[shadow]; + } else if (coloredShadow) { + boxShadowValue = colored[coloredShadow] ? colored[coloredShadow] : "none"; + } + + return { + opacity, + background: backgroundValue, + color: colorValue, + borderRadius: borderRadiusValue, + boxShadow: boxShadowValue, + }; +}); diff --git a/src/components/MDBox/index.tsx b/src/components/MDBox/index.tsx new file mode 100644 index 0000000..034b6ce --- /dev/null +++ b/src/components/MDBox/index.tsx @@ -0,0 +1,57 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { forwardRef, FC } from "react"; + +// @mui material components +import { BoxProps } from "@mui/material"; + +// Custom styles for MDBox +import MDBoxRoot from "components/MDBox/MDBoxRoot"; + +// declaring props types for MDBox +interface Props extends BoxProps { + variant?: "contained" | "gradient"; + bgColor?: string; + color?: string; + opacity?: number; + borderRadius?: string; + shadow?: string; + coloredShadow?: string; + [key: string]: any; +} + +const MDBox: FC = forwardRef( + ({ variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow, ...rest }, ref) => ( + + ) +); + +// Declaring default props for MDBox +MDBox.defaultProps = { + variant: "contained", + bgColor: "transparent", + color: "dark", + opacity: 1, + borderRadius: "none", + shadow: "none", + coloredShadow: "none", +}; + +export default MDBox; diff --git a/src/components/MDButton/MDButtonRoot.tsx b/src/components/MDButton/MDButtonRoot.tsx new file mode 100644 index 0000000..0bc1942 --- /dev/null +++ b/src/components/MDButton/MDButtonRoot.tsx @@ -0,0 +1,283 @@ +/* eslint-disable prefer-destructuring */ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Button from "@mui/material/Button"; +import { styled, Theme } from "@mui/material/styles"; + +export default styled(Button)(({ theme, ownerState }: { theme?: Theme | any; ownerState: any }) => { + const { palette, functions, borders, boxShadows } = theme; + const { color, variant, size, circular, iconOnly, darkMode } = ownerState; + + const { white, text, transparent, gradients, grey } = palette; + const { boxShadow, linearGradient, pxToRem, rgba } = functions; + const { borderRadius } = borders; + const { colored } = boxShadows; + + // styles for the button with variant="contained" + const containedStyles = () => { + // background color value + const backgroundValue = palette[color] ? palette[color].main : white.main; + + // backgroundColor value when button is focused + const focusedBackgroundValue = palette[color] ? palette[color].focus : white.focus; + + // boxShadow value + const boxShadowValue = colored[color] + ? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow( + [0, 3], + [1, -2], + palette[color].main, + 0.2 + )}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}` + : "none"; + + // boxShadow value when button is hovered + const hoveredBoxShadowValue = colored[color] + ? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow( + [0, 4], + [23, 0], + palette[color].main, + 0.15 + )}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}` + : "none"; + + // color value + let colorValue = white.main; + + if (!darkMode && (color === "white" || color === "light" || !palette[color])) { + colorValue = text.main; + } else if (darkMode && (color === "white" || color === "light" || !palette[color])) { + colorValue = grey[600]; + } + + // color value when button is focused + let focusedColorValue = white.main; + + if (color === "white") { + focusedColorValue = text.main; + } else if (color === "primary" || color === "error" || color === "dark") { + focusedColorValue = white.main; + } + + return { + background: backgroundValue, + color: colorValue, + boxShadow: boxShadowValue, + + "&:hover": { + backgroundColor: backgroundValue, + color: colorValue, + boxShadow: hoveredBoxShadowValue, + }, + + "&:focus:not(:hover)": { + backgroundColor: focusedBackgroundValue, + color: colorValue, + boxShadow: palette[color] + ? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5) + : boxShadow([0, 0], [0, 3.2], white.main, 0.5), + }, + + "&:disabled": { + backgroundColor: backgroundValue, + color: focusedColorValue, + }, + }; + }; + + // styles for the button with variant="outlined" + const outlinedStyles = () => { + // background color value + const backgroundValue = color === "white" ? rgba(white.main, 0.1) : transparent.main; + + // color value + const colorValue = palette[color] ? palette[color].main : white.main; + + // boxShadow value + const boxShadowValue = palette[color] + ? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5) + : boxShadow([0, 0], [0, 3.2], white.main, 0.5); + + // border color value + let borderColorValue = palette[color] ? palette[color].main : rgba(white.main, 0.75); + + if (color === "white") { + borderColorValue = rgba(white.main, 0.75); + } + + return { + background: backgroundValue, + color: colorValue, + border: `${pxToRem(1)} solid ${borderColorValue}`, + + "&:hover": { + background: transparent.main, + color: colorValue, + borderColor: colorValue, + opacity: 0.85, + }, + + "&:focus:not(:hover)": { + background: transparent.main, + color: colorValue, + boxShadow: boxShadowValue, + }, + + "&:active:not(:hover)": { + backgroundColor: colorValue, + color: white.main, + opacity: 0.85, + }, + + "&:disabled": { + color: colorValue, + borderColor: colorValue, + }, + }; + }; + + // styles for the button with variant="gradient" + const gradientStyles = () => { + // background value + const backgroundValue = + color === "white" || !gradients[color] + ? white.main + : linearGradient(gradients[color].main, gradients[color].state); + + // boxShadow value + const boxShadowValue = colored[color] + ? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow( + [0, 3], + [1, -2], + palette[color].main, + 0.2 + )}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}` + : "none"; + + // boxShadow value when button is hovered + const hoveredBoxShadowValue = colored[color] + ? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow( + [0, 4], + [23, 0], + palette[color].main, + 0.15 + )}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}` + : "none"; + + // color value + let colorValue = white.main; + + if (color === "white") { + colorValue = text.main; + } else if (color === "light") { + colorValue = gradients.dark.state; + } + + return { + background: backgroundValue, + color: colorValue, + boxShadow: boxShadowValue, + + "&:hover": { + boxShadow: hoveredBoxShadowValue, + color: colorValue, + }, + + "&:focus:not(:hover)": { + boxShadow: boxShadowValue, + color: colorValue, + }, + + "&:disabled": { + background: backgroundValue, + color: colorValue, + }, + }; + }; + + // styles for the button with variant="text" + const textStyles = () => { + // color value + const colorValue = palette[color] ? palette[color].main : white.main; + + // color value when button is focused + const focusedColorValue = palette[color] ? palette[color].focus : white.focus; + + return { + color: colorValue, + + "&:hover": { + color: focusedColorValue, + }, + + "&:focus:not(:hover)": { + color: focusedColorValue, + }, + }; + }; + + // styles for the button with circular={true} + const circularStyles = () => ({ + borderRadius: borderRadius.section, + }); + + // styles for the button with iconOnly={true} + const iconOnlyStyles = () => { + // width, height, minWidth and minHeight values + let sizeValue = pxToRem(38); + + if (size === "small") { + sizeValue = pxToRem(25.4); + } else if (size === "large") { + sizeValue = pxToRem(52); + } + + // padding value + let paddingValue = `${pxToRem(11)} ${pxToRem(11)} ${pxToRem(10)}`; + + if (size === "small") { + paddingValue = pxToRem(4.5); + } else if (size === "large") { + paddingValue = pxToRem(16); + } + + return { + width: sizeValue, + minWidth: sizeValue, + height: sizeValue, + minHeight: sizeValue, + padding: paddingValue, + + "& .material-icons": { + marginTop: 0, + }, + + "&:hover, &:focus, &:active": { + transform: "none", + }, + }; + }; + + return { + ...(variant === "contained" && containedStyles()), + ...(variant === "outlined" && outlinedStyles()), + ...(variant === "gradient" && gradientStyles()), + ...(variant === "text" && textStyles()), + ...(circular && circularStyles()), + ...(iconOnly && iconOnlyStyles()), + }; +}); diff --git a/src/components/MDButton/index.tsx b/src/components/MDButton/index.tsx new file mode 100644 index 0000000..0adcb72 --- /dev/null +++ b/src/components/MDButton/index.tsx @@ -0,0 +1,74 @@ +/** +========================================================= +* Material Dashboard 2 PRO React - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-react +* Copyright 2021 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + +========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { FC, ReactNode, forwardRef } from "react"; + +// @mui material components +import { ButtonProps } from "@mui/material"; + +// Custom styles for MDButton +import MDButtonRoot from "components/MDButton/MDButtonRoot"; + +// Material Dashboard 2 PRO React TS contexts +import { useMaterialUIController } from "context"; + +// Declaring props types for MDButton +export interface Props extends Omit { + color?: + | "white" + | "primary" + | "secondary" + | "info" + | "success" + | "warning" + | "error" + | "light" + | "dark" + | "default"; + variant?: "text" | "contained" | "outlined" | "gradient"; + size?: "small" | "medium" | "large"; + circular?: boolean; + iconOnly?: boolean; + children?: ReactNode; + [key: string]: any; +} + +const MDButton: FC = forwardRef( + ({ color, variant, size, circular, iconOnly, children, ...rest }, ref) => { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + + return ( + + {children} + + ); + } +); + +// Declaring default props for MDButton +MDButton.defaultProps = { + color: "white", + variant: "contained", + size: "medium", + circular: false, + iconOnly: false, +}; + +export default MDButton; diff --git a/src/components/MDDatePicker/index.tsx b/src/components/MDDatePicker/index.tsx new file mode 100644 index 0000000..0598c23 --- /dev/null +++ b/src/components/MDDatePicker/index.tsx @@ -0,0 +1,48 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// react-flatpickr components +import Flatpickr from "react-flatpickr"; + +// react-flatpickr styles +import "flatpickr/dist/flatpickr.css"; + +// Material Dashboard 2 PRO React TS components +import MDInput from "components/MDInput"; + +// types +interface Props { + input?: { + [key: string]: any; + }; + [key: string]: any; +} + +function MDDatePicker({ input, ...rest }: Props): JSX.Element { + return ( + ( + + )} + /> + ); +} + +MDDatePicker.defaultProps = { + input: {}, +}; + +export default MDDatePicker; diff --git a/src/components/MDDropzone/MDDropzoneRoot.tsx b/src/components/MDDropzone/MDDropzoneRoot.tsx new file mode 100644 index 0000000..19d1fd5 --- /dev/null +++ b/src/components/MDDropzone/MDDropzoneRoot.tsx @@ -0,0 +1,73 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import { styled, Theme } from "@mui/material/styles"; + +export default styled("form")(({ theme, ownerState }: { theme?: Theme | any; ownerState: any }) => { + const { palette, typography, borders, functions } = theme; + const { darkMode } = ownerState; + + const { text, white, dark, inputBorderColor, transparent } = palette; + const { size } = typography; + const { borderRadius, borderWidth } = borders; + const { rgba } = functions; + + return { + display: "flex", + alignItems: "center", + border: `${borderWidth[1]} solid ${inputBorderColor} !important`, + borderRadius: borderRadius.md, + + "&.dropzone": { + background: `${transparent.main} !important`, + }, + + "& .dz-default": { + margin: "0 auto !important", + }, + + "& .dz-default .dz-button": { + color: `${text.main} !important`, + fontSize: `${size.sm} !important`, + }, + + "& .dz-preview.dz-image-preview": { + background: `${transparent.main} !important`, + }, + + "& .dz-preview .dz-details": { + color: `${dark.main} !important`, + opacity: "1 !important", + + "& .dz-size span, & .dz-filename span": { + backgroundColor: `${rgba(white.main, 0.7)} !important`, + }, + }, + + "& .dz-error-message": { + display: "none !important", + }, + + "& .dz-remove": { + color: `${darkMode ? white.main : dark.main} !important`, + textDecoration: "none", + + "&:hover, &:focus": { + textDecoration: "none !important", + }, + }, + }; +}); diff --git a/src/components/MDDropzone/index.tsx b/src/components/MDDropzone/index.tsx new file mode 100644 index 0000000..ac85e98 --- /dev/null +++ b/src/components/MDDropzone/index.tsx @@ -0,0 +1,76 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useEffect, useRef } from "react"; + +// Dropzone components +import Dropzone from "dropzone"; + +// Dropzone styles +import "dropzone/dist/dropzone.css"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; + +// Custom styles for the MDDropzone +import MDDropzoneRoot from "components/MDDropzone/MDDropzoneRoot"; + +// Material Dashboard 2 PRO React context +import { useMaterialUIController } from "context"; + +// Declaring props types for MDDropzone +interface Props { + options: { + [key: string | number]: any; + }; +} + +function MDDropzone({ options }: Props): JSX.Element { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + + const dropzoneRef = useRef(null); + + useEffect(() => { + Dropzone.autoDiscover = false; + + function createDropzone() { + return new Dropzone(dropzoneRef.current, { ...options }); + } + + function removeDropzone() { + if (Dropzone.instances.length > 0) Dropzone.instances.forEach((dz: any) => dz.destroy()); + } + + createDropzone(); + + return () => removeDropzone(); + }, [options]); + + return ( + + + + + + ); +} + +export default MDDropzone; diff --git a/src/components/MDEditor/MDEditorRoot.tsx b/src/components/MDEditor/MDEditorRoot.tsx new file mode 100644 index 0000000..e774af7 --- /dev/null +++ b/src/components/MDEditor/MDEditorRoot.tsx @@ -0,0 +1,54 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import { styled, Theme } from "@mui/material/styles"; + +export default styled("div")(({ theme, ownerState }: { theme?: Theme | any; ownerState: any }) => { + const { palette, borders, typography } = theme; + const { darkMode } = ownerState; + + const { borderRadius } = borders; + const { size } = typography; + const { text, white, dark } = palette; + + return { + "& .ql-toolbar": { + borderRadius: `${borderRadius.md} ${borderRadius.md} 0 0`, + + "& .ql-picker, & .ql-stroke": { + stroke: `${darkMode ? white.main : dark.main} !important`, + color: `${darkMode ? white.main : dark.main} !important`, + }, + }, + + "& .ql-container": { + borderRadius: `0 0 ${borderRadius.md} ${borderRadius.md}`, + }, + + "& .ql-editor": { + color: darkMode ? white.main : text.main, + + "& p": { + fontSize: size.md, + color: darkMode ? white.main : text.main, + }, + + "& ul li": { + color: darkMode ? white.main : text.main, + }, + }, + }; +}); diff --git a/src/components/MDEditor/index.tsx b/src/components/MDEditor/index.tsx new file mode 100644 index 0000000..6028086 --- /dev/null +++ b/src/components/MDEditor/index.tsx @@ -0,0 +1,44 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// react-quill components +import ReactQuill from "react-quill"; + +// react-quill styles +import "react-quill/dist/quill.snow.css"; + +// Custom styles for the MDEditor +import MDEditorRoot from "components/MDEditor/MDEditorRoot"; + +// Material Dashboard 2 PRO React context +import { useMaterialUIController } from "context"; + +// declaring types for the MDEditor +interface Props { + [key: string]: any; +} + +function MDEditor(props: Props): JSX.Element { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + + return ( + + + + ); +} + +export default MDEditor; diff --git a/src/components/MDInput/MDInputRoot.tsx b/src/components/MDInput/MDInputRoot.tsx new file mode 100644 index 0000000..efa28bd --- /dev/null +++ b/src/components/MDInput/MDInputRoot.tsx @@ -0,0 +1,71 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import TextField from "@mui/material/TextField"; +import { styled, Theme } from "@mui/material/styles"; + +export default styled(TextField)(({ theme, ownerState }: { theme?: Theme; ownerState: any }) => { + const { palette, functions } = theme; + const { error, success, disabled } = ownerState; + + const { grey, transparent, error: colorError, success: colorSuccess } = palette; + const { pxToRem } = functions; + + // styles for the input with error={true} + const errorStyles = () => ({ + backgroundImage: + "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23F44335' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23F44335' stroke='none'/%3E%3C/svg%3E\")", + backgroundRepeat: "no-repeat", + backgroundPosition: `right ${pxToRem(12)} center`, + backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`, + + "& .Mui-focused": { + "& .MuiOutlinedInput-notchedOutline, &:after": { + borderColor: colorError.main, + }, + }, + + "& .MuiInputLabel-root.Mui-focused": { + color: colorError.main, + }, + }); + + // styles for the input with success={true} + const successStyles = () => ({ + backgroundImage: + "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath fill='%234CAF50' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E\")", + backgroundRepeat: "no-repeat", + backgroundPosition: `right ${pxToRem(12)} center`, + backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`, + + "& .Mui-focused": { + "& .MuiOutlinedInput-notchedOutline, &:after": { + borderColor: colorSuccess.main, + }, + }, + + "& .MuiInputLabel-root.Mui-focused": { + color: colorSuccess.main, + }, + }); + + return { + backgroundColor: disabled ? `${grey[200]} !important` : transparent.main, + pointerEvents: disabled ? "none" : "auto", + ...(error && errorStyles()), + ...(success && successStyles()), + }; +}); diff --git a/src/components/MDInput/index.tsx b/src/components/MDInput/index.tsx new file mode 100644 index 0000000..d27366f --- /dev/null +++ b/src/components/MDInput/index.tsx @@ -0,0 +1,43 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { FC, forwardRef } from "react"; + +// @mui material components +import { OutlinedTextFieldProps, StandardTextFieldProps } from "@mui/material"; + +// Custom styles for MDInput +import MDInputRoot from "components/MDInput/MDInputRoot"; + +// Declaring props types for MDInput +interface Props extends Omit { + variant?: "standard" | "outlined"; + error?: boolean; + success?: boolean; + disabled?: boolean; +} + +const MDInput: FC = forwardRef(({ error, success, disabled, ...rest }, ref) => ( + +)); + +// Declaring default props for MDInput +MDInput.defaultProps = { + error: false, + success: false, + disabled: false, +}; + +export default MDInput; diff --git a/src/components/MDPagination/MDPaginationItemRoot.tsx b/src/components/MDPagination/MDPaginationItemRoot.tsx new file mode 100644 index 0000000..1ee6ac8 --- /dev/null +++ b/src/components/MDPagination/MDPaginationItemRoot.tsx @@ -0,0 +1,63 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import { styled, Theme } from "@mui/material/styles"; + +// Material Dashboard 2 PRO React TS components +import MDButton from "components/MDButton"; + +// @ts-ignore +export default styled(MDButton)(({ theme, ownerState }: { theme?: Theme; ownerState: any }) => { + const { borders, functions, typography, palette } = theme; + const { variant, paginationSize, active } = ownerState; + + const { borderColor } = borders; + const { pxToRem } = functions; + const { fontWeightRegular, size: fontSize } = typography; + const { light } = palette; + + // width, height, minWidth and minHeight values + let sizeValue = pxToRem(36); + + if (paginationSize === "small") { + sizeValue = pxToRem(30); + } else if (paginationSize === "large") { + sizeValue = pxToRem(46); + } + + return { + borderColor, + margin: `0 ${pxToRem(2)}`, + pointerEvents: active ? "none" : "auto", + fontWeight: fontWeightRegular, + fontSize: fontSize.sm, + width: sizeValue, + minWidth: sizeValue, + height: sizeValue, + minHeight: sizeValue, + + "&:hover, &:focus, &:active": { + transform: "none", + boxShadow: (variant !== "gradient" || variant !== "contained") && "none !important", + opacity: "1 !important", + }, + + "&:hover": { + backgroundColor: light.main, + borderColor, + }, + }; +}); diff --git a/src/components/MDPagination/index.tsx b/src/components/MDPagination/index.tsx new file mode 100644 index 0000000..ed72127 --- /dev/null +++ b/src/components/MDPagination/index.tsx @@ -0,0 +1,99 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { ReactNode, FC, forwardRef, createContext, useContext, useMemo } from "react"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; + +// Custom styles for MDPagination +import MDPaginationItemRoot from "components/MDPagination/MDPaginationItemRoot"; + +// The Pagination main context +const Context = createContext(null); + +// Declare props types for MDPagination +interface Props { + item?: boolean; + variant?: "gradient" | "contained"; + color?: + | "white" + | "primary" + | "secondary" + | "info" + | "success" + | "warning" + | "error" + | "light" + | "dark"; + size?: "small" | "medium" | "large"; + active?: boolean; + children: ReactNode; + [key: string]: any; +} + +const MDPagination: FC = forwardRef( + ({ item, variant, color, size, active, children, ...rest }, ref) => { + const context: any = useContext(Context); + const paginationSize = context ? context.size : undefined; + + const providerValue = useMemo( + () => ({ + variant, + color, + size, + }), + [variant, color, size] + ); + + return ( + + {item ? ( + + {children} + + ) : ( + + {children} + + )} + + ); + } +); + +// Declaring default props for MDPagination +MDPagination.defaultProps = { + item: false, + variant: "gradient", + color: "info", + size: "medium", + active: false, +}; + +export default MDPagination; diff --git a/src/components/MDProgress/MDProgressRoot.tsx b/src/components/MDProgress/MDProgressRoot.tsx new file mode 100644 index 0000000..8fde660 --- /dev/null +++ b/src/components/MDProgress/MDProgressRoot.tsx @@ -0,0 +1,47 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import { styled, Theme } from "@mui/material/styles"; +import LinearProgress from "@mui/material/LinearProgress"; + +export default styled(LinearProgress)( + ({ theme, ownerState }: { theme?: Theme | any; ownerState: any }) => { + const { palette, functions } = theme; + const { color, value, variant } = ownerState; + + const { text, gradients } = palette; + const { linearGradient } = functions; + + // background value + let backgroundValue; + + if (variant === "gradient") { + backgroundValue = gradients[color] + ? linearGradient(gradients[color].main, gradients[color].state) + : linearGradient(gradients.info.main, gradients.info.state); + } else { + backgroundValue = palette[color] ? palette[color].main : palette.info.main; + } + + return { + "& .MuiLinearProgress-bar": { + background: backgroundValue, + width: `${value}%`, + color: text.main, + }, + }; + } +); diff --git a/src/components/MDProgress/index.tsx b/src/components/MDProgress/index.tsx new file mode 100644 index 0000000..1352620 --- /dev/null +++ b/src/components/MDProgress/index.tsx @@ -0,0 +1,58 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { FC, forwardRef } from "react"; + +// Material Dashboard 2 PRO React TS components +import MDTypography from "components/MDTypography"; + +// Custom styles for MDProgress +import MDProgressRoot from "components/MDProgress/MDProgressRoot"; + +// Delcare props types for MDProgress +interface Props { + variant?: "contained" | "gradient"; + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + value: number; + label?: boolean; + [key: string]: any; +} + +const MDProgress: FC = forwardRef(({ variant, color, value, label, ...rest }, ref) => ( + <> + {label && ( + + {value}% + + )} + + +)); + +// Declaring default props for MDProgress +MDProgress.defaultProps = { + variant: "contained", + color: "info", + value: 0, + label: false, +}; + +export default MDProgress; diff --git a/src/components/MDSnackbar/MDSnackbarIconRoot.tsx b/src/components/MDSnackbar/MDSnackbarIconRoot.tsx new file mode 100644 index 0000000..caf1b63 --- /dev/null +++ b/src/components/MDSnackbar/MDSnackbarIconRoot.tsx @@ -0,0 +1,47 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Icon from "@mui/material/Icon"; +import { styled, Theme } from "@mui/material/styles"; + +export default styled(Icon)(({ theme, ownerState }: { theme?: Theme; ownerState: any }) => { + const { palette, functions, typography } = theme; + const { color, bgWhite } = ownerState; + + const { white, transparent, gradients } = palette; + const { pxToRem, linearGradient } = functions; + const { size } = typography; + + // backgroundImage value + let backgroundImageValue; + + if (bgWhite) { + backgroundImageValue = gradients[color] + ? linearGradient(gradients[color].main, gradients[color].state) + : linearGradient(gradients.info.main, gradients.info.state); + } else if (color === "light") { + backgroundImageValue = linearGradient(gradients.dark.main, gradients.dark.state); + } + + return { + backgroundImage: backgroundImageValue, + WebkitTextFillColor: bgWhite || color === "light" ? transparent.main : white.main, + WebkitBackgroundClip: "text", + marginRight: pxToRem(8), + fontSize: size.lg, + transform: `translateY(${pxToRem(-2)})`, + }; +}); diff --git a/src/components/MDSnackbar/index.tsx b/src/components/MDSnackbar/index.tsx new file mode 100644 index 0000000..97fda0c --- /dev/null +++ b/src/components/MDSnackbar/index.tsx @@ -0,0 +1,177 @@ +/* eslint-disable react/default-props-match-prop-types */ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { ReactNode } from "react"; + +// @mui material components +import Snackbar from "@mui/material/Snackbar"; +import IconButton from "@mui/material/IconButton"; +import Icon from "@mui/material/Icon"; +import Divider from "@mui/material/Divider"; +import Fade from "@mui/material/Fade"; +import { SnackbarProps } from "@mui/material"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Custom styles for the MDSnackbar +import MDSnackbarIconRoot from "components/MDSnackbar/MDSnackbarIconRoot"; + +// Material Dashboard 2 PRO React context +import { useMaterialUIController } from "context"; + +// Declaring props types for MDSnackbar +interface Props extends SnackbarProps { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "light"; + icon: ReactNode; + title: string; + dateTime: string; + content: string; + close: () => void; + bgWhite?: boolean; + [key: string]: any; +} + +function MDSnackbar({ + color, + icon, + title, + dateTime, + content, + close, + bgWhite, + ...rest +}: Props): JSX.Element { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + + let titleColor: any; + let dateTimeColor: any; + let dividerColor: any; + + if (bgWhite) { + titleColor = color; + dateTimeColor = "dark"; + dividerColor = false; + } else if (color === "light") { + titleColor = darkMode ? "inherit" : "dark"; + dateTimeColor = darkMode ? "inherit" : "text"; + dividerColor = false; + } else { + titleColor = "white"; + dateTimeColor = "white"; + dividerColor = true; + } + + return ( + + close + + } + > + + darkMode ? palette.background.card : palette[color] || palette.white.main, + }} + > + + + + {icon} + + + {title} + + + + + {dateTime} + + + (bgWhite && !darkMode) || color === "light" ? dark.main : white.main, + fontWeight: ({ typography: { fontWeightBold } }) => fontWeightBold, + cursor: "pointer", + marginLeft: 2, + transform: "translateY(-1px)", + }} + onClick={close} + > + close + + + + + size.sm, + color: ({ palette }: { palette: any }) => { + let colorValue = + bgWhite || color === "light" ? palette.text.main : palette.white.main; + + if (darkMode) { + colorValue = color === "light" ? "inherit" : palette.white.main; + } + + return colorValue; + }, + }} + > + {content} + + + + ); +} + +// Setting default values for the props of MDSnackbar +MDSnackbar.defaultProps = { + bgWhite: false, + color: "info", +}; + +export default MDSnackbar; diff --git a/src/components/MDSocialButton/MDSocialButtonRoot.tsx b/src/components/MDSocialButton/MDSocialButtonRoot.tsx new file mode 100644 index 0000000..8df65ea --- /dev/null +++ b/src/components/MDSocialButton/MDSocialButtonRoot.tsx @@ -0,0 +1,91 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import { Button } from "@mui/material"; +import { styled, Theme } from "@mui/material/styles"; + +export default styled(Button)(({ theme, ownerState }: { theme?: Theme; ownerState: any }) => { + const { palette, functions } = theme; + const { color, size, iconOnly, circular } = ownerState; + + const { white, socialMediaColors } = palette; + const { pxToRem } = functions; + + // backgroundColor value + const backgroundColorValue = socialMediaColors[color] + ? socialMediaColors[color].main + : socialMediaColors.facebook.main; + + // styles for the button with circular={true} + const circularStyles = () => ({ + borderRadius: "50%", + }); + + // styles for the button with iconOnly={true} + const iconOnlyStyles = () => { + // width, height, minWidth and minHeight values + let sizeValue = pxToRem(38); + + if (size === "small") { + sizeValue = pxToRem(25.4); + } else if (size === "large") { + sizeValue = pxToRem(52); + } + + // padding value + let paddingValue = `${pxToRem(11)} ${pxToRem(11)} ${pxToRem(10)}`; + + if (size === "small") { + paddingValue = pxToRem(4.5); + } else if (size === "large") { + paddingValue = pxToRem(16); + } + + return { + width: sizeValue, + minWidth: sizeValue, + height: sizeValue, + minHeight: sizeValue, + padding: paddingValue, + }; + }; + + return { + backgroundColor: backgroundColorValue, + color: white.main, + boxShadow: "none", + + "&:hover": { + backgroundColor: backgroundColorValue, + boxShadow: "none", + }, + + "&:focus:not(:hover)": { + backgroundColor: socialMediaColors[color] + ? socialMediaColors[color].dark + : socialMediaColors.facebook.dark, + boxShadow: "none", + }, + + "&:disabled": { + backgroundColor: backgroundColorValue, + color: white.main, + }, + + ...(circular && circularStyles()), + ...(iconOnly && iconOnlyStyles()), + }; +}); diff --git a/src/components/MDSocialButton/index.tsx b/src/components/MDSocialButton/index.tsx new file mode 100644 index 0000000..b128c8b --- /dev/null +++ b/src/components/MDSocialButton/index.tsx @@ -0,0 +1,69 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { FC, ReactNode, forwardRef } from "react"; + +// @mui material components +import { ButtonProps } from "@mui/material"; + +// Custom styles for MDSocialButton +import MDSocialButtonRoot from "components/MDSocialButton/MDSocialButtonRoot"; + +// Declaring props types for MDButton +interface Props extends Omit { + color?: + | "facebook" + | "twitter" + | "instagram" + | "linkedin" + | "pinterest" + | "youtube" + | "github" + | "vimeo" + | "slack" + | "dribbble" + | "reddit" + | "tumblr"; + size?: "small" | "medium" | "large"; + circular?: boolean; + iconOnly?: boolean; + children?: ReactNode; + [key: string]: any; +} + +const MDSocialButton: FC = forwardRef( + ({ color, size, iconOnly, circular, children, ...rest }, ref) => ( + + {children} + + ) +); + +// Setting default values for the props of MDSocialButton +MDSocialButton.defaultProps = { + size: "medium", + color: "facebook", + iconOnly: false, + circular: false, +}; + +export default MDSocialButton; diff --git a/src/components/MDTypography/MDTypographyRoot.tsx b/src/components/MDTypography/MDTypographyRoot.tsx new file mode 100644 index 0000000..a64db72 --- /dev/null +++ b/src/components/MDTypography/MDTypographyRoot.tsx @@ -0,0 +1,66 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Typography from "@mui/material/Typography"; +import { styled } from "@mui/material/styles"; + +export default styled(Typography)(({ theme, ownerState }: any): any => { + const { palette, typography, functions }: any = theme; + const { color, textTransform, verticalAlign, fontWeight, opacity, textGradient, darkMode } = + ownerState; + + const { gradients, transparent, white } = palette; + const { fontWeightLight, fontWeightRegular, fontWeightMedium, fontWeightBold } = typography; + const { linearGradient } = functions; + + // fontWeight styles + const fontWeights: { [key: string]: number } = { + light: fontWeightLight, + regular: fontWeightRegular, + medium: fontWeightMedium, + bold: fontWeightBold, + }; + + // styles for the typography with textGradient={true} + const gradientStyles = () => ({ + backgroundImage: + color !== "inherit" && color !== "text" && color !== "white" && gradients[color] + ? linearGradient(gradients[color].main, gradients[color].state) + : linearGradient(gradients.dark.main, gradients.dark.state), + display: "inline-block", + WebkitBackgroundClip: "text", + WebkitTextFillColor: transparent.main, + position: "relative", + zIndex: 1, + }); + + // color value + let colorValue = color === "inherit" || !palette[color] ? "inherit" : palette[color].main; + + if (darkMode && (color === "inherit" || !palette[color])) { + colorValue = "inherit"; + } else if (darkMode && color === "dark") colorValue = white.main; + + return { + opacity, + textTransform, + verticalAlign, + textDecoration: "none", + color: colorValue, + fontWeight: fontWeights[fontWeight] && fontWeights[fontWeight], + ...(textGradient && gradientStyles()), + }; +}); diff --git a/src/components/MDTypography/index.tsx b/src/components/MDTypography/index.tsx new file mode 100644 index 0000000..de32301 --- /dev/null +++ b/src/components/MDTypography/index.tsx @@ -0,0 +1,97 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { FC, ReactNode, forwardRef } from "react"; + +// @mui material components +import { TypographyProps } from "@mui/material"; + +// Custom styles for MDTypography +import MDTypographyRoot from "components/MDTypography/MDTypographyRoot"; + +// Material Dashboard 2 PRO React TS contexts +import { useMaterialUIController } from "context"; + +// Declaring props types for MDTypography +interface Props extends TypographyProps { + color?: + | "inherit" + | "primary" + | "secondary" + | "info" + | "success" + | "warning" + | "error" + | "light" + | "dark" + | "text" + | "white"; + fontWeight?: "light" | "regular" | "medium" | "bold" | undefined; + textTransform?: "none" | "capitalize" | "uppercase" | "lowercase"; + verticalAlign?: + | "unset" + | "baseline" + | "sub" + | "super" + | "text-top" + | "text-bottom" + | "middle" + | "top" + | "bottom"; + textGradient?: boolean; + children: ReactNode; + opacity?: number; + [key: string]: any; +} + +const MDTypography: FC = forwardRef( + ( + { color, fontWeight, textTransform, verticalAlign, textGradient, opacity, children, ...rest }, + ref + ) => { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + + return ( + + {children} + + ); + } +); + +// Declaring default props for MDTypography +MDTypography.defaultProps = { + color: "dark", + fontWeight: undefined, + textTransform: "none", + verticalAlign: "unset", + textGradient: false, + opacity: 1, +}; + +export default MDTypography; diff --git a/src/context/index.tsx b/src/context/index.tsx new file mode 100644 index 0000000..6f94b9a --- /dev/null +++ b/src/context/index.tsx @@ -0,0 +1,200 @@ +/* eslint-disable no-unused-vars */ + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/** + This file is used for controlling the global states of the components, + you can customize the states for the different components here. +*/ + +import { createContext, ReactNode, useContext, useMemo, useReducer } from "react"; + +// The Material Dashboard 2 PRO React TSUI Dashboard PRO Material main context +const MaterialUI = createContext(null); + +// Setting custom name for the context which is visible on react dev tools +MaterialUI.displayName = "MaterialUIContext"; + +// types +interface StateTypes { + miniSidenav: boolean; + transparentSidenav: boolean; + whiteSidenav: boolean; + sidenavColor: + | "primary" + | "secondary" + | "info" + | "success" + | "warning" + | "error" + | "light" + | "dark"; + transparentNavbar: boolean; + fixedNavbar: boolean; + openConfigurator: boolean; + direction: "ltr" | "rtl"; + layout: "dashboard" | "page"; + darkMode: boolean; +} + +interface ActionTypes { + type: + | "MINI_SIDENAV" + | "TRANSPARENT_SIDENAV" + | "WHITE_SIDENAV" + | "SIDENAV_COLOR" + | "TRANSPARENT_NAVBAR" + | "FIXED_NAVBAR" + | "OPEN_CONFIGURATOR" + | "DIRECTION" + | "LAYOUT" + | "DARKMODE"; + value: any; +} + +// Material Dashboard 2 PRO React reducer +function reducer(state: StateTypes, action: ActionTypes) { + switch (action.type) { + case "MINI_SIDENAV": { + return { ...state, miniSidenav: action.value }; + } + case "TRANSPARENT_SIDENAV": { + return { ...state, transparentSidenav: action.value }; + } + case "WHITE_SIDENAV": { + return { ...state, whiteSidenav: action.value }; + } + case "SIDENAV_COLOR": { + return { ...state, sidenavColor: action.value }; + } + case "TRANSPARENT_NAVBAR": { + return { ...state, transparentNavbar: action.value }; + } + case "FIXED_NAVBAR": { + return { ...state, fixedNavbar: action.value }; + } + case "OPEN_CONFIGURATOR": { + return { ...state, openConfigurator: action.value }; + } + case "DIRECTION": { + return { ...state, direction: action.value }; + } + case "LAYOUT": { + return { ...state, layout: action.value }; + } + case "DARKMODE": { + return { ...state, darkMode: action.value }; + } + default: { + throw new Error(`Unhandled action type: ${action.type}`); + } + } +} + +// Material Dashboard 2 PRO React context provider +function MaterialUIControllerProvider({ children }: { children: ReactNode }): JSX.Element { + const initialState: StateTypes = { + miniSidenav: false, + transparentSidenav: false, + whiteSidenav: false, + sidenavColor: "info", + transparentNavbar: true, + fixedNavbar: true, + openConfigurator: false, + direction: "ltr", + layout: "dashboard", + darkMode: false, + }; + + const [controller, dispatch] = useReducer(reducer, initialState); + + const value = useMemo(() => [controller, dispatch], [controller, dispatch]); + + return {children}; +} + +// Material Dashboard 2 PRO React custom hook for using context +function useMaterialUIController() { + const context = useContext(MaterialUI); + + if (!context) { + throw new Error( + "useMaterialUIController should be used inside the MaterialUIControllerProvider." + ); + } + + return context; +} + +// Context module functions +const setMiniSidenav = ( + dispatch: (arg: { type: "MINI_SIDENAV"; value: boolean }) => void, + value: boolean +) => dispatch({ type: "MINI_SIDENAV", value }); +const setTransparentSidenav = ( + dispatch: (arg: { type: "TRANSPARENT_SIDENAV"; value: boolean }) => void, + value: boolean +) => dispatch({ type: "TRANSPARENT_SIDENAV", value }); +const setWhiteSidenav = ( + dispatch: (arg: { type: "WHITE_SIDENAV"; value: boolean }) => void, + value: boolean +) => dispatch({ type: "WHITE_SIDENAV", value }); +const setSidenavColor = ( + dispatch: (arg: { + type: "SIDENAV_COLOR"; + value: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + }) => void, + value: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark" +) => dispatch({ type: "SIDENAV_COLOR", value }); +const setTransparentNavbar = ( + dispatch: (arg: { type: "TRANSPARENT_NAVBAR"; value: boolean }) => void, + value: boolean +) => dispatch({ type: "TRANSPARENT_NAVBAR", value }); +const setFixedNavbar = ( + dispatch: (arg: { type: "FIXED_NAVBAR"; value: boolean }) => void, + value: boolean +) => dispatch({ type: "FIXED_NAVBAR", value }); +const setOpenConfigurator = ( + dispatch: (arg: { type: "OPEN_CONFIGURATOR"; value: boolean }) => void, + value: boolean +) => dispatch({ type: "OPEN_CONFIGURATOR", value }); +const setDirection = ( + dispatch: (arg: { type: "DIRECTION"; value: "ltr" | "rtl" }) => void, + value: "ltr" | "rtl" +) => dispatch({ type: "DIRECTION", value }); +const setLayout = ( + dispatch: (arg: { type: "LAYOUT"; value: "dashboard" | "page" }) => void, + value: "dashboard" | "page" +) => dispatch({ type: "LAYOUT", value }); +const setDarkMode = ( + dispatch: (arg: { type: "DARKMODE"; value: boolean }) => void, + value: boolean +) => dispatch({ type: "DARKMODE", value }); + +export { + MaterialUIControllerProvider, + useMaterialUIController, + setMiniSidenav, + setTransparentSidenav, + setWhiteSidenav, + setSidenavColor, + setTransparentNavbar, + setFixedNavbar, + setOpenConfigurator, + setDirection, + setLayout, + setDarkMode, +}; diff --git a/src/examples/Breadcrumbs/index.tsx b/src/examples/Breadcrumbs/index.tsx new file mode 100644 index 0000000..2e3080b --- /dev/null +++ b/src/examples/Breadcrumbs/index.tsx @@ -0,0 +1,104 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { ReactNode } from "react"; + +// react-router-dom components +import { Link } from "react-router-dom"; + +// @mui material components +import { Breadcrumbs as MuiBreadcrumbs } from "@mui/material"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Declaring props types for the Breadcrumbs +interface Props { + icon: ReactNode; + title: string; + route: string | string[]; + light?: boolean; + [key: string]: any; +} + +function Breadcrumbs({ icon, title, route, light }: Props): JSX.Element { + const routes: string[] | any = route.slice(0, -1); + + return ( + + (light ? white.main : grey[600]), + }, + }} + > + + + {icon} + + + {routes.map((el: string) => ( + + + {el} + + + ))} + + {title.replace("-", " ")} + + + + {title.replace("-", " ")} + + + ); +} + +// Declaring default props for Breadcrumbs +Breadcrumbs.defaultProps = { + light: false, +}; + +export default Breadcrumbs; diff --git a/src/examples/Calendar/CalendarRoot.tsx b/src/examples/Calendar/CalendarRoot.tsx new file mode 100644 index 0000000..2e11d67 --- /dev/null +++ b/src/examples/Calendar/CalendarRoot.tsx @@ -0,0 +1,174 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Box from "@mui/material/Box"; +import { styled, Theme } from "@mui/material/styles"; + +export default styled(Box)(({ theme, ownerState }: { theme?: Theme; ownerState: any }) => { + const { palette, typography, functions, boxShadows } = theme; + const { darkMode } = ownerState; + + const { white, dark, light, grey, gradients, info } = palette; + const { size, fontWeightMedium, fontWeightBold, fontWeightRegular, fontWeightLight } = typography; + const { linearGradient, pxToRem } = functions; + const { md } = boxShadows; + + return { + height: "100%", + + "& .fc-media-screen": { + height: "100%", + color: dark.main, + }, + + "& .fc-theme-standard .fc-scrollgrid": { + border: "none", + }, + + "& .fc-theme-standard thead tr th": { + borderLeft: "none", + borderRight: "none", + }, + + "& .fc-theme-standard td, .fc-theme-standard th": { + borderColor: light.main, + }, + + "& .fc th": { + textAlign: "center", + }, + + "& .fc .fc-col-header-cell-cushion": { + fontSize: size.sm, + fontWeight: fontWeightMedium, + color: darkMode ? white.main : grey[500], + }, + + "& .fc .fc-daygrid-day-number": { + color: darkMode ? white.main : grey[700], + fontSize: size.sm, + fontWeight: fontWeightLight, + width: "100%", + textAlign: "center", + }, + + "& .fc-scrollgrid-section.fc-scrollgrid-section-header > td": { + border: "none", + }, + + "& .fc-scrollgrid-section.fc-scrollgrid-section-body.fc-scrollgrid-section-liquid > td": { + border: "none", + }, + + "& .fc-scrollgrid-sync-table": { + height: "auto !important", + }, + + "& .fc .fc-view-harness-active > .fc-view": { + position: "static", + height: "100%", + }, + + "& .fc .fc-scroller-liquid-absolute": { + position: "static", + }, + + "& .fc-daygrid-event": { + margin: `${pxToRem(0.5)} ${pxToRem(2)}`, + border: "none", + borderRadius: pxToRem(5.6), + fontSize: size.sm, + fontWeight: fontWeightMedium, + }, + + "& .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events": { + minHeight: pxToRem(32), + }, + + "& .fc-event-title": { + fontSize: `${size.xs} !important`, + fontWeight: `${fontWeightRegular} !important`, + padding: `${pxToRem(2)} ${pxToRem(4.8)} ${pxToRem(1.5)} !important`, + }, + + "& .fc-button, .fc-today-button, .fc-button:disabled": { + backgroundColor: `${info.main} !important`, + borderColor: `${info.main} !important`, + fontSize: `${size.sm} !important`, + boxShadow: `${md} !important`, + opacity: "1 !important", + transition: `all 150ms ease-in`, + + "&:hover, &:focus, &:active": { + transform: "scale(1.02)", + boxShadow: `${md} !important`, + backgroundColor: `${info.main} !important`, + borderColor: `${info.main} !important`, + }, + }, + + "& .fc .fc-button .fc-icon": { + fontSize: size.sm, + }, + + "& .fc-toolbar-title": { + fontSize: `${size.lg} !important`, + fontWeight: `${fontWeightBold} !important`, + color: darkMode ? white.main : dark.main, + }, + + "& .event-primary": { + backgroundImage: linearGradient(gradients.primary.main, gradients.primary.state), + "& *": { color: white.main }, + }, + + "& .event-secondary": { + backgroundImage: linearGradient(gradients.secondary.main, gradients.secondary.state), + "& *": { color: white.main }, + }, + + "& .event-info": { + backgroundImage: linearGradient(gradients.info.main, gradients.info.state), + "& *": { color: white.main }, + }, + + "& .event-success": { + backgroundImage: linearGradient(gradients.success.main, gradients.success.state), + "& *": { color: white.main }, + }, + + "& .event-warning": { + backgroundImage: linearGradient(gradients.warning.main, gradients.warning.state), + "& *": { color: white.main }, + }, + + "& .event-error": { + backgroundImage: linearGradient(gradients.error.main, gradients.error.state), + "& *": { color: white.main }, + }, + + "& .event-light": { + backgroundImage: linearGradient(gradients.light.main, gradients.light.state), + + "& *": { color: dark.main }, + }, + + "& .event-dark": { + backgroundImage: linearGradient(gradients.dark.main, gradients.dark.state), + "& *": { color: white.main }, + }, + }; +}); diff --git a/src/examples/Calendar/index.tsx b/src/examples/Calendar/index.tsx new file mode 100644 index 0000000..0ac243a --- /dev/null +++ b/src/examples/Calendar/index.tsx @@ -0,0 +1,102 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @fullcalendar components +import FullCalendar from "@fullcalendar/react"; +import dayGridPlugin from "@fullcalendar/daygrid"; +import timeGridPlugin from "@fullcalendar/timegrid"; +import interactionPlugin from "@fullcalendar/interaction"; + +// @mui material components +import Card from "@mui/material/Card"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Custom styles for Calendar +import CalendarRoot from "examples/Calendar/CalendarRoot"; + +// Material Dashboard 2 PRO React context +import { useMaterialUIController } from "context"; + +// Declaring props types for the Calender +interface Props { + header?: { + title?: string; + date?: string; + }; + [key: string]: any; +} + +function Calendar({ header, ...rest }: Props): JSX.Element { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + + const validClassNames = [ + "primary", + "secondary", + "info", + "success", + "warning", + "error", + "light", + "dark", + ]; + + const events = rest.events + ? rest.events.map((el: any) => ({ + ...el, + className: validClassNames.find((item) => item === el.className) + ? `event-${el.className}` + : "event-info", + })) + : []; + + return ( + + + {header.title ? ( + + {header.title} + + ) : null} + {header.date ? ( + + {header.date} + + ) : null} + + + + + + ); +} + +// Declaring default props for Calendar +Calendar.defaultProps = { + header: { + title: "", + date: "", + }, +}; + +export default Calendar; diff --git a/src/examples/Cards/BlogCards/SimpleBlogCard/index.tsx b/src/examples/Cards/BlogCards/SimpleBlogCard/index.tsx new file mode 100644 index 0000000..09293f6 --- /dev/null +++ b/src/examples/Cards/BlogCards/SimpleBlogCard/index.tsx @@ -0,0 +1,105 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// react-router components +import { Link } from "react-router-dom"; + +// @mui material components +import Card from "@mui/material/Card"; +import MuiLink from "@mui/material/Link"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; +import MDButton from "components/MDButton"; + +// Declaring props types for SimpleBlogCard +interface Props { + image: string; + title: string; + description: string; + action: { + type: "external" | "internal"; + route: string; + color: + | "primary" + | "secondary" + | "info" + | "success" + | "warning" + | "error" + | "dark" + | "light" + | "default"; + label: string; + [key: string]: any; + }; +} + +function SimpleBlogCard({ image, title, description, action }: Props): JSX.Element { + return ( + + + + + + + + {title} + + + + {description} + + + {action.type === "external" ? ( + + {action.label} + + ) : ( + + {action.label} + + )} + + + ); +} + +export default SimpleBlogCard; diff --git a/src/examples/Cards/BookingCard/index.tsx b/src/examples/Cards/BookingCard/index.tsx new file mode 100644 index 0000000..52df2a5 --- /dev/null +++ b/src/examples/Cards/BookingCard/index.tsx @@ -0,0 +1,124 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { ReactNode } from "react"; + +// @mui material components +import Card from "@mui/material/Card"; +import Divider from "@mui/material/Divider"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Declaring props types for BookingCard +interface Props { + image: string; + title: string; + description: string; + price: string; + location: ReactNode; + action?: ReactNode | boolean; + [key: string]: any; +} + +function BookingCard({ image, title, description, price, location, action }: Props): JSX.Element { + return ( + + + + + + + + {action} + + + {title} + + + {description} + + + + + + {price} + + + + place + + + {location} + + + + + ); +} + +// Declaring default props for BookingCard +BookingCard.defaultProps = { + action: false, +}; + +export default BookingCard; diff --git a/src/examples/Cards/ControllerCard/index.tsx b/src/examples/Cards/ControllerCard/index.tsx new file mode 100644 index 0000000..3c4a3f1 --- /dev/null +++ b/src/examples/Cards/ControllerCard/index.tsx @@ -0,0 +1,95 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { ReactNode } from "react"; + +// @mui material components +import Card from "@mui/material/Card"; +import Switch from "@mui/material/Switch"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Material Dashboard 2 PRO React context +import { useMaterialUIController } from "context"; + +// Declaring props types for ControllerCard +interface Props { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; + state?: boolean; + icon: ReactNode; + title: string; + description?: string; + onChange: () => void; + [key: string]: any; +} + +function ControllerCard({ color, state, icon, title, description, onChange }: Props): JSX.Element { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + + return ( + + ({ + background: darkMode && !state && background.card, + })} + > + + + {state ? "On" : "Off"} + + + + + + {icon} + + + {title} + + {description ? ( + + {description} + + ) : null} + + + + ); +} + +// Declaring default props for ControllerCard +ControllerCard.defaultProps = { + color: "info", + state: false, + description: "", +}; + +export default ControllerCard; diff --git a/src/examples/Cards/InfoCards/DefaultInfoCard/index.tsx b/src/examples/Cards/InfoCards/DefaultInfoCard/index.tsx new file mode 100644 index 0000000..e83fefd --- /dev/null +++ b/src/examples/Cards/InfoCards/DefaultInfoCard/index.tsx @@ -0,0 +1,83 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { ReactNode } from "react"; + +// @mui material components +import Card from "@mui/material/Card"; +import Divider from "@mui/material/Divider"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Declaring props types for DefaultInfoCard +interface Props { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; + icon: ReactNode; + title: string; + description?: string; + value?: string | number; + [key: string]: any; +} + +function DefaultInfoCard({ color, icon, title, description, value }: Props): JSX.Element { + return ( + + + + {icon} + + + + + {title} + + {description && ( + + {description} + + )} + {description && !value ? null : } + {value && ( + + {value} + + )} + + + ); +} + +// Declaring default props for DefaultInfoCard +DefaultInfoCard.defaultProps = { + color: "info", + value: "", + description: "", +}; + +export default DefaultInfoCard; diff --git a/src/examples/Cards/InfoCards/MiniInfoCard/index.tsx b/src/examples/Cards/InfoCards/MiniInfoCard/index.tsx new file mode 100644 index 0000000..631be55 --- /dev/null +++ b/src/examples/Cards/InfoCards/MiniInfoCard/index.tsx @@ -0,0 +1,70 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { ReactNode } from "react"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +interface Props { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; + icon: ReactNode; + title: ReactNode; + description: string; + [key: string]: any; +} + +function MiniInfoCard({ color, icon, title, description }: Props): JSX.Element { + return ( + + + + {icon} + + + + {title} + + + {description} + + + + + ); +} + +// Declaring default props for MiniInfoCard +MiniInfoCard.defaultProps = { + color: "info", +}; + +export default MiniInfoCard; diff --git a/src/examples/Cards/InfoCards/ProfileInfoCard/index.tsx b/src/examples/Cards/InfoCards/ProfileInfoCard/index.tsx new file mode 100644 index 0000000..28e4380 --- /dev/null +++ b/src/examples/Cards/InfoCards/ProfileInfoCard/index.tsx @@ -0,0 +1,142 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// react-routers components +import { Link } from "react-router-dom"; + +// @mui material components +import Card from "@mui/material/Card"; +import Divider from "@mui/material/Divider"; +import Tooltip from "@mui/material/Tooltip"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; +import typography from "assets/theme/base/typography"; + +// Declaring props types for ProfileInfoCard +interface Props { + title: string; + description: string; + info: { + [key: string]: string; + }; + social: { + [key: string]: any; + }[]; + action: { + route: string; + tooltip: string; + }; + shadow?: boolean; + [key: string]: any; +} + +function ProfileInfoCard({ title, description, info, social, action, shadow }: Props): JSX.Element { + const labels: string[] = []; + const values: string[] = []; + const { socialMediaColors } = colors; + const { size } = typography; + + // Convert this form `objectKey` of the object key in to this `object key` + Object.keys(info).forEach((el) => { + if (el.match(/[A-Z\s]+/)) { + const uppercaseLetter = Array.from(el).find((i) => i.match(/[A-Z]+/)); + const newElement = el.replace(uppercaseLetter, ` ${uppercaseLetter.toLowerCase()}`); + + labels.push(newElement); + } else { + labels.push(el); + } + }); + + // Push the object values into the values array + Object.values(info).forEach((el) => values.push(el)); + + // Render the card info items + const renderItems = labels.map((label, key) => ( + + + {label}:   + + +  {values[key]} + + + )); + + // Render the card social media icons + const renderSocial = social.map(({ link, icon, color }) => ( + + {icon} + + )); + + return ( + + + + {title} + + + + edit + + + + + + + {description} + + + + + + + {renderItems} + + + social:   + + {renderSocial} + + + + + ); +} + +// Declaring default props for ProfileInfoCard +ProfileInfoCard.defaultProps = { + shadow: true, +}; + +export default ProfileInfoCard; diff --git a/src/examples/Cards/MasterCard/index.tsx b/src/examples/Cards/MasterCard/index.tsx new file mode 100644 index 0000000..8359320 --- /dev/null +++ b/src/examples/Cards/MasterCard/index.tsx @@ -0,0 +1,117 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Images +import pattern from "assets/images/illustrations/pattern-tree.svg"; +import masterCardLogo from "assets/images/logos/mastercard.png"; + +interface Props { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; + number: number; + holder: string; + expires: string; + [key: string]: any; +} + +function MasterCard({ color, number, holder, expires }: Props): JSX.Element { + const numbers: string[] = [...`${number}`]; + + if (numbers.length < 16 || numbers.length > 16) { + throw new Error( + "Invalid value for the prop number, the value for the number prop shouldn't be greater than or less than 16 digits" + ); + } + + const num1 = numbers.slice(0, 4).join(""); + const num2 = numbers.slice(4, 8).join(""); + const num3 = numbers.slice(8, 12).join(""); + const num4 = numbers.slice(12, 16).join(""); + + return ( + ({ + background: gradients[color] + ? linearGradient(gradients[color].main, gradients[color].state) + : linearGradient(gradients.dark.main, gradients.dark.state), + boxShadow: xl, + position: "relative", + })} + > + + + + wifi + + + {num1}   {num2}   {num3}   {num4} + + + + + + Card Holder + + + {holder} + + + + + Expires + + + {expires} + + + + + + + + + + ); +} + +// Declaring default props for MasterCard +MasterCard.defaultProps = { + color: "dark", +}; + +export default MasterCard; diff --git a/src/examples/Cards/PricingCards/DefaultPricingCard/index.tsx b/src/examples/Cards/PricingCards/DefaultPricingCard/index.tsx new file mode 100644 index 0000000..d388977 --- /dev/null +++ b/src/examples/Cards/PricingCards/DefaultPricingCard/index.tsx @@ -0,0 +1,189 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// react-router-dom components +import { Link } from "react-router-dom"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; +import MDButton from "components/MDButton"; + +// Declaring props types for DefaultPricingCard +interface Props { + color?: + | "primary" + | "secondary" + | "info" + | "success" + | "warning" + | "error" + | "light" + | "dark" + | "white"; + badge: { + color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + label: string; + }; + price: { + currency: string; + value: string; + type: string; + }; + specifications: { + label: string; + includes?: boolean; + }[]; + action: { + type: "external" | "internal"; + route: string; + label: string; + color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + }; + shadow?: boolean; + [key: string]: any; +} + +function DefaultPricingCard({ + color, + badge, + price, + specifications, + action, + shadow, +}: Props): JSX.Element { + const renderSpecifications = specifications.map(({ label, includes }) => ( + + + + {includes ? "done" : "remove"} + + + + {label} + + + )); + + return ( + (shadow ? lg : "none") }}> + + + + {badge.label} + + + + + + + {price.currency} + + {price.value} + + /{price.type} + + + + + + {renderSpecifications} + {action.type === "internal" ? ( + + + {action.label}  + arrow_forward + + + ) : ( + + + {action.label}  + arrow_forward + + + )} + + + + ); +} + +// Declaring default props for DefaultPricingCard +DefaultPricingCard.defaultProps = { + color: "white", + shadow: true, +}; + +export default DefaultPricingCard; diff --git a/src/examples/Cards/ProjectCards/ComplexProjectCard/index.tsx b/src/examples/Cards/ProjectCards/ComplexProjectCard/index.tsx new file mode 100644 index 0000000..bd70d69 --- /dev/null +++ b/src/examples/Cards/ProjectCards/ComplexProjectCard/index.tsx @@ -0,0 +1,155 @@ +/* eslint-disable no-unused-vars */ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { ReactNode } from "react"; + +// @mui material components +import Card from "@mui/material/Card"; +import Divider from "@mui/material/Divider"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; +import MDAvatar from "components/MDAvatar"; + +// Declaring prop types for the ComplexProjectCard +interface Props { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "light"; + image: string; + title: string; + dateTime?: string; + description: ReactNode; + members?: string[]; + dropdown?: { + action?: (...arg: any) => void; + menu?: ReactNode; + }; + [key: string]: any; +} + +// Custom styles for ComplexProjectCard +function ComplexProjectCard({ + color, + image, + title, + dateTime, + description, + members, + dropdown, +}: Props): JSX.Element { + const renderMembers = members.map((member, key) => { + const memberKey = `member-${key}`; + + return ( + ({ + border: `${borderWidth[2]} solid ${white.main}`, + cursor: "pointer", + position: "relative", + + "&:not(:first-of-type)": { + ml: -1.25, + }, + + "&:hover, &:focus": { + zIndex: "10", + }, + })} + /> + ); + }); + + return ( + + + + borderRadius.xl }} + /> + + + {title} + + {members.length > -1 ? {renderMembers} : null} + + {dropdown && ( + + more_vert + + )} + {dropdown.menu} + + + + {description} + + + + + {members.length > -1 ? ( + + + {members.length} + + + Participants + + + ) : null} + {dateTime ? ( + + + {dateTime} + + + Due date + + + ) : null} + + + + ); +} + +// Declaring default props for ComplexProjectCard +ComplexProjectCard.defaultProps = { + color: "dark", + dateTime: "", + members: [], + dropdown: false, +}; + +export default ComplexProjectCard; diff --git a/src/examples/Cards/ProjectCards/DefaultProjectCard/index.tsx b/src/examples/Cards/ProjectCards/DefaultProjectCard/index.tsx new file mode 100644 index 0000000..3a087c8 --- /dev/null +++ b/src/examples/Cards/ProjectCards/DefaultProjectCard/index.tsx @@ -0,0 +1,178 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// react-router-dom components +import { Link } from "react-router-dom"; + +// @mui material components +import Card from "@mui/material/Card"; +import CardMedia from "@mui/material/CardMedia"; +import Tooltip from "@mui/material/Tooltip"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; +import MDButton from "components/MDButton"; +import MDAvatar from "components/MDAvatar"; + +// Declaring props types for DefaultProjectCard +interface Props { + image: string; + label: string; + title: string; + description: string; + action: { + type: "external" | "internal"; + route: string; + color: + | "primary" + | "secondary" + | "info" + | "success" + | "warning" + | "error" + | "light" + | "dark" + | "white"; + label: string; + }; + authors?: { + image: string; + name: string; + }[]; + [key: string]: any; +} + +function DefaultProjectCard({ + image, + label, + title, + description, + action, + authors, +}: Props): JSX.Element { + const renderAuthors = authors.map(({ image: media, name }) => ( + + ({ + border: `${borderWidth[2]} solid ${white.main}`, + cursor: "pointer", + position: "relative", + ml: -1.25, + + "&:hover, &:focus": { + zIndex: "10", + }, + })} + /> + + )); + + return ( + + + md, + objectFit: "cover", + objectPosition: "center", + }} + /> + + + + {label} + + + {action.type === "internal" ? ( + + {title} + + ) : ( + + {title} + + )} + + + + {description} + + + + {action.type === "internal" ? ( + + {action.label} + + ) : ( + + {action.label} + + )} + {renderAuthors} + + + + ); +} + +// Declaring default props for DefaultProjectCard +DefaultProjectCard.defaultProps = { + authors: [], +}; + +export default DefaultProjectCard; diff --git a/src/examples/Cards/StatisticsCards/ComplexStatisticsCard/index.tsx b/src/examples/Cards/StatisticsCards/ComplexStatisticsCard/index.tsx new file mode 100644 index 0000000..de6a5e0 --- /dev/null +++ b/src/examples/Cards/StatisticsCards/ComplexStatisticsCard/index.tsx @@ -0,0 +1,97 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { ReactNode } from "react"; + +// @mui material components +import Card from "@mui/material/Card"; +import Divider from "@mui/material/Divider"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Declaring props types for CompleStatisticsCard +interface Props { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + title: string; + count: string | number; + percentage?: { + color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "white"; + amount: string | number; + label: string; + }; + icon: ReactNode; + [key: string]: any; +} + +function ComplexStatisticsCard({ color, title, count, percentage, icon }: Props): JSX.Element { + return ( + + + + + {icon} + + + + + {title} + + {count} + + + + + + + {percentage.amount} + +  {percentage.label} + + + + ); +} + +// Declaring defualt props for ComplexStatisticsCard +ComplexStatisticsCard.defaultProps = { + color: "info", + percentage: { + color: "success", + text: "", + label: "", + }, +}; + +export default ComplexStatisticsCard; diff --git a/src/examples/Cards/StatisticsCards/DefaultStatisticsCard/index.tsx b/src/examples/Cards/StatisticsCards/DefaultStatisticsCard/index.tsx new file mode 100644 index 0000000..dfa4d71 --- /dev/null +++ b/src/examples/Cards/StatisticsCards/DefaultStatisticsCard/index.tsx @@ -0,0 +1,114 @@ +/* eslint-disable no-unused-vars */ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { ReactNode } from "react"; + +// @mui material components +import Card from "@mui/material/Card"; +import Grid from "@mui/material/Grid"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Material Dashboard 2 PRO React TS contexts +import { useMaterialUIController } from "context"; + +// Declaring prop types for DefaultStatisticsCard +interface Props { + title: string; + count: string | number; + percentage?: { + color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "white"; + value: string | number; + label: string; + }; + dropdown?: { + action: (...args: any) => void; + menu: ReactNode; + value: string; + }; + [key: string]: any; +} + +function DefaultStatisticsCard({ title, count, percentage, dropdown }: Props): JSX.Element { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + + return ( + + + + + + + {title} + + + + + {count} + + + {percentage.value}  + + {percentage.label} + + + + + + {dropdown && ( + + + {dropdown.value} + + {dropdown.menu} + + )} + + + + + ); +} + +// Setting default values for the props of DefaultStatisticsCard +DefaultStatisticsCard.defaultProps = { + percentage: { + color: "success", + value: "", + label: "", + }, + dropdown: false, +}; + +export default DefaultStatisticsCard; diff --git a/src/examples/Cards/StatisticsCards/MiniStatisticsCard/index.tsx b/src/examples/Cards/StatisticsCards/MiniStatisticsCard/index.tsx new file mode 100644 index 0000000..b411413 --- /dev/null +++ b/src/examples/Cards/StatisticsCards/MiniStatisticsCard/index.tsx @@ -0,0 +1,161 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { ReactNode } from "react"; + +// @mui material components +import Card from "@mui/material/Card"; +import Grid from "@mui/material/Grid"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Material Dashboard 2 PRO React context +import { useMaterialUIController } from "context"; + +// Decalaring props types for MiniStatisticsCard +interface Props { + bgColor?: "white" | "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; + title?: { + fontWeight?: "light" | "regular" | "medium" | "bold"; + text?: string; + }; + count: string | number; + percentage?: { + color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "white"; + text: string | number; + }; + icon: { + color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; + component: ReactNode; + }; + direction?: "right" | "left"; + [key: string]: any; +} + +function MiniStatisticsCard({ + bgColor, + title, + count, + percentage, + icon, + direction, +}: Props): JSX.Element { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + + return ( + + ({ + background: darkMode && background.card, + })} + > + + + {direction === "left" ? ( + + + + {icon.component} + + + + ) : null} + + + + {title.text} + + + {count}{" "} + + {percentage.text} + + + + + {direction === "right" ? ( + + + + {icon.component} + + + + ) : null} + + + + + ); +} + +// Declaring default props for MiniStatisticsCard +MiniStatisticsCard.defaultProps = { + bgColor: "white", + title: { + fontWeight: "light", + text: "", + }, + percentage: { + color: "success", + text: "", + }, + direction: "right", +}; + +export default MiniStatisticsCard; diff --git a/src/examples/Charts/BarCharts/HorizontalBarChart/configs/index.ts b/src/examples/Charts/BarCharts/HorizontalBarChart/configs/index.ts new file mode 100644 index 0000000..db397ed --- /dev/null +++ b/src/examples/Charts/BarCharts/HorizontalBarChart/configs/index.ts @@ -0,0 +1,80 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +function configs(labels: any, datasets: any) { + return { + data: { + labels, + datasets: [...datasets], + }, + options: { + indexAxis: "y", + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + color: "#c1c4ce5c", + }, + ticks: { + display: true, + padding: 10, + color: "#9ca2b7", + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + x: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: true, + drawTicks: true, + color: "#c1c4ce5c", + }, + ticks: { + display: true, + color: "#9ca2b7", + padding: 10, + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Charts/BarCharts/HorizontalBarChart/index.tsx b/src/examples/Charts/BarCharts/HorizontalBarChart/index.tsx new file mode 100644 index 0000000..6346290 --- /dev/null +++ b/src/examples/Charts/BarCharts/HorizontalBarChart/index.tsx @@ -0,0 +1,126 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { ReactNode, useMemo } from "react"; + +// react-chartjs-2 components +import { Bar } from "react-chartjs-2"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// HorizontalBarChart configurations +import configs from "examples/Charts/BarCharts/HorizontalBarChart/configs"; + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +// Declaring props types for HorizontalBarChart +interface Props { + icon?: { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + component: ReactNode; + }; + title?: string; + description?: string | ReactNode; + height?: string | number; + chart: { + labels: string[]; + datasets: { + label: string; + color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + data: number[]; + }[]; + }; + [key: string]: any; +} + +function HorizontalBarChart({ icon, title, description, height, chart }: Props): JSX.Element { + const chartDatasets = chart.datasets + ? chart.datasets.map((dataset) => ({ + ...dataset, + weight: 5, + borderWidth: 0, + borderRadius: 4, + backgroundColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + fill: false, + maxBarThickness: 35, + })) + : []; + + const { data, options } = configs(chart.labels || [], chartDatasets); + + const renderChart = ( + + {title || description ? ( + + {icon.component && ( + + {icon.component} + + )} + + {title && {title}} + + + {description} + + + + + ) : null} + {useMemo( + () => ( + + + + ), + [chart, height] + )} + + ); + + return title || description ? {renderChart} : renderChart; +} + +// Declaring default props HorizontalBarChart +HorizontalBarChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", + height: "19.125rem", +}; + +export default HorizontalBarChart; diff --git a/src/examples/Charts/BarCharts/ReportsBarChart/configs/index.ts b/src/examples/Charts/BarCharts/ReportsBarChart/configs/index.ts new file mode 100644 index 0000000..651309a --- /dev/null +++ b/src/examples/Charts/BarCharts/ReportsBarChart/configs/index.ts @@ -0,0 +1,97 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +function configs(labels: any, datasets: any) { + return { + data: { + labels, + datasets: [ + { + label: datasets.label, + tension: 0.4, + borderWidth: 0, + borderRadius: 4, + borderSkipped: false, + backgroundColor: "rgba(255, 255, 255, 0.8)", + data: datasets.data, + maxBarThickness: 6, + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + color: "rgba(255, 255, 255, .2)", + }, + ticks: { + suggestedMin: 0, + suggestedMax: 500, + beginAtZero: true, + padding: 10, + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + color: "#fff", + }, + }, + x: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + color: "rgba(255, 255, 255, .2)", + }, + ticks: { + display: true, + color: "#f8f9fa", + padding: 10, + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Charts/BarCharts/ReportsBarChart/index.tsx b/src/examples/Charts/BarCharts/ReportsBarChart/index.tsx new file mode 100644 index 0000000..8b49a1a --- /dev/null +++ b/src/examples/Charts/BarCharts/ReportsBarChart/index.tsx @@ -0,0 +1,100 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo, ReactNode } from "react"; + +// react-chartjs-2 components +import { Bar } from "react-chartjs-2"; + +// @mui material components +import Card from "@mui/material/Card"; +import Divider from "@mui/material/Divider"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// ReportsBarChart configurations +import configs from "examples/Charts/BarCharts/ReportsBarChart/configs"; + +// Declaring props types for ReportsBarChart +interface Props { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; + title: string; + description?: string | ReactNode; + date: string; + chart: { + labels: string[]; + datasets: { + label: string; + data: number[]; + }; + }; + [key: string]: any; +} + +function ReportsBarChart({ color, title, description, date, chart }: Props): JSX.Element { + const { data, options } = configs(chart.labels || [], chart.datasets || {}); + + return ( + + + {useMemo( + () => ( + + + + ), + [chart, color] + )} + + + {title} + + + {description} + + + + + schedule + + + {date} + + + + + + ); +} + +// Setting default values for the props of ReportsBarChart +ReportsBarChart.defaultProps = { + color: "dark", + description: "", +}; + +export default ReportsBarChart; diff --git a/src/examples/Charts/BarCharts/VerticalBarChart/configs/index.ts b/src/examples/Charts/BarCharts/VerticalBarChart/configs/index.ts new file mode 100644 index 0000000..197d0bd --- /dev/null +++ b/src/examples/Charts/BarCharts/VerticalBarChart/configs/index.ts @@ -0,0 +1,78 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme/base/typography"; + +function configs(labels: any, datasets: any) { + return { + data: { + labels, + datasets: [...datasets], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + }, + ticks: { + display: true, + padding: 10, + color: "#9ca2b7", + font: { + size: 11, + family: typography.fontFamily, + style: "normal", + lineHeight: 2, + }, + }, + }, + x: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: true, + drawTicks: true, + }, + ticks: { + display: true, + color: "#9ca2b7", + padding: 10, + font: { + size: 11, + family: typography.fontFamily, + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Charts/BarCharts/VerticalBarChart/index.tsx b/src/examples/Charts/BarCharts/VerticalBarChart/index.tsx new file mode 100644 index 0000000..9fd1165 --- /dev/null +++ b/src/examples/Charts/BarCharts/VerticalBarChart/index.tsx @@ -0,0 +1,126 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo, ReactNode } from "react"; + +// react-chartjs-2 components +import { Bar } from "react-chartjs-2"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// VerticalBarChart configurations +import configs from "examples/Charts/BarCharts/VerticalBarChart/configs"; + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +// Declaring props types for HorizontalBarChart +interface Props { + icon?: { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + component: ReactNode; + }; + title?: string; + description?: string | ReactNode; + height?: string | number; + chart: { + labels: string[]; + datasets: { + label: string; + color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + data: number[]; + }[]; + }; + [key: string]: any; +} + +function VerticalBarChart({ icon, title, description, height, chart }: Props): JSX.Element { + const chartDatasets = chart.datasets + ? chart.datasets.map((dataset) => ({ + ...dataset, + weight: 5, + borderWidth: 0, + borderRadius: 4, + backgroundColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + fill: false, + maxBarThickness: 35, + })) + : []; + + const { data, options } = configs(chart.labels || [], chartDatasets); + + const renderChart = ( + + {title || description ? ( + + {icon.component && ( + + {icon.component} + + )} + + {title && {title}} + + + {description} + + + + + ) : null} + {useMemo( + () => ( + + + + ), + [chart, height] + )} + + ); + + return title || description ? {renderChart} : renderChart; +} + +// Declaring default props for VerticalBarChart +VerticalBarChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", + height: "19.125rem", +}; + +export default VerticalBarChart; diff --git a/src/examples/Charts/BubbleChart/configs/index.ts b/src/examples/Charts/BubbleChart/configs/index.ts new file mode 100644 index 0000000..d28aba7 --- /dev/null +++ b/src/examples/Charts/BubbleChart/configs/index.ts @@ -0,0 +1,78 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme/base/typography"; + +function configs(labels: any, datasets: any) { + return { + data: { + labels, + datasets: [...datasets], + }, + options: { + responsive: true, + plugins: { + legend: { + display: false, + }, + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + }, + ticks: { + display: true, + padding: 10, + color: "#b2b9bf", + font: { + size: 11, + family: typography.fontFamily, + style: "normal", + lineHeight: 2, + }, + }, + }, + x: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + }, + ticks: { + display: true, + color: "#b2b9bf", + padding: 10, + font: { + size: 11, + family: typography.fontFamily, + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Charts/BubbleChart/index.tsx b/src/examples/Charts/BubbleChart/index.tsx new file mode 100644 index 0000000..fc0b914 --- /dev/null +++ b/src/examples/Charts/BubbleChart/index.tsx @@ -0,0 +1,132 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo, ReactNode } from "react"; + +// react-chartjs-2 components +import { Bubble } from "react-chartjs-2"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// BubbleChart configurations +import configs from "examples/Charts/BubbleChart/configs"; + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +// Declaring props types for BubbleChart +interface Props { + icon?: { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + component: ReactNode; + }; + title?: string; + description?: string | ReactNode; + height?: string | number; + chart: { + labels: string[]; + datasets: { + label: string; + color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + data: { + x: number; + y: number; + r: number; + }[]; + }[]; + }; + [key: string]: any; +} + +function BubbleChart({ icon, title, description, height, chart }: Props): JSX.Element { + const chartDatasets = chart.datasets + ? chart.datasets.map((dataset) => ({ + ...dataset, + tension: 0.4, + borderWidth: 3, + pointRadius: 2, + backgroundColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + borderColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + maxBarThickness: 6, + })) + : []; + + const { data, options } = configs(chart.labels || [], chartDatasets); + + const renderChart = ( + + {title || description ? ( + + {icon.component && ( + + {icon.component} + + )} + + {title && {title}} + + + {description} + + + + + ) : null} + {useMemo( + () => ( + + + + ), + [chart, height] + )} + + ); + + return title || description ? {renderChart} : renderChart; +} + +// Declaring default props for BubbleChart +BubbleChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", + height: "100%", +}; + +export default BubbleChart; diff --git a/src/examples/Charts/DoughnutCharts/DefaultDoughnutChart/configs/index.ts b/src/examples/Charts/DoughnutCharts/DefaultDoughnutChart/configs/index.ts new file mode 100644 index 0000000..422ec90 --- /dev/null +++ b/src/examples/Charts/DoughnutCharts/DefaultDoughnutChart/configs/index.ts @@ -0,0 +1,98 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/* eslint-disable no-dupe-keys */ +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +const { gradients, dark } = colors; + +function configs(labels: any, datasets: any, cutout: number = 60) { + const backgroundColors = []; + + if (datasets.backgroundColors) { + datasets.backgroundColors.forEach((color: string) => { + if (gradients[color]) { + if (color === "info") { + backgroundColors.push(gradients.info.main); + } else { + backgroundColors.push(gradients[color].state); + } + } else { + backgroundColors.push(dark.main); + } + }); + } else { + backgroundColors.push(dark.main); + } + + return { + data: { + labels, + datasets: [ + { + label: datasets.label, + weight: 9, + cutout, + tension: 0.9, + pointRadius: 2, + borderWidth: 2, + backgroundColor: backgroundColors, + fill: false, + data: datasets.data, + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: false, + drawTicks: false, + }, + ticks: { + display: false, + }, + }, + x: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: false, + drawTicks: false, + }, + ticks: { + display: false, + }, + }, + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Charts/DoughnutCharts/DefaultDoughnutChart/index.tsx b/src/examples/Charts/DoughnutCharts/DefaultDoughnutChart/index.tsx new file mode 100644 index 0000000..b008de3 --- /dev/null +++ b/src/examples/Charts/DoughnutCharts/DefaultDoughnutChart/index.tsx @@ -0,0 +1,110 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo, ReactNode } from "react"; + +// react-chartjs-2 components +import { Doughnut } from "react-chartjs-2"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// DefaultDoughnutChart configurations +import configs from "examples/Charts/DoughnutCharts/DefaultDoughnutChart/configs"; + +// Declaring props types for DefaultDoughnutChart +interface Props { + icon?: { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + component: ReactNode; + }; + title?: string; + description?: string | ReactNode; + height?: string | number; + chart: { + labels: string[]; + datasets: { + label: string; + backgroundColors: string[]; + data: number[]; + }; + cutout?: number; + }; + [key: string]: any; +} + +function DefaultDoughnutChart({ icon, title, description, height, chart }: Props): JSX.Element { + const { data, options } = configs(chart.labels || [], chart.datasets || {}, chart.cutout); + + const renderChart = ( + + {title || description ? ( + + {icon.component && ( + + {icon.component} + + )} + + {title && {title}} + + + {description} + + + + + ) : null} + {useMemo( + () => ( + + + + ), + [chart, height] + )} + + ); + + return title || description ? {renderChart} : renderChart; +} + +// Declaring default props DefaultDoughnutChart +DefaultDoughnutChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", + height: "19.125rem", +}; + +export default DefaultDoughnutChart; diff --git a/src/examples/Charts/LineCharts/DefaultLineChart/configs/index.ts b/src/examples/Charts/LineCharts/DefaultLineChart/configs/index.ts new file mode 100644 index 0000000..54c5c6e --- /dev/null +++ b/src/examples/Charts/LineCharts/DefaultLineChart/configs/index.ts @@ -0,0 +1,84 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +function configs(labels: any, datasets: any) { + return { + data: { + labels, + datasets: [...datasets], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + color: "#c1c4ce5c", + }, + ticks: { + display: true, + padding: 10, + color: "#9ca2b7", + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + x: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: true, + borderDash: [5, 5], + color: "#c1c4ce5c", + }, + ticks: { + display: true, + color: "#9ca2b7", + padding: 10, + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Charts/LineCharts/DefaultLineChart/index.tsx b/src/examples/Charts/LineCharts/DefaultLineChart/index.tsx new file mode 100644 index 0000000..a8f0690 --- /dev/null +++ b/src/examples/Charts/LineCharts/DefaultLineChart/index.tsx @@ -0,0 +1,130 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo, ReactNode } from "react"; + +// react-chartjs-2 components +import { Line } from "react-chartjs-2"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// DefaultLineChart configurations +import configs from "examples/Charts/LineCharts/DefaultLineChart/configs"; + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +// Declaring props types for DefaultLineChart +interface Props { + icon?: { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + component: ReactNode; + }; + title?: string; + description?: string | ReactNode; + height?: string | number; + chart: { + labels: string[]; + datasets: { + label: string; + color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + data: number[]; + }[]; + }; + [key: string]: any; +} + +function DefaultLineChart({ icon, title, description, height, chart }: Props): JSX.Element { + const chartDatasets = chart.datasets + ? chart.datasets.map((dataset) => ({ + ...dataset, + tension: 0, + pointRadius: 3, + borderWidth: 4, + backgroundColor: "transparent", + fill: true, + pointBackgroundColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + borderColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + maxBarThickness: 6, + })) + : []; + + const { data, options } = configs(chart.labels || [], chartDatasets); + + const renderChart = ( + + {title || description ? ( + + {icon.component && ( + + {icon.component} + + )} + + {title && {title}} + + + {description} + + + + + ) : null} + {useMemo( + () => ( + + + + ), + [chart, height] + )} + + ); + + return title || description ? {renderChart} : renderChart; +} + +// Declaring default props DefaultLineChart +DefaultLineChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", + height: "19.125rem", +}; + +export default DefaultLineChart; diff --git a/src/examples/Charts/LineCharts/GradientLineChart/configs/index.ts b/src/examples/Charts/LineCharts/GradientLineChart/configs/index.ts new file mode 100644 index 0000000..b32f959 --- /dev/null +++ b/src/examples/Charts/LineCharts/GradientLineChart/configs/index.ts @@ -0,0 +1,83 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme/base/typography"; + +function configs(labels: any, datasets: any) { + return { + data: { + labels, + datasets: [...datasets], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + }, + ticks: { + display: true, + padding: 10, + color: "#b2b9bf", + font: { + size: 11, + family: typography.fontFamily, + style: "normal", + lineHeight: 2, + }, + }, + }, + x: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: false, + drawTicks: false, + borderDash: [5, 5], + }, + ticks: { + display: true, + color: "#b2b9bf", + padding: 20, + font: { + size: 11, + family: typography.fontFamily, + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Charts/LineCharts/GradientLineChart/index.tsx b/src/examples/Charts/LineCharts/GradientLineChart/index.tsx new file mode 100644 index 0000000..a62fcec --- /dev/null +++ b/src/examples/Charts/LineCharts/GradientLineChart/index.tsx @@ -0,0 +1,139 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useRef, useEffect, useState, useMemo, ReactNode } from "react"; + +// react-chartjs-2 components +import { Line } from "react-chartjs-2"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Material Dashboard 2 PRO React TS Helper Functions +import gradientChartLine from "assets/theme/functions/gradientChartLine"; + +// GradientLineChart configurations +import configs from "examples/Charts/LineCharts/GradientLineChart/configs"; + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +// Declaring props types for GradientLineChart +interface Props { + icon?: { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + component: ReactNode; + }; + title?: string; + description?: string | ReactNode; + height?: string | number; + chart: { + labels: string[]; + datasets: { + label: string; + color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + data: number[]; + }[]; + }; + [key: string]: any; +} + +function GradientLineChart({ icon, title, description, height, chart }: Props): JSX.Element { + const chartRef = useRef(null); + const [chartData, setChartData] = useState({}); + const { data, options }: any = chartData; + + useEffect(() => { + const chartDatasets = chart.datasets + ? chart.datasets.map((dataset) => ({ + ...dataset, + tension: 0, + pointRadius: 0, + borderWidth: 4, + borderColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + fill: true, + maxBarThickness: 6, + backgroundColor: gradientChartLine( + chartRef.current.children[0], + colors[dataset.color] ? colors[dataset.color || "dark"].main : colors.dark.main + ), + })) + : []; + + setChartData(configs(chart.labels || [], chartDatasets)); + }, [chart]); + + const renderChart = ( + + {title || description ? ( + + {icon.component && ( + + {icon.component} + + )} + + {title && {title}} + + + {description} + + + + + ) : null} + {useMemo( + () => ( + + + + ), + [chartData, height] + )} + + ); + + return title || description ? {renderChart} : renderChart; +} + +// Declaring default props for GradientLineChart +GradientLineChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", + height: "19.125rem", +}; + +export default GradientLineChart; diff --git a/src/examples/Charts/LineCharts/ProgressLineChart/config/index.ts b/src/examples/Charts/LineCharts/ProgressLineChart/config/index.ts new file mode 100644 index 0000000..71e9d82 --- /dev/null +++ b/src/examples/Charts/LineCharts/ProgressLineChart/config/index.ts @@ -0,0 +1,103 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/* eslint-disable no-dupe-keys */ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +const { gradients } = colors; + +function configs(color: string, labels: any, label: any, data: any) { + return { + data: { + labels, + datasets: [ + { + label, + tension: 0, + pointRadius: 3, + pointBackgroundColor: gradients[color] ? gradients[color].main : gradients.info.main, + borderColor: gradients[color] ? gradients[color].main : gradients.info.main, + borderWidth: 4, + backgroundColor: "transparent", + maxBarThickness: 6, + fill: true, + data, + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + }, + ticks: { + display: true, + padding: 10, + color: "#9ca2b7", + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + x: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + color: "#c1c4ce5c", + }, + ticks: { + display: true, + padding: 10, + color: "#9ca2b7", + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Charts/LineCharts/ProgressLineChart/index.tsx b/src/examples/Charts/LineCharts/ProgressLineChart/index.tsx new file mode 100644 index 0000000..227bb23 --- /dev/null +++ b/src/examples/Charts/LineCharts/ProgressLineChart/index.tsx @@ -0,0 +1,119 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo, ReactNode } from "react"; + +// react-chartjs-2 components +import { Line } from "react-chartjs-2"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; +import MDProgress from "components/MDProgress"; + +// ProgressLineChart configurations +import configs from "examples/Charts/LineCharts/ProgressLineChart/config"; + +// Declaring props types for GradientLineChart +interface Props { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; + icon: ReactNode; + title: string; + count?: string | number; + progress: number; + height?: string | number; + chart: { + labels: string[]; + data: number[]; + }; + [key: string]: any; +} + +function ProgressLineChart({ + color, + icon, + title, + count, + progress, + height, + chart, +}: Props): JSX.Element { + const { data, options } = configs(color, chart.labels || [], title, chart.data || []); + + return ( + + + + {icon} + + + + {title} + + {count ? ( + + {count} + + ) : null} + + + + {progress}% + + + + + + + {useMemo( + () => ( + + + + ), + [chart, height, color] + )} + + ); +} + +// Declaring default props for ProgressLineChart +ProgressLineChart.defaultProps = { + color: "info", + count: 0, + height: "6.25rem", +}; + +export default ProgressLineChart; diff --git a/src/examples/Charts/LineCharts/ReportsLineChart/configs/index.ts b/src/examples/Charts/LineCharts/ReportsLineChart/configs/index.ts new file mode 100644 index 0000000..c071da7 --- /dev/null +++ b/src/examples/Charts/LineCharts/ReportsLineChart/configs/index.ts @@ -0,0 +1,97 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +function configs(labels: any, datasets: any) { + return { + data: { + labels, + datasets: [ + { + label: datasets.label, + tension: 0, + pointRadius: 5, + pointBorderColor: "transparent", + pointBackgroundColor: "rgba(255, 255, 255, .8)", + borderColor: "rgba(255, 255, 255, .8)", + borderWidth: 4, + backgroundColor: "transparent", + fill: true, + data: datasets.data, + maxBarThickness: 6, + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + color: "rgba(255, 255, 255, .2)", + }, + ticks: { + display: true, + color: "#f8f9fa", + padding: 10, + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + x: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: false, + drawTicks: false, + borderDash: [5, 5], + }, + ticks: { + display: true, + color: "#f8f9fa", + padding: 10, + font: { + size: 14, + weight: 300, + family: "Roboto", + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Charts/LineCharts/ReportsLineChart/index.tsx b/src/examples/Charts/LineCharts/ReportsLineChart/index.tsx new file mode 100644 index 0000000..1caf3af --- /dev/null +++ b/src/examples/Charts/LineCharts/ReportsLineChart/index.tsx @@ -0,0 +1,100 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo, ReactNode } from "react"; + +// react-chartjs-2 components +import { Line } from "react-chartjs-2"; + +// @mui material components +import Card from "@mui/material/Card"; +import Divider from "@mui/material/Divider"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// ReportsLineChart configurations +import configs from "examples/Charts/LineCharts/ReportsLineChart/configs"; + +// Declaring props types for ReportsLineChart +interface Props { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; + title: string; + description?: string | ReactNode; + date: string; + chart: { + labels: string[]; + datasets: { + label: string; + data: number[]; + }; + }; + [key: string]: any; +} + +function ReportsLineChart({ color, title, description, date, chart }: Props): JSX.Element { + const { data, options } = configs(chart.labels || [], chart.datasets || {}); + + return ( + + + {useMemo( + () => ( + + + + ), + [chart, color] + )} + + + {title} + + + {description} + + + + + schedule + + + {date} + + + + + + ); +} + +// Declaring default props for ReportsLineChart +ReportsLineChart.defaultProps = { + color: "dark", + description: "", +}; + +export default ReportsLineChart; diff --git a/src/examples/Charts/MixedChart/configs/index.ts b/src/examples/Charts/MixedChart/configs/index.ts new file mode 100644 index 0000000..83628c2 --- /dev/null +++ b/src/examples/Charts/MixedChart/configs/index.ts @@ -0,0 +1,83 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme/base/typography"; + +function configs(labels: any, datasets: any) { + return { + data: { + labels, + datasets: [...datasets], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: false, + borderDash: [5, 5], + }, + ticks: { + display: true, + padding: 10, + color: "#b2b9bf", + font: { + size: 11, + family: typography.fontFamily, + style: "normal", + lineHeight: 2, + }, + }, + }, + x: { + grid: { + drawBorder: false, + display: true, + drawOnChartArea: true, + drawTicks: true, + borderDash: [5, 5], + }, + ticks: { + display: true, + color: "#b2b9bf", + padding: 10, + font: { + size: 11, + family: typography.fontFamily, + style: "normal", + lineHeight: 2, + }, + }, + }, + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Charts/MixedChart/index.tsx b/src/examples/Charts/MixedChart/index.tsx new file mode 100644 index 0000000..2c69271 --- /dev/null +++ b/src/examples/Charts/MixedChart/index.tsx @@ -0,0 +1,198 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useRef, useEffect, useState, useMemo, ReactNode } from "react"; + +// react-chartjs-2 components +import { Line } from "react-chartjs-2"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Material Dashboard 2 PRO React TS Helper Functions +import gradientChartLine from "assets/theme/functions/gradientChartLine"; + +// MixedChart configurations +import configs from "examples/Charts/MixedChart/configs"; + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +// Declaring props types for MixedChart +interface Props { + icon?: { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + component: ReactNode; + }; + title?: string; + description?: string | ReactNode; + height?: string | number; + chart: { + labels: string[]; + datasets: { + chartType: string; + label: string; + color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + data: number[]; + }[]; + }; + [key: string]: any; +} + +function MixedChart({ icon, title, description, height, chart }: Props): JSX.Element { + const chartRef = useRef(null); + const [chartData, setChartData] = useState({}); + const { data, options }: any = chartData; + + useEffect(() => { + const chartDatasets = chart.datasets + ? chart.datasets.map((dataset) => { + let finalConfigs; + + const defaultLine = { + ...dataset, + type: "line", + tension: 0, + borderWidth: 4, + pointRadius: 2, + pointBackgroundColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + borderColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + maxBarThickness: 6, + }; + + const gradientLine = { + ...dataset, + type: "line", + tension: 0, + pointRadius: 0, + borderWidth: 4, + borderColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + fill: true, + maxBarThickness: 6, + backgroundColor: gradientChartLine( + chartRef.current.children[0], + colors[dataset.color] ? colors[dataset.color || "dark"].main : colors.dark.main + ), + }; + + const bar = { + ...dataset, + type: "bar", + weight: 5, + borderWidth: 0, + borderRadius: 4, + backgroundColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + fill: false, + maxBarThickness: 35, + }; + + const thinBar = { + ...dataset, + type: "bar", + weight: 5, + borderWidth: 0, + borderRadius: 4, + backgroundColor: colors[dataset.color] + ? colors[dataset.color || "dark"].main + : colors.dark.main, + fill: false, + maxBarThickness: 10, + }; + + if (dataset.chartType === "default-line") { + finalConfigs = defaultLine; + } else if (dataset.chartType === "gradient-line") { + finalConfigs = gradientLine; + } else if (dataset.chartType === "thin-bar") { + finalConfigs = thinBar; + } else { + finalConfigs = bar; + } + + return { ...finalConfigs }; + }) + : []; + + setChartData(configs(chart.labels || [], chartDatasets)); + }, [chart]); + + const renderChart = ( + + {title || description ? ( + + {icon.component && ( + + {icon.component} + + )} + + {title && {title}} + + + {description} + + + + + ) : null} + {useMemo( + () => ( + + + + ), + [chartData, height] + )} + + ); + + return title || description ? {renderChart} : renderChart; +} + +// Declaring default props for MixedChart +MixedChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", + height: "19.125rem", +}; + +export default MixedChart; diff --git a/src/examples/Charts/PieChart/configs/index.ts b/src/examples/Charts/PieChart/configs/index.ts new file mode 100644 index 0000000..d1fb916 --- /dev/null +++ b/src/examples/Charts/PieChart/configs/index.ts @@ -0,0 +1,92 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/* eslint-disable no-dupe-keys */ +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +const { gradients, dark } = colors; + +function configs(labels: any, datasets: any) { + const backgroundColors = []; + + if (datasets.backgroundColors) { + datasets.backgroundColors.forEach((color: string) => + gradients[color] + ? backgroundColors.push(gradients[color].state) + : backgroundColors.push(dark.main) + ); + } else { + backgroundColors.push(dark.main); + } + + return { + data: { + labels, + datasets: [ + { + label: datasets.label, + weight: 9, + cutout: 0, + tension: 0.9, + pointRadius: 2, + borderWidth: 2, + backgroundColor: backgroundColors, + fill: false, + data: datasets.data, + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: false, + drawTicks: false, + }, + ticks: { + display: false, + }, + }, + x: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: false, + drawTicks: false, + }, + ticks: { + display: false, + }, + }, + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Charts/PieChart/index.tsx b/src/examples/Charts/PieChart/index.tsx new file mode 100644 index 0000000..9646849 --- /dev/null +++ b/src/examples/Charts/PieChart/index.tsx @@ -0,0 +1,109 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo, ReactNode } from "react"; + +// react-chartjs-2 components +import { Pie } from "react-chartjs-2"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// PieChart configurations +import configs from "examples/Charts/PieChart/configs"; + +// Declaring props types for PieChart +interface Props { + icon?: { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + component: ReactNode; + }; + title?: string; + description?: string | ReactNode; + height?: string | number; + chart: { + labels: string[]; + datasets: { + label: string; + backgroundColors: string[]; + data: number[]; + }; + }; + [key: string]: any; +} + +function PieChart({ icon, title, description, height, chart }: Props): JSX.Element { + const { data, options } = configs(chart.labels || [], chart.datasets || {}); + + const renderChart = ( + + {title || description ? ( + + {icon.component && ( + + {icon.component} + + )} + + {title && {title}} + + + {description} + + + + + ) : null} + {useMemo( + () => ( + + + + ), + [chart, height] + )} + + ); + + return title || description ? {renderChart} : renderChart; +} + +// Declaring default props for PieChart +PieChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", + height: "19.125rem", +}; + +export default PieChart; diff --git a/src/examples/Charts/PolarChart/configs/index.ts b/src/examples/Charts/PolarChart/configs/index.ts new file mode 100644 index 0000000..4da07f6 --- /dev/null +++ b/src/examples/Charts/PolarChart/configs/index.ts @@ -0,0 +1,56 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/* eslint-disable no-dupe-keys */ +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +const { gradients, dark } = colors; + +function configs(labels: any, datasets: any) { + const backgroundColors = []; + + if (datasets.backgroundColors) { + datasets.backgroundColors.forEach((color: string) => + gradients[color] + ? backgroundColors.push(gradients[color].state) + : backgroundColors.push(dark.main) + ); + } else { + backgroundColors.push(dark.main); + } + + return { + data: { + labels, + datasets: [ + { + label: datasets.label, + backgroundColor: backgroundColors, + data: datasets.data, + }, + ], + }, + options: { + plugins: { + legend: { + display: false, + }, + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Charts/PolarChart/index.tsx b/src/examples/Charts/PolarChart/index.tsx new file mode 100644 index 0000000..bde005b --- /dev/null +++ b/src/examples/Charts/PolarChart/index.tsx @@ -0,0 +1,107 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo, ReactNode } from "react"; + +// react-chartjs-2 components +import { PolarArea } from "react-chartjs-2"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// PolarChart configurations +import configs from "examples/Charts/PolarChart/configs"; + +// Declaring props types for PolarChart +interface Props { + icon?: { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + component: ReactNode; + }; + title?: string; + description?: string | ReactNode; + chart: { + labels: string[]; + datasets: { + label: string; + backgroundColors: string[]; + data: number[]; + }; + }; + [key: string]: any; +} + +function PolarChart({ icon, title, description, chart }: Props): JSX.Element { + const { data, options } = configs(chart.labels || [], chart.datasets || {}); + + const renderChart = ( + + {title || description ? ( + + {icon.component && ( + + {icon.component} + + )} + + {title && {title}} + + + {description} + + + + + ) : null} + {useMemo( + () => ( + + + + ), + [chart] + )} + + ); + + return title || description ? {renderChart} : renderChart; +} + +// Declaring default props for PolarChart +PolarChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", +}; + +export default PolarChart; diff --git a/src/examples/Charts/RadarChart/configs/index.ts b/src/examples/Charts/RadarChart/configs/index.ts new file mode 100644 index 0000000..ae6d0ae --- /dev/null +++ b/src/examples/Charts/RadarChart/configs/index.ts @@ -0,0 +1,32 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +function configs(labels: any, datasets: any) { + return { + data: { + labels, + datasets: [...datasets], + }, + options: { + plugins: { + legend: { + display: false, + }, + }, + }, + }; +} + +export default configs; diff --git a/src/examples/Charts/RadarChart/index.tsx b/src/examples/Charts/RadarChart/index.tsx new file mode 100644 index 0000000..a94b87c --- /dev/null +++ b/src/examples/Charts/RadarChart/index.tsx @@ -0,0 +1,123 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo, ReactNode } from "react"; + +// react-chartjs-2 components +import { Radar } from "react-chartjs-2"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// RadarChart configurations +import configs from "examples/Charts/RadarChart/configs"; + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +// Material Dashboard 2 PRO React TS Helper Functions +import rgba from "assets/theme/functions/rgba"; + +// Declaring props types for RadarChart +interface Props { + icon?: { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + component: ReactNode; + }; + title?: string; + description?: string | ReactNode; + chart: { + labels: string[]; + datasets: { + label: string; + color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + data: number[]; + borderDash?: number[]; + }[]; + }; + [key: string]: any; +} + +function RadarChart({ icon, title, description, chart }: Props): JSX.Element { + const chartDatasets = chart.datasets + ? chart.datasets.map((dataset) => ({ + ...dataset, + backgroundColor: colors[dataset.color] + ? rgba(colors[dataset.color || "dark"].main, 0.2) + : rgba(colors.dark.main, 0.2), + })) + : []; + + const { data, options } = configs(chart.labels || [], chartDatasets); + + const renderChart = ( + + {title || description ? ( + + {icon.component && ( + + {icon.component} + + )} + + {title && {title}} + + + {description} + + + + + ) : null} + {useMemo( + () => ( + + + + ), + [chart] + )} + + ); + + return title || description ? {renderChart} : renderChart; +} + +// Declaring default props for RadarChart +RadarChart.defaultProps = { + icon: { color: "info", component: "" }, + title: "", + description: "", +}; + +export default RadarChart; diff --git a/src/examples/Configurator/ConfiguratorRoot.tsx b/src/examples/Configurator/ConfiguratorRoot.tsx new file mode 100644 index 0000000..336c835 --- /dev/null +++ b/src/examples/Configurator/ConfiguratorRoot.tsx @@ -0,0 +1,60 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Drawer from "@mui/material/Drawer"; +import { styled, Theme } from "@mui/material/styles"; + +export default styled(Drawer)(({ theme, ownerState }: { theme?: Theme; ownerState: any }) => { + const { boxShadows, functions, transitions } = theme; + const { openConfigurator } = ownerState; + + const configuratorWidth = 360; + const { lg } = boxShadows; + const { pxToRem } = functions; + + // drawer styles when openConfigurator={true} + const drawerOpenStyles = () => ({ + width: configuratorWidth, + left: "initial", + right: 0, + transition: transitions.create("right", { + easing: transitions.easing.sharp, + duration: transitions.duration.short, + }), + }); + + // drawer styles when openConfigurator={false} + const drawerCloseStyles = () => ({ + left: "initial", + right: pxToRem(-350), + transition: transitions.create("all", { + easing: transitions.easing.sharp, + duration: transitions.duration.short, + }), + }); + + return { + "& .MuiDrawer-paper": { + height: "100vh", + margin: 0, + padding: `0 ${pxToRem(10)}`, + borderRadius: 0, + boxShadow: lg, + overflowY: "auto", + ...(openConfigurator ? drawerOpenStyles() : drawerCloseStyles()), + }, + }; +}); diff --git a/src/examples/Configurator/index.tsx b/src/examples/Configurator/index.tsx new file mode 100644 index 0000000..d6a2701 --- /dev/null +++ b/src/examples/Configurator/index.tsx @@ -0,0 +1,392 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useState, useEffect } from "react"; + +// react-github-btn +import GitHubButton from "react-github-btn"; + +// @mui material components +import Divider from "@mui/material/Divider"; +import Switch from "@mui/material/Switch"; +import IconButton from "@mui/material/IconButton"; +import Link from "@mui/material/Link"; +import Icon from "@mui/material/Icon"; +import { Theme } from "@mui/material/styles"; + +// @mui icons +import TwitterIcon from "@mui/icons-material/Twitter"; +import FacebookIcon from "@mui/icons-material/Facebook"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; +import MDButton from "components/MDButton"; + +// Custom styles for the Configurator +import ConfiguratorRoot from "examples/Configurator/ConfiguratorRoot"; + +// Material Dashboard 2 PRO React context +import { + useMaterialUIController, + setOpenConfigurator, + setTransparentSidenav, + setWhiteSidenav, + setMiniSidenav, + setFixedNavbar, + setSidenavColor, + setDarkMode, +} from "context"; + +function Configurator(): JSX.Element { + const [controller, dispatch] = useMaterialUIController(); + const { + openConfigurator, + miniSidenav, + fixedNavbar, + sidenavColor, + transparentSidenav, + whiteSidenav, + darkMode, + } = controller; + const [disabled, setDisabled] = useState(false); + const sidenavColors: ( + | "primary" + | "secondary" + | "info" + | "success" + | "warning" + | "error" + | "light" + | "dark" + )[] = ["primary", "dark", "info", "success", "warning", "error"]; + + // Use the useEffect hook to change the button state for the sidenav type based on window size. + useEffect(() => { + // A function that sets the disabled state of the buttons for the sidenav type. + function handleDisabled() { + return window.innerWidth > 1200 ? setDisabled(false) : setDisabled(true); + } + + // The event listener that's calling the handleDisabled function when resizing the window. + window.addEventListener("resize", handleDisabled); + + // Call the handleDisabled function to set the state with the initial value. + handleDisabled(); + + // Remove event listener on cleanup + return () => window.removeEventListener("resize", handleDisabled); + }, []); + + const handleCloseConfigurator = () => setOpenConfigurator(dispatch, false); + const handleTransparentSidenav = () => { + setTransparentSidenav(dispatch, true); + setWhiteSidenav(dispatch, false); + }; + const handleWhiteSidenav = () => { + setWhiteSidenav(dispatch, true); + setTransparentSidenav(dispatch, false); + }; + const handleDarkSidenav = () => { + setWhiteSidenav(dispatch, false); + setTransparentSidenav(dispatch, false); + }; + const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav); + const handleFixedNavbar = () => setFixedNavbar(dispatch, !fixedNavbar); + const handleDarkMode = () => setDarkMode(dispatch, !darkMode); + + // sidenav type buttons styles + const sidenavTypeButtonsStyles = ({ + functions: { pxToRem }, + palette: { white, dark, background }, + borders: { borderWidth }, + }: Theme | any) => ({ + height: pxToRem(39), + background: darkMode ? background.sidenav : white.main, + color: darkMode ? white.main : dark.main, + border: `${borderWidth[1]} solid ${darkMode ? white.main : dark.main}`, + + "&:hover, &:focus, &:focus:not(:hover)": { + background: darkMode ? background.sidenav : white.main, + color: darkMode ? white.main : dark.main, + border: `${borderWidth[1]} solid ${darkMode ? white.main : dark.main}`, + }, + }); + + // sidenav type active button styles + const sidenavTypeActiveButtonStyles = ({ + functions: { pxToRem, linearGradient }, + palette: { white, gradients, background }, + }: Theme | any) => ({ + height: pxToRem(39), + background: darkMode ? white.main : linearGradient(gradients.dark.main, gradients.dark.state), + color: darkMode ? background.sidenav : white.main, + + "&:hover, &:focus, &:focus:not(:hover)": { + background: darkMode ? white.main : linearGradient(gradients.dark.main, gradients.dark.state), + color: darkMode ? background.sidenav : white.main, + }, + }); + + return ( + + + + Material UI Configurator + + See our dashboard options. + + + + ({ + fontSize: `${size.lg} !important`, + color: darkMode ? white.main : dark.main, + stroke: "currentColor", + strokeWidth: "2px", + cursor: "pointer", + transform: "translateY(5px)", + })} + onClick={handleCloseConfigurator} + > + close + + + + + + + + Sidenav Colors + + + {sidenavColors.map((color) => ( + ({ + width: "24px", + height: "24px", + padding: 0, + border: `${borderWidth[1]} solid ${darkMode ? background.sidenav : white.main}`, + borderColor: () => { + let borderColorValue = sidenavColor === color && dark.main; + + if (darkMode && sidenavColor === color) { + borderColorValue = white.main; + } + + return borderColorValue; + }, + transition: transitions.create("border-color", { + easing: transitions.easing.sharp, + duration: transitions.duration.shorter, + }), + backgroundImage: ({ functions: { linearGradient }, palette: { gradients } }) => + linearGradient(gradients[color].main, gradients[color].state), + + "&:not(:last-child)": { + mr: 1, + }, + + "&:hover, &:focus, &:active": { + borderColor: darkMode ? white.main : dark.main, + }, + })} + onClick={() => setSidenavColor(dispatch, color)} + /> + ))} + + + + + Sidenav Type + + Choose between different sidenav types. + + + + + Dark + + + + Transparent + + + + White + + + + + Navbar Fixed + + + + + + Sidenav Mini + + + + + + Light / Dark + + + + + + + + buy now + + + + + buy javascript version + + + + view documentation + + + + + Star + + + + + Thank you for sharing! + + + + + + +   Tweet + + + + +   Share + + + + + + ); +} + +export default Configurator; diff --git a/src/examples/Footer/index.tsx b/src/examples/Footer/index.tsx new file mode 100644 index 0000000..67a3e79 --- /dev/null +++ b/src/examples/Footer/index.tsx @@ -0,0 +1,121 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Link from "@mui/material/Link"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme/base/typography"; + +// Declaring props types for Footer +interface Props { + company?: { + href: string; + name: string; + }; + links?: { + href: string; + name: string; + }[]; + [key: string]: any; +} + +function Footer({ company, links }: Props): JSX.Element { + const { href, name } = company; + const { size } = typography; + + const renderLinks = () => + links.map((link) => ( + + + + {link.name} + + + + )); + + return ( + + + © {new Date().getFullYear()}, made with + + + favorite + + + by + + +  {name}  + + + for a better web. + + ({ + display: "flex", + flexWrap: "wrap", + alignItems: "center", + justifyContent: "center", + listStyle: "none", + mt: 3, + mb: 0, + p: 0, + + [breakpoints.up("lg")]: { + mt: 0, + }, + })} + > + {renderLinks()} + + + ); +} + +// Declaring default props for Footer +Footer.defaultProps = { + company: { href: "https://www.creative-tim.com/", name: "Creative Tim" }, + links: [ + { href: "https://www.creative-tim.com/", name: "Creative Tim" }, + { href: "https://www.creative-tim.com/presentation", name: "About Us" }, + { href: "https://www.creative-tim.com/blog", name: "Blog" }, + { href: "https://www.creative-tim.com/license", name: "License" }, + ], +}; + +export default Footer; diff --git a/src/examples/Items/DefaultItem/index.tsx b/src/examples/Items/DefaultItem/index.tsx new file mode 100644 index 0000000..bc47915 --- /dev/null +++ b/src/examples/Items/DefaultItem/index.tsx @@ -0,0 +1,58 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { forwardRef, FC, ReactNode } from "react"; + +// @mui material components +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// custom styles for the DefaultItem +import defaultItemIconBox from "examples/Items/DefaultItem/styles"; + +// Declaring props types for DefaultItem +interface Props { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; + icon: ReactNode; + title: string; + description: string; + [key: string]: any; +} + +const DefaultItem: FC = forwardRef(({ color, icon, title, description, ...rest }, ref) => ( + + defaultItemIconBox(theme, { color })}> + {icon} + + + + {title} + + + {description} + + + +)); + +// Declaring default props for DefaultItem +DefaultItem.defaultProps = { + color: "info", +}; + +export default DefaultItem; diff --git a/src/examples/Items/DefaultItem/styles.ts b/src/examples/Items/DefaultItem/styles.ts new file mode 100644 index 0000000..2330476 --- /dev/null +++ b/src/examples/Items/DefaultItem/styles.ts @@ -0,0 +1,25 @@ +// @mui material components +import { Theme } from "@mui/material/styles"; + +function defaultItemIconBox(theme: Theme, ownerState: any) { + const { functions, palette, borders } = theme; + const { color } = ownerState; + + const { pxToRem, linearGradient } = functions; + const { gradients, dark, white } = palette; + const { borderRadius } = borders; + + return { + display: "grid", + placeItems: "center", + width: pxToRem(48), + height: pxToRem(48), + borderRadius: borderRadius.md, + color: color === "light" ? dark.mian : white.main, + background: gradients[color] + ? linearGradient(gradients[color].main, gradients[color].state) + : linearGradient(gradients.info.main, gradients.info.state), + }; +} + +export default defaultItemIconBox; diff --git a/src/examples/Items/NotificationItem/index.tsx b/src/examples/Items/NotificationItem/index.tsx new file mode 100644 index 0000000..c55f0b4 --- /dev/null +++ b/src/examples/Items/NotificationItem/index.tsx @@ -0,0 +1,50 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { forwardRef, FC, ReactNode } from "react"; + +// @mui material components +import MenuItem from "@mui/material/MenuItem"; +import Link from "@mui/material/Link"; +import { MenuItemProps } from "@mui/material"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// custom styles for the NotificationItem +import menuItem from "examples/Items/NotificationItem/styles"; + +// Declaring props types for NotificationItem +interface Props extends MenuItemProps { + icon: ReactNode; + title: string; + [key: string]: any; +} + +const NotificationItem: FC = forwardRef(({ icon, title, ...rest }, ref) => ( + menuItem(theme)}> + + + {icon} + + + {title} + + + +)); + +export default NotificationItem; diff --git a/src/examples/Items/NotificationItem/styles.ts b/src/examples/Items/NotificationItem/styles.ts new file mode 100644 index 0000000..7a23443 --- /dev/null +++ b/src/examples/Items/NotificationItem/styles.ts @@ -0,0 +1,39 @@ +// @mui material components +import { Theme } from "@mui/material/styles"; + +function menuItem(theme: Theme) { + const { palette, borders, transitions } = theme; + + const { secondary, light, dark } = palette; + const { borderRadius } = borders; + + return { + display: "flex", + alignItems: "center", + width: "100%", + color: secondary.main, + borderRadius: borderRadius.md, + transition: transitions.create("background-color", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + + "& *": { + transition: "color 100ms linear", + }, + + "&:not(:last-child)": { + mb: 1, + }, + + "&:hover": { + backgroundColor: light.main, + + "& *": { + color: dark.main, + }, + }, + }; +} + +export default menuItem; diff --git a/src/examples/LayoutContainers/DashboardLayout/index.tsx b/src/examples/LayoutContainers/DashboardLayout/index.tsx new file mode 100644 index 0000000..3f92daf --- /dev/null +++ b/src/examples/LayoutContainers/DashboardLayout/index.tsx @@ -0,0 +1,56 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useEffect, ReactNode } from "react"; + +// react-router-dom components +import { useLocation } from "react-router-dom"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; + +// Material Dashboard 2 PRO React context +import { useMaterialUIController, setLayout } from "context"; + +function DashboardLayout({ children }: { children: ReactNode }): JSX.Element { + const [controller, dispatch] = useMaterialUIController(); + const { miniSidenav } = controller; + const { pathname } = useLocation(); + + useEffect(() => { + setLayout(dispatch, "dashboard"); + }, [pathname]); + + return ( + ({ + p: 3, + position: "relative", + + [breakpoints.up("xl")]: { + marginLeft: miniSidenav ? pxToRem(120) : pxToRem(274), + transition: transitions.create(["margin-left", "margin-right"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + }, + })} + > + {children} + + ); +} + +export default DashboardLayout; diff --git a/src/examples/LayoutContainers/PageLayout/index.tsx b/src/examples/LayoutContainers/PageLayout/index.tsx new file mode 100644 index 0000000..fe8104c --- /dev/null +++ b/src/examples/LayoutContainers/PageLayout/index.tsx @@ -0,0 +1,59 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useEffect, ReactNode } from "react"; + +// react-router-dom components +import { useLocation } from "react-router-dom"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; + +// Material Dashboard 2 PRO React context +import { useMaterialUIController, setLayout } from "context"; + +// Declaring props types for PageLayout +interface Props { + background?: "white" | "light" | "default"; + children: ReactNode; +} + +function PageLayout({ background, children }: Props): JSX.Element { + const [, dispatch] = useMaterialUIController(); + const { pathname } = useLocation(); + + useEffect(() => { + setLayout(dispatch, "page"); + }, [pathname]); + + return ( + + {children} + + ); +} + +// Declaring default props for PageLayout +PageLayout.defaultProps = { + background: "default", +}; + +export default PageLayout; diff --git a/src/examples/Lists/CategoriesList/index.tsx b/src/examples/Lists/CategoriesList/index.tsx new file mode 100644 index 0000000..0a7a264 --- /dev/null +++ b/src/examples/Lists/CategoriesList/index.tsx @@ -0,0 +1,126 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { ReactNode } from "react"; + +// react-router-dom components +import { Link } from "react-router-dom"; + +// @mui material components +import Card from "@mui/material/Card"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Declaring props types for CategoriesList +interface Props { + title: string; + categories: { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + icon: ReactNode | string; + name: string; + description: ReactNode; + route: string; + }[]; + [key: string]: any; +} + +function CategoriesList({ title, categories }: Props): JSX.Element { + const renderItems = categories.map(({ color, icon, name, description, route }, key) => ( + + + + + {icon} + + + + + {name} + + + {description} + + + + + + chevron_right + + + + )); + + return ( + + + + {title} + + + + + {renderItems} + + + + ); +} + +export default CategoriesList; diff --git a/src/examples/Lists/ProfilesList/index.tsx b/src/examples/Lists/ProfilesList/index.tsx new file mode 100644 index 0000000..0a6514e --- /dev/null +++ b/src/examples/Lists/ProfilesList/index.tsx @@ -0,0 +1,102 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// react-routers components +import { Link } from "react-router-dom"; + +// @mui material components +import Card from "@mui/material/Card"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; +import MDAvatar from "components/MDAvatar"; +import MDButton from "components/MDButton"; + +// Declaring props types for ProfilesList +interface Props { + title: string; + profiles: { + image: string; + name: string; + description: string; + action: { + type: "external" | "internal"; + route: string; + color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; + label: string; + }; + }[]; + shadow?: boolean; + [key: string]: any; +} + +function ProfilesList({ title, profiles, shadow }: Props): JSX.Element { + const renderProfiles = profiles.map(({ image, name, description, action }) => ( + + + + + + + {name} + + + {description} + + + + {action.type === "internal" ? ( + + {action.label} + + ) : ( + + {action.label} + + )} + + + )); + + return ( + + + + {title} + + + + + {renderProfiles} + + + + ); +} + +// Declaring defualt props for ProfilesList +ProfilesList.defaultProps = { + shadow: true, +}; + +export default ProfilesList; diff --git a/src/examples/Navbars/DashboardNavbar/index.tsx b/src/examples/Navbars/DashboardNavbar/index.tsx new file mode 100644 index 0000000..dc838d1 --- /dev/null +++ b/src/examples/Navbars/DashboardNavbar/index.tsx @@ -0,0 +1,212 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useState, useEffect } from "react"; + +// react-router components +import { useLocation, Link } from "react-router-dom"; + +// @material-ui core components +import AppBar from "@mui/material/AppBar"; +import Toolbar from "@mui/material/Toolbar"; +import IconButton from "@mui/material/IconButton"; +import Menu from "@mui/material/Menu"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDInput from "components/MDInput"; +import MDBadge from "components/MDBadge"; + +// Material Dashboard 2 PRO React TS examples components +import Breadcrumbs from "examples/Breadcrumbs"; +import NotificationItem from "examples/Items/NotificationItem"; + +// Custom styles for DashboardNavbar +import { + navbar, + navbarContainer, + navbarRow, + navbarIconButton, + navbarDesktopMenu, + navbarMobileMenu, +} from "examples/Navbars/DashboardNavbar/styles"; + +// Material Dashboard 2 PRO React context +import { + useMaterialUIController, + setTransparentNavbar, + setMiniSidenav, + setOpenConfigurator, +} from "context"; + +// Declaring prop types for DashboardNavbar +interface Props { + absolute?: boolean; + light?: boolean; + isMini?: boolean; +} + +function DashboardNavbar({ absolute, light, isMini }: Props): JSX.Element { + const [navbarType, setNavbarType] = useState< + "fixed" | "absolute" | "relative" | "static" | "sticky" + >(); + const [controller, dispatch] = useMaterialUIController(); + const { miniSidenav, transparentNavbar, fixedNavbar, openConfigurator, darkMode } = controller; + const [openMenu, setOpenMenu] = useState(false); + const route = useLocation().pathname.split("/").slice(1); + + useEffect(() => { + // Setting the navbar type + if (fixedNavbar) { + setNavbarType("sticky"); + } else { + setNavbarType("static"); + } + + // A function that sets the transparent state of the navbar. + function handleTransparentNavbar() { + setTransparentNavbar(dispatch, (fixedNavbar && window.scrollY === 0) || !fixedNavbar); + } + + /** + The event listener that's calling the handleTransparentNavbar function when + scrolling the window. + */ + window.addEventListener("scroll", handleTransparentNavbar); + + // Call the handleTransparentNavbar function to set the state with the initial value. + handleTransparentNavbar(); + + // Remove event listener on cleanup + return () => window.removeEventListener("scroll", handleTransparentNavbar); + }, [dispatch, fixedNavbar]); + + const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav); + const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator); + const handleOpenMenu = (event: any) => setOpenMenu(event.currentTarget); + const handleCloseMenu = () => setOpenMenu(false); + + // Render the notifications menu + const renderMenu = () => ( + + email} title="Check new messages" /> + podcasts} title="Manage Podcast sessions" /> + shopping_cart} title="Payment successfully completed" /> + + ); + + // Styles for the navbar icons + const iconsStyle = ({ + palette: { dark, white, text }, + functions: { rgba }, + }: { + palette: any; + functions: any; + }) => ({ + color: () => { + let colorValue = light || darkMode ? white.main : dark.main; + + if (transparentNavbar && !light) { + colorValue = darkMode ? rgba(text.main, 0.6) : text.main; + } + + return colorValue; + }, + }); + + return ( + navbar(theme, { transparentNavbar, absolute, light, darkMode })} + > + + navbarRow(theme, { isMini })}> + + + + {miniSidenav ? "menu_open" : "menu"} + + + + {isMini ? null : ( + navbarRow(theme, { isMini })}> + + + + + + + account_circle + + + + + {miniSidenav ? "menu_open" : "menu"} + + + + settings + + + + notifications + + + {renderMenu()} + + + )} + + + ); +} + +// Declaring default props for DashboardNavbar +DashboardNavbar.defaultProps = { + absolute: false, + light: false, + isMini: false, +}; + +export default DashboardNavbar; diff --git a/src/examples/Navbars/DashboardNavbar/styles.ts b/src/examples/Navbars/DashboardNavbar/styles.ts new file mode 100644 index 0000000..250ca79 --- /dev/null +++ b/src/examples/Navbars/DashboardNavbar/styles.ts @@ -0,0 +1,154 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import { Theme } from "@mui/material/styles"; + +function navbar(theme: Theme | any, ownerState: any) { + const { palette, boxShadows, functions, transitions, breakpoints, borders } = theme; + const { transparentNavbar, absolute, light, darkMode } = ownerState; + + const { dark, white, text, transparent, background } = palette; + const { navbarBoxShadow } = boxShadows; + const { rgba, pxToRem } = functions; + const { borderRadius } = borders; + + return { + boxShadow: transparentNavbar || absolute ? "none" : navbarBoxShadow, + backdropFilter: transparentNavbar || absolute ? "none" : `saturate(200%) blur(${pxToRem(30)})`, + backgroundColor: + transparentNavbar || absolute + ? `${transparent.main} !important` + : rgba(darkMode ? background.default : white.main, 0.8), + + color: () => { + let color; + + if (light) { + color = white.main; + } else if (transparentNavbar) { + color = text.main; + } else { + color = dark.main; + } + + return color; + }, + top: absolute ? 0 : pxToRem(12), + minHeight: pxToRem(75), + display: "grid", + alignItems: "center", + borderRadius: borderRadius.xl, + paddingTop: pxToRem(8), + paddingBottom: pxToRem(8), + paddingRight: absolute ? pxToRem(8) : 0, + paddingLeft: absolute ? pxToRem(16) : 0, + + "& > *": { + transition: transitions.create("all", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + }, + + "& .MuiToolbar-root": { + display: "flex", + justifyContent: "space-between", + alignItems: "center", + + [breakpoints.up("sm")]: { + minHeight: "auto", + padding: `${pxToRem(4)} ${pxToRem(16)}`, + }, + }, + }; +} + +const navbarContainer = ({ breakpoints }: Theme): any => ({ + flexDirection: "column", + alignItems: "flex-start", + justifyContent: "space-between", + pt: 0.5, + pb: 0.5, + + [breakpoints.up("md")]: { + flexDirection: "row", + alignItems: "center", + paddingTop: "0", + paddingBottom: "0", + }, +}); + +const navbarRow = ({ breakpoints }: Theme, { isMini }: any) => ({ + display: "flex", + alignItems: "center", + justifyContent: "space-between", + width: "100%", + + [breakpoints.up("md")]: { + justifyContent: isMini ? "space-between" : "stretch", + width: isMini ? "100%" : "max-content", + }, + + [breakpoints.up("xl")]: { + justifyContent: "stretch !important", + width: "max-content !important", + }, +}); + +const navbarIconButton = ({ typography: { size }, breakpoints }: Theme) => ({ + px: 1, + + "& .material-icons, .material-icons-round": { + fontSize: `${size.xl} !important`, + }, + + "& .MuiTypography-root": { + display: "none", + + [breakpoints.up("sm")]: { + display: "inline-block", + lineHeight: 1.2, + ml: 0.5, + }, + }, +}); + +const navbarDesktopMenu = ({ breakpoints }: Theme) => ({ + display: "none !important", + cursor: "pointer", + + [breakpoints.up("xl")]: { + display: "inline-block !important", + }, +}); + +const navbarMobileMenu = ({ breakpoints }: Theme) => ({ + display: "inline-block", + lineHeight: 0, + + [breakpoints.up("xl")]: { + display: "none", + }, +}); + +export { + navbar, + navbarContainer, + navbarRow, + navbarIconButton, + navbarDesktopMenu, + navbarMobileMenu, +}; diff --git a/src/examples/Navbars/DefaultNavbar/DefaultNavbarDropdown.tsx b/src/examples/Navbars/DefaultNavbar/DefaultNavbarDropdown.tsx new file mode 100644 index 0000000..5b5c11f --- /dev/null +++ b/src/examples/Navbars/DefaultNavbar/DefaultNavbarDropdown.tsx @@ -0,0 +1,121 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { ReactNode } from "react"; + +// react-router-dom components +import { Link } from "react-router-dom"; + +// @mui material components +import Collapse from "@mui/material/Collapse"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Declaring props types for DefaultNavbarDropdown +interface Props { + name: string; + icon?: ReactNode; + children?: ReactNode; + collapseStatus?: boolean; + light?: boolean; + href?: string; + route?: string; + collapse: boolean; + [key: string]: any; +} + +function DefaultNavbarDropdown({ + name, + icon, + children, + collapseStatus, + light, + href, + route, + collapse, + ...rest +}: Props): JSX.Element { + const linkComponent = { + component: "a", + href, + target: "_blank", + rel: "noreferrer", + }; + + const routeComponent: any = { + component: Link, + to: route, + }; + + return ( + <> + + + {icon} + + + {name} + + + + {collapse && "keyboard_arrow_down"} + + + + {children && ( + + {children} + + )} + + ); +} + +// Declaring default props for DefaultNavbarDropdown +DefaultNavbarDropdown.defaultProps = { + icon: false, + children: false, + collapseStatus: false, + light: false, + href: "", + route: "", +}; + +export default DefaultNavbarDropdown; diff --git a/src/examples/Navbars/DefaultNavbar/DefaultNavbarMobile.tsx b/src/examples/Navbars/DefaultNavbar/DefaultNavbarMobile.tsx new file mode 100644 index 0000000..966d5b8 --- /dev/null +++ b/src/examples/Navbars/DefaultNavbar/DefaultNavbarMobile.tsx @@ -0,0 +1,165 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useState } from "react"; + +// react-router components +import { Link } from "react-router-dom"; + +// @mui material components +import Collapse from "@mui/material/Collapse"; +import MuiLink from "@mui/material/Link"; +import { Theme } from "@mui/material/styles"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Material Dashboard 2 PRO React TS exampless +import DefaultNavbarDropdown from "examples/Navbars/DefaultNavbar/DefaultNavbarDropdown"; + +// Declaring props types for DefaultNavbarMobile +interface Props { + routes: any; + open: any; +} + +function DefaultNavbarMobile({ routes, open }: Props): JSX.Element { + const [collapse, setCollapse] = useState(""); + + const handleSetCollapse = (name: string) => + collapse === name ? setCollapse(false) : setCollapse(name); + + const renderNavbarItems = routes.map( + ({ name, icon, collapse: routeCollapses, href, route, collapse: navCollapse }: any) => ( + handleSetCollapse(name)} + href={href} + route={route} + collapse={Boolean(navCollapse)} + > + + {routeCollapses && + routeCollapses.map((item: any) => ( + + {item.collapse ? ( + <> + + {item.name} + + {item.collapse.map((el: any) => ( + ({ + borderRadius: borderRadius.md, + cursor: "pointer", + transition: "all 300ms linear", + + "&:hover": { + backgroundColor: grey[200], + color: dark.main, + }, + })} + > + {el.name} + + ))} + + ) : ( + ({ + borderRadius: borderRadius.md, + cursor: "pointer", + transition: "all 300ms linear", + py: 1, + px: 1.625, + + "&:hover": { + backgroundColor: grey[200], + color: dark.main, + + "& *": { + color: dark.main, + }, + }, + })} + > + + {item.name} + + + {item.description} + + + )} + + ))} + + + ) + ); + + return ( + + + {renderNavbarItems} + + + ); +} + +export default DefaultNavbarMobile; diff --git a/src/examples/Navbars/DefaultNavbar/index.tsx b/src/examples/Navbars/DefaultNavbar/index.tsx new file mode 100644 index 0000000..2d7646a --- /dev/null +++ b/src/examples/Navbars/DefaultNavbar/index.tsx @@ -0,0 +1,609 @@ +/* eslint-disable no-param-reassign */ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useState, useEffect, ReactNode, Fragment } from "react"; + +// react-router components +import { Link } from "react-router-dom"; + +// @mui material components +import Icon from "@mui/material/Icon"; +import Popper from "@mui/material/Popper"; +import Grow, { GrowProps } from "@mui/material/Grow"; +import Grid from "@mui/material/Grid"; +import Divider from "@mui/material/Divider"; +import MuiLink from "@mui/material/Link"; +import Container from "@mui/material/Container"; +import { Theme } from "@mui/material/styles"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; +import MDButton from "components/MDButton"; + +// Material Dashboard 2 PRO React TS examples components +import DefaultNavbarDropdown from "examples/Navbars/DefaultNavbar/DefaultNavbarDropdown"; +import DefaultNavbarMobile from "examples/Navbars/DefaultNavbar/DefaultNavbarMobile"; + +// Material Dashboard 2 PRO React TS Base Styles +import breakpoints from "assets/theme/base/breakpoints"; + +// Material Dashboard 2 PRO React context +import { useMaterialUIController } from "context"; + +// Declaring props types for DefaultNavbar +interface Props { + routes: { + [key: string]: + | ReactNode + | string + | { + [key: string]: string | any; + }[]; + }[]; + brand?: string; + transparent?: boolean; + light?: boolean; + action?: { + type: "external" | "internal"; + route: string; + color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "light"; + label: string; + }; +} + +interface NewGrowTypes extends GrowProps { + sx: any; + [key: string]: any; +} + +function NewGrow(props: NewGrowTypes) { + return ; +} + +function DefaultNavbar({ routes, brand, transparent, light, action }: Props): JSX.Element { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + + const [dropdown, setDropdown] = useState(""); + const [dropdownEl, setDropdownEl] = useState(""); + const [dropdownName, setDropdownName] = useState(""); + const [nestedDropdown, setNestedDropdown] = useState(""); + const [nestedDropdownEl, setNestedDropdownEl] = useState(""); + const [nestedDropdownName, setNestedDropdownName] = useState(""); + const [arrowRef, setArrowRef] = useState(null); + const [mobileNavbar, setMobileNavbar] = useState(false); + const [mobileView, setMobileView] = useState(false); + + const openMobileNavbar = () => setMobileNavbar(!mobileNavbar); + + useEffect(() => { + // A function that sets the display state for the DefaultNavbarMobile. + function displayMobileNavbar() { + if (window.innerWidth < breakpoints.values.lg) { + setMobileView(true); + setMobileNavbar(false); + } else { + setMobileView(false); + setMobileNavbar(false); + } + } + + /** + The event listener that's calling the displayMobileNavbar function when + resizing the window. + */ + window.addEventListener("resize", displayMobileNavbar); + + // Call the displayMobileNavbar function to set the state with the initial value. + displayMobileNavbar(); + + // Remove event listener on cleanup + return () => window.removeEventListener("resize", displayMobileNavbar); + }, []); + + const renderNavbarItems = routes.map(({ name, icon, href, route, collapse }: any) => ( + { + if (collapse) { + setDropdown(currentTarget); + setDropdownEl(currentTarget); + setDropdownName(name); + } + }} + onMouseLeave={() => collapse && setDropdown(null)} + light={light} + /> + )); + + // Render the routes on the dropdown menu + const renderRoutes = routes.map(({ name, collapse, columns, rowsPerColumn }: any) => { + let template; + + // Render the dropdown menu that should be display as columns + if (collapse && columns && name === dropdownName) { + const calculateColumns = collapse.reduce((resultArray: any, item: any, index: any) => { + const chunkIndex = Math.floor(index / rowsPerColumn); + + if (!resultArray[chunkIndex]) { + resultArray[chunkIndex] = []; + } + + resultArray[chunkIndex].push(item); + + return resultArray; + }, []); + + template = ( + + {calculateColumns.map((cols: any, key: any) => { + const gridKey = `grid-${key}`; + const dividerKey = `divider-${key}`; + + return ( + + {cols.map((col: any, index: any) => ( + + + + {col.icon} + + + {col.name} + + + {col.collapse.map((item: any) => ( + e.preventDefault()} + target={item.href ? "_blank" : ""} + rel={item.href ? "noreferrer" : "noreferrer"} + minWidth="11.25rem" + display="block" + variant="button" + color="text" + textTransform="capitalize" + fontWeight="regular" + py={0.625} + px={2} + sx={({ palette: { grey, dark }, borders: { borderRadius } }: Theme) => ({ + borderRadius: borderRadius.md, + cursor: "pointer", + transition: "all 300ms linear", + + "&:hover": { + backgroundColor: grey[200], + color: dark.main, + }, + })} + > + {item.name} + + ))} + + ))} + {key !== 0 && ( + + )} + + ); + })} + + ); + + // Render the dropdown menu that should be display as list items + } else if (collapse && name === dropdownName) { + template = collapse.map((item: any) => { + const linkComponent = { + component: MuiLink, + href: item.href, + target: "_blank", + rel: "noreferrer", + }; + + const routeComponent = { + component: Link, + to: item.route, + }; + + return ( + ({ + borderRadius: borderRadius.md, + cursor: "pointer", + transition: "all 300ms linear", + + "&:hover": { + backgroundColor: grey[200], + color: dark.main, + + "& *": { + color: dark.main, + }, + }, + })} + onMouseEnter={({ currentTarget }: any) => { + if (item.dropdown) { + setNestedDropdown(currentTarget); + setNestedDropdownEl(currentTarget); + setNestedDropdownName(item.name); + } + }} + onMouseLeave={() => { + if (item.dropdown) { + setNestedDropdown(null); + } + }} + > + {item.description ? ( + + {typeof item.icon === "string" ? ( + {item.icon} + ) : ( + {item.icon} + )} + + + {item.name} + + + {item.description} + + + + ) : ( + + {item.icon} + {item.name} + + )} + {item.collapse && ( + + keyboard_arrow_right + + )} + + ); + }); + } + + return template; + }); + + // Routes dropdown menu + const dropdownMenu = ( + setDropdown(dropdownEl)} + onMouseLeave={() => { + if (!nestedDropdown) { + setDropdown(null); + setDropdownName(""); + } + }} + > + {({ TransitionProps }) => ( + white.main, + }} + > + + + + arrow_drop_up + + + + {renderRoutes} + + + + )} + + ); + + // Render routes that are nested inside the dropdown menu routes + const renderNestedRoutes = routes.map(({ collapse, columns }: any) => + collapse && !columns + ? collapse.map(({ name: parentName, collapse: nestedCollapse }: any) => { + let template; + + if (parentName === nestedDropdownName) { + template = + nestedCollapse && + nestedCollapse.map((item: any) => { + const linkComponent = { + component: MuiLink, + href: item.href, + target: "_blank", + rel: "noreferrer", + }; + + const routeComponent = { + component: Link, + to: item.route, + }; + + return ( + ({ + borderRadius: borderRadius.md, + cursor: "pointer", + transition: "all 300ms linear", + + "&:hover": { + backgroundColor: grey[200], + color: dark.main, + + "& *": { + color: dark.main, + }, + }, + })} + > + {item.description ? ( + + {item.name} + + {item.description} + + + ) : ( + item.name + )} + {item.collapse && ( + + keyboard_arrow_right + + )} + + ); + }); + } + + return template; + }) + : null + ); + + // Dropdown menu for the nested dropdowns + const nestedDropdownMenu = ( + { + setNestedDropdown(nestedDropdownEl); + }} + onMouseLeave={() => { + setNestedDropdown(null); + setNestedDropdownName(""); + setDropdown(null); + }} + > + {({ TransitionProps }) => ( + white.main, + }} + > + + + {renderNestedRoutes} + + + + )} + + ); + + return ( + + ({ + backgroundColor: transparent + ? transparentColor.main + : rgba(darkMode ? background.sidenav : white.main, 0.8), + backdropFilter: transparent ? "none" : `saturate(200%) blur(30px)`, + })} + > + + + {brand} + + + + {renderNavbarItems} + + {action && + (action.type === "internal" ? ( + + + {action.label} + + + ) : ( + + + {action.label} + + + ))} + + {mobileView && } + + + {dropdownMenu} + {nestedDropdownMenu} + + ); +} + +// Declaring default props for DefaultNavbar +DefaultNavbar.defaultProps = { + brand: "Material Dashboard PRO", + transparent: false, + light: false, + action: false, +}; + +export default DefaultNavbar; diff --git a/src/examples/Sidenav/SidenavCollapse.tsx b/src/examples/Sidenav/SidenavCollapse.tsx new file mode 100644 index 0000000..2427104 --- /dev/null +++ b/src/examples/Sidenav/SidenavCollapse.tsx @@ -0,0 +1,128 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { ReactNode } from "react"; + +// @mui material components +import Collapse from "@mui/material/Collapse"; +import ListItem from "@mui/material/ListItem"; +import ListItemIcon from "@mui/material/ListItemIcon"; +import ListItemText from "@mui/material/ListItemText"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; + +// Custom styles for the SidenavCollapse +import { + collapseItem, + collapseIconBox, + collapseIcon, + collapseText, + collapseArrow, +} from "examples/Sidenav/styles/sidenavCollapse"; + +// Material Dashboard 2 PRO React context +import { useMaterialUIController } from "context"; + +// Declaring props types for SidenavCollapse +interface Props { + icon: ReactNode; + name: string; + children?: ReactNode; + active?: Boolean; + noCollapse?: Boolean; + open?: Boolean; + [key: string]: any; +} + +function SidenavCollapse({ + icon, + name, + children, + active, + noCollapse, + open, + ...rest +}: Props): JSX.Element { + const [controller] = useMaterialUIController(); + const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller; + + return ( + <> + + + collapseItem(theme, { active, transparentSidenav, whiteSidenav, darkMode }) + } + > + collapseIconBox(theme, { transparentSidenav, whiteSidenav, darkMode })} + > + {typeof icon === "string" ? ( + collapseIcon(theme, { active })}>{icon} + ) : ( + icon + )} + + + + collapseText(theme, { + miniSidenav, + transparentSidenav, + whiteSidenav, + active, + }) + } + /> + + + collapseArrow(theme, { + noCollapse, + transparentSidenav, + whiteSidenav, + miniSidenav, + open, + active, + darkMode, + }) + } + > + expand_less + + + + {children && ( + + {children} + + )} + + ); +} + +// Declaring default props for SidenavCollapse +SidenavCollapse.defaultProps = { + active: false, + noCollapse: false, + children: false, + open: false, +}; + +export default SidenavCollapse; diff --git a/src/examples/Sidenav/SidenavItem.tsx b/src/examples/Sidenav/SidenavItem.tsx new file mode 100644 index 0000000..aa8db2a --- /dev/null +++ b/src/examples/Sidenav/SidenavItem.tsx @@ -0,0 +1,101 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { ReactNode } from "react"; + +// @mui material components +import Collapse from "@mui/material/Collapse"; +import ListItem from "@mui/material/ListItem"; +import ListItemText from "@mui/material/ListItemText"; +import Icon from "@mui/material/Icon"; +import { Theme } from "@mui/material/styles"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; + +// Custom styles for the SidenavItem +import { item, itemContent, itemArrow } from "examples/Sidenav/styles/sidenavItem"; + +// Material Dashboard 2 PRO React TS contexts +import { useMaterialUIController } from "context"; + +// Declaring props types for SidenavCollapse +interface Props { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; + name: string; + active?: boolean | string; + nested?: boolean; + children?: ReactNode; + open?: boolean; + [key: string]: any; +} + +function SidenavItem({ color, name, active, nested, children, open, ...rest }: Props): JSX.Element { + const [controller] = useMaterialUIController(); + const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller; + + return ( + <> + item(theme, { active, color, transparentSidenav, whiteSidenav, darkMode })} + > + + itemContent(theme, { + active, + miniSidenav, + name, + open, + nested, + transparentSidenav, + whiteSidenav, + darkMode, + }) + } + > + + {children && ( + + itemArrow(theme, { open, miniSidenav, transparentSidenav, whiteSidenav, darkMode }) + } + > + expand_less + + )} + + + {children && ( + + {children} + + )} + + ); +} + +// Declaring default props for SidenavItem +SidenavItem.defaultProps = { + color: "info", + active: false, + nested: false, + children: false, + open: false, +}; + +export default SidenavItem; diff --git a/src/examples/Sidenav/SidenavList.tsx b/src/examples/Sidenav/SidenavList.tsx new file mode 100644 index 0000000..7cbd202 --- /dev/null +++ b/src/examples/Sidenav/SidenavList.tsx @@ -0,0 +1,34 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { ReactNode } from "react"; + +// @mui material components +import List from "@mui/material/List"; + +function SidenavList({ children }: { children: ReactNode }): JSX.Element { + return ( + + {children} + + ); +} + +export default SidenavList; diff --git a/src/examples/Sidenav/SidenavRoot.tsx b/src/examples/Sidenav/SidenavRoot.tsx new file mode 100644 index 0000000..3f177e4 --- /dev/null +++ b/src/examples/Sidenav/SidenavRoot.tsx @@ -0,0 +1,92 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Drawer from "@mui/material/Drawer"; +import { styled, Theme } from "@mui/material/styles"; + +export default styled(Drawer)(({ theme, ownerState }: { theme?: Theme | any; ownerState: any }) => { + const { palette, boxShadows, transitions, breakpoints, functions } = theme; + const { transparentSidenav, whiteSidenav, miniSidenav, darkMode } = ownerState; + + const sidebarWidth = 250; + const { transparent, gradients, white, background } = palette; + const { xxl } = boxShadows; + const { pxToRem, linearGradient } = functions; + + let backgroundValue = darkMode + ? background.sidenav + : linearGradient(gradients.dark.main, gradients.dark.state); + + if (transparentSidenav) { + backgroundValue = transparent.main; + } else if (whiteSidenav) { + backgroundValue = white.main; + } + + // styles for the sidenav when miniSidenav={false} + const drawerOpenStyles = () => ({ + background: backgroundValue, + transform: "translateX(0)", + transition: transitions.create("transform", { + easing: transitions.easing.sharp, + duration: transitions.duration.shorter, + }), + + [breakpoints.up("xl")]: { + boxShadow: transparentSidenav ? "none" : xxl, + marginBottom: transparentSidenav ? 0 : "inherit", + left: "0", + width: sidebarWidth, + transform: "translateX(0)", + transition: transitions.create(["width", "background-color"], { + easing: transitions.easing.sharp, + duration: transitions.duration.enteringScreen, + }), + }, + }); + + // styles for the sidenav when miniSidenav={true} + const drawerCloseStyles = () => ({ + background: backgroundValue, + transform: `translateX(${pxToRem(-320)})`, + transition: transitions.create("transform", { + easing: transitions.easing.sharp, + duration: transitions.duration.shorter, + }), + + [breakpoints.up("xl")]: { + boxShadow: transparentSidenav ? "none" : xxl, + marginBottom: transparentSidenav ? 0 : "inherit", + left: "0", + width: pxToRem(96), + overflowX: "hidden", + transform: "translateX(0)", + transition: transitions.create(["width", "background-color"], { + easing: transitions.easing.sharp, + duration: transitions.duration.shorter, + }), + }, + }); + + return { + "& .MuiDrawer-paper": { + boxShadow: xxl, + border: "none", + + ...(miniSidenav ? drawerCloseStyles() : drawerOpenStyles()), + }, + }; +}); diff --git a/src/examples/Sidenav/index.tsx b/src/examples/Sidenav/index.tsx new file mode 100644 index 0000000..612be4b --- /dev/null +++ b/src/examples/Sidenav/index.tsx @@ -0,0 +1,323 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useEffect, useState, ReactNode } from "react"; + +// react-router-dom components +import { useLocation, NavLink } from "react-router-dom"; + +// @mui material components +import List from "@mui/material/List"; +import Divider from "@mui/material/Divider"; +import Link from "@mui/material/Link"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Material Dashboard 2 PRO React TS examples components +import SidenavCollapse from "examples/Sidenav/SidenavCollapse"; +import SidenavList from "examples/Sidenav/SidenavList"; +import SidenavItem from "examples/Sidenav/SidenavItem"; + +// Custom styles for the Sidenav +import SidenavRoot from "examples/Sidenav/SidenavRoot"; +import sidenavLogoLabel from "examples/Sidenav/styles/sidenav"; + +// Material Dashboard 2 PRO React context +import { + useMaterialUIController, + setMiniSidenav, + setTransparentSidenav, + setWhiteSidenav, +} from "context"; + +// Declaring props types for Sidenav +interface Props { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark"; + brand?: string; + brandName: string; + routes: { + [key: string]: + | ReactNode + | string + | { + [key: string]: + | ReactNode + | string + | { + [key: string]: ReactNode | string; + }[]; + }[]; + }[]; + [key: string]: any; +} + +function Sidenav({ color, brand, brandName, routes, ...rest }: Props): JSX.Element { + const [openCollapse, setOpenCollapse] = useState(false); + const [openNestedCollapse, setOpenNestedCollapse] = useState(false); + const [controller, dispatch] = useMaterialUIController(); + const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller; + const location = useLocation(); + const { pathname } = location; + const collapseName = pathname.split("/").slice(1)[0]; + const items = pathname.split("/").slice(1); + const itemParentName = items[1]; + const itemName = items[items.length - 1]; + + let textColor: + | "primary" + | "secondary" + | "info" + | "success" + | "warning" + | "error" + | "dark" + | "white" + | "inherit" + | "text" + | "light" = "white"; + + if (transparentSidenav || (whiteSidenav && !darkMode)) { + textColor = "dark"; + } else if (whiteSidenav && darkMode) { + textColor = "inherit"; + } + + const closeSidenav = () => setMiniSidenav(dispatch, true); + + useEffect(() => { + setOpenCollapse(collapseName); + setOpenNestedCollapse(itemParentName); + }, []); + + useEffect(() => { + // A function that sets the mini state of the sidenav. + function handleMiniSidenav() { + setMiniSidenav(dispatch, window.innerWidth < 1200); + setTransparentSidenav(dispatch, window.innerWidth < 1200 ? false : transparentSidenav); + setWhiteSidenav(dispatch, window.innerWidth < 1200 ? false : whiteSidenav); + } + + /** + The event listener that's calling the handleMiniSidenav function when resizing the window. + */ + window.addEventListener("resize", handleMiniSidenav); + + // Call the handleMiniSidenav function to set the state with the initial value. + handleMiniSidenav(); + + // Remove event listener on cleanup + return () => window.removeEventListener("resize", handleMiniSidenav); + }, [dispatch, location]); + + // Render all the nested collapse items from the routes.js + const renderNestedCollapse = (collapse: any) => { + const template = collapse.map(({ name, route, key, href }: any) => + href ? ( + + + + ) : ( + + + + ) + ); + + return template; + }; + // Render the all the collpases from the routes.js + const renderCollapse = (collapses: any) => + collapses.map(({ name, collapse, route, href, key }: any) => { + let returnValue; + + if (collapse) { + returnValue = ( + + openNestedCollapse === key && currentTarget.classList.contains("MuiListItem-root") + ? setOpenNestedCollapse(false) + : setOpenNestedCollapse(key) + } + > + {renderNestedCollapse(collapse)} + + ); + } else { + returnValue = href ? ( + + + + ) : ( + + + + ); + } + return {returnValue}; + }); + + // Render all the routes from the routes.js (All the visible items on the Sidenav) + const renderRoutes = routes.map( + ({ type, name, icon, title, collapse, noCollapse, key, href, route }: any) => { + let returnValue; + + if (type === "collapse") { + if (href) { + returnValue = ( + + + + ); + } else if (noCollapse && route) { + returnValue = ( + + + {collapse ? renderCollapse(collapse) : null} + + + ); + } else { + returnValue = ( + (openCollapse === key ? setOpenCollapse(false) : setOpenCollapse(key))} + > + {collapse ? renderCollapse(collapse) : null} + + ); + } + } else if (type === "title") { + returnValue = ( + + {title} + + ); + } else if (type === "divider") { + returnValue = ( + + ); + } + + return returnValue; + } + ); + + return ( + + + + + close + + + + {brand && } + sidenavLogoLabel(theme, { miniSidenav })} + > + + {brandName} + + + + + + {renderRoutes} + + ); +} + +// Declaring default props for Sidenav +Sidenav.defaultProps = { + color: "info", + brand: "", +}; + +export default Sidenav; diff --git a/src/examples/Sidenav/styles/sidenav.ts b/src/examples/Sidenav/styles/sidenav.ts new file mode 100644 index 0000000..b8819c1 --- /dev/null +++ b/src/examples/Sidenav/styles/sidenav.ts @@ -0,0 +1,39 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import { Theme } from "@mui/material/styles"; + +export default function sidenavLogoLabel(theme: Theme, ownerState: any) { + const { functions, transitions, typography, breakpoints } = theme; + const { miniSidenav } = ownerState; + + const { pxToRem } = functions; + const { fontWeightMedium } = typography; + + return { + ml: 0.5, + fontWeight: fontWeightMedium, + wordSpacing: pxToRem(-1), + transition: transitions.create("opacity", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + + [breakpoints.up("xl")]: { + opacity: miniSidenav ? 0 : 1, + }, + }; +} diff --git a/src/examples/Sidenav/styles/sidenavCollapse.ts b/src/examples/Sidenav/styles/sidenavCollapse.ts new file mode 100644 index 0000000..394cb3b --- /dev/null +++ b/src/examples/Sidenav/styles/sidenavCollapse.ts @@ -0,0 +1,170 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import { Theme } from "@mui/material/styles"; + +function collapseItem(theme: Theme, ownerState: any) { + const { palette, transitions, breakpoints, boxShadows, borders, functions } = theme; + const { active, transparentSidenav, whiteSidenav, darkMode } = ownerState; + + const { white, transparent, dark, grey } = palette; + const { md } = boxShadows; + const { borderRadius } = borders; + const { pxToRem, rgba } = functions; + + return { + background: () => { + let backgroundValue; + + if (transparentSidenav && darkMode) { + backgroundValue = active ? rgba(white.main, 0.2) : transparent.main; + } else if (transparentSidenav && !darkMode) { + backgroundValue = active ? grey[300] : transparent.main; + } else if (whiteSidenav) { + backgroundValue = active ? grey[200] : transparent.main; + } else { + backgroundValue = active ? rgba(white.main, 0.2) : transparent.main; + } + + return backgroundValue; + }, + color: (transparentSidenav && !darkMode) || whiteSidenav ? dark.main : white.main, + display: "flex", + alignItems: "center", + width: "100%", + padding: `${pxToRem(8)} ${pxToRem(16)}`, + margin: `${pxToRem(1.5)} ${pxToRem(16)}`, + borderRadius: borderRadius.md, + cursor: "pointer", + userSelect: "none", + whiteSpace: "nowrap", + boxShadow: active && !whiteSidenav && !darkMode && !transparentSidenav ? md : "none", + [breakpoints.up("xl")]: { + transition: transitions.create(["box-shadow", "background-color"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.shorter, + }), + }, + + "&:hover, &:focus": { + backgroundColor: + transparentSidenav && !darkMode + ? grey[300] + : rgba(whiteSidenav ? grey[400] : white.main, 0.2), + }, + }; +} + +function collapseIconBox(theme: Theme, ownerState: any) { + const { palette, transitions, borders, functions } = theme; + const { transparentSidenav, whiteSidenav, darkMode } = ownerState; + + const { white, dark } = palette; + const { borderRadius } = borders; + const { pxToRem } = functions; + + return { + minWidth: pxToRem(32), + minHeight: pxToRem(32), + color: (transparentSidenav && !darkMode) || whiteSidenav ? dark.main : white.main, + borderRadius: borderRadius.md, + display: "grid", + placeItems: "center", + transition: transitions.create("margin", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + + "& svg, svg g": { + color: transparentSidenav || whiteSidenav ? dark.main : white.main, + }, + }; +} + +const collapseIcon = ({ palette: { white, gradients } }: Theme, { active }: any) => ({ + color: active ? white.main : gradients.dark.state, +}); + +function collapseText(theme: any, ownerState: any) { + const { typography, transitions, breakpoints, functions } = theme; + const { miniSidenav, transparentSidenav, active } = ownerState; + + const { size, fontWeightRegular, fontWeightLight } = typography; + const { pxToRem } = functions; + + return { + marginLeft: pxToRem(10), + + [breakpoints.up("xl")]: { + opacity: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : 1, + maxWidth: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : "100%", + marginLeft: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : pxToRem(10), + transition: transitions.create(["opacity", "margin"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + }, + + "& span": { + fontWeight: active ? fontWeightRegular : fontWeightLight, + fontSize: size.sm, + lineHeight: 0, + }, + }; +} + +function collapseArrow(theme: Theme, ownerState: any) { + const { palette, typography, transitions, breakpoints, functions } = theme; + const { noCollapse, transparentSidenav, whiteSidenav, miniSidenav, open, active, darkMode } = + ownerState; + + const { white, dark } = palette; + const { size } = typography; + const { pxToRem, rgba } = functions; + + return { + fontSize: `${size.lg} !important`, + fontWeight: 700, + marginBottom: pxToRem(-1), + transform: open ? "rotate(0)" : "rotate(-180deg)", + color: () => { + let colorValue; + + if (transparentSidenav && darkMode) { + colorValue = open || active ? white.main : rgba(white.main, 0.25); + } else if (transparentSidenav || whiteSidenav) { + colorValue = open || active ? dark.main : rgba(dark.main, 0.25); + } else { + colorValue = open || active ? white.main : rgba(white.main, 0.5); + } + + return colorValue; + }, + transition: transitions.create(["color", "transform", "opacity"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.shorter, + }), + + [breakpoints.up("xl")]: { + display: + noCollapse || (transparentSidenav && miniSidenav) || miniSidenav + ? "none !important" + : "block !important", + }, + }; +} + +export { collapseItem, collapseIconBox, collapseIcon, collapseText, collapseArrow }; diff --git a/src/examples/Sidenav/styles/sidenavItem.ts b/src/examples/Sidenav/styles/sidenavItem.ts new file mode 100644 index 0000000..a2b7e9c --- /dev/null +++ b/src/examples/Sidenav/styles/sidenavItem.ts @@ -0,0 +1,160 @@ +/* eslint-disable prefer-destructuring */ + +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import { Theme } from "@mui/material/styles"; + +function item(theme: Theme | any, ownerState: any) { + const { palette, borders, functions, transitions } = theme; + const { active, color, transparentSidenav, whiteSidenav, darkMode } = ownerState; + + const { transparent, white, grey } = palette; + const { borderRadius } = borders; + const { rgba } = functions; + + return { + pl: 3, + mt: 0.375, + mb: 0.3, + width: "100%", + borderRadius: borderRadius.md, + cursor: "pointer", + backgroundColor: () => { + let backgroundValue = transparent.main; + + if ( + (active === "isParent" && !transparentSidenav && !whiteSidenav) || + (active === "isParent" && transparentSidenav && darkMode) + ) { + backgroundValue = rgba(white.main, 0.2); + } else if (active === "isParent" && transparentSidenav) { + backgroundValue = grey[300]; + } else if (active === "isParent" && whiteSidenav) { + backgroundValue = grey[200]; + } else if (active) { + backgroundValue = palette[color].main; + } + + return backgroundValue; + }, + transition: transitions.create("background-color", { + easing: transitions.easing.easeInOut, + duration: transitions.duration.shorter, + }), + + "&:hover, &:focus": { + backgroundColor: + !active && + rgba((transparentSidenav && !darkMode) || whiteSidenav ? grey[400] : white.main, 0.2), + }, + }; +} + +function itemContent(theme: Theme, ownerState: any) { + const { palette, typography, transitions, functions } = theme; + const { miniSidenav, name, active, transparentSidenav, whiteSidenav, darkMode } = ownerState; + + const { white, dark } = palette; + const { size, fontWeightRegular, fontWeightLight } = typography; + const { pxToRem } = functions; + + return { + display: "flex", + alignItems: "center", + justifyContent: "space-between", + width: "100%", + padding: `${pxToRem(12)} ${pxToRem(16)}`, + marginLeft: pxToRem(18), + userSelect: "none", + position: "relative", + + "& span": { + color: + ((transparentSidenav && !darkMode) || whiteSidenav) && (active === "isParent" || !active) + ? dark.main + : white.main, + fontWeight: active ? fontWeightRegular : fontWeightLight, + fontSize: size.sm, + opacity: miniSidenav ? 0 : 1, + transition: transitions.create(["opacity", "color"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.standard, + }), + }, + + "&::before": { + content: `"${name[0]}"`, + color: + ((transparentSidenav && !darkMode) || whiteSidenav) && (active === "isParent" || !active) + ? dark.main + : white.main, + fontWeight: fontWeightRegular, + display: "flex", + alignItems: "center", + position: "absolute", + top: "50%", + transform: "translateY(-50%)", + left: pxToRem(-15), + opacity: 1, + borderRadius: "50%", + fontSize: size.sm, + }, + }; +} + +function itemArrow(theme: Theme, ownerState: any) { + const { palette, typography, transitions, breakpoints, functions } = theme; + const { noCollapse, transparentSidenav, whiteSidenav, miniSidenav, open, active, darkMode } = + ownerState; + + const { white, dark } = palette; + const { size } = typography; + const { pxToRem, rgba } = functions; + + return { + fontSize: `${size.lg} !important`, + fontWeight: 700, + marginBottom: pxToRem(-1), + transform: open ? "rotate(0)" : "rotate(-180deg)", + color: () => { + let colorValue; + + if (transparentSidenav && darkMode) { + colorValue = open || active ? white.main : rgba(white.main, 0.25); + } else if (transparentSidenav || whiteSidenav) { + colorValue = open || active ? dark.main : rgba(dark.main, 0.25); + } else { + colorValue = open || active ? white.main : rgba(white.main, 0.5); + } + + return colorValue; + }, + transition: transitions.create(["color", "transform", "opacity"], { + easing: transitions.easing.easeInOut, + duration: transitions.duration.shorter, + }), + + [breakpoints.up("xl")]: { + display: + noCollapse || (transparentSidenav && miniSidenav) || miniSidenav + ? "none !important" + : "block !important", + }, + }; +} + +export { item, itemContent, itemArrow }; diff --git a/src/examples/Tables/DataTable/DataTableBodyCell.tsx b/src/examples/Tables/DataTable/DataTableBodyCell.tsx new file mode 100644 index 0000000..cbd40c6 --- /dev/null +++ b/src/examples/Tables/DataTable/DataTableBodyCell.tsx @@ -0,0 +1,61 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { ReactNode } from "react"; + +// @mui material components +import { Theme } from "@mui/material/styles"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; + +// Declaring prop types for DataTableBodyCell +interface Props { + children: ReactNode; + noBorder?: boolean; + align?: "left" | "right" | "center"; +} + +function DataTableBodyCell({ noBorder, align, children }: Props): JSX.Element { + return ( + ({ + fontSize: size.sm, + borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${light.main}`, + })} + > + + {children} + + + ); +} + +// Declaring default props for DataTableBodyCell +DataTableBodyCell.defaultProps = { + noBorder: false, + align: "left", +}; + +export default DataTableBodyCell; diff --git a/src/examples/Tables/DataTable/DataTableHeadCell.tsx b/src/examples/Tables/DataTable/DataTableHeadCell.tsx new file mode 100644 index 0000000..f3012c8 --- /dev/null +++ b/src/examples/Tables/DataTable/DataTableHeadCell.tsx @@ -0,0 +1,105 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { ReactNode } from "react"; + +// @mui material components +import Icon from "@mui/material/Icon"; +import { Theme } from "@mui/material/styles"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; + +// Material Dashboard 2 PRO React TS contexts +import { useMaterialUIController } from "context"; + +// Declaring props types for DataTableHeadCell +interface Props { + width?: string | number; + children: ReactNode; + sorted?: false | "none" | "asce" | "desc"; + align?: "left" | "right" | "center"; +} + +function DataTableHeadCell({ width, children, sorted, align, ...rest }: Props): JSX.Element { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + + return ( + ({ + borderBottom: `${borderWidth[1]} solid ${light.main}`, + })} + > + ({ + fontSize: size.xxs, + fontWeight: fontWeightBold, + textTransform: "uppercase", + cursor: sorted && "pointer", + userSelect: sorted && "none", + })} + > + {children} + {sorted && ( + ({ + fontSize: size.lg, + })} + > + + arrow_drop_up + + + arrow_drop_down + + + )} + + + ); +} + +// Declaring default props for DataTableHeadCell +DataTableHeadCell.defaultProps = { + width: "auto", + sorted: "none", + align: "left", +}; + +export default DataTableHeadCell; diff --git a/src/examples/Tables/DataTable/index.tsx b/src/examples/Tables/DataTable/index.tsx new file mode 100644 index 0000000..83a29b3 --- /dev/null +++ b/src/examples/Tables/DataTable/index.tsx @@ -0,0 +1,306 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo, useEffect, useState } from "react"; + +// react-table components +import { useTable, usePagination, useGlobalFilter, useAsyncDebounce, useSortBy } from "react-table"; + +// @mui material components +import Table from "@mui/material/Table"; +import TableBody from "@mui/material/TableBody"; +import TableContainer from "@mui/material/TableContainer"; +import TableRow from "@mui/material/TableRow"; +import Icon from "@mui/material/Icon"; +import Autocomplete from "@mui/material/Autocomplete"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; +import MDInput from "components/MDInput"; +import MDPagination from "components/MDPagination"; + +// Material Dashboard 2 PRO React TS examples components +import DataTableHeadCell from "examples/Tables/DataTable/DataTableHeadCell"; +import DataTableBodyCell from "examples/Tables/DataTable/DataTableBodyCell"; + +// Declaring props types for DataTable +interface Props { + entriesPerPage?: + | false + | { + defaultValue: number; + entries: number[]; + }; + canSearch?: boolean; + showTotalEntries?: boolean; + table: { + columns: { [key: string]: any }[]; + rows: { [key: string]: any }[]; + }; + pagination?: { + variant: "contained" | "gradient"; + color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "light"; + }; + isSorted?: boolean; + noEndBorder?: boolean; +} + +function DataTable({ + entriesPerPage, + canSearch, + showTotalEntries, + table, + pagination, + isSorted, + noEndBorder, +}: Props): JSX.Element { + let defaultValue: any; + let entries: any[]; + + if (entriesPerPage) { + defaultValue = entriesPerPage.defaultValue ? entriesPerPage.defaultValue : "10"; + entries = entriesPerPage.entries ? entriesPerPage.entries : ["10", "25", "50", "100"]; + } + + const columns = useMemo(() => table.columns, [table]); + const data = useMemo(() => table.rows, [table]); + + const tableInstance = useTable( + { columns, data, initialState: { pageIndex: 0 } }, + useGlobalFilter, + useSortBy, + usePagination + ); + + const { + getTableProps, + getTableBodyProps, + headerGroups, + prepareRow, + rows, + page, + pageOptions, + canPreviousPage, + canNextPage, + gotoPage, + nextPage, + previousPage, + setPageSize, + setGlobalFilter, + state: { pageIndex, pageSize, globalFilter }, + }: any = tableInstance; + + // Set the default value for the entries per page when component mounts + useEffect(() => setPageSize(defaultValue || 10), [defaultValue]); + + // Set the entries per page value based on the select value + const setEntriesPerPage = (value: any) => setPageSize(value); + + // Render the paginations + const renderPagination = pageOptions.map((option: any) => ( + gotoPage(Number(option))} + active={pageIndex === option} + > + {option + 1} + + )); + + // Handler for the input to set the pagination index + const handleInputPagination = ({ target: { value } }: any) => + value > pageOptions.length || value < 0 ? gotoPage(0) : gotoPage(Number(value)); + + // Customized page options starting from 1 + const customizedPageOptions = pageOptions.map((option: any) => option + 1); + + // Setting value for the pagination input + const handleInputPaginationValue = ({ target: value }: any) => gotoPage(Number(value.value - 1)); + + // Search input value state + const [search, setSearch] = useState(globalFilter); + + // Search input state handle + const onSearchChange = useAsyncDebounce((value) => { + setGlobalFilter(value || undefined); + }, 100); + + // A function that sets the sorted value for the table + const setSortedValue = (column: any) => { + let sortedValue; + + if (isSorted && column.isSorted) { + sortedValue = column.isSortedDesc ? "desc" : "asce"; + } else if (isSorted) { + sortedValue = "none"; + } else { + sortedValue = false; + } + + return sortedValue; + }; + + // Setting the entries starting point + const entriesStart = pageIndex === 0 ? pageIndex + 1 : pageIndex * pageSize + 1; + + // Setting the entries ending point + let entriesEnd; + + if (pageIndex === 0) { + entriesEnd = pageSize; + } else if (pageIndex === pageOptions.length - 1) { + entriesEnd = rows.length; + } else { + entriesEnd = pageSize * (pageIndex + 1); + } + + return ( + + {entriesPerPage || canSearch ? ( + + {entriesPerPage && ( + + { + setEntriesPerPage(parseInt(newValue, 10)); + }} + size="small" + sx={{ width: "5rem" }} + renderInput={(params) => } + /> + +   entries per page + + + )} + {canSearch && ( + + { + setSearch(search); + onSearchChange(currentTarget.value); + }} + /> + + )} + + ) : null} + + + {headerGroups.map((headerGroup: any) => ( + + {headerGroup.headers.map((column: any) => ( + + {column.render("Header")} + + ))} + + ))} + + + {page.map((row: any, key: any) => { + prepareRow(row); + return ( + + {row.cells.map((cell: any) => ( + + {cell.render("Cell")} + + ))} + + ); + })} + +
+ + + {showTotalEntries && ( + + + Showing {entriesStart} to {entriesEnd} of {rows.length} entries + + + )} + {pageOptions.length > 1 && ( + + {canPreviousPage && ( + previousPage()}> + chevron_left + + )} + {renderPagination.length > 6 ? ( + + { + handleInputPagination(event); + handleInputPaginationValue(event); + }} + /> + + ) : ( + renderPagination + )} + {canNextPage && ( + nextPage()}> + chevron_right + + )} + + )} + + + ); +} + +// Declaring default props for DataTable +DataTable.defaultProps = { + entriesPerPage: { defaultValue: 10, entries: ["5", "10", "15", "20", "25"] }, + canSearch: false, + showTotalEntries: true, + pagination: { variant: "gradient", color: "info" }, + isSorted: true, + noEndBorder: false, +}; + +export default DataTable; diff --git a/src/examples/Tables/SalesTable/SalesTableCell.tsx b/src/examples/Tables/SalesTable/SalesTableCell.tsx new file mode 100644 index 0000000..87ed15f --- /dev/null +++ b/src/examples/Tables/SalesTable/SalesTableCell.tsx @@ -0,0 +1,91 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import TableCell from "@mui/material/TableCell"; + +// Material Dashboard 2 PRO React TS components +import MDTypography from "components/MDTypography"; +import MDBox from "components/MDBox"; + +// Declaring prop types for SalesTableCell +interface Props { + title: string; + content?: string | number; + image?: string; + noBorder?: boolean; + [key: string]: any; +} + +function SalesTableCell({ title, content, image, noBorder, ...rest }: Props): JSX.Element { + let template; + + if (image) { + template = ( + + + {" "} + + + {title}: + + + {content} + + + + + ); + } else { + template = ( + + + + {title}: + + + {content} + + + + ); + } + + return template; +} + +// Declaring default props for SalesTableCell +SalesTableCell.defaultProps = { + image: "", + noBorder: false, +}; + +export default SalesTableCell; diff --git a/src/examples/Tables/SalesTable/index.tsx b/src/examples/Tables/SalesTable/index.tsx new file mode 100644 index 0000000..267381c --- /dev/null +++ b/src/examples/Tables/SalesTable/index.tsx @@ -0,0 +1,97 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useMemo } from "react"; + +// @mui material components +import Table from "@mui/material/Table"; +import TableBody from "@mui/material/TableBody"; +import TableContainer from "@mui/material/TableContainer"; +import TableHead from "@mui/material/TableHead"; +import TableRow from "@mui/material/TableRow"; + +// Material Dashboard 2 PRO React TS components +import MDTypography from "components/MDTypography"; +import MDBox from "components/MDBox"; + +// Material Dashboard 2 PRO React TS examples components +import SalesTableCell from "examples/Tables/SalesTable/SalesTableCell"; + +// Declaring props types for SalesTable +interface Props { + title?: string; + rows?: { + [key: string]: string | number | (string | number)[]; + }[]; + shadow?: boolean; +} + +function SalesTable({ title, rows, shadow }: Props): JSX.Element { + const renderTableCells = rows.map( + (row: { [key: string]: string | number | (string | number)[] }, key: any) => { + const tableRows: any = []; + const rowKey = `row-${key}`; + + Object.entries(row).map(([cellTitle, cellContent]: any) => + Array.isArray(cellContent) + ? tableRows.push( + + ) + : tableRows.push( + + ) + ); + + return {tableRows}; + } + ); + + return ( + + + {title ? ( + + + + {title} + + + + ) : null} + {useMemo(() => renderTableCells, [rows])} +
+ + ); +} + +// Declaring default props for SalesTable +SalesTable.defaultProps = { + title: "", + rows: [{}], + shadow: true, +}; + +export default SalesTable; diff --git a/src/examples/Timeline/TimelineItem/index.tsx b/src/examples/Timeline/TimelineItem/index.tsx new file mode 100644 index 0000000..259d966 --- /dev/null +++ b/src/examples/Timeline/TimelineItem/index.tsx @@ -0,0 +1,96 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { ReactNode } from "react"; + +// @mui material components +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Timeline context +import { useTimeline } from "examples/Timeline/context"; + +// Custom styles for the TimelineItem +import timelineItem from "examples/Timeline/TimelineItem/styles"; + +// Declaring prop types for TimelineItem +interface Props { + color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "light"; + icon: ReactNode; + title: string; + dateTime: string; + description?: string; + lastItem?: boolean; + [key: string]: any; +} + +function TimelineItem({ color, icon, title, dateTime, description, lastItem }: Props): JSX.Element { + const isDark = useTimeline(); + + return ( + timelineItem(theme, { lastItem, isDark })} + > + size.sm }} + > + {icon} + + + + {title} + + + + {dateTime} + + + + {description ? ( + + {description} + + ) : null} + + + + ); +} + +// Declaring default props for TimelineItem +TimelineItem.defaultProps = { + color: "info", + lastItem: false, + description: "", +}; + +export default TimelineItem; diff --git a/src/examples/Timeline/TimelineItem/styles.ts b/src/examples/Timeline/TimelineItem/styles.ts new file mode 100644 index 0000000..e6fcb14 --- /dev/null +++ b/src/examples/Timeline/TimelineItem/styles.ts @@ -0,0 +1,23 @@ +// @mui material components +import { Theme } from "@mui/material/styles"; + +function timelineItem(theme: Theme, ownerState: any) { + const { borders } = theme; + const { lastItem, isDark } = ownerState; + + const { borderWidth, borderColor } = borders; + + return { + "&:after": { + content: !lastItem && "''", + position: "absolute", + top: "2rem", + left: "17px", + height: "100%", + opacity: isDark ? 0.1 : 1, + borderRight: `${borderWidth[2]} solid ${borderColor}`, + }, + }; +} + +export default timelineItem; diff --git a/src/examples/Timeline/TimelineList/index.tsx b/src/examples/Timeline/TimelineList/index.tsx new file mode 100644 index 0000000..81b1050 --- /dev/null +++ b/src/examples/Timeline/TimelineList/index.tsx @@ -0,0 +1,68 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { ReactNode } from "react"; + +// @mui material components +import Card from "@mui/material/Card"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Material Dashboard 2 PRO React TS components +import { useMaterialUIController } from "context"; + +// Timeline context +import { TimelineProvider } from "examples/Timeline/context"; + +// Declaring props types for TimelineList +interface Props { + title: string; + dark?: boolean; + children: ReactNode; +} + +function TimelineList({ title, dark, children }: Props): JSX.Element { + const [controller] = useMaterialUIController(); + const { darkMode } = controller; + + return ( + + + darkMode && background.card }} + > + + + {title} + + + {children} + + + + ); +} + +// Declaring default props for TimelineList +TimelineList.defaultProps = { + dark: false, +}; + +export default TimelineList; diff --git a/src/examples/Timeline/context/index.tsx b/src/examples/Timeline/context/index.tsx new file mode 100644 index 0000000..912655e --- /dev/null +++ b/src/examples/Timeline/context/index.tsx @@ -0,0 +1,42 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +/* eslint-disable react/prop-types */ +/** + This file is used for controlling the dark and light state of the TimelineList and TimelineItem. +*/ + +import { createContext, useContext, ReactNode } from "react"; + +// The Timeline main context +const Timeline = createContext(null); + +// Declaring props types for TimelineProvider +interface Props { + children: ReactNode; + value: boolean; +} + +// Timeline context provider +function TimelineProvider({ children, value }: Props): JSX.Element { + return {children}; +} + +// Timeline custom hook for using context +function useTimeline() { + return useContext(Timeline); +} + +export { TimelineProvider, useTimeline }; diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..ea9bf26 --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,32 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import ReactDOM from "react-dom"; +import { BrowserRouter } from "react-router-dom"; +import App from "App"; + +// Material Dashboard 2 PRO React TS Context Provider +import { MaterialUIControllerProvider } from "context"; + +ReactDOM.render( + + + + + , + document.getElementById("root") +); + +export * from "components/MDButton"; diff --git a/src/layouts/applications/calendar/components/Header/index.tsx b/src/layouts/applications/calendar/components/Header/index.tsx new file mode 100644 index 0000000..9275042 --- /dev/null +++ b/src/layouts/applications/calendar/components/Header/index.tsx @@ -0,0 +1,86 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Divider from "@mui/material/Divider"; +import Icon from "@mui/material/Icon"; +import Tooltip from "@mui/material/Tooltip"; +import { Theme } from "@mui/material/styles"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; +import MDAvatar from "components/MDAvatar"; +import MDButton from "components/MDButton"; + +// Image +import team1 from "assets/images/team-1.jpg"; +import team2 from "assets/images/team-2.jpg"; +import team3 from "assets/images/team-3.jpg"; +import team4 from "assets/images/team-4.jpg"; +import team5 from "assets/images/team-5.jpg"; + +function Header(): JSX.Element { + const avatarStyles: { [key: string]: any } = { + border: ({ borders: { borderWidth }, palette: { white } }: Theme) => + `${borderWidth[2]} solid ${white.main}`, + cursor: "pointer", + position: "relative", + ml: -1.5, + + "&:hover, &:focus": { + zIndex: "10", + }, + }; + + return ( + + + + + Team members: + + + + + + + + + + + + + + + + + + + + + + + + + + add + + + + ); +} + +export default Header; diff --git a/src/layouts/applications/calendar/components/NextEvents/index.tsx b/src/layouts/applications/calendar/components/NextEvents/index.tsx new file mode 100644 index 0000000..884173d --- /dev/null +++ b/src/layouts/applications/calendar/components/NextEvents/index.tsx @@ -0,0 +1,78 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// @mui material components +import Card from "@mui/material/Card"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Material Dashboard 2 PRO React TS examples components +import DefaultItem from "examples/Items/DefaultItem"; + +function NextEvents(): JSX.Element { + return ( + + + + Next events + + + + + + + + + + + + + + + + + + + ); +} + +export default NextEvents; diff --git a/src/layouts/applications/calendar/components/ProductivityChart/configs/index.ts b/src/layouts/applications/calendar/components/ProductivityChart/configs/index.ts new file mode 100644 index 0000000..d2646a4 --- /dev/null +++ b/src/layouts/applications/calendar/components/ProductivityChart/configs/index.ts @@ -0,0 +1,79 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +// Material Dashboard 2 PRO React TS Base Styles +import colors from "assets/theme/base/colors"; + +const { white } = colors; + +function configs(backgroundColor?: "string"): any { + return { + data: { + labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], + datasets: [ + { + label: "Visitors", + tension: 0.5, + pointRadius: 0, + borderColor: white.main, + borderWidth: 2, + backgroundColor, + data: [50, 45, 60, 60, 80, 65, 90, 80, 100], + maxBarThickness: 6, + fill: true, + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + }, + }, + interaction: { + intersect: false, + mode: "index", + }, + scales: { + y: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: false, + drawTicks: false, + }, + ticks: { + display: false, + }, + }, + x: { + grid: { + drawBorder: false, + display: false, + drawOnChartArea: false, + drawTicks: false, + }, + ticks: { + display: false, + }, + }, + }, + }, + }; +} + +export default configs; diff --git a/src/layouts/applications/calendar/components/ProductivityChart/index.tsx b/src/layouts/applications/calendar/components/ProductivityChart/index.tsx new file mode 100644 index 0000000..1c07374 --- /dev/null +++ b/src/layouts/applications/calendar/components/ProductivityChart/index.tsx @@ -0,0 +1,104 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +import { useRef, useState, useMemo, useEffect } from "react"; + +// react-chartjs-2 components +import { Line } from "react-chartjs-2"; + +// @mui material components +import Card from "@mui/material/Card"; +import Menu from "@mui/material/Menu"; +import MenuItem from "@mui/material/MenuItem"; +import Icon from "@mui/material/Icon"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; +import MDTypography from "components/MDTypography"; + +// Chart configurations +import configs from "layouts/applications/calendar/components/ProductivityChart/configs"; + +// Material Dashboard 2 PRO React TS Base Styles +import typography from "assets/theme/base/typography"; + +function ProductivityChart(): JSX.Element { + const { size } = typography; + const chartRef = useRef(null); + const [openMenu, setOpenMenu] = useState(null); + const [chart, setChart] = useState([]); + const { data, options }: any = chart; + + const handleOpenMenu = ({ currentTarget }: { currentTarget: HTMLSpanElement }) => + setOpenMenu(currentTarget); + const handleCloseMenu = () => setOpenMenu(null); + + useEffect(() => setChart(configs()), []); + + const renderMenu = () => ( + + Action + Anoter action + Something else here + + ); + + return ( + + + + + + + Productivity + + + + arrow_upward + + + 4% more{" "} + + in 2021 + + + + + + more_horiz + + {renderMenu()} + + + {useMemo( + () => ( + + + + ), + [chart] + )} + + + ); +} + +export default ProductivityChart; diff --git a/src/layouts/applications/calendar/data/calendarEventsData.ts b/src/layouts/applications/calendar/data/calendarEventsData.ts new file mode 100644 index 0000000..e4e826a --- /dev/null +++ b/src/layouts/applications/calendar/data/calendarEventsData.ts @@ -0,0 +1,74 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ + +const calendarEventsData = [ + { + title: "All day conference", + start: "2021-08-01", + end: "2021-08-01", + className: "success", + }, + + { + title: "Meeting with Mary", + start: "2021-08-03", + end: "2021-08-03", + className: "info", + }, + + { + title: "Cyber Week", + start: "2021-08-04", + end: "2021-08-04", + className: "warning", + }, + + { + title: "Winter Hackaton", + start: "2021-08-05", + end: "2021-08-05", + className: "error", + }, + + { + title: "Digital event", + start: "2021-08-09", + end: "2021-08-11", + className: "warning", + }, + + { + title: "Marketing event", + start: "2021-08-12", + end: "2021-08-12", + className: "primary", + }, + + { + title: "Dinner with Family", + start: "2021-08-21", + end: "2021-08-21", + className: "error", + }, + + { + title: "Black Friday", + start: "2021-08-25", + end: "2021-08-25", + className: "info", + }, +]; + +export default calendarEventsData; diff --git a/src/layouts/applications/calendar/index.tsx b/src/layouts/applications/calendar/index.tsx new file mode 100644 index 0000000..6d210e9 --- /dev/null +++ b/src/layouts/applications/calendar/index.tsx @@ -0,0 +1,75 @@ +/** +========================================================= +* Material Dashboard 2 PRO React TS - v1.0.0 +========================================================= + +* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts +* Copyright 2022 Creative Tim (https://www.creative-tim.com) + +Coded by www.creative-tim.com + + ========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. +*/ +import { useMemo } from "react"; + +// @mui material components +import Grid from "@mui/material/Grid"; + +// Material Dashboard 2 PRO React TS components +import MDBox from "components/MDBox"; + +// Material Dashboard 2 PRO React TS examples components +import DashboardLayout from "examples/LayoutContainers/DashboardLayout"; +import DashboardNavbar from "examples/Navbars/DashboardNavbar"; +import Footer from "examples/Footer"; +import EventCalendar from "examples/Calendar"; + +// Calendar application components +import Header from "layouts/applications/calendar/components/Header"; +import NextEvents from "layouts/applications/calendar/components/NextEvents"; +import ProductivityChart from "layouts/applications/calendar/components/ProductivityChart"; + +// Data +import calendarEventsData from "layouts/applications/calendar/data/calendarEventsData"; + +function Calendar(): JSX.Element { + return ( + + + + +
+ + + + {useMemo( + () => ( + + ), + [calendarEventsData] + )} + + + + + + + + + + + +