[
  {
    "path": ".gitattributes",
    "content": "# Auto detect text files and perform LF normalization\n* text=auto\n"
  },
  {
    "path": ".gitignore",
    "content": "node_modules\npackage-lock.json\nbuild\n"
  },
  {
    "path": "CHANGELOG.md",
    "content": "# Changelog\n## [1.0.2] 2022-07-24\n\n### Update v1.0.2\n\n- We used the Chakra UI Circular Progress instead of the plugins since they were deprecated. The plugins are still used in previous versions!\n\n## [1.0.1] 2022-05-16\n\n### Update v1.0.1\n\n- The problem with npm install/ building the project was fixed.\n\n### Added dependencies\n\n```\nchakra-ui/system                      1.12.1\n```\n\n### Updated dependencies\n\n```\nchakra-ui/icons                      1.0.14         →         1.1.5\nchakra-ui/react                      1.6.5          →         1.8.8\nchakra-ui/theme-tools                1.1.9          →         1.3.6\n```\n## [1.0.0] 2022-01-10\n\n### Original Release\n\n- Added Chakra UI as base framework"
  },
  {
    "path": "ISSUE_TEMPLATE.md",
    "content": "<!--\n IMPORTANT: Please use the following link to create a new issue:\n\n  https://www.creative-tim.com/new-issue/vision-ui-dashboard-react\n\n**If your issue was not created using the app above, it will be closed immediately.**\n-->\n\n<!--\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n👉  https://www.creative-tim.com/bundles\n👉  https://www.creative-tim.com\n-->\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2022 Creative Tim\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# [Vision UI Free Chakra](https://demos.creative-tim.com/vision-ui-dashboard-chakra) [![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/vision-ui-dashboard-chakra&text=Check%20Vision%20UI%20Dashboard%20made%20by%20@simmmple_web%20and%20@CreativeTim%20#webdesign%20#dashboard%20#react)\n\n![version](https://img.shields.io/badge/version-1.0.0-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/vision-ui-dashboard-chakra.svg?maxAge=2592000)](https://github.com/creativetimofficial/vision-ui-dashboard-chakra/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/vision-ui-dashboard-chakra.svg?maxAge=2592000)](https://github.com/creativetimofficial/vision-ui-dashboard-chakra/issues?q=is%3Aissue+is%3Aclosed)\n\n![Product Gif](https://i.ibb.co/x8GDNYV/vision-ui-free-chakra.png)\n\nMost trendiest, complex and innovative Free Chakra UI Dashboard Made by [Simmmple](https://simmmple.com?ref=readme-vudchakra) & [Creative Tim](https://creative-tim.com/?ref=readme-vudchakra). Check our latest Free Chakra UI Dashboard.\n\nStart your Development with an Innovative Admin Template for Chakra UI and React. If you like the look & feel of the hottest design trend right now, Vision UI, you will fall in love with this dashboard! It features a huge number of components built to fit together and look amazing.\n\n**Fully Coded Elements**\n\nVision UI Dashboard Free Chakra UI is built with over 70+ 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 JSS files and classes. You will save a lot of time going from prototyping to full-functional code because all elements are implemented. This Premium Chakra UI 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.\n\nCheck all components <a href=\"https://demos.creative-tim.com/docs-vision-ui-dashboard-chakra?ref=readme-vudchakra\" target=\"_blank\">here</a>.\n\n**Documentation built by Developers**\n\nEach element is well presented in a very complex documentation.\nYou can read more about the <a href=\"https://demos.creative-tim.com/docs-vision-ui-dashboard-chakra?ref=readme-vudchakra\" target=\"_blank\">documentation here</a>.\n\n**Example Pages**\n\nIf 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. Every page is spaced well, with attractive layouts and pleasing shapes. From specially designed dashboards for smart homes, virtual reality, and automotives to CRM admins, Vision UI Dashboard Free Chakra UI has everything you need to quickly set up an amazing project.\n\nView <a href=\"https://demos.creative-tim.com/vision-ui-dashboard-chakra?ref=readme-vudchakra\" target=\"_blank\">example pages here</a>.\n\n**HELPFUL LINKS**\n\n- View <a href=\"https://github.com/creativetimofficial/vision-ui-dashboard-chakra\" target=\"_blank\">Github Repository</a>\n\n- Check <a href=\"https://www.creative-tim.com/knowledge-center?ref=readme-vudchakra\" target=\"_blank\">FAQ Page</a>\n\n#### Special thanks\n\nDuring 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:\n\n- [Chakra UI](https://chakra-ui.com/?ref=creative-tim) - Modern Open source framework\n- [ApexCharts.js](https://apexcharts.com?ref=creative-tim) - Modern & Interactive Open-source charts\n- [Quill Editor](https://www.npmjs.com/package/react-quill?ref=creative-tim) - ReactJS Text Editor provided by Quill\n- [React Table](https://react-table.tanstack.com/docs/overview?ref=creative-tim) - Collection of hooks for building powerful ReactJD tables\n- [ReactJS](https://reactjs.org?ref=creative-tim) - A popular JavaScript library for building user interfaces\n\nLet us know your thoughts below. And good luck with development!\n\n## Table of Contents\n\n- [Vision UI Dashboard Free Chakra] (https://demos.creative-tim.com/vision-ui-dashboard-chakra/?ref=readme-vudchakra)\n- [Table of Contents](#table-of-contents)\n- [Versions](#versions)\n- [Demo](#demo)\n- [Quick start](#quick-start)\n- [Deploy](#deploy)\n- [Documentation](#documentation)\n- [File Structure](#file-structure)\n- [Browser Support](#browser-support)\n- [Resources](#resources)\n- [Reporting Issues](#reporting-issues)\n- [Licensing](#licensing)\n- [Useful Links](#useful-links)\n- [Social Media](#social-media)\n\n## Versions\n\n[<img src=\"https://github.com/creativetimofficial/public-assets/blob/master/logos/react-logo.jpg?raw=true\" width=\"60\" height=\"60\" />](https://www.creative-tim.com/product/vision-ui-dashboard-react?ref=readme-vudchakra)[<img src=\"https://github.com/creativetimofficial/public-assets/blob/master/logos/chakra-logo.jpg?raw=true\" width=\"60\" height=\"60\" />](https://www.creative-tim.com/product/vision-ui-dashboard-chakra?ref=readme-vudchakra)\n\n| React | Chakra |\n| ]------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [![Vision UI Dashboard Free React] (https://i.ibb.co/RYKtQ4M/vision-ui-free-react-ct.png)](https://www.creative-tim.com/product/vision-ui-dashboard-react?ref=readme-vudchakra) | [![Vision UI Dashboard Free Chakra] (https://i.ibb.co/kg5mNxm/vision-ui-free-chakra-ct.png)](https://www.creative-tim.com/product/vision-ui-dashboard-chakra?ref=readme-vudchakra) |\n\n## Demo\n\n[View all Pages](https://demos.creative-tim.com/vision-ui-dashboard-chakra?ref=readme-vudchakra).\n\n# Quick start\n\nQuick start options:\n\n- Buy from [Creative Tim](https://www.creative-tim.com/product/vision-ui-dashboard-chakra?ref=readme-vudchakra).\n\n## Deploy\n\n:rocket: You can deploy your own version of the template to Genezio with one click:\n\n[![Deploy to Genezio](https://raw.githubusercontent.com/Genez-io/graphics/main/svg/deploy-button.svg)](https://app.genez.io/start/deploy?repository=https://github.com/creativetimofficial/vision-ui-dashboard-chakra&utm_source=github&utm_medium=referral&utm_campaign=github-creativetim&utm_term=deploy-project&utm_content=button-head)\n\n## Terminal Commands\n\n1. Download and Install NodeJs LTS version from [NodeJs Official Page](https://nodejs.org/en/download/).\n2. Navigate to the root / directory and run yarn install/npm install to install our local dependencies.\n\n## Documentation\n\nThe documentation for the Vision UI Dashboard Free is hosted at our [website](https://demos.creative-tim.com/docs-vision-ui-dashboard-chakra?ref=readme-vudchakra).\n\n## File Structure\n\nWithin the download you'll find the following directories and files:\n\n```\nvision-dashboard-chakra-free/\n├── .gitattributes\n├── .gitigonore\n├── CHANGELOG.md\n├── commit.sh\n├── gulpfile.js\n├── ISSUE_TEMPLATE.md\n├── jsconfig.json\n├── package.json\n├── README.md\n├── public\n│   ├── favicon.png\n│   ├── index.html\n│   ├── apple-icon.png\n│   ├── robots.txt\n│   └── manifest.json\n└── src\n    ├── assets\n    │   ├── img\n    │   └── svg\n    ├── components\n    │   ├── Card\n    │   │   ├── Card.js\n    │   │   ├── CardBody.js\n    │   │   └── CardHeader.js\n    │   ├── Charts\n    │   │   ├── BarChart.js\n    │   │   └── LineChart.js\n    │   ├── Configurator\n    │   │   └── Configurator.js\n    │   ├── FixedPlugin\n    │   │   └── FixedPlugin.js\n    │   ├── Footer\n    │   │   └── Footer.js\n    │   ├── GradientBorder\n    │   │   └── GradientBorder.js\n    │   ├── Icons\n    │   │   ├── IconBox.js\n    │   │   └── Icons.js\n    │   ├── Layout\n    │   │   ├── MainPanel.js\n    │   │   ├── PanelContainer.js\n    │   │   └── PanelContent.js\n    │   ├── Menu\n    │   │   └── ItemContent.js\n    │   ├── Navbars\n    │   │   ├── Searchbar\n    │   │   │   └── SearchBar.js\n    │   │   ├── AdminNavbar.js\n    │   │   ├── AdminNavbarLinks.js\n    │   │   └── AuthNavbar.js\n    │   ├── Other\n    │   │   ├── BillingRow.js\n    │   │   ├── InvoicesRow.js\n    │   │   └── TransactionRow.js\n    │   ├── Separator\n    │   │   └── Separator.js\n    │   ├── Sidebar\n    │   │   ├── Sidebar.js\n    │   │   └── SidebarHelp.js\n    │   └── Tables\n    │       ├── BillingRow.js\n    │       ├── DashboardTableRow.js\n    │       ├── InvoicesRow.js\n    │       ├── TablesProjectRow.js\n    │       ├── TablesTableRow.js\n    │       ├── TimelineRow.js\n    │       └── TransactionRow.js\n    ├── layouts\n    │   ├── Admin.js\n    │   ├── Auth.js\n    │   └── RTL.js\n    ├── theme\n    │   ├── additions\n    │   │   ├── card\n    │   │   │   ├── Card.js\n    │   │   │   ├── CardBody.js\n    │   │   │   └── CardHeader.js\n    │   │   ├── layout\n    │   │   │   ├── MainPanel.js\n    │   │   │   ├── PanelContainer.js\n    │   │   │   └── PanelContent.js\n    │   ├── components\n    │   │   ├── badge.js\n    │   │   ├── button.js\n    │   │   ├── link.js\n    │   │   └── drawer.js\n    │   ├── foundations\n    │   │   └── breakpoints.js\n    │   ├── bgAdmin.js\n    │   ├── bgAuth.js\n    │   ├── styles.js\n    │   ├── themeAdmin.js\n    │   └── themeAuth.js\n    ├── variables\n    │   ├── charts.js\n    │   └── general.js\n    ├── views\n    │   ├── Dashboard\n    │   │   ├── Billing.js\n    │   │   ├── Dashboard.js\n    │   │   ├── Profile.js\n    │   │   └── Tables.js\n    │   ├── Pages\n    │       ├── SignIn.js\n    │       └── SignUp.js\n    │   └── RTL\n    │       └── RTLPage.js\n    ├── index.js\n    └── routes.js\n```\n\n## Browser Support\n\nAt present, we officially aim to support the last two versions of the following browsers:\n\n<img src=\"https://github.com/creativetimofficial/public-assets/blob/master/logos/chrome-logo.png?raw=true\" width=\"64\" height=\"64\"> <img src=\"https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/firefox-logo.png\" width=\"64\" height=\"64\"> <img src=\"https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/edge-logo.png\" width=\"64\" height=\"64\"> <img src=\"https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/safari-logo.png\" width=\"64\" height=\"64\"> <img src=\"https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/opera-logo.png\" width=\"64\" height=\"64\">\n\n## Resources\n\n- [Live Preview](https://demos.creative-tim.com/vision-ui-dashboard-chakra?ref=readme-vudchakra)\n- [Buy Page](https://www.creative-tim.com/product/vision-ui-dashboard-chakra?ref=readme-vudchakra)\n- License Agreement: <https://www.creative-tim.com/license?ref=readme-vudchakra>\n- Documentation is [here](https://demos.creative-tim.com/docs-vision-ui-dashboard-chakra?ref=readme-vudchakra)\n- [Support](https://www.creative-tim.com/contact-us?ref=readme-vudchakra)\n- Issues: [Github Issues Page](https://github.com/creativetimofficial/vision-ui-dashboard-chakra/issues)\n\n## Reporting Issues\n\nWe use GitHub Issues as the official bug tracker for the Vision UI Dashboard. Here are some advices for our users that want to report an issue:\n\n1. Make sure that you are using the latest version of the Vision UI Dashboard. Check the CHANGELOG from your dashboard on our [CHANGE LOG File](https://github.com/creativetimofficial/vision-ui-dashboard-chakra/blob/main/CHANGELOG.md?ref=readme-vudchakra).\n2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.\n3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.\n\n## Technical Support or Questions\n\nIf you have questions or need help integrating the product please [contact us](https://www.creative-tim.com/contact-us?ref=readme-vudchakra) instead of opening an issue.\n\n## Licensing\n\n- Copyright 2022 [Creative Tim](https://www.creative-tim.com?ref=readme-vudchakra)\n\n- Creative Tim [License](https://www.creative-tim.com/license?ref=readme-vudchakra)\n\n## Useful Links\n\n- [More products](https://www.creative-tim.com/templates?ref=readme-vudchakra) from Creative Tim\n\n- [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w)\n\n- [Freebies](https://www.creative-tim.com/bootstrap-themes/free?ref=readme-vudchakra) from Creative Tim\n\n- [Affiliate Program](https://www.creative-tim.com/affiliates/new?ref=readme-vudchakra) (earn money)\n\n- [More products](https://simmmple.com/?ref=readme-vudchakra) from Simmmple\n\n### Social Media - Creative Tim\n\nTwitter: <https://twitter.com/CreativeTim>\n\nFacebook: <https://www.facebook.com/CreativeTim>\n\nDribbble: <https://dribbble.com/creativetim>\n\nInstagram: <https://www.instagram.com/CreativeTimOfficial>\n\n### Social Media - Simmmple\n\nTwitter: <https://twitter.com/simmmple_web>\n\nFacebook: <https://www.facebook.com/simmmple.web>\n\nDribbble: <https://dribbble.com/simmmple>\n\nInstagram: <https://www.instagram.com/simmmple.web>\n"
  },
  {
    "path": "commit.sh",
    "content": ""
  },
  {
    "path": "genezio.yaml",
    "content": "name: vision-ui-dashboard-chakra\nregion: us-east-1\nyamlVersion: 2\nfrontend:\n    path: .\n    publish: build\n    scripts:\n        deploy:\n            - npm install --legacy-peer-deps\n            - npm run build"
  },
  {
    "path": "gulpfile.js",
    "content": "const gulp = require(\"gulp\");\nconst gap = require(\"gulp-append-prepend\");\n\ngulp.task(\"licenses\", async function () {\n  // this is to add Creative Tim licenses in the production mode for the minified js\n  gulp\n    .src(\"build/static/js/*chunk.js\", { base: \"./\" })\n    .pipe(\n      gap.prependText(`/*!\n\n      =========================================================\n      * Vision UI Free Chakra - v1.0.0\n      =========================================================\n      \n      * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n      * Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n      * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n      \n      * Design and Coded by Simmmple & Creative Tim\n      \n      =========================================================\n      \n      * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n      \n      */`)\n    )\n    .pipe(gulp.dest(\"./\", { overwrite: true }));\n\n  // this is to add Creative Tim licenses in the production mode for the minified html\n  gulp\n    .src(\"build/index.html\", { base: \"./\" })\n    .pipe(\n      gap.prependText(`<!--\n      /*!\n\n      =========================================================\n      * Vision UI Free Chakra - v1.0.0\n      =========================================================\n      \n      * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n      * Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n      * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n      \n      * Design and Coded by Simmmple & Creative Tim\n      \n      =========================================================\n      \n      * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n      \n      */\n      -->`)\n    )\n    .pipe(gulp.dest(\"./\", { overwrite: true }));\n\n  // this is to add Creative Tim licenses in the production mode for the minified css\n  gulp\n    .src(\"build/static/css/*chunk.css\", { base: \"./\" })\n    .pipe(\n      gap.prependText(`/*!\n\n      =========================================================\n      * Vision UI Free Chakra - v1.0.0\n      =========================================================\n      \n      * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n      * Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n      * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n      \n      * Design and Coded by Simmmple & Creative Tim\n      \n      =========================================================\n      \n      * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n      \n      */`)\n    )\n    .pipe(gulp.dest(\"./\", { overwrite: true }));\n  return;\n});\n"
  },
  {
    "path": "jsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"baseUrl\": \"src\",\n    \"paths\": {\n      \"*\": [\"src/*\"]\n    }\n  }\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"vision-dashboard-chakra\",\n  \"version\": \"1.0.1\",\n  \"private\": true,\n  \"homepage\": \"https://demos.creative-tim.com/vision-ui-dashboard-chakra/#/\",\n  \"dependencies\": {\n    \"@chakra-ui/icons\": \"^1.1.5\",\n    \"@chakra-ui/react\": \"1.8.8\",\n    \"@chakra-ui/system\": \"^1.12.1\",\n    \"@chakra-ui/theme-tools\": \"^1.3.6\",\n    \"@emotion/cache\": \"^11.4.0\",\n    \"@emotion/react\": \"^11.4.0\",\n    \"@emotion/styled\": \"^11.3.0\",\n    \"@fontsource/open-sans\": \"^4.5.0\",\n    \"@fontsource/raleway\": \"^4.5.0\",\n    \"@fontsource/roboto\": \"^4.5.0\",\n    \"ajv\": \"^8.17.1\",\n    \"apexcharts\": \"^3.27.3\",\n    \"classnames\": \"2.3.1\",\n    \"framer-motion\": \"^4.1.17\",\n    \"match-sorter\": \"6.3.0\",\n    \"moment\": \"2.29.1\",\n    \"nouislider\": \"15.0.0\",\n    \"react\": \"17.0.2\",\n    \"react-apexcharts\": \"^1.3.9\",\n    \"react-big-calendar\": \"0.33.2\",\n    \"react-bootstrap-sweetalert\": \"5.2.0\",\n    \"react-dom\": \"17.0.2\",\n    \"react-github-btn\": \"^1.2.1\",\n    \"react-icons\": \"^4.2.0\",\n    \"react-jvectormap\": \"0.0.16\",\n    \"react-leaflet-semicircle\": \"^3.0.3\",\n    \"react-router-dom\": \"5.2.0\",\n    \"react-scripts\": \"5.0.0\",\n    \"react-swipeable-views\": \"0.14.0\",\n    \"react-table\": \"7.7.0\",\n    \"stylis\": \"^4.0.10\",\n    \"stylis-plugin-rtl\": \"^2.1.0\"\n  },\n  \"resolutions\": {\n    \"react-error-overlay\": \"6.0.9\"\n  },\n  \"target\": \"web\",\n  \"scripts\": {\n    \"start\": \"react-scripts start\",\n    \"build\": \"cross-env PUBLIC_URL=/ cross-env CI=false react-scripts build && gulp licenses\",\n    \"test\": \"react-scripts test --env=jsdom\",\n    \"eject\": \"react-scripts eject\",\n    \"deploy\": \"npm run build\",\n    \"lint:check\": \"eslint . --ext=js,jsx;  exit 0\",\n    \"lint:fix\": \"eslint . --ext=js,jsx --fix;  exit 0\",\n    \"install:clean\": \"rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start\"\n  },\n  \"optionalDependencies\": {\n    \"@babel/core\": \"7.16.12\",\n    \"typescript\": \"4.2.4\"\n  },\n  \"devDependencies\": {\n    \"@babel/plugin-transform-react-jsx-source\": \"^7.14.5\",\n    \"cross-env\": \"^7.0.3\",\n    \"eslint-config-prettier\": \"8.3.0\",\n    \"eslint-plugin-prettier\": \"3.4.0\",\n    \"gulp\": \"4.0.2\",\n    \"gulp-append-prepend\": \"1.0.9\",\n    \"prettier\": \"2.2.1\"\n  },\n  \"browserslist\": {\n    \"production\": [\n      \">0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": [\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  }\n}\n"
  },
  {
    "path": "public/index.html",
    "content": "<!--/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master/LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\n-->\n<!DOCTYPE html>\n<html lang=\"en\" dir=\"ltr\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta\n      name=\"viewport\"\n      content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"\n    />\n    <meta name=\"theme-color\" content=\"#000000\" />\n    <!--\n          manifest.json provides metadata used when your web app is added to the\n          homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/\n        -->\n    <link rel=\"manifest\" href=\"%PUBLIC_URL%/manifest.json\" />\n    <link rel=\"shortcut icon\" href=\"%PUBLIC_URL%/favicon.png\" />\n    <link\n      rel=\"apple-touch-icon\"\n      sizes=\"76x76\"\n      href=\"%PUBLIC_URL%/apple-icon.png\"\n    />\n    <link\n      rel=\"stylesheet\"\n      href=\"//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css\"\n    />\n    <script src=\"//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js\"></script>\n    <link\n      rel=\"stylesheet\"\n      href=\"https://cdnjs.cloudflare.com/ajax/libs/jvectormap/2.0.4/jquery-jvectormap.css\"\n      type=\"text/css\"\n      media=\"screen\"\n    />\n    <link\n      rel=\"stylesheet\"\n      href=\"//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css\"\n      type=\"text/css\"\n      media=\"screen\"\n    />\n    <!--     Fonts and icons     -->\n    <link\n      href=\"https://use.fontawesome.com/releases/v5.0.7/css/all.css\"\n      rel=\"stylesheet\"\n    />\n    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/icon?family=Material+Icons\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE\"></script>\n    <link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"./favicon.png\" />\n    <!--\n          Notice the use of %PUBLIC_URL% in the tags above.\n          It will be replaced with the URL of the `public` folder during the build.\n          Only files inside the `public` folder can be referenced from the HTML.\n\n          Unlike \"/favicon.ico\" or \"favicon.ico\", \"%PUBLIC_URL%/favicon.ico\" will\n          work correctly both with client-side routing and a non-root public URL.\n          Learn how to configure a non-root public URL by running `npm run build`.\n        -->\n    <title>Vision UI Dashboard Chakra by Creative Tim & Simmmple</title>\n    <style>\n      @import url(https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/plus-jakarta-display.min.css);\n\n      body {\n        font-family: \"Plus Jakarta Display\", sans-serif;\n      }\n    </style>\n  </head>\n  <body>\n    <noscript> You need to enable JavaScript to run this app. </noscript>\n    <div id=\"root\"></div>\n    <!--\n          This HTML file is a template.\n          If you open it directly in the browser, you will see an empty page.\n\n          You can add webfonts, meta tags, or analytics to this file.\n          The build step will place the bundled scripts into the <body> tag.\n\n          To begin the development, run `npm start` or `yarn start`.\n          To create a production bundle, use `npm run build` or `yarn build`.\n        -->\n  </body>\n</html>\n"
  },
  {
    "path": "public/manifest.json",
    "content": "{\n  \"short_name\": \"React App\",\n  \"name\": \"Create React App Sample\",\n  \"icons\": [\n    {\n      \"src\": \"favicon.ico\",\n      \"sizes\": \"64x64 32x32 24x24 16x16\",\n      \"type\": \"image/x-icon\"\n    }\n  ],\n  \"start_url\": \"./index.html\",\n  \"display\": \"standalone\",\n  \"theme_color\": \"#000000\",\n  \"background_color\": \"#ffffff\"\n}\n"
  },
  {
    "path": "public/robots.txt",
    "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n"
  },
  {
    "path": "src/components/Card/Card.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport { Box, useStyleConfig } from \"@chakra-ui/react\";\nfunction Card(props) {\n  const { variant, children, ...rest } = props;\n  const styles = useStyleConfig(\"Card\", { variant });\n  // Pass the computed styles into the `__css` prop\n  return (\n    <Box __css={styles} {...rest}>\n      {children}\n    </Box>\n  );\n}\n\nexport default Card;\n"
  },
  {
    "path": "src/components/Card/CardBody.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport { Box, useStyleConfig } from \"@chakra-ui/react\";\nfunction CardBody(props) {\n  const { variant, children, ...rest } = props;\n  const styles = useStyleConfig(\"CardBody\", { variant });\n  // Pass the computed styles into the `__css` prop\n  return (\n    <Box __css={styles} {...rest}>\n      {children}\n    </Box>\n  );\n}\n\nexport default CardBody;\n"
  },
  {
    "path": "src/components/Card/CardHeader.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport { Box, useStyleConfig } from \"@chakra-ui/react\";\nfunction CardHeader(props) {\n  const { variant, children, ...rest } = props;\n  const styles = useStyleConfig(\"CardHeader\", { variant });\n  // Pass the computed styles into the `__css` prop\n  return (\n    <Box __css={styles} {...rest}>\n      {children}\n    </Box>\n  );\n}\n\nexport default CardHeader;\n"
  },
  {
    "path": "src/components/Charts/BarChart.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport React, { Component } from \"react\";\nimport Chart from \"react-apexcharts\";\n\nclass BarChart extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      chartData: [],\n      chartOptions: {},\n    };\n  }\n\n  componentDidMount() {\n    const { barChartData, barChartOptions } = this.props;\n\n    this.setState({\n      chartData: barChartData,\n      chartOptions: barChartOptions,\n    });\n  }\n\n  render() {\n    return (\n      <Chart\n        options={this.state.chartOptions}\n        series={this.state.chartData}\n        type='bar'\n        width='100%'\n        height='100%'\n      />\n    );\n  }\n}\n\nexport default BarChart;\n"
  },
  {
    "path": "src/components/Charts/LineChart.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport React from \"react\";\nimport ReactApexChart from \"react-apexcharts\";\n\nclass LineChart extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      chartData: [],\n      chartOptions: {},\n    };\n  }\n\n  componentDidMount() {\n    const { lineChartData, lineChartOptions } = this.props;\n\n    this.setState({\n      chartData: lineChartData,\n      chartOptions: lineChartOptions,\n    });\n  }\n\n  render() {\n    return (\n      <ReactApexChart\n        options={this.state.chartOptions}\n        series={this.state.chartData}\n        type='area'\n        width='100%'\n        height='100%'\n      />\n    );\n  }\n}\n\nexport default LineChart;\n"
  },
  {
    "path": "src/components/Configurator/Configurator.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\n// Chakra Imports\nimport {\n  Box,\n  Button,\n  Drawer,\n  DrawerBody,\n  DrawerCloseButton,\n  DrawerContent,\n  DrawerHeader,\n  Flex,\n  Link,\n  Switch,\n  Text,\n  DarkMode,\n  LightMode,\n} from \"@chakra-ui/react\";\nimport GitHubButton from \"react-github-btn\";\nimport { Separator } from \"components/Separator/Separator\";\nimport PropTypes from \"prop-types\";\nimport React, { useState } from \"react\";\nimport { FaTwitter, FaFacebook } from \"react-icons/fa\";\n\nexport default function Configurator(props) {\n  const { secondary, isOpen, onClose, fixed, ...rest } = props;\n  const [switched, setSwitched] = useState(props.isChecked);\n\n  // Chakra Color Mode\n  let fixedDisplay = \"flex\";\n  if (props.secondary) {\n    fixedDisplay = \"none\";\n  }\n  let colorButton = \"white\";\n  const secondaryButtonColor = \"white\";\n  const settingsRef = React.useRef();\n  return (\n    <>\n      <Drawer\n        isOpen={props.isOpen}\n        onClose={props.onClose}\n        placement={document.documentElement.dir === \"rtl\" ? \"left\" : \"right\"}\n        finalFocusRef={settingsRef}\n        blockScrollOnMount={false}>\n        <DrawerContent\n          bg='linear-gradient(111.84deg, rgba(6, 11, 38, 0.94) 59.3%, rgba(26, 31, 55, 0) 100%)'\n          backdropFilter='blur(42px)'>\n          <DrawerHeader pt='24px' px='24px'>\n            <DrawerCloseButton color='white' />\n            <Text color='white' fontSize='xl' fontWeight='bold' mt='16px'>\n              Vision UI Configurator\n            </Text>\n            <Text color='white' fontSize='md' mb='16px'>\n              See your dashboard options.\n            </Text>\n            <Separator />\n          </DrawerHeader>\n          <DrawerBody w='340px' ps='24px' pe='40px'>\n            <Flex flexDirection='column'>\n              <Box\n                display={fixedDisplay}\n                justifyContent='space-between '\n                mb='20px'>\n                <DarkMode>\n                  <Text color='white' fontSize='md' fontWeight='600' mb='4px'>\n                    Navbar Fixed\n                  </Text>\n                  <Switch\n                    colorScheme='brand'\n                    isChecked={switched}\n                    onChange={(event) => {\n                      if (switched === true) {\n                        props.onSwitch(false);\n                        setSwitched(false);\n                      } else {\n                        props.onSwitch(true);\n                        setSwitched(true);\n                      }\n                    }}\n                  />\n                </DarkMode>\n              </Box>\n              <Box>\n                <Box>\n                  <Link\n                    href='https://www.creative-tim.com/product/vision-ui-dashboard-chakra'\n                    w='100%'\n                    mb='16px'>\n                    <Button\n                      w='100%'\n                      mb='16px'\n                      bg='brand.200'\n                      color={colorButton}\n                      fontSize='xs'\n                      variant='brand'\n                      px='30px'>\n                      Free Download\n                    </Button>\n                  </Link>\n                  <Link\n                    href='https://demos.creative-tim.com/docs-vision-ui-dashboard-chakra/'\n                    w='100%'>\n                    <Button\n                      w='100%'\n                      color={secondaryButtonColor}\n                      fontSize='xs'\n                      variant='outlineWhite'\n                      px='20px'\n                      mb='16px'>\n                      <Text textDecorationColor='none'>Documentation</Text>\n                    </Button>\n                  </Link>\n                </Box>\n                <Flex\n                  justifyContent='center'\n                  alignItems='center'\n                  w='100%'\n                  mb='16px'>\n                  <GitHubButton\n                    href='https://github.com/creativetimofficial/vision-ui-dashboard-chakra'\n                    data-icon='octicon-star'\n                    data-show-count='true'\n                    aria-label='Star creativetimofficial/vision-ui-dashboard-chakra on GitHub'>\n                    Star\n                  </GitHubButton>\n                </Flex>\n                <Box w='100%'>\n                  <Text color='white' mb='6px' textAlign='center'>\n                    Thank you for sharing!\n                  </Text>\n                  <LightMode>\n                    <Flex justifyContent='center' alignContent='center'>\n                      <Link\n                        isExternal='true'\n                        href='https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fvision-ui-dashboard-chakra&text=Check%20vision%20UI%20Dashboard%20made%20by%20%40CreativeTim%20and%20%40simmmple_web%20%23webdesign%20%23dashboard%20%23chakra'>\n                        <Button\n                          colorScheme='twitter'\n                          leftIcon={<FaTwitter />}\n                          me='10px'>\n                          <Text>Tweet</Text>\n                        </Button>\n                      </Link>\n                      <Link\n                        isExternal='true'\n                        href='https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fvision-ui-dashboard-chakra'>\n                        <Button\n                          colorScheme='facebook'\n                          leftIcon={<FaFacebook />}>\n                          <Text>Share</Text>\n                        </Button>\n                      </Link>\n                    </Flex>\n                  </LightMode>\n                </Box>\n              </Box>\n            </Flex>\n          </DrawerBody>\n        </DrawerContent>\n      </Drawer>\n    </>\n  );\n}\nConfigurator.propTypes = {\n  secondary: PropTypes.bool,\n  isOpen: PropTypes.func,\n  onClose: PropTypes.func,\n  fixed: PropTypes.bool,\n};\n"
  },
  {
    "path": "src/components/FixedPlugin/FixedPlugin.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\n// Chakra Imports\nimport { Button, useColorModeValue } from \"@chakra-ui/react\";\n// Custom Icons\nimport { SettingsIcon } from \"components/Icons/Icons\";\nimport PropTypes from \"prop-types\";\nimport React from \"react\";\n\nexport default function FixedPlugin(props) {\n  const { secondary, onChange, onSwitch, fixed, ...rest } = props;\n  // Chakra Color Mode\n  let navbarIcon = \"white\";\n  let bgButton = \"brand.200\";\n  // if (props.secondary) {\n  //   fixedDisplay = \"none\";\n  // }\n\n  const settingsRef = React.useRef();\n  return (\n    <>\n      <Button\n        h='52px'\n        w='52px'\n        onClick={props.onOpen}\n        bg={bgButton}\n        position='fixed'\n        variant='no-hover'\n        left={document.documentElement.dir === \"rtl\" ? \"35px\" : \"\"}\n        right={document.documentElement.dir === \"rtl\" ? \"\" : \"35px\"}\n        bottom='30px'\n        borderRadius='50px'\n        boxShadow='0 2px 12px 0 rgb(0 0 0 / 16%)'>\n        <SettingsIcon\n          cursor='pointer'\n          ref={settingsRef}\n          color={navbarIcon}\n          w='20px'\n          h='20px'\n        />\n      </Button>\n    </>\n  );\n}\n\nFixedPlugin.propTypes = {\n  fixed: PropTypes.bool,\n  onChange: PropTypes.func,\n  onSwitch: PropTypes.func,\n};\n"
  },
  {
    "path": "src/components/Footer/AuthFooter.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\n/*eslint-disable*/\nimport React from \"react\";\nimport { Flex, Link, List, ListItem, Text } from \"@chakra-ui/react\";\n\nexport default function AuthFooter(props) {\n  return (\n    <Flex\n      flexDirection={{\n        base: \"column\",\n      }}\n      alignItems={{\n        base: \"center\",\n      }}\n      justifyContent='space-between'\n      pb='20px'\n      fontSize='sm'>\n      <Text\n        color='white'\n        textAlign={{\n          base: \"center\",\n        }}\n        mb={{ base: \"20px\" }}>\n        &copy; {1900 + new Date().getYear()},{\" \"}\n        <Text as='span' mx='2px'>\n          {document.documentElement.dir === \"rtl\"\n            ? \" مصنوع من ❤️ بواسطة\"\n            : \"Made with ❤️ by \"}\n        </Text>\n        <Link href='https://www.simmmple.com' target='_blank'>\n          {document.documentElement.dir === \"rtl\"\n            ? \" توقيت الإبداعية\"\n            : \"Simmmple \"}\n        </Link>\n        &\n        <Link href='https://www.creative-tim.com' target='_blank'>\n          {document.documentElement.dir === \"rtl\" ? \"سيممبل \" : \" Creative Tim\"}\n        </Link>\n        {document.documentElement.dir === \"rtl\"\n          ? \"للحصول على ويب أفضل\"\n          : \" for a better web\"}\n      </Text>\n      <List display='flex'>\n        <ListItem\n          me={{\n            base: \"20px\",\n          }}>\n          <Link color='white' fontSize='sm' href='https://www.simmmple.com'>\n            {document.documentElement.dir === \"rtl\"\n              ? \"توقيت الإبداعية\"\n              : \"Simmmple\"}\n          </Link>\n        </ListItem>\n        <ListItem\n          me={{\n            base: \"20px\",\n          }}>\n          <Link color='white' fontSize='sm' href='https://www.creative-tim.com'>\n            {document.documentElement.dir === \"rtl\" ? \"سيممبل\" : \"Creative Tim\"}\n          </Link>\n        </ListItem>\n        <ListItem\n          me={{\n            base: \"20px\",\n          }}>\n          <Link\n            color='white'\n            fontSize='sm'\n            href='#blog'\n            href='https://creative-tim.com/blog'>\n            {document.documentElement.dir === \"rtl\" ? \"مدونة\" : \"Blog\"}\n          </Link>\n        </ListItem>\n        <ListItem>\n          <Link\n            color='white'\n            href='#license'\n            href='https://www.creative-tim.com/license'>\n            {document.documentElement.dir === \"rtl\" ? \"رخصة\" : \"License\"}\n          </Link>\n        </ListItem>\n      </List>\n    </Flex>\n  );\n}\n"
  },
  {
    "path": "src/components/Footer/Footer.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\n/*eslint-disable*/\nimport React from \"react\";\nimport { Flex, Link, List, ListItem, Text } from \"@chakra-ui/react\";\n\nexport default function Footer(props) {\n  return (\n    <Flex\n      flexDirection={{\n        base: \"column\",\n        xl: \"row\",\n      }}\n      alignItems={{\n        base: \"center\",\n        xl: \"start\",\n      }}\n      justifyContent='space-between'\n      px='30px'\n      pb='20px'>\n      <Text\n        fontSize='sm'\n        color='white'\n        textAlign={{\n          base: \"center\",\n          xl: \"start\",\n        }}\n        mb={{ base: \"20px\", xl: \"0px\" }}>\n        &copy; {1900 + new Date().getYear()},{\" \"}\n        <Text as='span'>\n          {document.documentElement.dir === \"rtl\"\n            ? \" مصنوع من ❤️ بواسطة\"\n            : \"Made with ❤️ by \"}\n        </Text>\n        <Link href='https://www.simmmple.com' target='_blank'>\n          {document.documentElement.dir === \"rtl\"\n            ? \" توقيت الإبداعية\"\n            : \"Simmmple \"}\n        </Link>\n        &\n        <Link href='https://www.creative-tim.com' target='_blank'>\n          {document.documentElement.dir === \"rtl\" ? \"سيممبل \" : \" Creative Tim\"}\n        </Link>\n        {document.documentElement.dir === \"rtl\"\n          ? \"للحصول على ويب أفضل\"\n          : \" for a better web\"}\n      </Text>\n      <List display='flex'>\n        <ListItem\n          me={{\n            base: \"20px\",\n            md: \"44px\",\n          }}>\n          <Link color='white' fontSize='sm' href='https://www.simmmple.com'>\n            {document.documentElement.dir === \"rtl\"\n              ? \"توقيت الإبداعية\"\n              : \"Simmmple\"}\n          </Link>\n        </ListItem>\n        <ListItem\n          me={{\n            base: \"20px\",\n            md: \"44px\",\n          }}>\n          <Link color='white' fontSize='sm' href='https://www.creative-tim.com'>\n            {document.documentElement.dir === \"rtl\" ? \"سيممبل\" : \"Creative Tim\"}\n          </Link>\n        </ListItem>\n        <ListItem\n          me={{\n            base: \"20px\",\n            md: \"44px\",\n          }}>\n          <Link\n            color='white'\n            fontSize='sm'\n            href='https://creative-tim.com/blog'>\n            {document.documentElement.dir === \"rtl\" ? \"مدونة\" : \"Blog\"}\n          </Link>\n        </ListItem>\n        <ListItem>\n          <Link\n            color='white'\n            fontSize='sm'\n            href='https://www.creative-tim.com/license'>\n            {document.documentElement.dir === \"rtl\" ? \"رخصة\" : \"License\"}\n          </Link>\n        </ListItem>\n      </List>\n    </Flex>\n  );\n}\n\n"
  },
  {
    "path": "src/components/GradientBorder/GradientBorder.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport React from \"react\";\nimport { Flex } from \"@chakra-ui/react\";\n\nexport default function GradientBorder(props) {\n  const { variant, children, ...rest } = props;\n  return (\n    <Flex\n      p='2px'\n      justify='center'\n      align='center'\n      bg='radial-gradient(69.43% 69.43% at 50% 50%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%),\n      radial-gradient(60% 51.57% at 50% 50%, #582CFF 0%, rgba(88, 44, 255, 0) 100%),\n      radial-gradient(54.8% 53% at 50% 50%, #151515 0%, rgba(21, 21, 21, 0) 100%)'\n      {...rest}>\n      {children}\n    </Flex>\n  );\n}\n"
  },
  {
    "path": "src/components/Icons/IconBox.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport React from \"react\";\nimport { Flex } from \"@chakra-ui/react\";\n\nexport default function IconBox(props) {\n  const { children, ...rest } = props;\n\n  return (\n    <Flex\n      alignItems={\"center\"}\n      justifyContent={\"center\"}\n      borderRadius={\"12px\"}\n      {...rest}>\n      {children}\n    </Flex>\n  );\n}\n"
  },
  {
    "path": "src/components/Icons/Icons.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport { createIcon } from \"@chakra-ui/icons\";\n\nexport const AdobexdLogo = createIcon({\n  displayName: \"AdobexdLogo\",\n  viewBox: \"0 0 24 24\",\n  path: (\n    <g clip-path='url(#clip0)'>\n      <path\n        d='M4.042 0h12.916A3.539 3.539 0 0120.5 3.542v12.416a3.539 3.539 0 01-3.542 3.542H4.042A3.539 3.539 0 01.5 15.958V3.542A3.539 3.539 0 014.042 0z'\n        fill='#470137'\n      />\n      <path\n        d='M11.017 5.124l-2.5 4.125 2.666 4.375a.143.143 0 01.017.1c-.008.034-.042.009-.092.017H9.2c-.133 0-.225-.008-.283-.092-.175-.35-.359-.691-.534-1.041a33.608 33.608 0 00-.566-1.05c-.2-.359-.4-.717-.6-1.084H7.2c-.175.359-.367.717-.558 1.075-.192.359-.384.717-.567 1.067-.192.35-.383.708-.575 1.05-.033.083-.1.092-.192.092H3.475c-.033 0-.058.016-.058-.025a.116.116 0 01.016-.092l2.592-4.25L3.5 5.116c-.025-.033-.033-.067-.017-.083.017-.025.05-.034.084-.034h1.891c.042 0 .084.009.117.017a.236.236 0 01.083.075c.159.358.342.717.534 1.075.2.358.391.708.6 1.058.2.35.383.7.558 1.059h.017c.175-.367.358-.725.541-1.075.184-.35.375-.7.567-1.05.192-.35.375-.709.558-1.05.009-.034.025-.067.05-.084a.159.159 0 01.109-.016h1.758a.077.077 0 01.091.058c.009.008-.008.042-.024.058zM14.866 13.917a4.144 4.144 0 01-1.791-.375 2.906 2.906 0 01-1.259-1.134c-.308-.508-.458-1.141-.458-1.9a3.423 3.423 0 011.783-3.05c.584-.325 1.284-.483 2.109-.483.041 0 .1 0 .175.008.075.009.158.009.258.017V4.367c0-.059.025-.092.083-.092h1.692c.042-.008.075.025.083.058v7.95c0 .15.009.317.017.5.017.175.025.342.033.484 0 .058-.025.108-.083.133a6.365 6.365 0 01-1.358.4 7.35 7.35 0 01-1.284.117zm.817-1.667V8.583c-.075-.016-.15-.033-.225-.041-.092-.009-.183-.017-.275-.017-.325 0-.65.067-.942.217-.283.141-.525.35-.708.616-.183.267-.275.625-.275 1.059-.008.291.042.583.142.858.083.225.208.425.375.592.158.15.35.266.566.333.225.075.459.108.692.108.125 0 .242-.008.35-.016a.73.73 0 00.3-.042z'\n        fill='#FF61F6'\n      />\n    </g>\n  ),\n});\n\nexport const AtlassianLogo = createIcon({\n  displayName: \"AtlassianLogo\",\n  viewBox: \"0 0 24 24\",\n  path: (\n    <g>\n      <path\n        d='M6.427 9.239a.57.57 0 00-.798-.108.591.591 0 00-.167.209l-4.9 9.803a.586.586 0 00.524.847h6.827a.562.562 0 00.523-.324c1.474-3.043.58-7.67-2.01-10.427z'\n        fill='#2684FF'\n      />\n      <path\n        d='M10.028.318a12.932 12.932 0 00-.755 12.765l3.292 6.583a.586.586 0 00.523.324h6.826a.583.583 0 00.586-.585c0-.091-.02-.18-.06-.262L11.024.315a.552.552 0 00-.997 0v.003z'\n        fill='#2684FF'\n      />\n    </g>\n  ),\n});\n\nexport const CartIcon = createIcon({\n  displayName: \"CartIcon\",\n  viewBox: \"0 0 24 24\",\n  path: (\n    <path\n      fill='currentColor'\n      d='M7.984 19.937a1.406 1.406 0 100-2.812 1.406 1.406 0 000 2.812zM17.828 19.937a1.406 1.406 0 100-2.812 1.406 1.406 0 000 2.812zM20.324 5.558a1.051 1.051 0 00-.815-.386H6.134l-.27-1.528a.703.703 0 00-.692-.581H2.359a.703.703 0 000 1.406h2.223L6.59 15.841a.703.703 0 00.692.581h11.25a.703.703 0 100-1.406H7.871l-.248-1.406h10.62a1.057 1.057 0 001.035-.848l1.266-6.328a1.055 1.055 0 00-.22-.876z'\n    />\n  ),\n});\n\nexport const ClockIcon = createIcon({\n  displayName: \"ClockIcon\",\n  viewBox: \"0 0 24 24\",\n  path: (\n    <g>\n      <g>\n        <rect fill='none' height='24' width='24' />\n      </g>\n      <g>\n        <g>\n          <g>\n            <path\n              fill='currentColor'\n              d='M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M16.2,16.2L11,13V7h1.5v5.2l4.5,2.7L16.2,16.2z'\n            />\n          </g>\n        </g>\n      </g>\n    </g>\n  ),\n});\nexport const CreativeTimLogo = createIcon({\n  displayName: \"CreativeTimLogo\",\n  viewBox: \"0 0 100 100\",\n  path: (\n    <g\n      xmlns='http://www.w3.org/2000/svg'\n      width='50px'\n      height='50px'\n      version='1.1'>\n      <g\n        id='logo-creative-tim-black'\n        stroke='none'\n        stroke-width='1'\n        fill='none'\n        fill-rule='evenodd'>\n        <g\n          id='icon'\n          transform='translate(15.000000, 19.000000)'\n          fill='currentColor'\n          fill-rule='nonzero'>\n          <path\n            d='M66.4346744,1.49018376e-13 L3.56968951,1.49018376e-13 C1.59820443,1.49018376e-13 -2.98036753e-13,1.59820443 -2.98036753e-13,3.56968951 L-2.98036753e-13,33.5035241 C-2.98036753e-13,35.4750091 1.59820443,37.0732136 3.56968951,37.0732136 L16.4677598,37.0732136 L16.4677598,66.4346744 C16.4666001,67.3810129 16.8417189,68.288989 17.5104719,68.9585615 C18.1792249,69.628134 19.0867408,70.0043639 20.03308,70.0043639 L49.9669146,70.0043639 C51.9383997,70.0043639 53.5366041,68.4061595 53.5366041,66.4346744 L53.5366041,37.0863214 L66.4346744,37.0863214 C67.3810136,37.0863221 68.2885296,36.7100915 68.9572826,36.0405189 C69.6260355,35.3709464 70.0011544,34.4629704 70,33.5166319 L70,3.56968951 C70.0011544,2.62335099 69.6260355,1.71537495 68.9572826,1.04580242 C68.2885296,0.37622988 67.3810136,1.49018376e-13 66.4346744,1.49018376e-13 Z M4.13769396,4.14206323 L32.9311503,4.14206323 L32.9311503,32.9355196 L4.13769396,32.9355196 L4.13769396,4.14206323 Z M49.3989102,65.86667 L20.6054538,65.86667 L20.6054538,37.0863214 L49.3989102,37.0863214 L49.3989102,65.86667 Z M65.8623007,32.9355196 L37.0688443,32.9355196 L37.0688443,4.14206323 L65.8623007,4.14206323 L65.8623007,32.9355196 Z'\n            id='Shape'\n          />\n          <path\n            d='M23.6988934,23.3056595 C24.5142794,24.0708897 25.7898859,24.0506562 26.5805917,23.2599503 C27.3712976,22.4692445 27.3915311,21.193638 26.6263009,20.378252 L20.015603,13.767554 C19.2050095,12.9645312 17.8987889,12.9645312 17.0881954,13.767554 L10.4600204,20.378252 C9.90907005,20.8953125 9.68342943,21.6713831 9.87125954,22.4032422 C10.0590897,23.1351013 10.6305787,23.7065903 11.3624377,23.8944204 C12.0942968,24.0822505 12.8703675,23.8566099 13.387428,23.3056595 L18.5344222,18.1586654 L23.6988934,23.3056595 Z'\n            id='Path'\n          />\n          <path\n            d='M46.3185783,23.3056595 L51.4655725,18.1586654 L56.6125667,23.3056595 C57.4279526,24.0708897 58.7035592,24.0506562 59.494265,23.2599503 C60.2849709,22.4692445 60.3052044,21.193638 59.5399742,20.378252 L52.9292763,13.767554 C52.1186828,12.9645312 50.8124622,12.9645312 50.0018687,13.767554 L43.3911708,20.378252 C42.6259406,21.193638 42.6461741,22.4692445 43.43688,23.2599503 C44.2275858,24.0506562 45.5031924,24.0708897 46.3185783,23.3056595 L46.3185783,23.3056595 Z'\n            id='Path'\n          />\n          <path\n            d='M29.8508185,46.6987044 C29.0342976,45.9346441 27.7586832,45.9567597 26.9691385,46.7486649 C26.1795937,47.54057 26.1612859,48.8162446 26.9277802,49.6304812 L33.5384782,56.2368099 C33.9262423,56.6258256 34.452915,56.8444779 35.002182,56.8444779 C35.5514489,56.8444779 36.0781217,56.6258256 36.4658857,56.2368099 L43.0765837,49.6304812 C43.6002952,49.1075502 43.8052442,48.3449453 43.6142284,47.6299323 C43.4232126,46.9149194 42.8652519,46.3561259 42.1505246,46.1640439 C41.4357974,45.971962 40.6728876,46.1757734 40.1491761,46.6987044 L35.002182,51.8500678 L29.8508185,46.6987044 Z'\n            id='Path'\n          />\n        </g>\n      </g>\n    </g>\n  ),\n\n  //   <chakra.svg\n  //   height=\"50px\"\n  //   width=\"50px\"\n  //   viewBox=\"0 0 100 100\"\n  //   fill=\"none\"\n  //   xmlns=\"http://www.w3.org/2000/svg\"\n  //   color={fill}\n  //   {...props}\n  // >\n  // </chakra.svg>\n});\n\nexport const CreditIcon = createIcon({\n  displayName: \"CreditIcon\",\n  viewBox: \"0 0 24 24\",\n  path: (\n    <path\n      fill='currentColor'\n      d='M1.406 17.023a2.461 2.461 0 002.461 2.46h14.766a2.461 2.461 0 002.46-2.46v-6.768H1.407v6.768zm2.9-3.34a1.318 1.318 0 011.319-1.318h2.11a1.318 1.318 0 011.318 1.318v.879a1.318 1.318 0 01-1.319 1.318H5.625a1.318 1.318 0 01-1.318-1.318v-.879zM18.633 4.014H3.867a2.46 2.46 0 00-2.46 2.461v1.143h19.687V6.475a2.46 2.46 0 00-2.461-2.46z'\n    />\n  ),\n});\n\nexport const DashboardLogo = createIcon({\n  displayName: \"DashboardLogo\",\n  viewBox: \"0 0 1000 257\",\n  path: (\n    <g width='998' height='257' viewBox='0 0 998 257' fill='none'>\n      <g clip-path='url(#clip0)'>\n        <path\n          d='M388.5 115.302C406.112 115.302 413.966 126.726 416.584 136.96L441.336 127.916C436.576 109.352 419.44 89.836 388.262 89.836C354.942 89.836 329 115.54 329 151.24C329 186.464 354.942 212.882 388.976 212.882C419.44 212.882 436.814 193.128 442.288 175.04L418.012 166.234C415.394 175.04 407.064 187.654 388.976 187.654C371.602 187.654 356.608 174.564 356.608 151.24C356.608 127.916 371.602 115.302 388.5 115.302Z'\n          fill='currentColor'\n        />\n        <path\n          d='M484.894 141.244C485.37 126.488 493.7 115.064 508.932 115.064C526.306 115.064 532.732 126.488 532.732 140.768V209.312H560.34V136.008C560.34 110.542 546.536 90.074 517.976 90.074C505.838 90.074 492.748 94.358 484.894 104.592V37H457.286V209.312H484.894V141.244Z'\n          fill='currentColor'\n        />\n        <path\n          d='M577.29 177.896C577.29 196.222 592.284 212.882 616.56 212.882C635.362 212.882 646.786 203.362 652.26 194.556C652.26 203.838 653.212 208.598 653.45 209.312H679.154C678.916 208.122 677.726 201.22 677.726 190.748V133.152C677.726 110.066 664.16 89.836 628.46 89.836C599.9 89.836 581.812 107.686 579.67 127.678L604.898 133.39C606.088 121.728 614.18 112.446 628.698 112.446C643.93 112.446 650.594 120.3 650.594 130.058C650.594 134.104 648.69 137.436 642.026 138.388L612.276 142.91C592.522 145.766 577.29 157.19 577.29 177.896ZM621.796 191.224C610.848 191.224 604.898 184.084 604.898 176.23C604.898 166.71 611.8 161.95 620.368 160.522L650.594 156V161.236C650.594 183.846 637.266 191.224 621.796 191.224Z'\n          fill='currentColor'\n        />\n        <path\n          d='M810.108 93.406H773.456L728.95 140.292V37H701.58V209.312H728.95V176.944L743.23 161.95L777.264 209.312H811.06L762.508 142.434L810.108 93.406Z'\n          fill='currentColor'\n        />\n        <path\n          d='M889.349 92.692C888.159 92.454 885.303 91.978 881.971 91.978C866.739 91.978 853.887 99.356 848.413 111.97V93.406H821.519V209.312H849.127V154.096C849.127 132.438 858.885 120.062 880.305 120.062C883.161 120.062 886.255 120.3 889.349 120.776V92.692Z'\n          fill='currentColor'\n        />\n        <path\n          d='M895.968 177.896C895.968 196.222 910.962 212.882 935.238 212.882C954.04 212.882 965.464 203.362 970.938 194.556C970.938 203.838 971.89 208.598 972.128 209.312H997.832C997.594 208.122 996.404 201.22 996.404 190.748V133.152C996.404 110.066 982.838 89.836 947.138 89.836C918.578 89.836 900.49 107.686 898.348 127.678L923.576 133.39C924.766 121.728 932.858 112.446 947.376 112.446C962.608 112.446 969.272 120.3 969.272 130.058C969.272 134.104 967.368 137.436 960.704 138.388L930.954 142.91C911.2 145.766 895.968 157.19 895.968 177.896ZM940.474 191.224C929.526 191.224 923.576 184.084 923.576 176.23C923.576 166.71 930.478 161.95 939.046 160.522L969.272 156V161.236C969.272 183.846 955.944 191.224 940.474 191.224Z'\n          fill='currentColor'\n        />\n        <rect width='257' height='257' rx='128.5' fill='#4FD1C5' />\n        <path\n          d='M69.5584 133.985L157.15 46.9959C158.787 45.3708 161.42 47.3484 160.315 49.3729L127.714 109.125C126.987 110.457 127.951 112.083 129.47 112.083H185.809C187.624 112.083 188.501 114.306 187.174 115.545L88.4456 207.687C86.6753 209.339 84.0405 207.011 85.4617 205.051L132.197 140.578C133.156 139.256 132.211 137.404 130.578 137.404H70.9677C69.1826 137.404 68.2917 135.243 69.5584 133.985Z'\n          fill='white'\n        />\n      </g>\n      <defs>\n        <linearGradient\n          id='paint0_linear'\n          x1='128.5'\n          y1='0'\n          x2='128.5'\n          y2='257'\n          gradientUnits='userSpaceOnUse'>\n          <stop stop-color='#7BCBD4' />\n          <stop offset='1' stop-color='#29C6B7' />\n        </linearGradient>\n        <clipPath id='clip0'>\n          <rect width='997.832' height='257' fill='white' />\n        </clipPath>\n      </defs>\n    </g>\n  ),\n});\n\nexport const DashboardLogoWhite = createIcon({\n  displayName: \"DashboardLogo\",\n  viewBox: \"0 0 163.5 42\",\n  path: (\n    <g fill='none'>\n      <path\n        d='M63.452 19.292c2.877 0 4.16 1.911 4.587 3.623l4.043-1.513c-.777-3.106-3.576-6.371-8.668-6.371-5.443 0-9.68 4.3-9.68 10.274 0 5.893 4.237 10.313 9.796 10.313 4.976 0 7.813-3.305 8.707-6.331l-3.965-1.473c-.427 1.473-1.788 3.583-4.742 3.583-2.837 0-5.286-2.19-5.286-6.092 0-3.903 2.449-6.013 5.208-6.013zM79.196 23.632c.078-2.469 1.438-4.38 3.926-4.38 2.838 0 3.887 1.911 3.887 4.3v11.47h4.51V22.755c0-4.26-2.255-7.685-6.92-7.685-1.982 0-4.12.716-5.403 2.429V6.19h-4.509v28.831h4.51V23.632zM94.287 29.765c0 3.066 2.449 5.853 6.414 5.853 3.071 0 4.936-1.592 5.83-3.066 0 1.553.156 2.35.195 2.47h4.198c-.039-.2-.233-1.355-.233-3.107v-9.637c0-3.862-2.216-7.247-8.047-7.247-4.664 0-7.619 2.986-7.968 6.332l4.12.955c.194-1.951 1.516-3.504 3.887-3.504 2.488 0 3.576 1.314 3.576 2.947 0 .677-.311 1.234-1.399 1.393l-4.859.757c-3.226.478-5.714 2.39-5.714 5.854zm7.269 2.23c-1.788 0-2.76-1.195-2.76-2.509 0-1.593 1.127-2.39 2.527-2.628l4.936-.757v.876c0 3.783-2.176 5.018-4.703 5.018zM132.312 15.628h-5.986l-7.269 7.845V6.191h-4.47v28.83h4.47v-5.416l2.332-2.508 5.559 7.924h5.52l-7.93-11.19 7.774-8.203zM145.254 15.509a6.3 6.3 0 00-1.205-.12c-2.487 0-4.587 1.235-5.481 3.345v-3.106h-4.392v19.393h4.509v-9.238c0-3.624 1.594-5.695 5.092-5.695.467 0 .972.04 1.477.12v-4.7zM146.335 29.765c0 3.066 2.449 5.853 6.414 5.853 3.071 0 4.937-1.592 5.831-3.066 0 1.553.156 2.35.194 2.47h4.199c-.039-.2-.234-1.355-.234-3.107v-9.637c0-3.862-2.215-7.247-8.046-7.247-4.665 0-7.619 2.986-7.969 6.332l4.121.955c.194-1.951 1.516-3.504 3.887-3.504 2.488 0 3.576 1.314 3.576 2.947 0 .677-.311 1.234-1.399 1.393l-4.859.757c-3.227.478-5.715 2.39-5.715 5.854zm7.269 2.23c-1.788 0-2.759-1.195-2.759-2.509 0-1.593 1.127-2.39 2.526-2.628l4.937-.757v.876c0 3.783-2.177 5.018-4.704 5.018zM41.975 21.5C41.975 9.626 32.578 0 20.987 0 9.398 0 0 9.626 0 21.5S9.396 43 20.988 43c11.59 0 20.987-9.626 20.987-21.5z'\n        fill='#fff'\n      />\n      <path\n        d='M11.36 22.418L25.668 7.863c.267-.272.697.06.517.398l-5.325 9.997c-.119.223.039.495.287.495h9.202c.296 0 .44.372.223.58L14.446 34.748c-.29.277-.72-.113-.488-.44l7.633-10.788c.157-.221.003-.531-.264-.531H11.59c-.292 0-.437-.362-.23-.572z'\n        fill='#3BCBBE'\n      />\n    </g>\n  ),\n});\n\nexport const DocumentIcon = createIcon({\n  displayName: \"DocumentIcon\",\n  viewBox: \"0 0 24 24\",\n  path: (\n    <g>\n      <path\n        fill='currentColor'\n        d='M18.809 10.344h-6.153a2.11 2.11 0 01-2.11-2.11V2.083a.176.176 0 00-.175-.176H6.328A2.812 2.812 0 003.516 4.72v14.063a2.812 2.812 0 002.812 2.812h9.844a2.812 2.812 0 002.812-2.813V10.52a.176.176 0 00-.175-.176z'\n      />\n      <path\n        fill='currentColor'\n        d='M18.423 8.789l-6.32-6.32a.088.088 0 00-.15.062v5.705a.703.703 0 00.703.703h5.705a.088.088 0 00.062-.15z'\n      />\n    </g>\n  ),\n});\n\nexport const GlobeIcon = createIcon({\n  displayName: \"GlobeIcon\",\n  viewBox: \"0 0 24 24\",\n  path: (\n    <g>\n      <path\n        stroke='currentColor'\n        fill='transparent'\n        d='M11.25 2.109a9.14 9.14 0 100 18.281 9.14 9.14 0 000-18.281z'\n        stroke-width='.75'\n        stroke-miterlimit='10'\n      />\n      <path\n        stroke='currentColor'\n        fill='transparent'\n        d='M11.25 2.109C8.698 2.109 6.3 6.2 6.3 11.249c0 5.048 2.4 9.14 4.951 9.14 2.552 0 4.951-4.092 4.951-9.14 0-5.048-2.399-9.14-4.95-9.14z'\n        stroke-width='.75'\n        stroke-miterlimit='10'\n      />\n      <path\n        stroke='currentColor'\n        fill='transparent'\n        d='M5.156 5.156C6.836 6.349 8.952 7.06 11.25 7.06c2.298 0 4.414-.711 6.094-1.904'\n      />\n      <path\n        stroke='currentColor'\n        fill='transparent'\n        d='M5.156 5.156C6.836 6.349 8.952 7.06 11.25 7.06c2.298 0 4.414-.711 6.094-1.904M17.344 17.344c-1.68-1.193-3.796-1.904-6.094-1.904-2.298 0-4.413.711-6.094 1.904'\n        stroke-width='.75'\n        stroke-linecap='round'\n        stroke-linejoin='round'\n      />\n      <path\n        stroke='currentColor'\n        fill='transparent'\n        d='M11.25 2.109v18.28M20.39 11.249H2.11'\n        stroke-width='.75'\n        stroke-miterlimit='10'\n      />\n    </g>\n  ),\n});\n\nexport const HelpIcon = createIcon({\n  displayName: \"HelpIcon\",\n  viewBox: \"0 0 24 24\",\n  path: (\n    <path\n      fill='currentColor'\n      d='M11.25 0C5.04 0 0 5.04 0 11.25S5.04 22.5 11.25 22.5 22.5 17.46 22.5 11.25 17.46 0 11.25 0zm-.352 17.813a1.172 1.172 0 110-2.344 1.172 1.172 0 010 2.344zm1.96-5.977c-.95.637-1.08 1.222-1.08 1.758a.82.82 0 11-1.641 0c0-1.284.59-2.305 1.806-3.121 1.13-.758 1.768-1.239 1.768-2.295 0-.718-.41-1.264-1.26-1.668-.199-.095-.644-.187-1.191-.18-.687.008-1.22.172-1.63.503-.775.623-.84 1.302-.84 1.312a.821.821 0 11-1.642-.08c.007-.142.106-1.425 1.452-2.507.698-.562 1.585-.854 2.636-.866.745-.01 1.444.117 1.918.34 1.418.672 2.198 1.79 2.198 3.146 0 1.982-1.325 2.872-2.494 3.658z'\n    />\n  ),\n});\n\nexport const HomeIcon = createIcon({\n  displayName: \"HomeIcon\",\n  viewBox: \"0 0 24 24\",\n  path: (\n    <g>\n      <path\n        fill='currentColor'\n        d='M11.494 4.951a.351.351 0 00-.486 0l-8.09 7.729a.352.352 0 00-.109.254v7.254a1.406 1.406 0 001.405 1.406h4.223a.703.703 0 00.704-.703v-5.976a.351.351 0 01.351-.352h3.516a.351.351 0 01.351.352v5.976a.703.703 0 00.704.703h4.22a1.407 1.407 0 001.407-1.406v-7.254a.35.35 0 00-.108-.254L11.494 4.95z'\n      />\n      <path\n        fill='currentColor'\n        d='M21.574 11.23l-3.287-3.144V3.314a.703.703 0 00-.703-.703h-2.11a.703.703 0 00-.703.703V4.72l-2.545-2.434c-.239-.24-.593-.378-.976-.378-.38 0-.734.138-.972.379L.93 11.23a.717.717 0 00-.058.983.703.703 0 001.018.046l9.119-8.713a.352.352 0 01.486 0l9.12 8.713a.703.703 0 00.992-.019c.27-.28.248-.74-.033-1.01z'\n      />\n    </g>\n  ),\n});\n\nexport const InvisionLogo = createIcon({\n  displayName: \"InvisionLogo\",\n  viewBox: \"0 0 24 24\",\n  path: (\n    <g clip-path='url(#clip0)'>\n      <path\n        d='M18.687 0H2.313A1.813 1.813 0 00.5 1.811v16.374C.5 19.188 1.312 20 2.313 20h16.374a1.813 1.813 0 001.813-1.813V1.812A1.813 1.813 0 0018.687 0z'\n        fill='#DC395F'\n      />\n      <path\n        d='M7.184 6.293c.665 0 1.222-.522 1.222-1.204 0-.683-.557-1.204-1.222-1.204-.665 0-1.222.521-1.222 1.204 0 .682.557 1.204 1.222 1.204zM4.65 12.739a4.134 4.134 0 00-.108.905c0 1.06.575 1.764 1.797 1.764 1.013 0 1.834-.602 2.426-1.573l-.361 1.449h2.012l1.15-4.612c.287-1.168.844-1.774 1.689-1.774.665 0 1.078.413 1.078 1.096 0 .197-.018.413-.09.646l-.593 2.12c-.09.306-.126.611-.126.899 0 1.006.593 1.742 1.833 1.742 1.06 0 1.904-.682 2.371-2.317l-.79-.305c-.395 1.095-.737 1.293-1.006 1.293-.27 0-.414-.18-.414-.538 0-.162.037-.342.09-.558l.575-2.065c.144-.485.198-.915.198-1.31 0-1.546-.934-2.352-2.066-2.352-1.06 0-2.138.956-2.677 1.962l.395-1.806H8.962L8.53 8.996h1.438l-.885 3.544c-.695 1.545-1.972 1.57-2.132 1.534-.264-.06-.432-.159-.432-.5 0-.198.036-.482.126-.823l1.348-5.346H4.579l-.431 1.591h1.419L4.65 12.74'\n        fill='#fff'\n      />\n    </g>\n  ),\n});\n\nexport const JiraLogo = createIcon({\n  displayName: \"JiraLogo\",\n  viewBox: \"0 0 24 24\",\n  path: (\n    <g clip-path='url(#clip0)'>\n      <path\n        d='M20.26 10.42l-8.863-8.93-.86-.865-6.67 6.722L.814 10.42a.827.827 0 000 1.162l6.096 6.14 3.627 3.654 6.67-6.722.105-.104 2.947-2.964a.824.824 0 000-1.166zm-9.722 3.649L7.493 11l3.045-3.068L13.582 11l-3.044 3.068z'\n        fill='#2684FF'\n      />\n      <path\n        d='M10.537 7.932a5.184 5.184 0 01-1.502-3.637A5.185 5.185 0 0110.515.65L3.852 7.36l3.626 3.654 3.06-3.082z'\n        fill='url(#paint0_linear)'\n      />\n      <path\n        d='M13.59 10.992l-3.053 3.076a5.186 5.186 0 011.502 3.653c0 1.37-.54 2.683-1.502 3.652l6.682-6.728-3.63-3.653z'\n        fill='url(#paint1_linear)'\n      />\n    </g>\n  ),\n});\n\nexport const MastercardIcon = createIcon({\n  displayName: \"MastercardIcon\",\n  viewBox: \"0 0 24 24\",\n  path: (\n    <svg\n      width='24'\n      height='20'\n      viewBox='0 0 21 15'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'>\n      <circle cx='6.63158' cy='7.49999' r='6.63158' fill='#EB001B' />\n      <circle cx='14.3686' cy='7.49999' r='6.63158' fill='#F79E1B' />\n    </svg>\n  ),\n});\n\nexport const PayPalIcon = createIcon({\n  displayName: \"PayPalIcon\",\n  viewBox: \"0 0 24 24\",\n  path: (\n    <g>\n      <path\n        fill='currentColor'\n        d='M16.179 2.532C15.142 1.357 13.265.854 10.863.854H3.895a.997.997 0 00-.986.834L.007 19.945a.595.595 0 00.591.686H4.9l1.08-6.8-.033.215a.993.993 0 01.983-.834h2.044c4.017 0 7.16-1.619 8.08-6.3.027-.14.07-.406.07-.406.262-1.732-.001-2.907-.945-3.974z'\n      />\n      <path\n        fill='currentColor'\n        d='M18.213 7.393c-.998 4.61-4.184 7.048-9.24 7.048H7.142L5.773 23.1h2.973a.87.87 0 00.862-.731l.035-.184.684-4.297.044-.237a.87.87 0 01.86-.731h.544c3.514 0 6.264-1.416 7.068-5.51.322-1.644.166-3.021-.63-4.017z'\n      />\n    </g>\n  ),\n});\n\nexport const PersonIcon = createIcon({\n  displayName: \"PersonIcon\",\n  viewBox: \"0 0 24 24\",\n  path: (\n    <path\n      fill='currentColor'\n      d='M14.618 3.338c-.855-.924-2.05-1.432-3.368-1.432-1.325 0-2.524.505-3.375 1.423-.86.928-1.28 2.188-1.181 3.55.195 2.686 2.239 4.87 4.556 4.87s4.358-2.184 4.556-4.87c.1-1.349-.322-2.607-1.188-3.541zM18.984 21.592H3.515a1.363 1.363 0 01-1.063-.489 1.552 1.552 0 01-.316-1.279c.371-2.058 1.529-3.786 3.348-5 1.616-1.076 3.664-1.67 5.766-1.67s4.15.594 5.765 1.67c1.82 1.214 2.977 2.942 3.348 5 .085.471-.03.937-.315 1.279a1.362 1.362 0 01-1.064.49z'\n    />\n  ),\n});\n\nexport const ProfileIcon = createIcon({\n  displayName: \"ProfileIcon\",\n  viewBox: \"0 0 24 24\",\n  path: (\n    <g>\n      <path d='M0 0h24v24H0V0z' fill='transparent' />\n      <path\n        fill='currentColor'\n        d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v1c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-1c0-2.66-5.33-4-8-4z'\n      />\n    </g>\n  ),\n});\n\nexport const RocketIcon = createIcon({\n  displayName: \"RocketIcon\",\n  viewBox: \"0 0 24 24\",\n  path: (\n    <g>\n      <path\n        fill='currentColor'\n        d='M20.99 2.182a.209.209 0 00-.156-.16c-2.574-.63-8.521 1.613-11.743 4.833a13.93 13.93 0 00-1.566 1.85c-.994-.087-1.987-.014-2.834.355-2.39 1.052-3.085 3.796-3.279 4.976a.424.424 0 00.464.492l3.837-.423c.002.29.02.578.052.866.02.2.108.386.25.527l1.486 1.482a.86.86 0 00.528.25c.286.033.573.05.86.053l-.42 3.832a.424.424 0 00.492.464c1.178-.19 3.927-.885 4.972-3.274.37-.847.445-1.836.36-2.824a13.96 13.96 0 001.855-1.567c3.232-3.216 5.462-9.03 4.842-11.732zm-8.067 7.896a2.11 2.11 0 112.983-2.984 2.11 2.11 0 01-2.983 2.984z'\n      />\n      <path\n        fill='currentColor'\n        d='M7.4 18.054c-.24.241-.627.335-1.092.416-1.044.178-1.967-.725-1.779-1.78.072-.401.283-.962.415-1.094a.192.192 0 00-.16-.328 2.636 2.636 0 00-1.544.753c-1.033 1.034-1.13 4.87-1.13 4.87s3.838-.097 4.872-1.13c.417-.417.682-.961.752-1.546.017-.184-.207-.293-.334-.16z'\n      />\n    </g>\n  ),\n});\n\nexport const SettingsIcon = createIcon({\n  displayName: \"SettingsIcon\",\n  viewBox: \"0 0 24 24\",\n  // path can also be an array of elements, if you have multiple paths, lines, shapes, etc.\n  path: (\n    <g>\n      <path d='M0,0h24v24H0V0z' fill='none' />\n      <path\n        fill='currentColor'\n        d='M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z'\n      />\n    </g>\n  ),\n});\n\nexport const SlackLogo = createIcon({\n  displayName: \"SlackLogo\",\n  viewBox: \"0 0 24 24\",\n  path: (\n    <g clip-path='url(#clip0)' fill-rule='evenodd' clip-rule='evenodd'>\n      <path\n        d='M7.832.5c-1.105 0-2 .919-1.999 2.05 0 1.13.895 2.048 2 2.05h2V2.55c.001-1.13-.894-2.048-2-2.05zm0 5.467H2.5c-1.106 0-2.001.918-2 2.05-.002 1.13.894 2.048 2 2.05h5.332c1.106-.001 2.002-.919 2-2.05.002-1.132-.894-2.05-2-2.05z'\n        fill='#36C5F0'\n      />\n      <path\n        d='M20.5 8.016c0-1.13-.895-2.048-2-2.05-1.106.002-2.002.92-2 2.05v2.05h2c1.105 0 2-.918 2-2.05zm-5.334 0V2.55c.001-1.13-.893-2.048-2-2.05-1.105 0-2 .919-2 2.05v5.466c-.001 1.131.894 2.049 2 2.05 1.106 0 2.001-.918 2-2.05z'\n        fill='#2EB67D'\n      />\n      <path\n        d='M13.166 21c1.106 0 2.001-.919 2-2.05.001-1.13-.894-2.048-2-2.05h-2v2.05c-.001 1.13.894 2.048 2 2.05zm0-5.467h5.333c1.106-.001 2.002-.92 2-2.05.002-1.131-.893-2.049-1.999-2.05h-5.333c-1.106 0-2.001.918-2 2.05-.001 1.13.893 2.049 1.999 2.05z'\n        fill='#ECB22E'\n      />\n      <path\n        d='M.5 13.483c-.001 1.13.895 2.049 2 2.05 1.106-.001 2.001-.92 2-2.05v-2.05h-2c-1.105.001-2.001.919-2 2.05zm5.333 0v5.467c-.001 1.13.894 2.048 2 2.05 1.105 0 2-.919 2-2.05v-5.465c.002-1.131-.894-2.05-2-2.05-1.106 0-2 .917-2 2.048z'\n        fill='#E01E5A'\n      />\n    </g>\n  ),\n});\n\nexport const SpotifyLogo = createIcon({\n  displayName: \"SpotifyLogo\",\n  viewBox: \"0 0 24 24\",\n  path: (\n    <g clip-path='url(#clip0)'>\n      <path\n        d='M10.5 0C4.977 0 .5 4.477.5 10s4.477 10 10 10 10-4.477 10-10c0-5.522-4.477-10-10-10zm4.586 14.422a.623.623 0 01-.857.208c-2.348-1.435-5.304-1.76-8.785-.964a.623.623 0 11-.277-1.216c3.808-.87 7.076-.495 9.712 1.115.294.181.387.564.207.857zm1.223-2.722a.78.78 0 01-1.072.257c-2.687-1.652-6.786-2.13-9.965-1.166a.78.78 0 01-.973-.519.781.781 0 01.52-.972c3.632-1.102 8.147-.569 11.233 1.329a.78.78 0 01.258 1.072zm.106-2.835C13.19 6.95 7.875 6.775 4.797 7.708a.935.935 0 11-.543-1.79c3.533-1.072 9.404-.865 13.115 1.338a.935.935 0 01-.954 1.609z'\n        fill='#2EBD59'\n      />\n    </g>\n  ),\n});\n\nexport const SupportIcon = createIcon({\n  // Doesn't display the full icon without w and h being specified\n  displayName: \"BuildIcon\",\n  viewBox: \"0 0 24 24\",\n  path: (\n    <path\n      fill='currentColor'\n      d='M20.885 5.547a.703.703 0 00-1.122-.176l-2.7 2.702a.708.708 0 01-.995 0l-1.167-1.169a.702.702 0 010-.994l2.689-2.69a.704.704 0 00-.21-1.138c-2.031-.908-4.566-.435-6.164 1.152-1.358 1.348-1.763 3.455-1.11 5.78a.698.698 0 01-.197.703L2.593 16.4a2.82 2.82 0 103.981 3.983l6.754-7.332a.699.699 0 01.693-.2 7.885 7.885 0 002.03.279c1.469 0 2.757-.475 3.686-1.39 1.72-1.695 1.983-4.57 1.148-6.192zM4.623 19.901a1.407 1.407 0 11-.305-2.797 1.407 1.407 0 01.305 2.797z'\n    />\n  ),\n});\n\nexport const StatsIcon = createIcon({\n  displayName: \"StatsIcon\",\n  viewBox: \"0 0 24 24\",\n  path: (\n    <path\n      fill='currentColor'\n      d='M4.57 22.297H3.164a1.055 1.055 0 01-1.055-1.054v-6.328a1.055 1.055 0 011.055-1.055H4.57a1.055 1.055 0 011.055 1.055v6.328a1.055 1.055 0 01-1.055 1.054zM14.414 22.296h-1.406a1.055 1.055 0 01-1.055-1.055V10.695a1.055 1.055 0 011.055-1.055h1.406a1.055 1.055 0 011.055 1.055V21.24a1.055 1.055 0 01-1.055 1.055zM19.336 22.297H17.93a1.055 1.055 0 01-1.055-1.055V5.773A1.055 1.055 0 0117.93 4.72h1.406a1.055 1.055 0 011.055 1.054v15.47a1.055 1.055 0 01-1.055 1.054zM9.492 22.297H8.086a1.055 1.055 0 01-1.055-1.055V2.257a1.055 1.055 0 011.055-1.054h1.406a1.055 1.055 0 011.055 1.054v18.985a1.055 1.055 0 01-1.055 1.055z'\n    />\n  ),\n});\n\nexport const WalletIcon = createIcon({\n  displayName: \"WalletIcon\",\n  viewBox: \"0 0 24 24\",\n  path: (\n    <g>\n      <path\n        fill='currentColor'\n        d='M4.447 4.818h14.062c.164 0 .328.01.491.031a2.9 2.9 0 00-3.406-2.441L4.03 4.382h-.013a2.9 2.9 0 00-1.805 1.149 3.848 3.848 0 012.236-.713zM18.51 5.875H4.446a2.816 2.816 0 00-2.813 2.812v8.438a2.816 2.816 0 002.813 2.812h14.062a2.815 2.815 0 002.813-2.812V8.687a2.815 2.815 0 00-2.813-2.812zm-2.088 8.437a1.406 1.406 0 110-2.811 1.406 1.406 0 010 2.811z'\n      />\n      <path\n        fill='currentColor'\n        d='M1.656 11.651V7.28c0-.952.528-2.549 2.358-2.895 1.553-.291 3.091-.291 3.091-.291s1.011.703.176.703-.813 1.077 0 1.077 0 1.032 0 1.032L4.007 10.62l-2.35 1.032z'\n      />\n    </g>\n  ),\n});\n\nexport const VisaIcon = createIcon({\n  displayName: \"VisaIcon\",\n  viewBox: \"0 0 25 9\",\n  color: \"#fff\",\n  path: (\n    <svg\n      width='25'\n      height='9'\n      viewBox='0 0 25 9'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'>\n      <path\n        fill-rule='evenodd'\n        clip-rule='evenodd'\n        d='M12.6708 2.96349C12.6568 4.15055 13.653 4.81298 14.4034 5.20684C15.1744 5.61099 15.4333 5.87013 15.4304 6.23147C15.4245 6.78459 14.8153 7.02862 14.2452 7.03812C13.2505 7.05475 12.6723 6.74889 12.2125 6.51753L11.8542 8.32341C12.3155 8.55247 13.1696 8.75217 14.0554 8.76087C16.1345 8.76087 17.4947 7.65543 17.5021 5.94145C17.5102 3.76625 14.7087 3.64579 14.7278 2.67348C14.7344 2.37871 14.9956 2.06408 15.568 1.98406C15.8512 1.94368 16.6332 1.91274 17.5198 2.35252L17.8677 0.605286C17.391 0.418253 16.7782 0.239136 16.0153 0.239136C14.0583 0.239136 12.6819 1.35962 12.6708 2.96349ZM21.2115 0.389687C20.8319 0.389687 20.5118 0.628245 20.3691 0.99433L17.3991 8.63249H19.4767L19.8901 7.40183H22.429L22.6689 8.63249H24.5L22.9021 0.389687H21.2115ZM21.5021 2.61641L22.1016 5.7116H20.4596L21.5021 2.61641ZM10.1518 0.389687L8.51418 8.63249H10.4939L12.1308 0.389687H10.1518ZM7.22303 0.389687L5.16233 6.00003L4.32878 1.22966C4.23097 0.697187 3.84472 0.389687 3.41579 0.389687H0.0471011L0 0.629037C0.691574 0.790671 1.47729 1.0514 1.95326 1.33033C2.24457 1.50067 2.32775 1.64964 2.42336 2.05458L4.00214 8.63249H6.0945L9.3021 0.389687H7.22303Z'\n        fill='white'\n      />\n    </svg>\n  ),\n});\n\nexport const BillIcon = createIcon({\n  displayName: \"BillIcon\",\n  viewBox: \"0 0 20 18\",\n  path: (\n    <svg\n      width='20'\n      height='18'\n      viewBox='0 0 20 18'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'>\n      <path\n        d='M10 4V0H0V18H20V4H10ZM4 16H2V14H4V16ZM4 12H2V10H4V12ZM4 8H2V6H4V8ZM4 4H2V2H4V4ZM8 16H6V14H8V16ZM8 12H6V10H8V12ZM8 8H6V6H8V8ZM8 4H6V2H8V4ZM18 16H10V14H12V12H10V10H12V8H10V6H18V16ZM16 8H14V10H16V8ZM16 12H14V14H16V12Z'\n        fill='#01B574'\n      />\n    </svg>\n  ),\n});\n\nexport const GraphIcon = createIcon({\n  displayName: \"GraphIcon\",\n  viewBox: \"0 0 61 20\",\n  path: (\n    <svg\n      width='61'\n      height='20'\n      viewBox='0 0 61 20'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'>\n      <path\n        d='M1 8.2C1.70238 11.8 4.5 18.5 11 18C17.5 17.5 18.2786 1 29.6571 1C41.0357 1 41.0357 20.0286 60 3.57143'\n        stroke='white'\n        stroke-width='2'\n        stroke-linecap='round'\n        stroke-linejoin='round'\n      />\n    </svg>\n  ),\n});\n\nexport const FulgerIcon = createIcon({\n  displayName: \"FulgerIcon\",\n  viewBox: \"0 0 14 24\",\n  path: (\n    <svg\n      width='14'\n      height='24'\n      viewBox='0 0 14 24'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'>\n      <path\n        d='M5.74999 23.25H4.49999L5.74999 14.5H0.424988C0.424988 14.5 5.02499 6.425 8.24999 0.75H9.49999L8.24999 9.5H13.6L5.74999 23.25Z'\n        fill='#09AD8F'\n      />\n    </svg>\n  ),\n});\n\nexport const CarIcon = createIcon({\n  displayName: \"CarIcon\",\n  viewBox: \"0 0 22 19\",\n  path: (\n    <svg\n      width='22'\n      height='19'\n      viewBox='0 0 22 19'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'>\n      <path\n        d='M19.0733 1.34502C18.84 0.656687 18.1867 0.166687 17.4167 0.166687H4.58333C3.81333 0.166687 3.17167 0.656687 2.92667 1.34502L0.5 8.33335V17.6667C0.5 18.3084 1.025 18.8334 1.66667 18.8334H2.83333C3.475 18.8334 4 18.3084 4 17.6667V16.5H18V17.6667C18 18.3084 18.525 18.8334 19.1667 18.8334H20.3333C20.975 18.8334 21.5 18.3084 21.5 17.6667V8.33335L19.0733 1.34502ZM4.99167 2.50002H16.9967L18.2567 6.12835H3.73167L4.99167 2.50002ZM19.1667 14.1667H2.83333V8.33335H19.1667V14.1667Z'\n        fill='white'\n      />\n      <path\n        d='M5.75 13C6.7165 13 7.5 12.2165 7.5 11.25C7.5 10.2835 6.7165 9.50003 5.75 9.50003C4.7835 9.50003 4 10.2835 4 11.25C4 12.2165 4.7835 13 5.75 13Z'\n        fill='white'\n      />\n      <path\n        d='M16.25 13C17.2165 13 18 12.2165 18 11.25C18 10.2835 17.2165 9.50003 16.25 9.50003C15.2835 9.50003 14.5 10.2835 14.5 11.25C14.5 12.2165 15.2835 13 16.25 13Z'\n        fill='white'\n      />\n    </svg>\n  ),\n});\n\nexport const FulgerWhiteIcon = createIcon({\n  displayName: \"FulgerWhiteIcon\",\n  viewBox: \"0 0 18 24\",\n  path: (\n    <svg\n      width='18'\n      height='24'\n      viewBox='0 0 18 24'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'>\n      <path\n        d='M10.8 -3.14722e-07L10.8 9.6L18 9.6L7.2 24L7.2 14.4L1.2779e-06 14.4L10.8 -3.14722e-07Z'\n        fill='white'\n      />\n    </svg>\n  ),\n});\n\nexport const SimmmpleLogoWhite = createIcon({\n  displayName: \"SimmmpleLogoWhite\",\n  viewBox: \"0 0 22 22\",\n  path: (\n    <svg\n      width=\"22px\"\n      height=\"22px\"\n      viewBox=\"0 0 22 22\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M15.7509 0.0229001L16.0242 0.0507784L16.2945 0.089609L16.5617 0.139392L16.8248 0.199131L17.0839 0.268827L17.3399 0.348479L17.5908 0.438088L17.8366 0.537654L18.0783 0.645185L18.315 0.762672L18.5465 0.88912L18.7729 1.02353L18.9932 1.16691L19.2074 1.31825L19.4155 1.47755L19.6174 1.64383L19.8122 1.81807L20.0009 1.99928L20.1825 2.18845L20.3569 2.3836L20.5231 2.58572L20.6822 2.79381L20.8342 3.00787L20.977 3.22891L21.1116 3.45492L21.2381 3.68592L21.3554 3.92288L21.4635 4.16483L21.5624 4.41075L21.6522 4.66166L21.7318 4.91754L21.8011 5.17641L21.8613 5.44026L21.9113 5.7071L21.95 5.97791L21.9776 6.25172L21.9949 6.52851L22 6.8073V15.1987L21.9949 15.4775L21.9776 15.7533L21.95 16.0271L21.9113 16.2969L21.8613 16.5637L21.8011 16.8266L21.7318 17.0864L21.6522 17.3413L21.5624 17.5922L21.4635 17.8382L21.3554 18.0801L21.2381 18.3161L21.1116 18.5471L20.977 18.7731L20.8342 18.9931L20.6822 19.2072L20.5231 19.4163L20.3569 19.6174L20.1825 19.8125L20.0009 20.0017L19.8122 20.1829L19.6174 20.3572L19.4155 20.5234L19.2074 20.6827L18.9932 20.8341L18.7729 20.9765L18.5465 21.1119L18.315 21.2373L18.0783 21.3548L17.8366 21.4633L17.5908 21.5619L17.3399 21.6515L17.0839 21.7322L16.8248 21.8019L16.5617 21.8616L16.2945 21.9104L16.0242 21.9492L15.7509 21.9781L15.4734 21.995L15.194 22H6.80603L6.52657 21.995L6.25016 21.9781L5.9758 21.9492L5.70552 21.9104L5.43829 21.8616L5.17515 21.8019L4.91609 21.7312L4.6611 21.6515L4.4102 21.5619L4.16337 21.4633L3.92165 21.3548L3.68503 21.2373L3.4535 21.1119L3.22809 20.9765L3.00779 20.8341L2.7936 20.6827L2.58452 20.5234L2.38257 20.3562L2.18776 20.1819L1.99907 20.0007L1.81752 19.8115L1.64312 19.6164L1.47687 19.4143L1.31776 19.2062L1.16681 18.9921L1.02299 18.7721L0.888363 18.5461L0.762911 18.3141L0.645619 18.0781L0.537506 17.8362L0.437552 17.5892L0.348818 17.3383L0.268243 17.0835L0.198887 16.8236L0.138711 16.5597L0.0897543 16.2929L0.0509968 16.0221L0.0224386 15.7493L0.00611961 15.4725L0 15.1927V6.8073L0.00611961 6.52851L0.0224386 6.25172L0.0509968 5.97791L0.0897543 5.7071L0.138711 5.44026L0.198887 5.17641L0.268243 4.91754L0.348818 4.66166L0.437552 4.41075L0.537506 4.16483L0.645619 3.92288L0.762911 3.68592L0.888363 3.45492L1.02299 3.22891L1.16681 3.00787L1.31776 2.79381L1.47687 2.58572L1.64312 2.3836L1.81752 2.18845L1.99907 1.99928L2.18776 1.81807L2.38257 1.64383L2.58452 1.47755L2.7936 1.31825L3.00779 1.16691L3.22809 1.02353L3.4535 0.88912L3.68503 0.762672L3.92165 0.645185L4.16337 0.537654L4.4102 0.438088L4.6611 0.348479L4.91609 0.268827L5.17515 0.199131L5.43829 0.139392L5.70552 0.089609L5.9758 0.0507784L6.25016 0.0229001L6.52657 0.00597393L6.80603 0H15.194L15.4734 0.00597393L15.7509 0.0229001ZM10.0198 13.2522L9.88827 13.2611L9.75874 13.2751L9.63023 13.295L9.50375 13.3199L9.37932 13.3497L9.25693 13.3856L9.13658 13.4254L9.01827 13.4702L8.90199 13.52L8.78878 13.5748L8.67863 13.6335L8.57051 13.6962L8.46648 13.7639L8.36449 13.8356L8.26555 13.9113L8.1707 13.9909L8.07891 14.0736L7.99017 14.1612L7.90552 14.2508L7.82494 14.3444L7.74743 14.442L7.67501 14.5425L7.60566 14.6451L7.5414 14.7516L7.48122 14.8602L7.42615 14.9717L7.37515 15.0862L7.32925 15.2027L7.28846 15.3221L7.25276 15.4426L7.22216 15.5661L7.19666 15.6915L7.17626 15.818L7.16198 15.9474L7.1528 16.0768L7.14974 16.2093V16.2202H11.8476L11.9802 16.2172L12.1117 16.2083L12.2423 16.1943L12.3698 16.1744L12.4962 16.1495L12.6217 16.1197L12.7441 16.0838L12.8644 16.044L12.9817 15.9992L13.098 15.9494L13.2112 15.8946L13.3214 15.8359L13.4295 15.7732L13.5345 15.7055L13.6355 15.6338L13.7344 15.5581L13.8293 15.4785L13.9221 15.3958L14.0098 15.3092L14.0945 15.2186L14.1751 15.125L14.2526 15.0274L14.325 14.9269L14.3943 14.8243L14.4586 14.7178L14.5188 14.6092L14.5739 14.4977L14.6248 14.3832L14.6707 14.2667L14.7115 14.1473L14.7472 14.0268L14.7789 13.9033L14.8044 13.7779L14.8237 13.6514L14.838 13.523L14.8472 13.3926L14.8503 13.2601V13.2502H10.1524L10.0198 13.2522ZM7.14974 9.52643L7.1528 9.66084L7.16198 9.79327L7.17626 9.92469L7.19666 10.0541L7.22216 10.1816L7.25276 10.308L7.28948 10.4315L7.33027 10.553L7.37719 10.6714L7.42819 10.7879L7.48326 10.9024L7.54344 11.0129L7.60872 11.1215L7.67807 11.227L7.75151 11.3296L7.82902 11.4281L7.9096 11.5237L7.99527 11.6163L8.08401 11.7049L8.17682 11.7896L8.27269 11.8712L8.37163 11.9479L8.47362 12.0205L8.57867 12.0892L8.68781 12.154L8.79898 12.2147L8.91219 12.2695L9.02846 12.3202L9.1478 12.366L9.26815 12.4079L9.39156 12.4437L9.51701 12.4746L9.64451 12.4995L9.77302 12.5194L9.90357 12.5343L10.0362 12.5423L10.1698 12.5453H14.8941V12.5343L14.8911 12.3999L14.8829 12.2675L14.8676 12.136L14.8482 12.0066L14.8217 11.8792L14.7911 11.7527L14.7554 11.6293L14.7136 11.5078L14.6677 11.3893L14.6167 11.2728L14.5606 11.1583L14.5004 11.0478L14.4351 10.9393L14.3668 10.8337L14.2934 10.7322L14.2159 10.6326L14.1343 10.537L14.0496 10.4444L13.9609 10.3558L13.8681 10.2712L13.7722 10.1905L13.6733 10.1129L13.5702 10.0402L13.4652 9.97149L13.3571 9.90677L13.2459 9.84703L13.1317 9.79127L13.0154 9.7405L12.8971 9.6947L12.7757 9.65387L12.6523 9.61703L12.5268 9.58717L12.4004 9.56128L12.2708 9.54136L12.1403 9.52643L12.0087 9.51846L11.8751 9.51548H7.14974V9.52643ZM10.0198 5.83255L9.88827 5.84151L9.75874 5.85545L9.63023 5.87536L9.50375 5.90025L9.37932 5.93012L9.25693 5.96597L9.13658 6.00579L9.01827 6.0506L8.90199 6.10038L8.78878 6.15514L8.67863 6.21388L8.57051 6.27661L8.46648 6.34432L8.36449 6.416L8.26555 6.49167L8.1707 6.57133L8.07891 6.65396L7.99017 6.74158L7.90552 6.83119L7.82494 6.92578L7.74743 7.02236L7.67501 7.12292L7.60566 7.22547L7.5414 7.33201L7.48122 7.44053L7.42615 7.55205L7.37515 7.66655L7.32925 7.78304L7.28846 7.90252L7.25276 8.02299L7.22216 8.14645L7.19666 8.2719L7.17626 8.39835L7.16198 8.52779L7.1528 8.65722L7.14974 8.78964V8.8006H11.8476L11.9802 8.79761L12.1117 8.78865L12.2423 8.77471L12.3698 8.7548L12.4962 8.72991L12.6217 8.70004L12.7441 8.66419L12.8644 8.62437L12.9817 8.57956L13.098 8.52978L13.2112 8.47502L13.3214 8.41627L13.4295 8.35355L13.5345 8.28584L13.6355 8.21416L13.7344 8.13849L13.8293 8.05883L13.9221 7.97619L14.0098 7.88957L14.0945 7.79897L14.1751 7.70538L14.2526 7.6078L14.325 7.50724L14.3943 7.40469L14.4586 7.29815L14.5188 7.18963L14.5739 7.07811L14.6248 6.96361L14.6707 6.84712L14.7115 6.72764L14.7472 6.60717L14.7789 6.48371L14.8044 6.35825L14.8237 6.23181L14.838 6.10337L14.8472 5.97294L14.8503 5.84051V5.83056H10.1524L10.0198 5.83255Z\"\n        fill=\"white\"\n      />\n    </svg>\n  ),\n});\n\n\n"
  },
  {
    "path": "src/components/Layout/MainPanel.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport { Box, useStyleConfig } from \"@chakra-ui/react\";\nfunction MainPanel(props) {\n  const { variant, children, ...rest } = props;\n  const styles = useStyleConfig(\"MainPanel\", { variant });\n  // Pass the computed styles into the `__css` prop\n  return (\n    <Box __css={styles} {...rest}>\n      {children}\n    </Box>\n  );\n}\n\nexport default MainPanel;\n"
  },
  {
    "path": "src/components/Layout/PanelContainer.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport { Box, useStyleConfig } from \"@chakra-ui/react\";\nfunction PanelContainer(props) {\n  const { variant, children, ...rest } = props;\n  const styles = useStyleConfig(\"PanelContainer\", { variant });\n  // Pass the computed styles into the `__css` prop\n  return (\n    <Box __css={styles} {...rest}>\n      {children}\n    </Box>\n  );\n}\n\nexport default PanelContainer;\n"
  },
  {
    "path": "src/components/Layout/PanelContent.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport { Box, useStyleConfig } from \"@chakra-ui/react\";\nfunction PanelContent(props) {\n  const { variant, children, ...rest } = props;\n  const styles = useStyleConfig(\"PanelContent\", { variant });\n  // Pass the computed styles into the `__css` prop\n  return (\n    <Box __css={styles} {...rest}>\n      {children}\n    </Box>\n  );\n}\n\nexport default PanelContent;\n"
  },
  {
    "path": "src/components/Menu/ItemContent.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\n// chakra imports\nimport { Avatar, Flex, Text } from \"@chakra-ui/react\";\nimport { ClockIcon } from \"components/Icons/Icons\";\nimport React from \"react\";\n\nexport function ItemContent(props) {\n  const navbarIcon = \"gray.400\";\n  const notificationColor = \"white\";\n  const spacing = \" \";\n  return (\n    <>\n      <Avatar\n        name={props.aName}\n        src={props.aSrc}\n        borderRadius='12px'\n        me='16px'\n      />\n      <Flex flexDirection='column'>\n        <Text fontSize='14px' mb='5px' color={notificationColor}>\n          <Text fontWeight='bold' fontSize='14px' as='span'>\n            {props.boldInfo}\n            {spacing}\n          </Text>\n          {props.info}\n        </Text>\n        <Flex alignItems='center'>\n          <ClockIcon color={navbarIcon} w='13px' h='13px' me='3px' />\n          <Text fontSize='xs' lineHeight='100%' color={navbarIcon}>\n            {props.time}\n          </Text>\n        </Flex>\n      </Flex>\n    </>\n  );\n}\n"
  },
  {
    "path": "src/components/Navbars/AdminNavbar.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\n// Chakra Imports\nimport {\n  Box,\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  Flex,\n  Link,\n  useColorModeValue,\n} from \"@chakra-ui/react\";\nimport PropTypes from \"prop-types\";\nimport React, { useState } from \"react\";\nimport AdminNavbarLinks from \"./AdminNavbarLinks\";\n\nexport default function AdminNavbar(props) {\n  const [scrolled, setScrolled] = useState(false);\n  const {\n    variant,\n    children,\n    fixed,\n    secondary,\n    brandText,\n    onOpen,\n    ...rest\n  } = props;\n\n  // Here are all the props that may change depending on navbar's type or state.(secondary, variant, scrolled)\n  let mainText = \"white\";\n  let navbarPosition = \"absolute\";\n  let navbarFilter = \"none\";\n  let navbarBackdrop = \"none\";\n  let navbarShadow = \"none\";\n  let navbarBg = \"none\";\n  let navbarBorder = \"transparent\";\n  let secondaryMargin = \"0px\";\n  let paddingX = \"15px\";\n  if (props.fixed === true)\n    if (scrolled === true) {\n      navbarPosition = \"fixed\";\n      navbarShadow = \"0px 7px 23px rgba(0, 0, 0, 0.05)\";\n      navbarBg =\n        \"linear-gradient(rgba(255, 255, 255, 0) 0% rgba(255, 255, 255, 0.39) @ 100%)\";\n      navbarBorder = \"rgba(226, 232, 240, 0.3)\";\n      navbarFilter = \"drop-shadow(0px 7px 23px rgba(0, 0, 0, 0.05))\";\n      navbarBackdrop = \"blur(42px)\";\n    }\n  if (props.secondary) {\n    navbarBackdrop = \"blur(42px)\";\n    // navbarPosition = \"absolute\";\n    // mainText = \"white\";\n    // secondaryText = \"white\";\n    // secondaryMargin = \"22px\";\n    // paddingX = \"30px\";\n  }\n  const changeNavbar = () => {\n    if (window.scrollY > 1) {\n      setScrolled(true);\n    } else {\n      setScrolled(false);\n    }\n  };\n  window.addEventListener(\"scroll\", changeNavbar);\n  return (\n    <Flex\n      position={navbarPosition}\n      boxShadow={navbarShadow}\n      bg={navbarBg}\n      borderColor={navbarBorder}\n      filter={navbarFilter}\n      backdropFilter={navbarBackdrop}\n      borderWidth='1.5px'\n      borderStyle='solid'\n      transitionDelay='0s, 0s, 0s, 0s'\n      transitionDuration=' 0.25s, 0.25s, 0.25s, 0s'\n      transition-property='box-shadow, background-color, filter, border'\n      transitionTimingFunction='linear, linear, linear, linear'\n      alignItems={{ xl: \"center\" }}\n      borderRadius='16px'\n      display='flex'\n      minH='75px'\n      justifyContent={{ xl: \"center\" }}\n      lineHeight='25.6px'\n      mx='auto'\n      mt={secondaryMargin}\n      pb='8px'\n      left={document.documentElement.dir === \"rtl\" ? \"30px\" : \"\"}\n      right={document.documentElement.dir === \"rtl\" ? \"\" : \"30px\"}\n      px={{\n        sm: paddingX,\n        md: \"30px\",\n      }}\n      ps={{\n        xl: \"12px\",\n      }}\n      pt='8px'\n      top='18px'\n      w={{ sm: \"calc(100vw - 60px)\", xl: \"calc(100vw - 75px - 275px)\" }}>\n      <Flex\n        w='100%'\n        flexDirection={{\n          sm: \"column\",\n          md: \"row\",\n        }}\n        alignItems={{ xl: \"center\" }}>\n        <Box mb={{ sm: \"8px\", md: \"0px\" }}>\n          <Breadcrumb>\n            <BreadcrumbItem color='#A0AEC0'>\n              <BreadcrumbLink href='#' color='#A0AEC0'>\n                Pages\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n\n            <BreadcrumbItem color={mainText}>\n              <BreadcrumbLink href='#' color={mainText}>\n                {brandText}\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n          </Breadcrumb>\n          {/* Here we create navbar brand, based on route name */}\n          <Link\n            color={mainText}\n            href='#'\n            bg='inherit'\n            borderRadius='inherit'\n            fontWeight='bold'\n            _hover={{ color: { mainText } }}\n            _active={{\n              bg: \"inherit\",\n              transform: \"none\",\n              borderColor: \"transparent\",\n            }}\n            _focus={{\n              boxShadow: \"none\",\n            }}>\n            {brandText}\n          </Link>\n        </Box>\n        <Box ms='auto' w={{ sm: \"100%\", md: \"unset\" }}>\n          <AdminNavbarLinks\n            onOpen={props.onOpen}\n            logoText={props.logoText}\n            secondary={props.secondary}\n            fixed={props.fixed}\n          />\n        </Box>\n      </Flex>\n    </Flex>\n  );\n}\n\nAdminNavbar.propTypes = {\n  brandText: PropTypes.string,\n  variant: PropTypes.string,\n  secondary: PropTypes.bool,\n  fixed: PropTypes.bool,\n  onOpen: PropTypes.func,\n};\n"
  },
  {
    "path": "src/components/Navbars/AdminNavbarLinks.js",
    "content": "// Chakra Icons\nimport { BellIcon, SearchIcon } from \"@chakra-ui/icons\";\n// Chakra Imports\nimport {\n  Button,\n  Flex,\n  IconButton,\n  Input,\n  InputGroup,\n  InputLeftElement,\n  Menu,\n  MenuButton,\n  MenuItem,\n  MenuList,\n  Text,\n} from \"@chakra-ui/react\";\n// Assets\nimport avatar1 from \"assets/img/avatars/avatar1.png\";\nimport avatar2 from \"assets/img/avatars/avatar2.png\";\nimport avatar3 from \"assets/img/avatars/avatar3.png\";\n// Custom Icons\nimport { ProfileIcon, SettingsIcon } from \"components/Icons/Icons\";\n// Custom Components\nimport { ItemContent } from \"components/Menu/ItemContent\";\nimport { SidebarResponsive } from \"components/Sidebar/Sidebar\";\nimport PropTypes from \"prop-types\";\nimport React from \"react\";\nimport { NavLink } from \"react-router-dom\";\nimport routes from \"routes.js\";\n\nexport default function HeaderLinks(props) {\n  const { variant, children, fixed, secondary, onOpen, ...rest } = props;\n\n  // Chakra Color Mode\n  let inputBg = \"#0F1535\";\n  let mainText = \"gray.400\";\n  let navbarIcon = \"white\";\n  let searchIcon = \"white\";\n\n  if (secondary) {\n    navbarIcon = \"white\";\n    mainText = \"white\";\n  }\n  const settingsRef = React.useRef();\n  return (\n    <Flex\n      pe={{ sm: \"0px\", md: \"16px\" }}\n      w={{ sm: \"100%\", md: \"auto\" }}\n      alignItems='center'\n      flexDirection='row'>\n      <InputGroup\n        cursor='pointer'\n        bg={inputBg}\n        borderRadius='15px'\n        borderColor='rgba(226, 232, 240, 0.3)'\n        w={{\n          sm: \"128px\",\n          md: \"200px\",\n        }}\n        me={{ sm: \"auto\", md: \"20px\" }}>\n        <InputLeftElement\n          children={\n            <IconButton\n              bg='inherit'\n              borderRadius='inherit'\n              _hover='none'\n              _active={{\n                bg: \"inherit\",\n                transform: \"none\",\n                borderColor: \"transparent\",\n              }}\n              _focus={{\n                boxShadow: \"none\",\n              }}\n              icon={\n                <SearchIcon color={searchIcon} w='15px' h='15px' />\n              }></IconButton>\n          }\n        />\n        <Input\n          fontSize='xs'\n          py='11px'\n          color={mainText}\n          placeholder='Type here...'\n          borderRadius='inherit'\n        />\n      </InputGroup>\n      <NavLink to='/auth/signin'>\n        <Button\n          ms='0px'\n          px='0px'\n          me={{ sm: \"2px\", md: \"16px\" }}\n          color={navbarIcon}\n          variant='transparent-with-icon'\n          rightIcon={\n            document.documentElement.dir ? (\n              \"\"\n            ) : (\n              <ProfileIcon color={navbarIcon} w='22px' h='22px' me='0px' />\n            )\n          }\n          leftIcon={\n            document.documentElement.dir ? (\n              <ProfileIcon color={navbarIcon} w='22px' h='22px' me='0px' />\n            ) : (\n              \"\"\n            )\n          }>\n          <Text display={{ sm: \"none\", md: \"flex\" }}>Sign In</Text>\n        </Button>\n      </NavLink>\n      <SidebarResponsive\n        iconColor='gray.500'\n        logoText={props.logoText}\n        secondary={props.secondary}\n        routes={routes}\n        // logo={logo}\n        {...rest}\n      />\n      <SettingsIcon\n        cursor='pointer'\n        ms={{ base: \"16px\", xl: \"0px\" }}\n        me='16px'\n        ref={settingsRef}\n        onClick={props.onOpen}\n        color={navbarIcon}\n        w='18px'\n        h='18px'\n      />\n      <Menu>\n        <MenuButton align='center'>\n          <BellIcon color={navbarIcon} mt='-4px' w='18px' h='18px' />\n        </MenuButton>\n\n        <MenuList\n          border='transparent'\n          backdropFilter='blur(63px)'\n          bg='linear-gradient(127.09deg, rgba(6, 11, 40, 0.94) 19.41%, rgba(10, 14, 35, 0.69) 76.65%)'\n          borderRadius='20px'>\n          <Flex flexDirection='column'>\n            <MenuItem\n              borderRadius='8px'\n              _hover={{\n                bg: \"transparent\",\n              }}\n              _active={{\n                bg: \"transparent\",\n              }}\n              _focus={{\n                bg: \"transparent\",\n              }}\n              mb='10px'>\n              <ItemContent\n                time='13 minutes ago'\n                info='from Alicia'\n                boldInfo='New Message'\n                aName='Alicia'\n                aSrc={avatar1}\n              />\n            </MenuItem>\n            <MenuItem\n              borderRadius='8px'\n              _hover={{\n                bg: \"transparent\",\n              }}\n              _active={{\n                bg: \"transparent\",\n              }}\n              _focus={{\n                bg: \"transparent\",\n              }}\n              _hover={{ bg: \"transparent\" }}\n              mb='10px'>\n              <ItemContent\n                time='2 days ago'\n                info='by Josh Henry'\n                boldInfo='New Album'\n                aName='Josh Henry'\n                aSrc={avatar2}\n              />\n            </MenuItem>\n            <MenuItem\n              borderRadius='8px'\n              _hover={{\n                bg: \"transparent\",\n              }}\n              _active={{\n                bg: \"transparent\",\n              }}\n              _focus={{\n                bg: \"transparent\",\n              }}>\n              <ItemContent\n                time='3 days ago'\n                info='Payment succesfully completed!'\n                boldInfo=''\n                aName='Kara'\n                aSrc={avatar3}\n              />\n            </MenuItem>\n          </Flex>\n        </MenuList>\n      </Menu>\n    </Flex>\n  );\n}\n\nHeaderLinks.propTypes = {\n  variant: PropTypes.string,\n  fixed: PropTypes.bool,\n  secondary: PropTypes.bool,\n  onOpen: PropTypes.func,\n};\n"
  },
  {
    "path": "src/components/Navbars/AuthNavbar.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\n// Chakra imports\nimport {\n  Box,\n  Button,\n  Flex,\n  HStack,\n  Link,\n  Text,\n  useColorModeValue,\n} from \"@chakra-ui/react\";\nimport {\n  CreativeTimLogo,\n  DocumentIcon,\n  HomeIcon,\n  PersonIcon,\n  RocketIcon,\n} from \"components/Icons/Icons\";\nimport { SidebarResponsive } from \"components/Sidebar/Sidebar\";\nimport PropTypes from \"prop-types\";\nimport React from \"react\";\nimport { NavLink } from \"react-router-dom\";\nimport routes from \"routes.js\";\nexport default function AuthNavbar(props) {\n  const [open, setOpen] = React.useState(false);\n  const handleDrawerToggle = () => {\n    setOpen(!open);\n  };\n  const { logo, logoText, secondary, ...rest } = props;\n  // verifies if routeName is the one active (in browser input)\n  const activeRoute = (routeName) => {\n    return window.location.href.indexOf(routeName) > -1 ? true : false;\n  };\n  // Chakra color mode\n  let navbarIcon = \"white\";\n  let mainText = \"white\";\n  let navbarBg =\n    \"linear-gradient(123.64deg, rgba(255, 255, 255, 0) -22.38%, rgba(255, 255, 255, 0.039) 70.38%)\";\n  let navbarBorder = \"rgba(226, 232, 240, 0.3)\";\n  let navbarShadow = useColorModeValue(\n    \"0px 7px 23px rgba(0, 0, 0, 0.05)\",\n    \"none\"\n  );\n  let navbarFilter = useColorModeValue(\n    \"none\",\n    \"drop-shadow(0px 7px 23px rgba(0, 0, 0, 0.05))\"\n  );\n  let navbarBackdrop = \"blur(42px)\";\n  let navbarPosition = \"fixed\";\n  var brand = (\n    <Link\n      href={`${process.env.PUBLIC_URL}/#/`}\n      target='_blank'\n      display='flex'\n      lineHeight='100%'\n      fontWeight='bold'\n      justifyContent='center'\n      alignItems='center'\n      color={mainText}>\n      <Box\n        bg='linear-gradient(97.89deg, #FFFFFF 70.67%, rgba(117, 122, 140, 0) 108.55%)'\n        bgClip='text'>\n        <Text fontSize='sm' letterSpacing='3px' mt='3px' color='transparent'>\n          {logoText}\n        </Text>\n      </Box>\n    </Link>\n  );\n  var linksAuth = (\n    <HStack display={{ sm: \"none\", lg: \"flex\" }}>\n      <NavLink to='/admin/dashboard'>\n        <Button\n          fontSize='sm'\n          ms='0px'\n          me='0px'\n          px='0px'\n          me={{ sm: \"2px\", md: \"16px\" }}\n          color={navbarIcon}\n          variant='transparent-with-icon'\n          leftIcon={<HomeIcon color={navbarIcon} w='12px' h='12px' me='0px' />}>\n          <Text>Dashboard</Text>\n        </Button>\n      </NavLink>\n      <NavLink to='/admin/profile'>\n        <Button\n          fontSize='sm'\n          ms='0px'\n          me='0px'\n          px='0px'\n          me={{ sm: \"2px\", md: \"16px\" }}\n          color={navbarIcon}\n          variant='transparent-with-icon'\n          leftIcon={\n            <PersonIcon color={navbarIcon} w='12px' h='12px' me='0px' />\n          }>\n          <Text>Profile</Text>\n        </Button>\n      </NavLink>\n      <NavLink to='/auth/signup'>\n        <Button\n          fontSize='sm'\n          ms='0px'\n          me='0px'\n          px='0px'\n          me={{ sm: \"2px\", md: \"16px\" }}\n          color={navbarIcon}\n          variant='transparent-with-icon'\n          leftIcon={\n            <RocketIcon color={navbarIcon} w='12px' h='12px' me='0px' />\n          }>\n          <Text>Sign Up</Text>\n        </Button>\n      </NavLink>\n      <NavLink to='/auth/signin'>\n        <Button\n          fontSize='sm'\n          ms='0px'\n          px='0px'\n          me={{ sm: \"2px\", md: \"16px\" }}\n          color={navbarIcon}\n          variant='transparent-with-icon'\n          leftIcon={\n            <DocumentIcon color={navbarIcon} w='12px' h='12px' me='0px' />\n          }>\n          <Text>Sign In</Text>\n        </Button>\n      </NavLink>\n    </HStack>\n  );\n  return (\n    <Flex\n      position={navbarPosition}\n      top='16px'\n      left='50%'\n      transform='translate(-50%, 0px)'\n      background={navbarBg}\n      border='2px solid'\n      borderColor={navbarBorder}\n      boxShadow={navbarShadow}\n      filter={navbarFilter}\n      backdropFilter={navbarBackdrop}\n      borderRadius='20px'\n      px='16px'\n      py='22px'\n      mx='auto'\n      width='1044px'\n      maxW='90%'\n      alignItems='center'>\n      <Flex w='100%' justifyContent={{ sm: \"start\", lg: \"space-between\" }}>\n        {brand}\n        <Box\n          ms={{ base: \"auto\", lg: \"0px\" }}\n          display={{ base: \"flex\", lg: \"none\" }}>\n          <SidebarResponsive\n            iconColor='white'\n            logoText={props.logoText}\n            secondary={props.secondary}\n            routes={routes}\n            {...rest}\n          />\n        </Box>\n        {linksAuth}\n        <Link href='https://creative-tim.com/product/vision-ui-dashboard-chakra'>\n          <Button\n            fontSize='xs'\n            variant='brand'\n            borderRadius='12px'\n            px='30px'\n            display={{\n              sm: \"none\",\n              lg: \"flex\",\n            }}>\n            Free Download\n          </Button>\n        </Link>\n      </Flex>\n    </Flex>\n  );\n}\n\nAuthNavbar.propTypes = {\n  color: PropTypes.oneOf([\"primary\", \"info\", \"success\", \"warning\", \"danger\"]),\n  brandText: PropTypes.string,\n};\n"
  },
  {
    "path": "src/components/Navbars/SearchBar/SearchBar.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport React from \"react\";\nimport {\n  IconButton,\n  Input,\n  InputGroup,\n  InputLeftElement,\n  useColorModeValue,\n} from \"@chakra-ui/react\";\nimport { SearchIcon } from \"@chakra-ui/icons\";\nexport function SearchBar(props) {\n  // Pass the computed styles into the `__css` prop\n  const { variant, children, ...rest } = props;\n  // Chakra Color Mode\n  const searchIconColor = \"gray.700\";\n  const inputBg = \"gray.800\";\n  return (\n    <InputGroup bg={inputBg} borderRadius='15px' w='200px'>\n      <InputLeftElement\n        children={\n          <IconButton\n            bg='inherit'\n            borderRadius='inherit'\n            _hover='none'\n            _active={{\n              bg: \"inherit\",\n              transform: \"none\",\n              borderColor: \"transparent\",\n            }}\n            _focus={{\n              boxShadow: \"none\",\n            }}\n            icon={\n              <SearchIcon color={searchIconColor} w='15px' h='15px' />\n            }></IconButton>\n        }\n      />\n      <Input\n        fontSize='xs'\n        py='11px'\n        placeholder='Type here...'\n        borderRadius='inherit'\n      />\n    </InputGroup>\n  );\n}\n"
  },
  {
    "path": "src/components/RTLProvider/RTLProvider.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport { CacheProvider } from \"@emotion/react\";\nimport createCache from \"@emotion/cache\";\nimport rtl from \"stylis-plugin-rtl\";\n// NB: A unique `key` is important for it to work!\nconst options = {\n  rtl: { key: \"css-ar\", stylisPlugins: [rtl] },\n  ltr: { key: \"css-en\" },\n};\nexport function RtlProvider({ children }) {\n  const dir = document.documentElement.dir == \"ar\" ? \"rtl\" : \"ltr\";\n  const cache = createCache(options[dir]);\n  return <CacheProvider value={cache} children={children} />;\n}\n"
  },
  {
    "path": "src/components/Separator/Separator.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport React from \"react\";\nimport { Flex } from \"@chakra-ui/react\";\n\nexport function Separator(props) {\n  const { variant, children, ...rest } = props;\n  return (\n    <Flex\n      h='1px'\n      w='100%'\n      bg='linear-gradient(90deg, rgba(224, 225, 226, 0) 0%, #E0E1E2 47.22%, rgba(224, 225, 226, 0.15625) 94.44%)'\n      {...rest}>\n      {children}\n    </Flex>\n  );\n}\n"
  },
  {
    "path": "src/components/Sidebar/Sidebar.js",
    "content": "/*eslint-disable*/\nimport { HamburgerIcon } from \"@chakra-ui/icons\";\n// chakra imports\nimport {\n  Box,\n  Button,\n  Drawer,\n  DrawerBody,\n  DrawerCloseButton,\n  DrawerContent,\n  DrawerOverlay,\n  Flex,\n  Link,\n  Stack,\n  Text,\n  useDisclosure,\n} from \"@chakra-ui/react\";\nimport IconBox from \"components/Icons/IconBox\";\nimport { SimmmpleLogoWhite } from \"components/Icons/Icons\";\nimport { Separator } from \"components/Separator/Separator\";\nimport { SidebarHelp } from \"components/Sidebar/SidebarHelp\";\nimport PropTypes from \"prop-types\";\nimport React from \"react\";\nimport { NavLink, useLocation } from \"react-router-dom\";\n\n// FUNCTIONS\n\nfunction Sidebar(props) {\n  // to check for active links and opened collapses\n  let location = useLocation();\n  // this is for the rest of the collapses\n  const [state, setState] = React.useState({});\n  const mainPanel = React.useRef();\n  let variantChange = \"0.2s linear\";\n  // verifies if routeName is the one active (in browser input)\n  const activeRoute = (routeName) => {\n    return location.pathname === routeName ? \"active\" : \"\";\n  };\n  // this function creates the links and collapses that appear in the sidebar (left menu)\n  const createLinks = (routes) => {\n    const { sidebarVariant } = props;\n    // Chakra Color Mode\n    let activeBg = \"#1A1F37\";\n    let inactiveBg = \"#1A1F37\";\n    let activeColor = \"white\";\n    let inactiveColor = \"white\";\n    let sidebarActiveShadow = \"none\";\n\n    return routes.map((prop, key) => {\n      if (prop.redirect) {\n        return null;\n      }\n      if (prop.category) {\n        var st = {};\n        st[prop[\"state\"]] = !state[prop.state];\n        return (\n          <>\n            <Text\n              color={activeColor}\n              fontWeight='bold'\n              mb={{\n                xl: \"12px\",\n              }}\n              mx='auto'\n              ps={{\n                sm: \"10px\",\n                xl: \"16px\",\n              }}\n              py='12px'>\n              {document.documentElement.dir === \"rtl\"\n                ? prop.rtlName\n                : prop.name}\n            </Text>\n            {createLinks(prop.views)}\n          </>\n        );\n      }\n      return (\n        <NavLink to={prop.layout + prop.path}>\n          {activeRoute(prop.layout + prop.path) === \"active\" ? (\n            <Button\n              boxSize='initial'\n              justifyContent='flex-start'\n              alignItems='center'\n              boxShadow={sidebarActiveShadow}\n              bg={activeBg}\n              transition={variantChange}\n              backdropFilter='blur(42px)'\n              mb={{\n                xl: \"12px\",\n              }}\n              mx={{\n                xl: \"auto\",\n              }}\n              ps={{\n                sm: \"10px\",\n                xl: \"16px\",\n              }}\n              py='12px'\n              borderRadius='15px'\n              _hover='none'\n              w='100%'\n              _active={{\n                bg: \"inherit\",\n                transform: \"none\",\n                borderColor: \"transparent\",\n              }}\n              _focus={{\n                boxShadow: \"0px 7px 11px rgba(0, 0, 0, 0.04)\",\n              }}>\n              <Flex>\n                {typeof prop.icon === \"string\" ? (\n                  <Icon>{prop.icon}</Icon>\n                ) : (\n                  <IconBox\n                    bg='brand.200'\n                    color='white'\n                    h='30px'\n                    w='30px'\n                    me='12px'\n                    transition={variantChange}>\n                    {prop.icon}\n                  </IconBox>\n                )}\n                <Text color={activeColor} my='auto' fontSize='sm'>\n                  {document.documentElement.dir === \"rtl\"\n                    ? prop.rtlName\n                    : prop.name}\n                </Text>\n              </Flex>\n            </Button>\n          ) : (\n            <Button\n              boxSize='initial'\n              justifyContent='flex-start'\n              alignItems='center'\n              bg='transparent'\n              mb={{\n                xl: \"12px\",\n              }}\n              mx={{\n                xl: \"auto\",\n              }}\n              py='12px'\n              ps={{\n                sm: \"10px\",\n                xl: \"16px\",\n              }}\n              borderRadius='15px'\n              _hover='none'\n              w='100%'\n              _active={{\n                bg: \"inherit\",\n                transform: \"none\",\n                borderColor: \"transparent\",\n              }}\n              _focus={{\n                boxShadow: \"none\",\n              }}>\n              <Flex>\n                {typeof prop.icon === \"string\" ? (\n                  <Icon>{prop.icon}</Icon>\n                ) : (\n                  <IconBox\n                    bg={inactiveBg}\n                    color='brand.200'\n                    h='30px'\n                    w='30px'\n                    me='12px'\n                    transition={variantChange}>\n                    {prop.icon}\n                  </IconBox>\n                )}\n                <Text color={inactiveColor} my='auto' fontSize='sm'>\n                  {document.documentElement.dir === \"rtl\"\n                    ? prop.rtlName\n                    : prop.name}\n                </Text>\n              </Flex>\n            </Button>\n          )}\n        </NavLink>\n      );\n    });\n  };\n  const { logoText, routes, sidebarVariant } = props;\n\n  var links = <>{createLinks(routes)}</>;\n  //  BRAND\n  //  Chakra Color Mode\n  let sidebarBg =\n    \"linear-gradient(111.84deg, rgba(6, 11, 38, 0.94) 59.3%, rgba(26, 31, 55, 0) 100%)\";\n  let sidebarRadius = \"16px\";\n  let sidebarMargins = \"16px 0px 16px 16px\";\n  var brand = (\n    <Box pt={\"25px\"} mb='12px'>\n      <Link\n        href={`${process.env.PUBLIC_URL}/#/`}\n        target='_blank'\n        display='flex'\n        lineHeight='100%'\n        mb='30px'\n        fontWeight='bold'\n        justifyContent='center'\n        alignItems='center'\n        fontSize='11px'>\n        <SimmmpleLogoWhite w='22px' h='22px' me='10px' mt='2px' />\n        <Box\n          bg='linear-gradient(97.89deg, #FFFFFF 70.67%, rgba(117, 122, 140, 0) 108.55%)'\n          bgClip='text'>\n          <Text fontSize='sm' letterSpacing='3px' mt='3px' color='transparent'>\n            {logoText}\n          </Text>\n        </Box>\n      </Link>\n      <Separator></Separator>\n    </Box>\n  );\n\n  // SIDEBAR\n  return (\n    <Box ref={mainPanel}>\n      <Box display={{ sm: \"none\", xl: \"block\" }} position='fixed'>\n        <Box\n          bg={sidebarBg}\n          backdropFilter='blur(10px)'\n          transition={variantChange}\n          w='260px'\n          maxW='260px'\n          ms={{\n            sm: \"16px\",\n          }}\n          my={{\n            sm: \"16px\",\n          }}\n          h='calc(100vh - 32px)'\n          ps='20px'\n          pe='20px'\n          m={sidebarMargins}\n          borderRadius={sidebarRadius}>\n          <Box>{brand}</Box>\n          <Stack direction='column' mb='40px'>\n            <Box>{links}</Box>\n          </Stack>\n          <SidebarHelp></SidebarHelp>\n        </Box>\n      </Box>\n    </Box>\n  );\n}\n\n// FUNCTIONS\n\nexport function SidebarResponsive(props) {\n  // to check for active links and opened collapses\n  let location = useLocation();\n  // this is for the rest of the collapses\n  const [state, setState] = React.useState({});\n  const mainPanel = React.useRef();\n  // verifies if routeName is the one active (in browser input)\n  const activeRoute = (routeName) => {\n    return location.pathname === routeName ? \"active\" : \"\";\n  };\n  // this function creates the links and collapses that appear in the sidebar (left menu)\n  const createLinks = (routes) => {\n    // Chakra Color Mode\n    const activeBg = \"#1A1F37\";\n    const inactiveBg = \"#1A1F37\";\n    const activeColor = \"white\";\n    const inactiveColor = \"white\";\n\n    return routes.map((prop, key) => {\n      if (prop.redirect) {\n        return null;\n      }\n      if (prop.category) {\n        var st = {};\n        st[prop[\"state\"]] = !state[prop.state];\n        return (\n          <>\n            <Text\n              color={activeColor}\n              fontWeight='bold'\n              mb={{\n                xl: \"12px\",\n              }}\n              mx='auto'\n              ps={{\n                sm: \"10px\",\n                xl: \"16px\",\n              }}\n              py='12px'>\n              {document.documentElement.dir === \"rtl\"\n                ? prop.rtlName\n                : prop.name}\n            </Text>\n            {createLinks(prop.views)}\n          </>\n        );\n      }\n      return (\n        <NavLink to={prop.layout + prop.path}>\n          {activeRoute(prop.layout + prop.path) === \"active\" ? (\n            <Button\n              boxSize='initial'\n              justifyContent='flex-start'\n              alignItems='center'\n              bg={activeBg}\n              mb={{\n                xl: \"12px\",\n              }}\n              mx={{\n                xl: \"auto\",\n              }}\n              ps={{\n                sm: \"10px\",\n                xl: \"16px\",\n              }}\n              py='12px'\n              borderRadius='15px'\n              _hover='none'\n              w='100%'\n              _active={{\n                bg: \"inherit\",\n                transform: \"none\",\n                borderColor: \"transparent\",\n              }}\n              _focus={{\n                boxShadow: \"none\",\n              }}>\n              <Flex>\n                {typeof prop.icon === \"string\" ? (\n                  <Icon>{prop.icon}</Icon>\n                ) : (\n                  <IconBox\n                    bg='brand.200'\n                    color='white'\n                    h='30px'\n                    w='30px'\n                    me='12px'>\n                    {prop.icon}\n                  </IconBox>\n                )}\n                <Text color={activeColor} my='auto' fontSize='sm'>\n                  {document.documentElement.dir === \"rtl\"\n                    ? prop.rtlName\n                    : prop.name}\n                </Text>\n              </Flex>\n            </Button>\n          ) : (\n            <Button\n              boxSize='initial'\n              justifyContent='flex-start'\n              alignItems='center'\n              bg='transparent'\n              mb={{\n                xl: \"12px\",\n              }}\n              mx={{\n                xl: \"auto\",\n              }}\n              py='12px'\n              ps={{\n                sm: \"10px\",\n                xl: \"16px\",\n              }}\n              borderRadius='15px'\n              _hover='none'\n              w='100%'\n              _active={{\n                bg: \"inherit\",\n                transform: \"none\",\n                borderColor: \"transparent\",\n              }}\n              _focus={{\n                boxShadow: \"none\",\n              }}>\n              <Flex>\n                {typeof prop.icon === \"string\" ? (\n                  <Icon>{prop.icon}</Icon>\n                ) : (\n                  <IconBox\n                    bg={inactiveBg}\n                    color='brand.200'\n                    h='30px'\n                    w='30px'\n                    me='12px'>\n                    {prop.icon}\n                  </IconBox>\n                )}\n                <Text color={inactiveColor} my='auto' fontSize='sm'>\n                  {document.documentElement.dir === \"rtl\"\n                    ? prop.rtlName\n                    : prop.name}\n                </Text>\n              </Flex>\n            </Button>\n          )}\n        </NavLink>\n      );\n    });\n  };\n  const { logoText, routes, iconColor, ...rest } = props;\n\n  var links = <>{createLinks(routes)}</>;\n  //  BRAND\n  //  Chakra Color Mode\n  var brand = (\n    <Box pt={\"35px\"} mb='8px'>\n      <Link\n        href={`${process.env.PUBLIC_URL}/#/`}\n        target='_blank'\n        display='flex'\n        lineHeight='100%'\n        mb='30px'\n        fontWeight='bold'\n        justifyContent='center'\n        alignItems='center'\n        fontSize='11px'>\n        <SimmmpleLogoWhite w='22px' h='22px' me='10px' mt='2px' />\n        <Box\n          bg='linear-gradient(97.89deg, #FFFFFF 70.67%, rgba(117, 122, 140, 0) 108.55%)'\n          bgClip='text'>\n          <Text fontSize='sm' letterSpacing='3px' mt='3px' color='transparent'>\n            {logoText}\n          </Text>\n        </Box>\n      </Link>\n      <Separator></Separator>\n    </Box>\n  );\n\n  // SIDEBAR\n  const { isOpen, onOpen, onClose } = useDisclosure();\n  const btnRef = React.useRef();\n  // Color variables\n  return (\n    <Flex\n      display={{ sm: \"flex\", xl: \"none\" }}\n      ref={mainPanel}\n      alignItems='center'>\n      <HamburgerIcon\n        color={iconColor}\n        w='18px'\n        h='18px'\n        ref={btnRef}\n        colorScheme='teal'\n        onClick={onOpen}\n      />\n      <Drawer\n        isOpen={isOpen}\n        onClose={onClose}\n        placement={document.documentElement.dir === \"rtl\" ? \"right\" : \"left\"}\n        finalFocusRef={btnRef}>\n        <DrawerOverlay />\n        <DrawerContent\n          backdropFilter='blur(10px)'\n          bg='linear-gradient(111.84deg, rgba(6, 11, 38, 0.94) 59.3%, rgba(26, 31, 55, 0) 100%); '\n          w='250px'\n          maxW='250px'\n          ms={{\n            sm: \"16px\",\n          }}\n          my={{\n            sm: \"16px\",\n          }}\n          borderRadius='16px'>\n          <DrawerCloseButton\n            color='white'\n            _focus={{ boxShadow: \"none\" }}\n            _hover={{ boxShadow: \"none\" }}\n          />\n          <DrawerBody maxW='250px' px='1rem'>\n            <Box maxW='100%' h='100vh'>\n              <Box>{brand}</Box>\n              <Stack direction='column' mb='40px'>\n                <Box>{links}</Box>\n              </Stack>\n              <SidebarHelp></SidebarHelp>\n            </Box>\n          </DrawerBody>\n        </DrawerContent>\n      </Drawer>\n    </Flex>\n  );\n}\n// PROPS\n\nSidebar.propTypes = {\n  logoText: PropTypes.string,\n  routes: PropTypes.arrayOf(PropTypes.object),\n  variant: PropTypes.string,\n};\nSidebarResponsive.propTypes = {\n  logoText: PropTypes.string,\n  routes: PropTypes.arrayOf(PropTypes.object),\n};\n\nexport default Sidebar;\n"
  },
  {
    "path": "src/components/Sidebar/SidebarHelp.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport { QuestionIcon } from \"@chakra-ui/icons\";\nimport { Button, Flex, Link, Text } from \"@chakra-ui/react\";\nimport SidebarHelpImage from \"assets/img/SidebarHelpImage.png\";\nimport IconBox from \"components/Icons/IconBox\";\nimport React from \"react\";\n\nexport function SidebarHelp(props) {\n  // Pass the computed styles into the `__css` prop\n  const { children, ...rest } = props;\n  return (\n    <Flex\n      borderRadius='15px'\n      flexDirection='column'\n      bgImage={SidebarHelpImage}\n      bgSize='cover'\n      bgPosition='center'\n      justifyContent='flex-start'\n      alignItems='start'\n      p='16px'\n      minH='170px'\n      minW='218px'>\n      <IconBox width='35px' h='35px' bg='white' mb='auto'>\n        <QuestionIcon color='brand.200' h='18px' w='18px' />\n      </IconBox>\n      <Text fontSize='sm' color='white' fontWeight='bold'>\n        Need help?\n      </Text>\n      <Text fontSize='xs' color='white' mb='10px'>\n        Please check our docs\n      </Text>\n      <Link\n        w='100%'\n        href='https://demos.creative-tim.com/docs-vision-ui-dashboard-chakra/'>\n        <Button\n          fontSize='10px'\n          fontWeight='bold'\n          w='100%'\n          bg='linear-gradient(126.97deg, rgba(6, 11, 40, 0.74) 28.26%, rgba(10, 14, 35, 0.71) 91.2%)'\n          _hover='none'\n          _active={{\n            bg: \"white\",\n            transform: \"none\",\n            borderColor: \"transparent\",\n          }}\n          _active='none'\n          _focus={{\n            boxShadow: \"none\",\n          }}\n          color='white'>\n          DOCUMENTATION\n        </Button>\n      </Link>\n    </Flex>\n  );\n}\n"
  },
  {
    "path": "src/components/Tables/BillingRow.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport { Box, Button, Flex, Icon, Text } from \"@chakra-ui/react\";\nimport React from \"react\";\nimport { FaPencilAlt, FaTrashAlt } from \"react-icons/fa\";\n\nfunction BillingRow(props) {\n  const { name, company, email, number } = props;\n\n  return (\n    <Box\n      p='24px'\n      bg='linear-gradient(127.09deg, rgba(24, 29, 60, 0.94) 19.41%, rgba(10, 14, 35, 0.49) 76.65%)'\n      my='22px'\n      borderRadius='20px'>\n      <Flex justify='space-between' w='100%' align='flex-start'>\n        <Flex direction='column' maxW='70%'>\n          <Text color='#fff' fontSize='sm' mb='10px'>\n            {name}\n          </Text>\n          <Text color='gray.400' fontSize='xs'>\n            Company Name: {window.innerWidth < 768 ? <br /> : null}\n            <Text as='span' color='gray.500'>\n              {company}\n            </Text>\n          </Text>\n          <Text color='gray.400' fontSize='xs'>\n            Email Address:{\" \"}\n            <Text as='span' color='gray.500'>\n              {email}\n            </Text>\n          </Text>\n          <Text color='gray.400' fontSize='xs'>\n            VAT Number:{\" \"}\n            <Text as='span' color='gray.500'>\n              {number}\n            </Text>\n          </Text>\n        </Flex>\n        <Flex direction={{ sm: \"column\", md: \"row\" }} align='flex-start'>\n          <Button\n            p='0px'\n            variant='no-hover'\n            mb={{ sm: \"10px\", md: \"0px\" }}\n            me={{ md: \"12px\" }}>\n            <Flex color='red.500' cursor='pointer' align='center' p='12px'>\n              <Icon as={FaTrashAlt} me='4px' w='16px' h='16px' />\n              <Text fontSize='xs'>DELETE</Text>\n            </Flex>\n          </Button>\n          <Button p='0px' variant='no-hover'>\n            <Flex color='#fff' cursor='pointer' align='center' p='12px'>\n              <Icon as={FaPencilAlt} me='4px' w='14px' h='14px' />\n              <Text fontSize='xs' color='gray.400'>\n                EDIT\n              </Text>\n            </Flex>\n          </Button>\n        </Flex>\n      </Flex>\n    </Box>\n  );\n}\n\nexport default BillingRow;\n"
  },
  {
    "path": "src/components/Tables/DashboardTableRow.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport {\n  Avatar,\n  AvatarGroup,\n  Flex,\n  Icon,\n  Progress,\n  Td,\n  Text,\n  Tr,\n  useColorModeValue,\n} from \"@chakra-ui/react\";\nimport React from \"react\";\n\nfunction DashboardTableRow(props) {\n  const { logo, name, members, budget, progression, lastItem } = props;\n  const textColor = useColorModeValue(\"gray.700\", \"white\");\n  return (\n    <Tr>\n      <Td\n        minWidth={{ sm: \"250px\" }}\n        ps='0px'\n        borderBottomColor='#56577A'\n        border={lastItem ? \"none\" : null}>\n        <Flex align='center' py='.8rem' minWidth='100%' flexWrap='nowrap'>\n          <Icon as={logo} h={\"24px\"} w={\"24px\"} me='18px' />\n          <Text fontSize='sm' color='#fff' fontWeight='normal' minWidth='100%'>\n            {name}\n          </Text>\n        </Flex>\n      </Td>\n\n      <Td borderBottomColor='#56577A' border={lastItem ? \"none\" : null}>\n        <AvatarGroup size='xs' showBorder={false}>\n          {members.map((member) => {\n            return (\n              <Avatar\n                name='Ryan Florence'\n                src={member}\n                showBorder={false}\n                border='none'\n                _hover={{ zIndex: \"3\", cursor: \"pointer\" }}\n              />\n            );\n          })}\n        </AvatarGroup>\n      </Td>\n      <Td borderBottomColor='#56577A' border={lastItem ? \"none\" : null}>\n        <Text fontSize='sm' color='#fff' fontWeight='bold' pb='.5rem'>\n          {budget}\n        </Text>\n      </Td>\n      <Td borderBottomColor='#56577A' border={lastItem ? \"none\" : null}>\n        <Flex direction='column'>\n          <Text\n            fontSize='sm'\n            color='#fff'\n            fontWeight='bold'\n            pb='.2rem'>{`${progression}%`}</Text>\n          <Progress\n            colorScheme='brand'\n            h='3px'\n            bg='#2D2E5F'\n            value={progression}\n            borderRadius='30px'\n          />\n        </Flex>\n      </Td>\n    </Tr>\n  );\n}\n\nexport default DashboardTableRow;\n"
  },
  {
    "path": "src/components/Tables/InvoicesRow.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport { Box, Button, Flex, Icon, Spacer, Text } from \"@chakra-ui/react\";\n\nfunction InvoicesRow(props) {\n  const { date, code, price, format, logo } = props;\n\n  return (\n    <Flex mb='24px' alignItems='center'>\n      <Flex direction='column'>\n        <Text fontSize='sm' color='#fff' mb='4px'>\n          {date}\n        </Text>\n        <Text fontSize='xs' color='gray.400'>\n          {code}\n        </Text>\n      </Flex>\n      <Spacer />\n      <Box me='14px'>\n        <Text fontSize='xs' color='gray.400'>\n          {price}\n        </Text>\n      </Box>\n      <Button p='0px' bg='transparent' variant='no-hover'>\n        <Flex alignItems='center' p='12px'>\n          <Icon as={logo} w='16px' h='16px' h='auto' me='5px' color='#fff' />\n          <Text fontSize='xs' color='gray.400'>\n            {format}\n          </Text>\n        </Flex>\n      </Button>\n    </Flex>\n  );\n}\n\nexport default InvoicesRow;\n"
  },
  {
    "path": "src/components/Tables/TablesProjectRow.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport React from \"react\";\nimport {\n  Tr,\n  Td,\n  Flex,\n  Text,\n  Progress,\n  Icon,\n  Button,\n  useColorModeValue,\n} from \"@chakra-ui/react\";\nimport { FaEllipsisV } from \"react-icons/fa\";\n\nfunction DashboardTableRow(props) {\n  const { logo, name, status, budget, progression, lastItem } = props;\n  const textColor = useColorModeValue(\"gray.700\", \"white\");\n  return (\n    <Tr>\n      <Td\n        minWidth={{ sm: \"250px\" }}\n        ps='0px'\n        borderBottomColor='#56577A'\n        border={lastItem ? \"none\" : null}>\n        <Flex alignItems='center' py='.8rem' minWidth='100%' flexWrap='nowrap'>\n          <Icon as={logo} h={\"20px\"} w={\"20px\"} me='18px' />\n          <Text fontSize='sm' color='#fff' minWidth='100%'>\n            {name}\n          </Text>\n        </Flex>\n      </Td>\n      <Td borderBottomColor='#56577A' border={lastItem ? \"none\" : null}>\n        <Text fontSize='sm' color='#fff' fontWeight='bold' pb='.5rem'>\n          {budget}\n        </Text>\n      </Td>\n      <Td borderBottomColor='#56577A' border={lastItem ? \"none\" : null}>\n        <Text fontSize='sm' color='#fff' fontWeight='bold' pb='.5rem'>\n          {status}\n        </Text>\n      </Td>\n      <Td borderBottomColor='#56577A' border={lastItem ? \"none\" : null}>\n        <Flex direction='column'>\n          <Text\n            fontSize='sm'\n            color='#fff'\n            fontWeight='bold'\n            pb='.2rem'>{`${progression}%`}</Text>\n          <Progress\n            colorScheme='brand'\n            maxW='125px'\n            h='3px'\n            bg='#2D2E5F'\n            value={progression}\n            borderRadius='15px'\n          />\n        </Flex>\n      </Td>\n      <Td borderBottomColor='#56577A' border={lastItem ? \"none\" : null}>\n        <Button p='0px' bg='transparent' _hover='none' _active='none'>\n          <Icon as={FaEllipsisV} color='gray.400' cursor='pointer' />\n        </Button>\n      </Td>\n    </Tr>\n  );\n}\n\nexport default DashboardTableRow;\n"
  },
  {
    "path": "src/components/Tables/TablesTableRow.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport {\n  Avatar,\n  Badge,\n  Button,\n  Flex,\n  Td,\n  Text,\n  Tr,\n  useColorModeValue,\n} from \"@chakra-ui/react\";\nimport React from \"react\";\n\nfunction TablesTableRow(props) {\n  const {\n    logo,\n    name,\n    email,\n    subdomain,\n    domain,\n    status,\n    date,\n    lastItem,\n  } = props;\n  const textColor = useColorModeValue(\"gray.700\", \"white\");\n  const bgStatus = useColorModeValue(\"gray.400\", \"#1a202c\");\n  const colorStatus = useColorModeValue(\"white\", \"gray.400\");\n\n  return (\n    <Tr>\n      <Td\n        minWidth={{ sm: \"250px\" }}\n        ps='0px'\n        border={lastItem ? \"none\" : null}\n        borderBottomColor='#56577A'>\n        <Flex align='center' py='.8rem' minWidth='100%' flexWrap='nowrap'>\n          <Avatar\n            src={logo}\n            w='50px'\n            borderRadius='12px'\n            me='18px'\n            border='none'\n          />\n          <Flex direction='column'>\n            <Text\n              fontSize='sm'\n              color='#fff'\n              fontWeight='normal'\n              minWidth='100%'>\n              {name}\n            </Text>\n            <Text fontSize='sm' color='gray.400' fontWeight='normal'>\n              {email}\n            </Text>\n          </Flex>\n        </Flex>\n      </Td>\n\n      <Td\n        border={lastItem ? \"none\" : null}\n        borderBottomColor='#56577A'\n        minW='150px'>\n        <Flex direction='column'>\n          <Text fontSize='sm' color='#fff' fontWeight='normal'>\n            {domain}\n          </Text>\n          <Text fontSize='sm' color='gray.400' fontWeight='normal'>\n            {subdomain}\n          </Text>\n        </Flex>\n      </Td>\n      <Td border={lastItem ? \"none\" : null} borderBottomColor='#56577A'>\n        <Badge\n          bg={status === \"Online\" ? \"green.400\" : \"transparent\"}\n          color={status === \"Online\" ? \"white\" : colorStatus}\n          fontSize='sm'\n          p='3px 10px'\n          borderRadius='8px'\n          border={status === \"Online\" ? \"none\" : \"1px solid #fff\"}\n          fontWeight='normal'>\n          {status}\n        </Badge>\n      </Td>\n      <Td border={lastItem ? \"none\" : null} borderBottomColor='#56577A'>\n        <Text fontSize='sm' color='#fff' fontWeight='normal'>\n          {date}\n        </Text>\n      </Td>\n      <Td border={lastItem ? \"none\" : null} borderBottomColor='#56577A'>\n        <Button p='0px' bg='transparent' variant='no-hover'>\n          <Text\n            fontSize='sm'\n            color='gray.400'\n            fontWeight='bold'\n            cursor='pointer'>\n            Edit\n          </Text>\n        </Button>\n      </Td>\n    </Tr>\n  );\n}\n\nexport default TablesTableRow;\n"
  },
  {
    "path": "src/components/Tables/TimelineRow.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport { Box, Flex, Icon, Text, useColorModeValue } from \"@chakra-ui/react\";\nimport React from \"react\";\n\nfunction TimelineRow(props) {\n  const { logo, title, date, color, index, arrLength } = props;\n  const textColor = useColorModeValue(\"gray.700\", \"white.300\");\n  const bgIconColor = useColorModeValue(\"white.300\", \"gray.700\");\n\n  return (\n    <Flex alignItems='center' minH='78px' justifyContent='start' mb='5px'>\n      <Flex direction='column' h='100%' align='center'>\n        <Icon\n          as={logo}\n          bg={bgIconColor}\n          color={color}\n          h={\"20px\"}\n          w={\"20px\"}\n          me='16px'\n          right={document.documentElement.dir === \"rtl\" ? \"-8px\" : \"\"}\n          left={document.documentElement.dir === \"rtl\" ? \"\" : \"-8px\"}\n        />\n      </Flex>\n      <Flex direction='column' justifyContent='flex-start' h='100%'>\n        <Text fontSize='sm' color='#fff' fontWeight='normal' mb='3px'>\n          {title}\n        </Text>\n        <Text fontSize='sm' color='gray.400' fontWeight='normal'>\n          {date}\n        </Text>\n      </Flex>\n    </Flex>\n  );\n}\n\nexport default TimelineRow;\n"
  },
  {
    "path": "src/components/Tables/TransactionRow.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport { Box, Flex, Icon, Text } from \"@chakra-ui/react\";\nimport React from \"react\";\n\nfunction TransactionRow(props) {\n  const { name, date, logo, price } = props;\n\n  return (\n    <Flex mb='24px' justifyContent='space-between'>\n      <Flex alignItems='center'>\n        <Box\n          me='14px'\n          borderRadius='50%'\n          color={\n            price[0] === \"+\"\n              ? \"#01B574\"\n              : price[0] === \"-\"\n              ? \"red.500\"\n              : \"gray.400\"\n          }\n          border='1px solid'\n          display='flex'\n          alignItems='center'\n          justifyContent='center'\n          w='35px'\n          h='35px'>\n          <Icon as={logo} w='12px' h='12px' />\n        </Box>\n        <Flex direction='column'>\n          <Text fontSize='sm' color='#fff' mb='4px'>\n            {name}\n          </Text>\n          <Text fontSize={{ sm: \"xs\", md: \"sm\" }} color='gray.400'>\n            {date}\n          </Text>\n        </Flex>\n      </Flex>\n      <Box\n        color={\n          price[0] === \"+\"\n            ? \"#01B574\"\n            : price[0] === \"-\"\n            ? \"red.500\"\n            : \"gray.400\"\n        }>\n        <Text fontSize='sm'>{price}</Text>\n      </Box>\n    </Flex>\n  );\n}\n\nexport default TransactionRow;\n"
  },
  {
    "path": "src/index.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { HashRouter, Route, Switch, Redirect } from \"react-router-dom\";\n\nimport AuthLayout from \"layouts/Auth.js\";\nimport AdminLayout from \"layouts/Admin.js\";\nimport RTLLayout from \"layouts/RTL.js\";\n\nReactDOM.render(\n  <HashRouter>\n    <Switch>\n      <Route path={`/auth`} component={AuthLayout} />\n      <Route path={`/admin`} component={AdminLayout} />\n      <Route path={`/rtl`} component={RTLLayout} />\n      <Redirect from={`/`} to='/admin/dashboard' />\n    </Switch>\n  </HashRouter>,\n  document.getElementById(\"root\")\n);\n"
  },
  {
    "path": "src/layouts/Admin.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\n// Chakra imports\nimport { ChakraProvider, Portal, useDisclosure } from \"@chakra-ui/react\";\nimport Configurator from \"components/Configurator/Configurator\";\nimport Footer from \"components/Footer/Footer.js\";\n// Layout components\nimport AdminNavbar from \"components/Navbars/AdminNavbar.js\";\nimport Sidebar from \"components/Sidebar/Sidebar.js\";\nimport React, { useState } from \"react\";\nimport { Redirect, Route, Switch } from \"react-router-dom\";\nimport routes from \"routes.js\";\n// Custom Chakra theme\nimport theme from \"theme/themeAdmin.js\";\nimport FixedPlugin from \"../components/FixedPlugin/FixedPlugin\";\n// Custom components\nimport MainPanel from \"../components/Layout/MainPanel\";\nimport PanelContainer from \"../components/Layout/PanelContainer\";\nimport PanelContent from \"../components/Layout/PanelContent\";\nexport default function Dashboard(props) {\n  const { ...rest } = props;\n  // states and functions\n  const [sidebarVariant, setSidebarVariant] = useState(\"transparent\");\n  const [fixed, setFixed] = useState(false);\n  // ref for main panel div\n  const mainPanel = React.createRef();\n  // functions for changing the states from components\n  const getRoute = () => {\n    return window.location.pathname !== \"/admin/full-screen-maps\";\n  };\n  const getActiveRoute = (routes) => {\n    let activeRoute = \"Default Brand Text\";\n    for (let i = 0; i < routes.length; i++) {\n      if (routes[i].collapse) {\n        let collapseActiveRoute = getActiveRoute(routes[i].views);\n        if (collapseActiveRoute !== activeRoute) {\n          return collapseActiveRoute;\n        }\n      } else if (routes[i].category) {\n        let categoryActiveRoute = getActiveRoute(routes[i].views);\n        if (categoryActiveRoute !== activeRoute) {\n          return categoryActiveRoute;\n        }\n      } else {\n        if (\n          window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1\n        ) {\n          return routes[i].name;\n        }\n      }\n    }\n    return activeRoute;\n  };\n  // This changes navbar state(fixed or not)\n  const getActiveNavbar = (routes) => {\n    let activeNavbar = false;\n    for (let i = 0; i < routes.length; i++) {\n      if (routes[i].category) {\n        let categoryActiveNavbar = getActiveNavbar(routes[i].views);\n        if (categoryActiveNavbar !== activeNavbar) {\n          return categoryActiveNavbar;\n        }\n      } else {\n        if (\n          window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1\n        ) {\n          if (routes[i].secondaryNavbar) {\n            return routes[i].secondaryNavbar;\n          }\n        }\n      }\n    }\n    return activeNavbar;\n  };\n  const getRoutes = (routes) => {\n    return routes.map((prop, key) => {\n      if (prop.collapse) {\n        return getRoutes(prop.views);\n      }\n      if (prop.category === \"account\") {\n        return getRoutes(prop.views);\n      }\n      if (prop.layout === \"/admin\") {\n        return (\n          <Route\n            path={prop.layout + prop.path}\n            component={prop.component}\n            key={key}\n          />\n        );\n      } else {\n        return null;\n      }\n    });\n  };\n  const { isOpen, onOpen, onClose } = useDisclosure();\n  document.documentElement.dir = \"ltr\";\n  // Chakra Color Mode\n  return (\n    <ChakraProvider theme={theme} resetCss={false}>\n      <Sidebar\n        routes={routes}\n        logoText={\"VISION UI FREE\"}\n        display='none'\n        sidebarVariant={sidebarVariant}\n        {...rest}\n      />\n      <MainPanel\n        ref={mainPanel}\n        w={{\n          base: \"100%\",\n          xl: \"calc(100% - 275px)\",\n        }}>\n        <Portal>\n          <AdminNavbar\n            onOpen={onOpen}\n            logoText={\"VISION UI FREE\"}\n            brandText={getActiveRoute(routes)}\n            secondary={getActiveNavbar(routes)}\n            fixed={fixed}\n            {...rest}\n          />\n        </Portal>\n        {getRoute() ? (\n          <PanelContent>\n            <PanelContainer>\n              <Switch>\n                {getRoutes(routes)}\n                <Redirect from='/admin' to='/admin/dashboard' />\n              </Switch>\n            </PanelContainer>\n          </PanelContent>\n        ) : null}\n        <Footer />\n        <Portal>\n          <FixedPlugin\n            secondary={getActiveNavbar(routes)}\n            fixed={fixed}\n            onOpen={onOpen}\n          />\n        </Portal>\n        <Configurator\n          secondary={getActiveNavbar(routes)}\n          isOpen={isOpen}\n          onClose={onClose}\n          isChecked={fixed}\n          onSwitch={(value) => {\n            setFixed(value);\n          }}\n          onOpaque={() => setSidebarVariant(\"opaque\")}\n          onTransparent={() => setSidebarVariant(\"transparent\")}\n        />\n      </MainPanel>\n    </ChakraProvider>\n  );\n}\n"
  },
  {
    "path": "src/layouts/Auth.js",
    "content": "// chakra imports\nimport { Box, ChakraProvider, Portal } from \"@chakra-ui/react\";\nimport Footer from \"components/Footer/Footer.js\";\n// core components\nimport AuthNavbar from \"components/Navbars/AuthNavbar.js\";\nimport React from \"react\";\nimport { Redirect, Route, Switch } from \"react-router-dom\";\nimport routes from \"routes.js\";\nimport theme from \"theme/themeAuth.js\";\n\n/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nexport default function Pages(props) {\n  const { ...rest } = props;\n  // ref for the wrapper div\n  const wrapper = React.createRef();\n  React.useEffect(() => {\n    document.body.style.overflow = \"unset\";\n    // Specify how to clean up after this effect:\n    return function cleanup() {};\n  });\n  const getActiveRoute = (routes) => {\n    let activeRoute = \"Default Brand Text\";\n    for (let i = 0; i < routes.length; i++) {\n      if (routes[i].collapse) {\n        let collapseActiveRoute = getActiveRoute(routes[i].views);\n        if (collapseActiveRoute !== activeRoute) {\n          return collapseActiveRoute;\n        }\n      } else if (routes[i].category) {\n        let categoryActiveRoute = getActiveRoute(routes[i].views);\n        if (categoryActiveRoute !== activeRoute) {\n          return categoryActiveRoute;\n        }\n      } else {\n        if (\n          window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1\n        ) {\n          return routes[i].name;\n        }\n      }\n    }\n    return activeRoute;\n  };\n  const getActiveNavbar = (routes) => {\n    let activeNavbar = false;\n    for (let i = 0; i < routes.length; i++) {\n      if (routes[i].category) {\n        let categoryActiveNavbar = getActiveNavbar(routes[i].views);\n        if (categoryActiveNavbar !== activeNavbar) {\n          return categoryActiveNavbar;\n        }\n      } else {\n        if (\n          window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1\n        ) {\n          if (routes[i].secondaryNavbar) {\n            return routes[i].secondaryNavbar;\n          }\n        }\n      }\n    }\n    return activeNavbar;\n  };\n  const getRoutes = (routes) => {\n    return routes.map((prop, key) => {\n      if (prop.collapse) {\n        return getRoutes(prop.views);\n      }\n      if (prop.category === \"account\") {\n        return getRoutes(prop.views);\n      }\n      if (prop.layout === \"/auth\") {\n        return (\n          <Route\n            path={prop.layout + prop.path}\n            component={prop.component}\n            key={key}\n          />\n        );\n      } else {\n        return null;\n      }\n    });\n  };\n  const navRef = React.useRef();\n  document.documentElement.dir = \"ltr\";\n  return (\n    <ChakraProvider theme={theme} resetCss={false} w='100%'>\n      <Box ref={navRef} w='100%'>\n        <Portal containerRef={navRef}>\n          <AuthNavbar\n            secondary={getActiveNavbar(routes)}\n            logoText='VISION UI FREE'\n          />\n        </Portal>\n        <Box w='100%'>\n          <Box ref={wrapper} w='100%'>\n            <Switch>\n              {getRoutes(routes)}\n              <Redirect from='/auth' to='/auth/login-page' />\n            </Switch>\n          </Box>\n        </Box>\n      </Box>\n    </ChakraProvider>\n  );\n}\n"
  },
  {
    "path": "src/layouts/RTL.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\n// Chakra imports\nimport { ChakraProvider, Portal, useDisclosure } from \"@chakra-ui/react\";\nimport { RtlProvider } from \"components/RTLProvider/RTLProvider\";\nimport Configurator from \"components/Configurator/Configurator\";\nimport Footer from \"components/Footer/Footer.js\";\n// Layout components\nimport AdminNavbar from \"components/Navbars/AdminNavbar.js\";\nimport Sidebar from \"components/Sidebar/Sidebar.js\";\nimport React, { useState } from \"react\";\nimport { Redirect, Route, Switch } from \"react-router-dom\";\nimport routes from \"routes.js\";\n// Custom Chakra theme\nimport theme from \"theme/themeAdmin\";\nimport FixedPlugin from \"../components/FixedPlugin/FixedPlugin\";\n// Custom components\nimport MainPanel from \"../components/Layout/MainPanel\";\nimport PanelContainer from \"../components/Layout/PanelContainer\";\nimport PanelContent from \"../components/Layout/PanelContent\";\nexport default function Dashboard(props) {\n  const { ...rest } = props;\n  // states and functions\n  const [sidebarVariant, setSidebarVariant] = useState(\"transparent\");\n  const [fixed, setFixed] = useState(false);\n  // ref for main panel div\n  const mainPanel = React.createRef();\n  const getRoute = () => {\n    return window.location.pathname !== \"/admin/full-screen-maps\";\n  };\n  const getActiveRoute = (routes) => {\n    let activeRoute = \"Default Brand Text\";\n    for (let i = 0; i < routes.length; i++) {\n      if (routes[i].collapse) {\n        let collapseActiveRoute = getActiveRoute(routes[i].views);\n        if (collapseActiveRoute !== activeRoute) {\n          return collapseActiveRoute;\n        }\n      } else if (routes[i].category) {\n        let categoryActiveRoute = getActiveRoute(routes[i].views);\n        if (categoryActiveRoute !== activeRoute) {\n          return categoryActiveRoute;\n        }\n      } else {\n        if (\n          window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1\n        ) {\n          return routes[i].name;\n        }\n      }\n    }\n    return activeRoute;\n  };\n  // This changes navbar state(fixed or not)\n  const getActiveNavbar = (routes) => {\n    let activeNavbar = false;\n    for (let i = 0; i < routes.length; i++) {\n      if (routes[i].category) {\n        let categoryActiveNavbar = getActiveNavbar(routes[i].views);\n        if (categoryActiveNavbar !== activeNavbar) {\n          return categoryActiveNavbar;\n        }\n      } else {\n        if (\n          window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1\n        ) {\n          if (routes[i].secondaryNavbar) {\n            return routes[i].secondaryNavbar;\n          }\n        }\n      }\n    }\n    return activeNavbar;\n  };\n  const getRoutes = (routes) => {\n    return routes.map((prop, key) => {\n      if (prop.collapse) {\n        return getRoutes(prop.views);\n      }\n      if (prop.category === \"account\") {\n        return getRoutes(prop.views);\n      }\n      if (prop.layout === \"/rtl\" || prop.layout === \"/admin\") {\n        return (\n          <Route\n            path={prop.layout + prop.path}\n            component={prop.component}\n            key={key}\n          />\n        );\n      } else {\n        return null;\n      }\n    });\n  };\n  const { isOpen, onOpen, onClose } = useDisclosure();\n  document.documentElement.dir = \"rtl\";\n  // Chakra Color Mode\n  return (\n    <ChakraProvider theme={theme} resetCss={false}>\n      <RtlProvider>\n        <Sidebar\n          routes={routes}\n          logoText={\"VISION UI FREE\"}\n          display='none'\n          sidebarVariant={sidebarVariant}\n          {...rest}\n        />\n        <MainPanel\n          variant='rtl'\n          ref={mainPanel}\n          w={{\n            base: \"100%\",\n            xl: \"calc(100% - 275px)\",\n          }}>\n          <Portal>\n            <AdminNavbar\n              onOpen={onOpen}\n              logoText={\"VISION UI FREE\"}\n              brandText={getActiveRoute(routes)}\n              secondary={getActiveNavbar(routes)}\n              fixed={fixed}\n              {...rest}\n            />\n          </Portal>\n          {getRoute() ? (\n            <PanelContent>\n              <PanelContainer>\n                <Switch>\n                  {getRoutes(routes)}\n                  <Redirect from='/rtl' to='/rtl/rtl-support-page' />\n                </Switch>\n              </PanelContainer>\n            </PanelContent>\n          ) : null}\n          <Footer />\n          <Portal>\n            <FixedPlugin\n              secondary={getActiveNavbar(routes)}\n              fixed={fixed}\n              onOpen={onOpen}\n            />\n          </Portal>\n          <Configurator\n            secondary={getActiveNavbar(routes)}\n            isOpen={isOpen}\n            onClose={onClose}\n            isChecked={fixed}\n            onSwitch={(value) => {\n              setFixed(value);\n            }}\n            onOpaque={() => setSidebarVariant(\"opaque\")}\n            onTransparent={() => setSidebarVariant(\"transparent\")}\n          />\n        </MainPanel>\n      </RtlProvider>\n    </ChakraProvider>\n  );\n}\n"
  },
  {
    "path": "src/routes.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\n// import\nimport Dashboard from \"views/Dashboard/Dashboard.js\";\nimport Tables from \"views/Dashboard/Tables.js\";\nimport Billing from \"views/Dashboard/Billing.js\";\nimport RTLPage from \"views/RTL/RTLPage.js\";\nimport Profile from \"views/Dashboard/Profile.js\";\nimport SignIn from \"views/Pages/SignIn.js\";\nimport SignUp from \"views/Pages/SignUp.js\";\n\nimport {\n  HomeIcon,\n  StatsIcon,\n  CreditIcon,\n  PersonIcon,\n  DocumentIcon,\n  RocketIcon,\n  SupportIcon,\n} from \"components/Icons/Icons\";\n\nvar dashRoutes = [\n  {\n    path: \"/dashboard\",\n    name: \"Dashboard\",\n    rtlName: \"لوحة القيادة\",\n    icon: <HomeIcon color='inherit' />,\n    component: Dashboard,\n    layout: \"/admin\",\n  },\n  {\n    path: \"/tables\",\n    name: \"Tables\",\n    rtlName: \"لوحة القيادة\",\n    icon: <StatsIcon color='inherit' />,\n    component: Tables,\n    layout: \"/admin\",\n  },\n  {\n    path: \"/billing\",\n    name: \"Billing\",\n    rtlName: \"لوحة القيادة\",\n    icon: <CreditIcon color='inherit' />,\n    component: Billing,\n    layout: \"/admin\",\n  },\n  {\n    path: \"/rtl-support-page\",\n    name: \"RTL\",\n    rtlName: \"آرتيإل\",\n    icon: <SupportIcon color='inherit' />,\n    component: RTLPage,\n    layout: \"/rtl\",\n  },\n  {\n    name: \"ACCOUNT PAGES\",\n    category: \"account\",\n    rtlName: \"صفحات\",\n    state: \"pageCollapse\",\n    views: [\n      {\n        path: \"/profile\",\n        name: \"Profile\",\n        rtlName: \"لوحة القيادة\",\n        icon: <PersonIcon color='inherit' />,\n        secondaryNavbar: true,\n        component: Profile,\n        layout: \"/admin\",\n      },\n      {\n        path: \"/signin\",\n        name: \"Sign In\",\n        rtlName: \"لوحة القيادة\",\n        icon: <DocumentIcon color='inherit' />,\n        component: SignIn,\n        layout: \"/auth\",\n      },\n      {\n        path: \"/signup\",\n        name: \"Sign Up\",\n        rtlName: \"لوحة القيادة\",\n        icon: <RocketIcon color='inherit' />,\n        secondaryNavbar: true,\n        component: SignUp,\n        layout: \"/auth\",\n      },\n    ],\n  },\n];\nexport default dashRoutes;\n"
  },
  {
    "path": "src/theme/additions/card/Card.js",
    "content": "const Card = {\n  baseStyle: {\n    p: \"22px\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    backdropFilter: \"blur(120px)\",\n    width: \"100%\",\n    borderRadius: \"20px\",\n    bg:\n      \"linear-gradient(127.09deg, rgba(6, 11, 40, 0.94) 19.41%, rgba(10, 14, 35, 0.49) 76.65%)\",\n    backgroundClip: \"border-box\",\n  },\n};\n\nexport const CardComponent = {\n  components: {\n    Card,\n  },\n};\n"
  },
  {
    "path": "src/theme/additions/card/CardBody.js",
    "content": "const CardBody = {\n  baseStyle: {\n    display: \"flex\",\n    width: \"100%\",\n  },\n};\n\nexport const CardBodyComponent = {\n  components: {\n    CardBody,\n  },\n};\n"
  },
  {
    "path": "src/theme/additions/card/CardHeader.js",
    "content": "const CardHeader = {\n  baseStyle: {\n    display: \"flex\",\n    width: \"100%\"\n  },\n};\n\nexport const CardHeaderComponent = {\n  components: {\n    CardHeader,\n  },\n};\n"
  },
  {
    "path": "src/theme/additions/layout/MainPanel.js",
    "content": "const MainPanel = {\n  baseStyle: {\n    float: \"right\",\n    maxWidth: \"100%\",\n    overflow: \"auto\",\n    position: \"relative\",\n    maxHeight: \"100%\",\n    transition: \"all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)\",\n    transitionDuration: \".2s, .2s, .35s\",\n    transitionProperty: \"top, bottom, width\",\n    transitionTimingFunction: \"linear, linear, ease\",\n  },\n  variants: {\n    main: (props) => ({\n      float: \"right\",\n    }),\n    rtl: (props) => ({\n      float: \"left\",\n    }),\n  },\n  defaultProps: {\n    variant: \"main\",\n  },\n};\n\nexport const MainPanelComponent = {\n  components: {\n    MainPanel,\n  },\n};\n"
  },
  {
    "path": "src/theme/additions/layout/PanelContainer.js",
    "content": "const PanelContainer = {\n  baseStyle: {\n    p: \"30px 15px\",\n    minHeight: \"calc(100vh - 123px)\",\n  },\n};\n\nexport const PanelContainerComponent = {\n  components: {\n    PanelContainer,\n  },\n};\n"
  },
  {
    "path": "src/theme/additions/layout/PanelContent.js",
    "content": "const PanelContent = {\n  baseStyle: {\n    ms: \"auto\",\n    me: \"auto\",\n    ps: \"15px\",\n    pe: \"15px\",\n  },\n};\n\nexport const PanelContentComponent = {\n  components: {\n    PanelContent,\n  },\n};\n"
  },
  {
    "path": "src/theme/bgAdmin.js",
    "content": "import bgBody from \"assets/img/background-body-admin.png\";\n\nexport const bgAdmin = {\n  styles: {\n    global: (props) => ({\n      body: {\n        bgImage: bgBody,\n        bgSize: \"cover\",\n        bgPosition: \"center center\",\n      },\n    }),\n  },\n};\n"
  },
  {
    "path": "src/theme/bgAuth.js",
    "content": "export const bgAuth = {\n  styles: {\n    global: (props) => ({\n      body: {\n        bg:\n          \"linear-gradient(159.02deg, #0F123B 14.25%, #090D2E 56.45%, #020515 86.14%)\",\n\n        bgSize: \"cover\",\n        bgPosition: \"center center\",\n      },\n    }),\n  },\n};\n"
  },
  {
    "path": "src/theme/components/badge.js",
    "content": "import { baseStyle } from \"@chakra-ui/react\";\n\nexport const badgeStyles = {\n    components: {\n        Badge: {\n            sizes: {\n                md: {\n                    width: \"65px\",\n                    height: \"25px\"\n                }\n            },\n            baseStyle: {\n                textTransform: \"capitalize\"\n            }\n\n        }\n    }\n}"
  },
  {
    "path": "src/theme/components/button.js",
    "content": "export const buttonStyles = {\n  components: {\n    Button: {\n      variants: {\n        \"no-hover\": {\n          _hover: {\n            boxShadow: \"none\",\n          },\n        },\n        \"transparent-with-icon\": {\n          bg: \"transparent\",\n          fontWeight: \"bold\",\n          borderRadius: \"inherit\",\n          cursor: \"pointer\",\n          _hover: \"none\",\n          _active: {\n            bg: \"transparent\",\n            transform: \"none\",\n            borderColor: \"transparent\",\n          },\n          _focus: {\n            boxShadow: \"none\",\n          },\n          _hover: {\n            boxShadow: \"none\",\n          },\n        },\n        brand: {\n          bg: \"brand.200\",\n          color: \"#fff\",\n          _hover: {\n            bg: \"brand.300\",\n          },\n          _active: {\n            bg: \"brand.400\",\n          },\n          _focus: \"none\",\n        },\n        outlineWhite: {\n          bg: \"transparent\",\n          color: \"#fff\",\n          borderColor: \"white\",\n          borderWidth: \"1px\",\n          _hover: {\n            bg: \"whiteAlpha.100\",\n          },\n          _active: {\n            bg: \"whiteAlpha.200\",\n          },\n          _focus: \"none\",\n        },\n      },\n      baseStyle: {\n        borderRadius: \"12px\",\n        _focus: {\n          boxShadow: \"none\",\n        },\n        _active: \"none\",\n        _focus: \"none\",\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "src/theme/components/drawer.js",
    "content": "export const drawerStyles = {\n  components: {\n    Drawer: {\n      // 3. We can add a new visual variant\n      variants: {\n        \"with-shadow\": {\n          placement: \"right\",\n          boxShadow: \"0 0 2px 2px #efdfde\",\n          bgColor: \"red\",\n        },\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "src/theme/components/link.js",
    "content": "export const linkStyles = {\n  components: {\n    Link: {\n      // 3. We can add a new visual variant\n      decoration: \"none\",\n      baseStyle: {\n        _hover: {\n          textDecoration: \"none\",\n        },\n        _focus: {\n          boxShadow: \"none\",\n        },\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "src/theme/components/switch.js",
    "content": "export const switchStyles = {\n  components: {\n    Switch: {\n      variants: {\n        brand: {\n          bg: \"red.500\",\n          _hover: {\n            bg: \"brand.600\",\n          },\n          _active: {\n            bg: \"brand.700\",\n          },\n          _focus: \"none\",\n        },\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "src/theme/foundations/breakpoints.js",
    "content": "// 1. Import the utilities\nimport { createBreakpoints } from \"@chakra-ui/theme-tools\";\n// 2. Update the breakpoints as key-value pairs\nexport const breakpoints = createBreakpoints({\n  sm: \"320px\",\n  md: \"768px\",\n  lg: \"1024px\",\n  xl: \"1440px\",\n  \"2xl\": \"1920px\"\n});\n"
  },
  {
    "path": "src/theme/styles.js",
    "content": "export const globalStyles = {\n  colors: {\n    gray: {\n      700: \"#1f2733\",\n    },\n    brand: {\n      50: \"#cbbff8\",\n      100: \"#876cea\",\n      200: \"#582CFF\",\n      300: \"#542de1\",\n      400: \"#4a25d0\",\n      500: \"#3915bc\",\n      600: \"#300eaa\",\n      700: \"#1c0377\",\n      800: \"#130156\",\n      900: \"#0e0042\"\n    },\n  },\n  styles: {\n    global: (props) => ({\n      body: {\n        fontFamily: \"Plus Jakarta Display\",\n      },\n      \"*::placeholder\": {\n        color: \"gray.400\",\n      },\n      html: {\n        fontFamily: \"Plus Jakarta Display\",\n      },\n    }),\n  },\n};\n"
  },
  {
    "path": "src/theme/themeAdmin.js",
    "content": "import { extendTheme } from \"@chakra-ui/react\";\nimport { globalStyles } from \"./styles\";\nimport { bgAdmin } from \"./bgAdmin\";\nimport { breakpoints } from \"./foundations/breakpoints\";\nimport { buttonStyles } from \"./components/button\";\nimport { badgeStyles } from \"./components/badge\";\nimport { linkStyles } from \"./components/link\";\nimport { drawerStyles } from \"./components/drawer\";\nimport { switchStyles } from \"./components/switch\";\nimport { CardComponent } from \"./additions/card/Card\";\nimport { CardBodyComponent } from \"./additions/card/CardBody\";\nimport { CardHeaderComponent } from \"./additions/card/CardHeader\";\nimport { MainPanelComponent } from \"./additions/layout/MainPanel\";\nimport { PanelContentComponent } from \"./additions/layout/PanelContent\";\nimport { PanelContainerComponent } from \"./additions/layout/PanelContainer\";\n// import { mode } from \"@chakra-ui/theme-tools\";\nexport default extendTheme(\n  { breakpoints }, // Breakpoints\n  bgAdmin, // Global styles\n  globalStyles, // Global styles\n  buttonStyles, // Button styles\n  badgeStyles, // Badge styles\n  linkStyles, // Link styles\n  drawerStyles, // Sidebar variant for Chakra's drawer\n  switchStyles, // Switch styles\n  CardComponent, // Card component\n  CardBodyComponent, // Card Body component\n  CardHeaderComponent, // Card Header component\n  MainPanelComponent, // Main Panel component\n  PanelContentComponent, // Panel Content component\n  PanelContainerComponent // Panel Container component\n);\n"
  },
  {
    "path": "src/theme/themeAuth.js",
    "content": "import { extendTheme } from \"@chakra-ui/react\";\nimport { globalStyles } from \"./styles\";\nimport { bgAuth } from \"./bgAuth\";\nimport { breakpoints } from \"./foundations/breakpoints\";\nimport { buttonStyles } from \"./components/button\";\nimport { badgeStyles } from \"./components/badge\";\nimport { linkStyles } from \"./components/link\";\nimport { drawerStyles } from \"./components/drawer\";\nimport { switchStyles } from \"./components/switch\";\nimport { CardComponent } from \"./additions/card/Card\";\nimport { CardBodyComponent } from \"./additions/card/CardBody\";\nimport { CardHeaderComponent } from \"./additions/card/CardHeader\";\nimport { MainPanelComponent } from \"./additions/layout/MainPanel\";\nimport { PanelContentComponent } from \"./additions/layout/PanelContent\";\nimport { PanelContainerComponent } from \"./additions/layout/PanelContainer\";\n\nexport default extendTheme(\n  { breakpoints }, // Breakpoints\n  bgAuth, // Global styles\n  globalStyles, // Global styles\n  buttonStyles, // Button styles\n  badgeStyles, // Badge styles\n  linkStyles, // Link styles\n  drawerStyles, // Sidebar variant for Chakra's drawer\n  switchStyles, // Switch styles\n  CardComponent, // Card component\n  CardBodyComponent, // Card Body component\n  CardHeaderComponent, // Card Header component\n  MainPanelComponent, // Main Panel component\n  PanelContentComponent, // Panel Content component\n  PanelContainerComponent // Panel Container component\n);\n"
  },
  {
    "path": "src/variables/charts.js",
    "content": "export const barChartDataDashboard = [\n  {\n    name: \"Sales\",\n    data: [330, 250, 110, 300, 490, 350, 270, 130, 425],\n  },\n];\n\nexport const barChartOptionsDashboard = {\n  chart: {\n    toolbar: {\n      show: false,\n    },\n  },\n  tooltip: {\n    style: {\n      fontSize: \"12px\",\n      fontFamily: \"Plus Jakarta Display\",\n    },\n    onDatasetHover: {\n      style: {\n        fontSize: \"12px\",\n        fontFamily: \"Plus Jakarta Display\",\n      },\n    },\n    theme: \"dark\",\n  },\n  xaxis: {\n    categories: [\"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"],\n    show: false,\n    labels: {\n      show: false,\n      style: {\n        colors: \"#fff\",\n        fontSize: \"12px\",\n      },\n    },\n    axisBorder: {\n      show: false,\n    },\n    axisTicks: {\n      show: false,\n    },\n  },\n  yaxis: {\n    show: true,\n    color: \"#fff\",\n    labels: {\n      show: true,\n      style: {\n        colors: \"#fff\",\n        fontSize: \"12px\",\n        fontFamily: \"Plus Jakarta Display\",\n      },\n    },\n  },\n  grid: {\n    show: false,\n  },\n  fill: {\n    colors: \"#fff\",\n  },\n  dataLabels: {\n    enabled: false,\n  },\n  plotOptions: {\n    bar: {\n      borderRadius: 8,\n      columnWidth: \"12px\",\n    },\n  },\n  responsive: [\n    {\n      breakpoint: 768,\n      options: {\n        plotOptions: {\n          bar: {\n            borderRadius: 0,\n          },\n        },\n      },\n    },\n  ],\n};\n\nexport const lineChartDataDashboard = [\n  {\n    name: \"Mobile apps\",\n    data: [500, 250, 300, 220, 500, 250, 300, 230, 300, 350, 250, 400],\n  },\n  {\n    name: \"Websites\",\n    data: [200, 230, 300, 350, 370, 420, 550, 350, 400, 500, 330, 550],\n  },\n];\n\nexport const lineChartOptionsDashboard = {\n  chart: {\n    toolbar: {\n      show: false,\n    },\n  },\n  tooltip: {\n    theme: \"dark\",\n  },\n  dataLabels: {\n    enabled: false,\n  },\n  stroke: {\n    curve: \"smooth\",\n  },\n  xaxis: {\n    type: \"datetime\",\n    categories: [\n      \"Jan\",\n      \"Feb\",\n      \"Mar\",\n      \"Apr\",\n      \"May\",\n      \"Jun\",\n      \"Jul\",\n      \"Aug\",\n      \"Sep\",\n      \"Oct\",\n      \"Nov\",\n      \"Dec\",\n    ],\n    labels: {\n      style: {\n        colors: \"#c8cfca\",\n        fontSize: \"12px\",\n      },\n    },\n    axisBorder: {\n      show: false,\n    },\n    axisTicks: {\n      show: false,\n    },\n  },\n  yaxis: {\n    labels: {\n      style: {\n        colors: \"#c8cfca\",\n        fontSize: \"12px\",\n      },\n    },\n  },\n  legend: {\n    show: false,\n  },\n  grid: {\n    strokeDashArray: 5,\n    borderColor: \"#56577A\"\n  },\n  fill: {\n    type: \"gradient\",\n    gradient: {\n      shade: \"dark\",\n      type: \"vertical\",\n      shadeIntensity: 0,\n      gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series\n      inverseColors: true,\n      opacityFrom: 0.8,\n      opacityTo: 0,\n      stops: [],\n    },\n    colors: [\"#2CD9FF\", \"#582CFF\"],\n  },\n  colors: [\"#2CD9FF\", \"#582CFF\"],\n};\n\nexport const lineChartDataProfile1 = [\n  {\n    name: \"Mobile apps\",\n    data: [100, 250, 300, 220, 500, 250, 300, 230, 300, 350, 250, 400],\n  },\n];\n\nexport const lineChartOptionsProfile1 = {\n  chart: {\n    height: \"50px\",\n    toolbar: {\n      show: false,\n    },\n    redrawOnParentResize: true,\n\n  },\n  tooltip: {\n    theme: \"dark\",\n  },\n  dataLabels: {\n    enabled: false,\n  },\n  stroke: {\n    curve: \"smooth\",\n  },\n  xaxis: {\n    type: \"datetime\",\n    categories: [\n      \"Jan\",\n      \"Feb\",\n      \"Mar\",\n      \"Apr\",\n      \"May\",\n      \"Jun\",\n      \"Jul\",\n      \"Aug\",\n      \"Sep\",\n      \"Oct\",\n      \"Nov\",\n      \"Dec\",\n    ],\n    labels: {\n      show: false,\n      style: {\n        colors: \"#c8cfca\",\n        fontSize: \"12px\",\n      },\n    },\n    axisBorder: {\n      show: false,\n    },\n    axisTicks: {\n      show: false,\n    },\n  },\n  yaxis: {\n    show: false,\n    labels: {\n      style: {\n        colors: \"#c8cfca\",\n        fontSize: \"12px\",\n      },\n    },\n  },\n  legend: {\n    show: false,\n  },\n  grid: {\n    show: false,\n    strokeDashArray: 5,\n    borderColor: \"#56577A\"\n  },\n  fill: {\n    type: \"gradient\",\n    gradient: {\n      shade: \"dark\",\n      type: \"vertical\",\n      shadeIntensity: 0,\n      gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series\n      inverseColors: true,\n      opacityFrom: 0.8,\n      opacityTo: 0,\n      stops: [],\n    },\n    colors: [\"#01B574\"],\n  },\n  colors: [\"#01B574\"],\n};\n\nexport const lineChartDataProfile2 = [\n  {\n    name: \"Mobile apps\",\n    data: [100, 250, 300, 220, 500, 250, 300, 230, 300, 350, 250, 400],\n  },\n];\n\nexport const lineChartOptionsProfile2 = {\n  chart: {\n    height: \"50px\",\n    toolbar: {\n      show: false,\n    },\n    redrawOnParentResize: true\n  },\n  tooltip: {\n    theme: \"dark\",\n  },\n  dataLabels: {\n    enabled: false,\n  },\n  stroke: {\n    curve: \"smooth\",\n  },\n  xaxis: {\n    type: \"datetime\",\n    categories: [\n      \"Jan\",\n      \"Feb\",\n      \"Mar\",\n      \"Apr\",\n      \"May\",\n      \"Jun\",\n      \"Jul\",\n      \"Aug\",\n      \"Sep\",\n      \"Oct\",\n      \"Nov\",\n      \"Dec\",\n    ],\n    labels: {\n      show: false,\n      style: {\n        colors: \"#c8cfca\",\n        fontSize: \"12px\",\n      },\n    },\n    axisBorder: {\n      show: false,\n    },\n    axisTicks: {\n      show: false,\n    },\n  },\n  yaxis: {\n    show: false,\n    labels: {\n      style: {\n        colors: \"#c8cfca\",\n        fontSize: \"12px\",\n      },\n    },\n  },\n  legend: {\n    show: false,\n  },\n  grid: {\n    show: false,\n    strokeDashArray: 5,\n    borderColor: \"#56577A\"\n  },\n  fill: {\n    type: \"gradient\",\n    gradient: {\n      shade: \"dark\",\n      type: \"vertical\",\n      shadeIntensity: 0,\n      gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series\n      inverseColors: true,\n      opacityFrom: 0.8,\n      opacityTo: 0,\n      stops: [],\n    },\n    colors: [\"#582CFF\"],\n  },\n  colors: [\"#582CFF\"],\n};\n"
  },
  {
    "path": "src/variables/general.js",
    "content": "// Assets\nimport avatar1 from \"assets/img/avatars/avatar1.png\";\nimport avatar2 from \"assets/img/avatars/avatar2.png\";\nimport avatar3 from \"assets/img/avatars/avatar3.png\";\nimport avatar4 from \"assets/img/avatars/avatar4.png\";\nimport avatar5 from \"assets/img/avatars/avatar5.png\";\nimport avatar7 from \"assets/img/avatars/avatar7.png\";\nimport avatar8 from \"assets/img/avatars/avatar8.png\";\nimport avatar9 from \"assets/img/avatars/avatar9.png\";\nimport avatar10 from \"assets/img/avatars/avatar10.png\";\n// Custom icons\nimport {\n  AdobexdLogo,\n  AtlassianLogo,\n  InvisionLogo,\n  JiraLogo,\n  SlackLogo,\n  SpotifyLogo,\n} from \"components/Icons/Icons.js\";\nimport { AiOutlineExclamation } from \"react-icons/ai\";\nimport {\n  FaArrowDown,\n  FaArrowUp,\n  FaBell,\n  FaCreditCard,\n  FaFilePdf,\n  FaHtml5,\n  FaShoppingCart,\n} from \"react-icons/fa\";\nimport { SiDropbox } from \"react-icons/si\";\n\nexport const dashboardTableData = [\n  {\n    logo: AdobexdLogo,\n    name: \"Chakra Soft UI Version\",\n    members: [avatar1, avatar2, avatar3, avatar4, avatar5],\n    budget: \"$14,000\",\n    progression: 60,\n  },\n  {\n    logo: AtlassianLogo,\n    name: \"Add Progress Track\",\n    members: [avatar3, avatar2],\n    budget: \"$3,000\",\n    progression: 10,\n  },\n  {\n    logo: SlackLogo,\n    name: \"Fix Platform Errors\",\n    members: [avatar10, avatar4],\n    budget: \"Not set\",\n    progression: 100,\n  },\n  {\n    logo: SpotifyLogo,\n    name: \"Launch our Mobile App\",\n    members: [avatar2, avatar3, avatar7, avatar8],\n    budget: \"$32,000\",\n    progression: 100,\n  },\n  {\n    logo: JiraLogo,\n    name: \"Add the New Pricing Page\",\n    members: [avatar10, avatar3, avatar7, avatar2, avatar8],\n    budget: \"$400\",\n    progression: 25,\n  },\n  {\n    logo: InvisionLogo,\n    name: \"Redesign New Online Shop\",\n    members: [avatar9, avatar3, avatar2],\n    budget: \"$7,600\",\n    progression: 40,\n  },\n];\n\nexport const timelineData = [\n  {\n    logo: FaBell,\n    title: \"$2400, Design changes\",\n    date: \"22 DEC 7:20 PM\",\n    color: \"brand.200\",\n  },\n  {\n    logo: FaHtml5,\n    title: \"New order #4219423\",\n    date: \"21 DEC 11:21 PM\",\n    color: \"orange\",\n  },\n  {\n    logo: FaShoppingCart,\n    title: \"Server Payments for April\",\n    date: \"21 DEC 9:28 PM\",\n    color: \"blue.400\",\n  },\n  {\n    logo: FaCreditCard,\n    title: \"New card added for order #3210145\",\n    date: \"20 DEC 3:52 PM\",\n    color: \"orange.300\",\n  },\n  {\n    logo: SiDropbox,\n    title: \"Unlock packages for Development\",\n    date: \"19 DEC 11:35 PM\",\n    color: \"purple\",\n  },\n  {\n    logo: AdobexdLogo,\n    title: \"New order #9851258\",\n    date: \"18 DEC 4:41 PM\",\n  },\n];\nexport const rtlDashboardTableData = [\n  {\n    logo: AdobexdLogo,\n    name: \"نسخة Vision UI\",\n    members: [avatar1, avatar2, avatar3, avatar4, avatar5],\n    budget: \"$14,000\",\n    progression: 60,\n  },\n  {\n    logo: AtlassianLogo,\n    name: \"إضافة مسار التقدم\",\n    members: [avatar3, avatar2],\n    budget: \"$3,000\",\n    progression: 10,\n  },\n  {\n    logo: SlackLogo,\n    name: \"إصلاح أخطاء النظام الأساسي\",\n    members: [avatar10, avatar4],\n    budget: \"غير مضبوط\",\n    progression: 100,\n  },\n  {\n    logo: SpotifyLogo,\n    name: \"إطلاق تطبيق الهاتف المحمول الخاص بنا\",\n    members: [avatar2, avatar3, avatar7, avatar8],\n    budget: \"$32,000\",\n    progression: 100,\n  },\n  {\n    logo: JiraLogo,\n    name: \"أضف صفحة التسعير الجديدة\",\n    members: [avatar10, avatar3, avatar7, avatar2, avatar8],\n    budget: \"$400\",\n    progression: 25,\n  },\n  {\n    logo: InvisionLogo,\n    name: \"إعادة تصميم متجر جديد على الإنترنت\",\n    members: [avatar9, avatar3, avatar2],\n    budget: \"$7,600\",\n    progression: 40,\n  },\n];\n\nexport const rtlTimelineData = [\n  {\n    logo: FaBell,\n    title: \"$2400, تغييرات في التصميم\",\n    date: \"22 DEC 7:20 PM\",\n    color: \"teal.300\",\n  },\n  {\n    logo: FaHtml5,\n    title: \"طلب جديد #4219423\",\n    date: \"21 DEC 11:21 PM\",\n    color: \"orange\",\n  },\n  {\n    logo: FaShoppingCart,\n    title: \"مدفوعات الخادم لشهر أبريل\",\n    date: \"21 DEC 9:28 PM\",\n    color: \"blue.400\",\n  },\n  {\n    logo: FaCreditCard,\n    title: \"تمت إضافة بطاقة جديدة للطلب #3210145\",\n    date: \"20 DEC 3:52 PM\",\n    color: \"orange.300\",\n  },\n  {\n    logo: SiDropbox,\n    title: \"فتح الحزم من أجل التنمية\",\n    date: \"19 DEC 11:35 PM\",\n    color: \"purple\",\n  },\n  {\n    logo: AdobexdLogo,\n    title: \"طلب جديد #9851258\",\n    date: \"18 DEC 4:41 PM\",\n  },\n];\n\nexport const tablesTableData = [\n  {\n    logo: avatar1,\n    name: \"Esthera Jackson\",\n    email: \"alexa@simmmple.com\",\n    subdomain: \"Manager\",\n    domain: \"Organization\",\n    status: \"Online\",\n    date: \"14/06/21\",\n  },\n  {\n    logo: avatar2,\n    name: \"Alexa Liras\",\n    email: \"laurent@simmmple.com\",\n    subdomain: \"Programmer\",\n    domain: \"Developer\",\n    status: \"Offline\",\n    date: \"12/05/21\",\n  },\n  {\n    logo: avatar3,\n    name: \"Laurent Michael\",\n    email: \"laurent@simmmple.com\",\n    subdomain: \"Executive\",\n    domain: \"Projects\",\n    status: \"Online\",\n    date: \"07/06/21\",\n  },\n  {\n    logo: avatar4,\n    name: \"Freduardo Hill\",\n    email: \"freduardo@simmmple.com\",\n    subdomain: \"Manager\",\n    domain: \"Organization\",\n    status: \"Online\",\n    date: \"14/11/21\",\n  },\n  {\n    logo: avatar5,\n    name: \"Daniel Thomas\",\n    email: \"daniel@simmmple.com\",\n    subdomain: \"Programmer\",\n    domain: \"Developer\",\n    status: \"Offline\",\n    date: \"21/01/21\",\n  },\n  {\n    logo: avatar7,\n    name: \"Mark Wilson\",\n    email: \"mark@simmmple.com\",\n    subdomain: \"Designer\",\n    domain: \"UI/UX Design\",\n    status: \"Offline\",\n    date: \"04/09/20\",\n  },\n];\n\nexport const tablesProjectData = [\n  {\n    logo: AdobexdLogo,\n    name: \"Vision UI Version\",\n    budget: \"$14,000\",\n    status: \"Working\",\n    progression: 60,\n  },\n  {\n    logo: AtlassianLogo,\n    name: \"Add Progress Track\",\n    budget: \"$3,000\",\n    status: \"Canceled\",\n    progression: 10,\n  },\n  {\n    logo: SlackLogo,\n    name: \"Fix Platform Errors\",\n    budget: \"Not set\",\n    status: \"Done\",\n    progression: 100,\n  },\n  {\n    logo: SpotifyLogo,\n    name: \"Launch our Mobile App\",\n    budget: \"$32,000\",\n    status: \"Done\",\n    progression: 100,\n  },\n  {\n    logo: JiraLogo,\n    name: \"Add the New Pricing Page\",\n    budget: \"$400\",\n    status: \"Working\",\n    progression: 25,\n  },\n];\n\nexport const invoicesData = [\n  {\n    date: \"March, 01, 2020\",\n    code: \"#MS-415646\",\n    price: \"$180\",\n    logo: FaFilePdf,\n    format: \"PDF\",\n  },\n  {\n    date: \"February, 10, 2020\",\n    code: \"#RV-126749\",\n    price: \"$250\",\n    logo: FaFilePdf,\n    format: \"PDF\",\n  },\n  {\n    date: \"April, 05, 2020\",\n    code: \"#FB-212562\",\n    price: \"$560\",\n    logo: FaFilePdf,\n    format: \"PDF\",\n  },\n  {\n    date: \"June, 25, 2019\",\n    code: \"#QW-103578\",\n    price: \"$120\",\n    logo: FaFilePdf,\n    format: \"PDF\",\n  },\n  {\n    date: \"March, 01, 2019\",\n    code: \"#AR-803481\",\n    price: \"$300\",\n    logo: FaFilePdf,\n    format: \"PDF\",\n  },\n];\n\nexport const billingData = [\n  {\n    name: \"Oliver Liam\",\n    company: \"Viking Burrito\",\n    email: \"oliver@burrito.com\",\n    number: \"FRB1235476\",\n  },\n  {\n    name: \"Lucas Harper\",\n    company: \"Stone Tech Zone\",\n    email: \"lucas@stone-tech.com\",\n    number: \"FRB1235476\",\n  },\n  {\n    name: \"Ethan James\",\n    company: \"Fiber Notion\",\n    email: \"ethan@fiber.com\",\n    number: \"FRB1235476\",\n  },\n];\n\nexport const newestTransactions = [\n  {\n    name: \"Netflix\",\n    date: \"27 March 2021, at 12:30 PM\",\n    price: \"- $2,500\",\n    logo: FaArrowDown,\n  },\n  {\n    name: \"Apple\",\n    date: \"27 March 2021, at 12:30 PM\",\n    price: \"+ $2,500\",\n    logo: FaArrowUp,\n  },\n];\n\nexport const olderTransactions = [\n  {\n    name: \"Stripe\",\n    date: \"26 March 2021, at 13:45 PM\",\n    price: \"+ $800\",\n    logo: FaArrowUp,\n  },\n  {\n    name: \"HubSpot\",\n    date: \"26 March 2021, at 12:30 PM\",\n    price: \"+ $1,700\",\n    logo: FaArrowUp,\n  },\n  {\n    name: \"Webflow\",\n    date: \"26 March 2021, at 05:00 PM\",\n    price: \"Pending\",\n    logo: AiOutlineExclamation,\n  },\n  {\n    name: \"Microsoft\",\n    date: \"25 March 2021, at 16:30 PM\",\n    price: \"- $987\",\n    logo: FaArrowDown,\n  },\n];\n"
  },
  {
    "path": "src/views/Dashboard/Billing.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\nimport React from \"react\";\n\n// Chakra imports\nimport { Box, Button, Flex, Grid, Icon, Spacer, Text } from \"@chakra-ui/react\";\n\n// Images\nimport BackgroundCard1 from \"assets/img/billing-background-card.png\";\n\n// Custom components\nimport Card from \"components/Card/Card.js\";\nimport CardBody from \"components/Card/CardBody.js\";\nimport CardHeader from \"components/Card/CardHeader.js\";\nimport GradientBorder from \"components/GradientBorder/GradientBorder\";\nimport IconBox from \"components/Icons/IconBox\";\nimport BillingRow from \"components/Tables/BillingRow\";\nimport InvoicesRow from \"components/Tables/InvoicesRow\";\nimport TransactionRow from \"components/Tables/TransactionRow\";\n\n// Icons\nimport { FaPencilAlt, FaRegCalendarAlt } from \"react-icons/fa\";\nimport { IoEllipsisHorizontalSharp } from \"react-icons/io5\";\nimport { RiMastercardFill } from \"react-icons/ri\";\nimport {\n  BillIcon,\n  GraphIcon,\n  MastercardIcon,\n  VisaIcon,\n} from \"components/Icons/Icons\";\n\n// Data\nimport {\n  billingData,\n  invoicesData,\n  newestTransactions,\n  olderTransactions,\n} from \"variables/general\";\n\nfunction Billing() {\n\n  return (\n    <Flex direction='column' pt={{ base: \"120px\", md: \"75px\" }} mx='auto'>\n      <Grid templateColumns={{ sm: \"1fr\", lg: \"60% 38%\" }}>\n        <Box>\n          <Grid\n            templateColumns={{\n              sm: \"1fr\",\n              md: \"1fr 1fr\",\n            }}\n            gap='26px'>\n              {/* Mastercard */}\n            <Card\n              backgroundImage={BackgroundCard1}\n              backgroundRepeat='no-repeat'\n              bgSize='cover'\n              bgPosition='10%'\n              p='16px'>\n              <CardBody h='100%' w='100%'>\n                <Flex\n                  direction='column'\n                  color='white'\n                  h='100%'\n                  p='0px 10px 20px 10px'\n                  w='100%'>\n                  <Flex justify='space-between' align='center'>\n                    <Text fontSize='md' fontWeight='bold'>\n                      Vision UI\n                    </Text>\n                    <Icon\n                      as={RiMastercardFill}\n                      w='48px'\n                      h='auto'\n                      color='gray.400'\n                    />\n                  </Flex>\n                  <Spacer />\n                  <Flex direction='column'>\n                    <Box>\n                      <Text\n                        fontSize={{ sm: \"xl\", lg: \"lg\", xl: \"xl\" }}\n                        letterSpacing='2px'\n                        fontWeight='bold'>\n                        7812 2139 0823 XXXX\n                      </Text>\n                    </Box>\n                    <Flex mt='14px'>\n                      <Flex direction='column' me='34px'>\n                        <Text fontSize='xs'>VALID THRU</Text>\n                        <Text fontSize='xs' fontWeight='bold'>\n                          05/24\n                        </Text>\n                      </Flex>\n                      <Flex direction='column'>\n                        <Text fontSize='xs'>CVV</Text>\n                        <Text fontSize='xs' fontWeight='bold'>\n                          09X\n                        </Text>\n                      </Flex>\n                    </Flex>\n                  </Flex>\n                </Flex>\n              </CardBody>\n            </Card>\n            {/* Credit Balance */}\n            <Card>\n              <Flex direction='column'>\n                <Flex\n                  justify='space-between'\n                  p='22px'\n                  mb='18px'\n                  bg='linear-gradient(127.09deg, rgba(34, 41, 78, 0.94) 19.41%, rgba(10, 14, 35, 0.49) 76.65%)'\n                  borderRadius='18px'>\n                  <Flex direction='column'>\n                    <Text color='#E9EDF7' fontSize='12px'>\n                      Credit Balance\n                    </Text>\n                    <Text color='#fff' fontWeight='bold' fontSize='34px'>\n                      $25,215\n                    </Text>\n                  </Flex>\n                  <Flex direction='column'>\n                    <Button\n                      bg='transparent'\n                      _hover='none'\n                      _active='none'\n                      alignSelf='flex-end'\n                      p='0px'>\n                      <Icon\n                        as={IoEllipsisHorizontalSharp}\n                        color='#fff'\n                        w='24px'\n                        h='24px'\n                        justifySelf='flex-start'\n                        alignSelf='flex-start'\n                      />\n                    </Button>\n                    <GraphIcon w='60px' h='18px' />\n                  </Flex>\n                </Flex>\n                <Text fontSize='10px' color='gray.400' mb='8px'>\n                  NEWEST\n                </Text>\n                <Flex justify='space-between' align='center'>\n                  <Flex align='center'>\n                    <IconBox\n                      bg='#22234B'\n                      borderRadius='30px'\n                      w='42px'\n                      h='42px'\n                      me='10px'>\n                      <BillIcon w='22px' h='22px' />\n                    </IconBox>\n                    <Flex direction='column'>\n                      <Text color='#fff' fontSize='sm' mb='2px'>\n                        Bill & Taxes\n                      </Text>\n                      <Text color='gray.400' fontSize='sm'>\n                        Today, 16:36\n                      </Text>\n                    </Flex>\n                  </Flex>\n                  <Text color='#fff' fontSize='sm' fontWeight='bold'>\n                    -$154.50\n                  </Text>\n                </Flex>\n              </Flex>\n            </Card>\n          </Grid>\n          {/* Payment Method */}\n          <Card p='16px' mt='24px'>\n            <CardHeader>\n              <Flex\n                justify='space-between'\n                align='center'\n                minHeight='60px'\n                w='100%'>\n                <Text fontSize='lg' color='#fff' fontWeight='bold'>\n                  Payment Method\n                </Text>\n                <Button maxW='135px' fontSize='10px' variant='brand'>\n                  ADD A NEW CARD\n                </Button>\n              </Flex>\n            </CardHeader>\n            <CardBody>\n              <Flex\n                direction={{ sm: \"column\", md: \"row\" }}\n                align='center'\n                w='100%'\n                justify='center'\n                py='1rem'>\n                <GradientBorder\n                  mb={{ sm: \"24px\", md: \"0px\" }}\n                  me={{ sm: \"0px\", md: \"24px\" }}\n                  w='100%'\n                  borderRadius='20px'>\n                  <Flex\n                    p='22px'\n                    bg='rgb(31, 35, 89)'\n                    border='transparent'\n                    borderRadius='20px'\n                    align='center'\n                    w='100%'>\n                    <IconBox me='10px' w='25px' h='22px'>\n                      <MastercardIcon w='100%' h='100%' />\n                    </IconBox>\n                    <Text color='#fff' fontSize='sm'>\n                      7812 2139 0823 XXXX\n                    </Text>\n                    <Spacer />\n                    <Button\n                      p='0px'\n                      bg='transparent'\n                      w='16px'\n                      h='16px'\n                      variant='no-hover'>\n                      <Icon as={FaPencilAlt} color='#fff' w='12px' h='12px' />\n                    </Button>\n                  </Flex>\n                </GradientBorder>\n                <GradientBorder w='100%' borderRadius='20px'>\n                  <Flex\n                    p='22px'\n                    bg='rgb(31, 35, 89)'\n                    w='100%'\n                    borderRadius='20px'\n                    border='transparent'\n                    align='center'>\n                    <IconBox me='10px' w='25px' h='25px'>\n                      <VisaIcon w='100%' h='100%' color='#fff' />\n                    </IconBox>\n                    <Text color='#fff' fontSize='sm'>\n                      7812 2139 0823 XXXX\n                    </Text>\n                    <Spacer />\n                    <Button\n                      p='0px'\n                      bg='transparent'\n                      w='16px'\n                      h='16px'\n                      variant='no-hover'>\n                      <Icon as={FaPencilAlt} color='#fff' w='12px' h='12px' />\n                    </Button>\n                  </Flex>\n                </GradientBorder>\n              </Flex>\n            </CardBody>\n          </Card>\n        </Box>\n        {/* Invoices List */}\n        <Card\n          p='22px'\n          my={{ sm: \"24px\", lg: \"0px\" }}\n          ms={{ sm: \"0px\", lg: \"24px\" }}>\n          <CardHeader>\n            <Flex\n              justify='space-between'\n              align='center'\n              mb='1rem'\n              w='100%'\n              mb='28px'>\n              <Text fontSize='lg' color='#fff' fontWeight='bold'>\n                Invoices\n              </Text>\n              <Button\n                variant='brand'\n                fontSize='10px'\n                fontWeight='bold'\n                p='6px 32px'>\n                VIEW ALL\n              </Button>\n            </Flex>\n          </CardHeader>\n          <CardBody>\n            <Flex direction='column' w='100%'>\n              {invoicesData.map((row) => {\n                return (\n                  <InvoicesRow\n                    date={row.date}\n                    code={row.code}\n                    price={row.price}\n                    logo={row.logo}\n                    format={row.format}\n                  />\n                );\n              })}\n            </Flex>\n          </CardBody>\n        </Card>\n      </Grid>\n      <Grid templateColumns={{ sm: \"1fr\", lg: \"60% 38%\" }}>\n        {/* Billing Information */}\n        <Card my={{ lg: \"24px\" }} me={{ lg: \"24px\" }}>\n          <Flex direction='column'>\n            <CardHeader py='12px'>\n              <Text color='#fff' fontSize='lg' fontWeight='bold'>\n                Billing Information\n              </Text>\n            </CardHeader>\n            <CardBody>\n              <Flex direction='column' w='100%'>\n                {billingData.map((row) => {\n                  return (\n                    <BillingRow\n                      name={row.name}\n                      company={row.company}\n                      email={row.email}\n                      number={row.number}\n                    />\n                  );\n                })}\n              </Flex>\n            </CardBody>\n          </Flex>\n        </Card>\n        {/* Transactions List */}\n        <Card my='24px' ms={{ lg: \"24px\" }}>\n          <CardHeader mb='12px'>\n            <Flex direction='column' w='100%'>\n              <Flex\n                direction={{ sm: \"column\", lg: \"row\" }}\n                justify={{ sm: \"center\", lg: \"space-between\" }}\n                align={{ sm: \"center\" }}\n                w='100%'\n                my={{ md: \"12px\" }}>\n                <Text\n                  color='#fff'\n                  fontSize={{ sm: \"lg\", md: \"xl\", lg: \"lg\" }}\n                  fontWeight='bold'>\n                  Your Transactions\n                </Text>\n                <Flex align='center'>\n                  <Icon\n                    as={FaRegCalendarAlt}\n                    color='gray.400'\n                    w='15px'\n                    h='15px'\n                    color='#fff'\n                    me='6px'\n                  />\n                  <Text color='gray.400' fontSize='sm'>\n                    23 - 30 March 2021\n                  </Text>\n                </Flex>\n              </Flex>\n            </Flex>\n          </CardHeader>\n          <CardBody>\n            <Flex direction='column' w='100%'>\n              <Text color='gray.400' fontSize='xs' mb='18px'>\n                NEWEST\n              </Text>\n              {newestTransactions.map((row) => {\n                return (\n                  <TransactionRow\n                    name={row.name}\n                    logo={row.logo}\n                    date={row.date}\n                    price={row.price}\n                  />\n                );\n              })}\n              <Text color='gray.400' fontSize='xs' my='18px'>\n                OLDER\n              </Text>\n              {olderTransactions.map((row) => {\n                return (\n                  <TransactionRow\n                    name={row.name}\n                    logo={row.logo}\n                    date={row.date}\n                    price={row.price}\n                  />\n                );\n              })}\n            </Flex>\n          </CardBody>\n        </Card>\n      </Grid>\n    </Flex>\n  );\n}\n\nexport default Billing;\n"
  },
  {
    "path": "src/views/Dashboard/Dashboard.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n// Chakra imports\nimport {\n\tBox,\n\tButton,\n\tCircularProgress,\n\tCircularProgressLabel,\n\tFlex,\n\tGrid,\n\tIcon,\n\tProgress,\n\tSimpleGrid,\n\tSpacer,\n\tStack,\n\tStat,\n\tStatHelpText,\n\tStatLabel,\n\tStatNumber,\n\tTable,\n\tTbody,\n\tText,\n\tTh,\n\tThead,\n\tTr\n} from '@chakra-ui/react';\n// Styles for the circular progressbar\nimport medusa from 'assets/img/cardimgfree.png';\n// Custom components\nimport Card from 'components/Card/Card.js';\nimport CardBody from 'components/Card/CardBody.js';\nimport CardHeader from 'components/Card/CardHeader.js';\nimport BarChart from 'components/Charts/BarChart';\nimport LineChart from 'components/Charts/LineChart';\nimport IconBox from 'components/Icons/IconBox';\n// Icons\nimport { CartIcon, DocumentIcon, GlobeIcon, RocketIcon, StatsIcon, WalletIcon } from 'components/Icons/Icons.js';\nimport DashboardTableRow from 'components/Tables/DashboardTableRow';\nimport TimelineRow from 'components/Tables/TimelineRow';\nimport React from 'react';\nimport { AiFillCheckCircle } from 'react-icons/ai';\nimport { BiHappy } from 'react-icons/bi';\nimport { BsArrowRight } from 'react-icons/bs';\nimport { IoCheckmarkDoneCircleSharp, IoEllipsisHorizontal } from 'react-icons/io5';\n// Data\nimport {\n\tbarChartDataDashboard,\n\tbarChartOptionsDashboard,\n\tlineChartDataDashboard,\n\tlineChartOptionsDashboard\n} from 'variables/charts';\nimport { dashboardTableData, timelineData } from 'variables/general';\n\nexport default function Dashboard() {\n\treturn (\n\t\t<Flex flexDirection='column' pt={{ base: '120px', md: '75px' }}>\n\t\t\t<SimpleGrid columns={{ sm: 1, md: 2, xl: 4 }} spacing='24px'>\n\t\t\t\t{/* MiniStatistics Card */}\n\t\t\t\t<Card>\n\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t<Flex flexDirection='row' align='center' justify='center' w='100%'>\n\t\t\t\t\t\t\t<Stat me='auto'>\n\t\t\t\t\t\t\t\t<StatLabel fontSize='sm' color='gray.400' fontWeight='bold' pb='2px'>\n\t\t\t\t\t\t\t\t\tToday's Money\n\t\t\t\t\t\t\t\t</StatLabel>\n\t\t\t\t\t\t\t\t<Flex>\n\t\t\t\t\t\t\t\t\t<StatNumber fontSize='lg' color='#fff'>\n\t\t\t\t\t\t\t\t\t\t$53,000\n\t\t\t\t\t\t\t\t\t</StatNumber>\n\t\t\t\t\t\t\t\t\t<StatHelpText\n\t\t\t\t\t\t\t\t\t\talignSelf='flex-end'\n\t\t\t\t\t\t\t\t\t\tjustifySelf='flex-end'\n\t\t\t\t\t\t\t\t\t\tm='0px'\n\t\t\t\t\t\t\t\t\t\tcolor='green.400'\n\t\t\t\t\t\t\t\t\t\tfontWeight='bold'\n\t\t\t\t\t\t\t\t\t\tps='3px'\n\t\t\t\t\t\t\t\t\t\tfontSize='md'>\n\t\t\t\t\t\t\t\t\t\t+55%\n\t\t\t\t\t\t\t\t\t</StatHelpText>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t</Stat>\n\t\t\t\t\t\t\t<IconBox as='box' h={'45px'} w={'45px'} bg='brand.200'>\n\t\t\t\t\t\t\t\t<WalletIcon h={'24px'} w={'24px'} color='#fff' />\n\t\t\t\t\t\t\t</IconBox>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</Card>\n\t\t\t\t{/* MiniStatistics Card */}\n\t\t\t\t<Card minH='83px'>\n\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t<Flex flexDirection='row' align='center' justify='center' w='100%'>\n\t\t\t\t\t\t\t<Stat me='auto'>\n\t\t\t\t\t\t\t\t<StatLabel fontSize='sm' color='gray.400' fontWeight='bold' pb='2px'>\n\t\t\t\t\t\t\t\t\tToday's Users\n\t\t\t\t\t\t\t\t</StatLabel>\n\t\t\t\t\t\t\t\t<Flex>\n\t\t\t\t\t\t\t\t\t<StatNumber fontSize='lg' color='#fff'>\n\t\t\t\t\t\t\t\t\t\t2,300\n\t\t\t\t\t\t\t\t\t</StatNumber>\n\t\t\t\t\t\t\t\t\t<StatHelpText\n\t\t\t\t\t\t\t\t\t\talignSelf='flex-end'\n\t\t\t\t\t\t\t\t\t\tjustifySelf='flex-end'\n\t\t\t\t\t\t\t\t\t\tm='0px'\n\t\t\t\t\t\t\t\t\t\tcolor='green.400'\n\t\t\t\t\t\t\t\t\t\tfontWeight='bold'\n\t\t\t\t\t\t\t\t\t\tps='3px'\n\t\t\t\t\t\t\t\t\t\tfontSize='md'>\n\t\t\t\t\t\t\t\t\t\t+5%\n\t\t\t\t\t\t\t\t\t</StatHelpText>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t</Stat>\n\t\t\t\t\t\t\t<IconBox as='box' h={'45px'} w={'45px'} bg='brand.200'>\n\t\t\t\t\t\t\t\t<GlobeIcon h={'24px'} w={'24px'} color='#fff' />\n\t\t\t\t\t\t\t</IconBox>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</Card>\n\t\t\t\t{/* MiniStatistics Card */}\n\t\t\t\t<Card>\n\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t<Flex flexDirection='row' align='center' justify='center' w='100%'>\n\t\t\t\t\t\t\t<Stat>\n\t\t\t\t\t\t\t\t<StatLabel fontSize='sm' color='gray.400' fontWeight='bold' pb='2px'>\n\t\t\t\t\t\t\t\t\tNew Clients\n\t\t\t\t\t\t\t\t</StatLabel>\n\t\t\t\t\t\t\t\t<Flex>\n\t\t\t\t\t\t\t\t\t<StatNumber fontSize='lg' color='#fff'>\n\t\t\t\t\t\t\t\t\t\t+3,020\n\t\t\t\t\t\t\t\t\t</StatNumber>\n\t\t\t\t\t\t\t\t\t<StatHelpText\n\t\t\t\t\t\t\t\t\t\talignSelf='flex-end'\n\t\t\t\t\t\t\t\t\t\tjustifySelf='flex-end'\n\t\t\t\t\t\t\t\t\t\tm='0px'\n\t\t\t\t\t\t\t\t\t\tcolor='red.500'\n\t\t\t\t\t\t\t\t\t\tfontWeight='bold'\n\t\t\t\t\t\t\t\t\t\tps='3px'\n\t\t\t\t\t\t\t\t\t\tfontSize='md'>\n\t\t\t\t\t\t\t\t\t\t-14%\n\t\t\t\t\t\t\t\t\t</StatHelpText>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t</Stat>\n\t\t\t\t\t\t\t<Spacer />\n\t\t\t\t\t\t\t<IconBox as='box' h={'45px'} w={'45px'} bg='brand.200'>\n\t\t\t\t\t\t\t\t<DocumentIcon h={'24px'} w={'24px'} color='#fff' />\n\t\t\t\t\t\t\t</IconBox>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</Card>\n\t\t\t\t{/* MiniStatistics Card */}\n\t\t\t\t<Card>\n\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t<Flex flexDirection='row' align='center' justify='center' w='100%'>\n\t\t\t\t\t\t\t<Stat me='auto'>\n\t\t\t\t\t\t\t\t<StatLabel fontSize='sm' color='gray.400' fontWeight='bold' pb='2px'>\n\t\t\t\t\t\t\t\t\tTotal Sales\n\t\t\t\t\t\t\t\t</StatLabel>\n\t\t\t\t\t\t\t\t<Flex>\n\t\t\t\t\t\t\t\t\t<StatNumber fontSize='lg' color='#fff' fontWeight='bold'>\n\t\t\t\t\t\t\t\t\t\t$173,000\n\t\t\t\t\t\t\t\t\t</StatNumber>\n\t\t\t\t\t\t\t\t\t<StatHelpText\n\t\t\t\t\t\t\t\t\t\talignSelf='flex-end'\n\t\t\t\t\t\t\t\t\t\tjustifySelf='flex-end'\n\t\t\t\t\t\t\t\t\t\tm='0px'\n\t\t\t\t\t\t\t\t\t\tcolor='green.400'\n\t\t\t\t\t\t\t\t\t\tfontWeight='bold'\n\t\t\t\t\t\t\t\t\t\tps='3px'\n\t\t\t\t\t\t\t\t\t\tfontSize='md'>\n\t\t\t\t\t\t\t\t\t\t+8%\n\t\t\t\t\t\t\t\t\t</StatHelpText>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t</Stat>\n\t\t\t\t\t\t\t<IconBox as='box' h={'45px'} w={'45px'} bg='brand.200'>\n\t\t\t\t\t\t\t\t<CartIcon h={'24px'} w={'24px'} color='#fff' />\n\t\t\t\t\t\t\t</IconBox>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</Card>\n\t\t\t</SimpleGrid>\n\t\t\t<Grid templateColumns={{ sm: '1fr', md: '1fr 1fr', '2xl': '2fr 1.2fr 1.5fr' }} my='26px' gap='18px'>\n\t\t\t\t{/* Welcome Card */}\n\t\t\t\t<Card\n\t\t\t\t\tp='0px'\n\t\t\t\t\tgridArea={{ md: '1 / 1 / 2 / 3', '2xl': 'auto' }}\n\t\t\t\t\tbgImage={medusa}\n\t\t\t\t\tbgSize='cover'\n\t\t\t\t\tbgPosition='50%'>\n\t\t\t\t\t<CardBody w='100%' h='100%'>\n\t\t\t\t\t\t<Flex flexDirection={{ sm: 'column', lg: 'row' }} w='100%' h='100%'>\n\t\t\t\t\t\t\t<Flex flexDirection='column' h='100%' p='22px' minW='60%' lineHeight='1.6'>\n\t\t\t\t\t\t\t\t<Text fontSize='sm' color='gray.400' fontWeight='bold'>\n\t\t\t\t\t\t\t\t\tWelcome back,\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t<Text fontSize='28px' color='#fff' fontWeight='bold' mb='18px'>\n\t\t\t\t\t\t\t\t\tMark Johnson\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t<Text fontSize='md' color='gray.400' fontWeight='normal' mb='auto'>\n\t\t\t\t\t\t\t\t\tGlad to see you again! <br />\n\t\t\t\t\t\t\t\t\tAsk me anything.\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t<Spacer />\n\t\t\t\t\t\t\t\t<Flex align='center'>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tp='0px'\n\t\t\t\t\t\t\t\t\t\tvariant='no-hover'\n\t\t\t\t\t\t\t\t\t\tbg='transparent'\n\t\t\t\t\t\t\t\t\t\tmy={{ sm: '1.5rem', lg: '0px' }}>\n\t\t\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\t\t\tfontSize='sm'\n\t\t\t\t\t\t\t\t\t\t\tcolor='#fff'\n\t\t\t\t\t\t\t\t\t\t\tfontWeight='bold'\n\t\t\t\t\t\t\t\t\t\t\tcursor='pointer'\n\t\t\t\t\t\t\t\t\t\t\ttransition='all .3s ease'\n\t\t\t\t\t\t\t\t\t\t\tmy={{ sm: '1.5rem', lg: '0px' }}\n\t\t\t\t\t\t\t\t\t\t\t_hover={{ me: '4px' }}>\n\t\t\t\t\t\t\t\t\t\t\tTab to record\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\tas={BsArrowRight}\n\t\t\t\t\t\t\t\t\t\t\tw='20px'\n\t\t\t\t\t\t\t\t\t\t\th='20px'\n\t\t\t\t\t\t\t\t\t\t\tcolor='#fff'\n\t\t\t\t\t\t\t\t\t\t\tfontSize='2xl'\n\t\t\t\t\t\t\t\t\t\t\ttransition='all .3s ease'\n\t\t\t\t\t\t\t\t\t\t\tmx='.3rem'\n\t\t\t\t\t\t\t\t\t\t\tcursor='pointer'\n\t\t\t\t\t\t\t\t\t\t\tpt='4px'\n\t\t\t\t\t\t\t\t\t\t\t_hover={{ transform: 'translateX(20%)' }}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</Card>\n\t\t\t\t{/* Satisfaction Rate */}\n\t\t\t\t<Card gridArea={{ md: '2 / 1 / 3 / 2', '2xl': 'auto' }}>\n\t\t\t\t\t<CardHeader mb='24px'>\n\t\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t\t<Text color='#fff' fontSize='lg' fontWeight='bold' mb='4px'>\n\t\t\t\t\t\t\t\tSatisfaction Rate\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Text color='gray.400' fontSize='sm'>\n\t\t\t\t\t\t\t\tFrom all projects\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardHeader>\n\t\t\t\t\t<Flex direction='column' justify='center' align='center'>\n\t\t\t\t\t\t<Box zIndex='-1'>\n\t\t\t\t\t\t\t<CircularProgress\n\t\t\t\t\t\t\t\tsize={200}\n\t\t\t\t\t\t\t\tvalue={80}\n\t\t\t\t\t\t\t\tthickness={6}\n\t\t\t\t\t\t\t\tcolor='#582CFF'\n\t\t\t\t\t\t\t\tvariant='vision'\n\t\t\t\t\t\t\t\trounded>\n\t\t\t\t\t\t\t\t<CircularProgressLabel>\n\t\t\t\t\t\t\t\t\t<IconBox mb='20px' mx='auto' bg='brand.200' borderRadius='50%' w='48px' h='48px'>\n\t\t\t\t\t\t\t\t\t\t<Icon as={BiHappy} color='#fff' w='30px' h='30px' />\n\t\t\t\t\t\t\t\t\t</IconBox>\n\t\t\t\t\t\t\t\t</CircularProgressLabel>\n\t\t\t\t\t\t\t</CircularProgress>\n\t\t\t\t\t\t</Box>\n\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\tdirection='row'\n\t\t\t\t\t\t\tspacing={{ sm: '42px', md: '68px' }}\n\t\t\t\t\t\t\tjustify='center'\n\t\t\t\t\t\t\tmaxW={{ sm: '270px', md: '300px', lg: '100%' }}\n\t\t\t\t\t\t\tmx={{ sm: 'auto', md: '0px' }}\n\t\t\t\t\t\t\tp='18px 22px'\n\t\t\t\t\t\t\tbg='linear-gradient(126.97deg, rgb(6, 11, 40) 28.26%, rgba(10, 14, 35) 91.2%)'\n\t\t\t\t\t\t\tborderRadius='20px'\n\t\t\t\t\t\t\tposition='absolute'\n\t\t\t\t\t\t\tbottom='5%'>\n\t\t\t\t\t\t\t<Text fontSize='xs' color='gray.400'>\n\t\t\t\t\t\t\t\t0%\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Flex direction='column' align='center' minW='80px'>\n\t\t\t\t\t\t\t\t<Text color='#fff' fontSize='28px' fontWeight='bold'>\n\t\t\t\t\t\t\t\t\t95%\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t<Text fontSize='xs' color='gray.400'>\n\t\t\t\t\t\t\t\t\tBased on likes\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t<Text fontSize='xs' color='gray.400'>\n\t\t\t\t\t\t\t\t100%\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t</Flex>\n\t\t\t\t</Card>\n\t\t\t\t{/* Referral Tracking */}\n\t\t\t\t<Card gridArea={{ md: '2 / 2 / 3 / 3', '2xl': 'auto' }}>\n\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t<Flex justify='space-between' align='center' mb='40px'>\n\t\t\t\t\t\t\t<Text color='#fff' fontSize='lg' fontWeight='bold'>\n\t\t\t\t\t\t\t\tReferral Tracking\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Button borderRadius='12px' w='38px' h='38px' bg='#22234B' _hover='none' _active='none'>\n\t\t\t\t\t\t\t\t<Icon as={IoEllipsisHorizontal} color='#7551FF' />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t<Flex direction={{ sm: 'column', md: 'row' }}>\n\t\t\t\t\t\t\t<Flex direction='column' me={{ md: '6px', lg: '52px' }} mb={{ sm: '16px', md: '0px' }}>\n\t\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\t\tdirection='column'\n\t\t\t\t\t\t\t\t\tp='22px'\n\t\t\t\t\t\t\t\t\tpe={{ sm: '22e', md: '8px', lg: '22px' }}\n\t\t\t\t\t\t\t\t\tminW={{ sm: '220px', md: '140px', lg: '220px' }}\n\t\t\t\t\t\t\t\t\tbg='linear-gradient(126.97deg, #060C29 28.26%, rgba(4, 12, 48, 0.5) 91.2%)'\n\t\t\t\t\t\t\t\t\tborderRadius='20px'\n\t\t\t\t\t\t\t\t\tmb='20px'>\n\t\t\t\t\t\t\t\t\t<Text color='gray.400' fontSize='sm' mb='4px'>\n\t\t\t\t\t\t\t\t\t\tInvited\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Text color='#fff' fontSize='lg' fontWeight='bold'>\n\t\t\t\t\t\t\t\t\t\t145 people\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\t\tdirection='column'\n\t\t\t\t\t\t\t\t\tp='22px'\n\t\t\t\t\t\t\t\t\tpe={{ sm: '22px', md: '8px', lg: '22px' }}\n\t\t\t\t\t\t\t\t\tminW={{ sm: '170px', md: '140px', lg: '170px' }}\n\t\t\t\t\t\t\t\t\tbg='linear-gradient(126.97deg, #060C29 28.26%, rgba(4, 12, 48, 0.5) 91.2%)'\n\t\t\t\t\t\t\t\t\tborderRadius='20px'>\n\t\t\t\t\t\t\t\t\t<Text color='gray.400' fontSize='sm' mb='4px'>\n\t\t\t\t\t\t\t\t\t\tBonus\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Text color='#fff' fontSize='lg' fontWeight='bold'>\n\t\t\t\t\t\t\t\t\t\t1,465\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t<Box mx={{ sm: 'auto', md: '0px' }}>\n\t\t\t\t\t\t\t\t<CircularProgress\n\t\t\t\t\t\t\t\t\tsize={window.innerWidth >= 1024 ? 200 : window.innerWidth >= 768 ? 170 : 200}\n\t\t\t\t\t\t\t\t\tvalue={70}\n\t\t\t\t\t\t\t\t\tthickness={6}\n\t\t\t\t\t\t\t\t\tcolor='#05CD99'\n\t\t\t\t\t\t\t\t\tvariant='vision'>\n\t\t\t\t\t\t\t\t\t<CircularProgressLabel>\n\t\t\t\t\t\t\t\t\t\t<Flex direction='column' justify='center' align='center'>\n\t\t\t\t\t\t\t\t\t\t\t<Text color='gray.400' fontSize='sm'>\n\t\t\t\t\t\t\t\t\t\t\t\tSafety\n\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\t\t\t\tcolor='#fff'\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize={{ md: '36px', lg: '50px' }}\n\t\t\t\t\t\t\t\t\t\t\t\tfontWeight='bold'\n\t\t\t\t\t\t\t\t\t\t\t\tmb='4px'>\n\t\t\t\t\t\t\t\t\t\t\t\t9.3\n\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t\t<Text color='gray.400' fontSize='sm'>\n\t\t\t\t\t\t\t\t\t\t\t\tTotal Score\n\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t\t</CircularProgressLabel>\n\t\t\t\t\t\t\t\t</CircularProgress>\n\t\t\t\t\t\t\t</Box>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</Flex>\n\t\t\t\t</Card>\n\t\t\t</Grid>\n\t\t\t<Grid\n\t\t\t\ttemplateColumns={{ sm: '1fr', lg: '1.7fr 1.3fr' }}\n\t\t\t\tmaxW={{ sm: '100%', md: '100%' }}\n\t\t\t\tgap='24px'\n\t\t\t\tmb='24px'>\n\t\t\t\t{/* Sales Overview */}\n\t\t\t\t<Card p='28px 0px 0px 0px'>\n\t\t\t\t\t<CardHeader mb='20px' ps='22px'>\n\t\t\t\t\t\t<Flex direction='column' alignSelf='flex-start'>\n\t\t\t\t\t\t\t<Text fontSize='lg' color='#fff' fontWeight='bold' mb='6px'>\n\t\t\t\t\t\t\t\tSales Overview\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Text fontSize='md' fontWeight='medium' color='gray.400'>\n\t\t\t\t\t\t\t\t<Text as='span' color='green.400' fontWeight='bold'>\n\t\t\t\t\t\t\t\t\t(+5%) more\n\t\t\t\t\t\t\t\t</Text>{' '}\n\t\t\t\t\t\t\t\tin 2021\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardHeader>\n\t\t\t\t\t<Box w='100%' minH={{ sm: '300px' }}>\n\t\t\t\t\t\t<LineChart\n\t\t\t\t\t\t\tlineChartData={lineChartDataDashboard}\n\t\t\t\t\t\t\tlineChartOptions={lineChartOptionsDashboard}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Box>\n\t\t\t\t</Card>\n\t\t\t\t{/* Active Users */}\n\t\t\t\t<Card p='16px'>\n\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t<Flex direction='column' w='100%'>\n\t\t\t\t\t\t\t<Box\n\t\t\t\t\t\t\t\tbg='linear-gradient(126.97deg, #060C29 28.26%, rgba(4, 12, 48, 0.5) 91.2%)'\n\t\t\t\t\t\t\t\tborderRadius='20px'\n\t\t\t\t\t\t\t\tdisplay={{ sm: 'flex', md: 'block' }}\n\t\t\t\t\t\t\t\tjustify={{ sm: 'center', md: 'flex-start' }}\n\t\t\t\t\t\t\t\talign={{ sm: 'center', md: 'flex-start' }}\n\t\t\t\t\t\t\t\tminH={{ sm: '180px', md: '220px' }}\n\t\t\t\t\t\t\t\tp={{ sm: '0px', md: '22px' }}>\n\t\t\t\t\t\t\t\t<BarChart\n\t\t\t\t\t\t\t\t\tbarChartOptions={barChartOptionsDashboard}\n\t\t\t\t\t\t\t\t\tbarChartData={barChartDataDashboard}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Box>\n\t\t\t\t\t\t\t<Flex direction='column' mt='24px' mb='36px' alignSelf='flex-start'>\n\t\t\t\t\t\t\t\t<Text fontSize='lg' color='#fff' fontWeight='bold' mb='6px'>\n\t\t\t\t\t\t\t\t\tActive Users\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t<Text fontSize='md' fontWeight='medium' color='gray.400'>\n\t\t\t\t\t\t\t\t\t<Text as='span' color='green.400' fontWeight='bold'>\n\t\t\t\t\t\t\t\t\t\t(+23%)\n\t\t\t\t\t\t\t\t\t</Text>{' '}\n\t\t\t\t\t\t\t\t\tthan last week\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t<SimpleGrid gap={{ sm: '12px' }} columns={4}>\n\t\t\t\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t\t\t\t<Flex alignItems='center'>\n\t\t\t\t\t\t\t\t\t\t<IconBox as='box' h={'30px'} w={'30px'} bg='brand.200' me='6px'>\n\t\t\t\t\t\t\t\t\t\t\t<WalletIcon h={'15px'} w={'15px'} color='#fff' />\n\t\t\t\t\t\t\t\t\t\t</IconBox>\n\t\t\t\t\t\t\t\t\t\t<Text fontSize='sm' color='gray.400'>\n\t\t\t\t\t\t\t\t\t\t\tUsers\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\t\tfontSize={{ sm: 'md', lg: 'lg' }}\n\t\t\t\t\t\t\t\t\t\tcolor='#fff'\n\t\t\t\t\t\t\t\t\t\tfontWeight='bold'\n\t\t\t\t\t\t\t\t\t\tmb='6px'\n\t\t\t\t\t\t\t\t\t\tmy='6px'>\n\t\t\t\t\t\t\t\t\t\t32,984\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Progress colorScheme='brand' bg='#2D2E5F' borderRadius='30px' h='5px' value={20} />\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t\t\t\t<Flex alignItems='center'>\n\t\t\t\t\t\t\t\t\t\t<IconBox as='box' h={'30px'} w={'30px'} bg='brand.200' me='6px'>\n\t\t\t\t\t\t\t\t\t\t\t<RocketIcon h={'15px'} w={'15px'} color='#fff' />\n\t\t\t\t\t\t\t\t\t\t</IconBox>\n\t\t\t\t\t\t\t\t\t\t<Text fontSize='sm' color='gray.400'>\n\t\t\t\t\t\t\t\t\t\t\tClicks\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\t\tfontSize={{ sm: 'md', lg: 'lg' }}\n\t\t\t\t\t\t\t\t\t\tcolor='#fff'\n\t\t\t\t\t\t\t\t\t\tfontWeight='bold'\n\t\t\t\t\t\t\t\t\t\tmb='6px'\n\t\t\t\t\t\t\t\t\t\tmy='6px'>\n\t\t\t\t\t\t\t\t\t\t2.42m\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Progress colorScheme='brand' bg='#2D2E5F' borderRadius='30px' h='5px' value={90} />\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t\t\t\t<Flex alignItems='center'>\n\t\t\t\t\t\t\t\t\t\t<IconBox as='box' h={'30px'} w={'30px'} bg='brand.200' me='6px'>\n\t\t\t\t\t\t\t\t\t\t\t<CartIcon h={'15px'} w={'15px'} color='#fff' />\n\t\t\t\t\t\t\t\t\t\t</IconBox>\n\t\t\t\t\t\t\t\t\t\t<Text fontSize='sm' color='gray.400'>\n\t\t\t\t\t\t\t\t\t\t\tSales\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\t\tfontSize={{ sm: 'md', lg: 'lg' }}\n\t\t\t\t\t\t\t\t\t\tcolor='#fff'\n\t\t\t\t\t\t\t\t\t\tfontWeight='bold'\n\t\t\t\t\t\t\t\t\t\tmb='6px'\n\t\t\t\t\t\t\t\t\t\tmy='6px'>\n\t\t\t\t\t\t\t\t\t\t2,400$\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Progress colorScheme='brand' bg='#2D2E5F' borderRadius='30px' h='5px' value={30} />\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t\t\t\t<Flex alignItems='center'>\n\t\t\t\t\t\t\t\t\t\t<IconBox as='box' h={'30px'} w={'30px'} bg='brand.200' me='6px'>\n\t\t\t\t\t\t\t\t\t\t\t<StatsIcon h={'15px'} w={'15px'} color='#fff' />\n\t\t\t\t\t\t\t\t\t\t</IconBox>\n\t\t\t\t\t\t\t\t\t\t<Text fontSize='sm' color='gray.400'>\n\t\t\t\t\t\t\t\t\t\t\tItems\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\t\tfontSize={{ sm: 'md', lg: 'lg' }}\n\t\t\t\t\t\t\t\t\t\tcolor='#fff'\n\t\t\t\t\t\t\t\t\t\tfontWeight='bold'\n\t\t\t\t\t\t\t\t\t\tmb='6px'\n\t\t\t\t\t\t\t\t\t\tmy='6px'>\n\t\t\t\t\t\t\t\t\t\t320\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Progress colorScheme='brand' bg='#2D2E5F' borderRadius='30px' h='5px' value={50} />\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t</SimpleGrid>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</Card>\n\t\t\t</Grid>\n\t\t\t<Grid templateColumns={{ sm: '1fr', md: '1fr 1fr', lg: '2fr 1fr' }} gap='24px'>\n\t\t\t\t{/* Projects */}\n\t\t\t\t<Card p='16px' overflowX={{ sm: 'scroll', xl: 'hidden' }}>\n\t\t\t\t\t<CardHeader p='12px 0px 28px 0px'>\n\t\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t\t<Text fontSize='lg' color='#fff' fontWeight='bold' pb='8px'>\n\t\t\t\t\t\t\t\tProjects\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Flex align='center'>\n\t\t\t\t\t\t\t\t<Icon as={IoCheckmarkDoneCircleSharp} color='teal.300' w={4} h={4} pe='3px' />\n\t\t\t\t\t\t\t\t<Text fontSize='sm' color='gray.400' fontWeight='normal'>\n\t\t\t\t\t\t\t\t\t<Text fontWeight='bold' as='span'>\n\t\t\t\t\t\t\t\t\t\t30 done\n\t\t\t\t\t\t\t\t\t</Text>{' '}\n\t\t\t\t\t\t\t\t\tthis month.\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardHeader>\n\t\t\t\t\t<Table variant='simple' color='#fff'>\n\t\t\t\t\t\t<Thead>\n\t\t\t\t\t\t\t<Tr my='.8rem' ps='0px'>\n\t\t\t\t\t\t\t\t<Th\n\t\t\t\t\t\t\t\t\tps='0px'\n\t\t\t\t\t\t\t\t\tcolor='gray.400'\n\t\t\t\t\t\t\t\t\tfontFamily='Plus Jakarta Display'\n\t\t\t\t\t\t\t\t\tborderBottomColor='#56577A'>\n\t\t\t\t\t\t\t\t\tCompanies\n\t\t\t\t\t\t\t\t</Th>\n\t\t\t\t\t\t\t\t<Th color='gray.400' fontFamily='Plus Jakarta Display' borderBottomColor='#56577A'>\n\t\t\t\t\t\t\t\t\tMembers\n\t\t\t\t\t\t\t\t</Th>\n\t\t\t\t\t\t\t\t<Th color='gray.400' fontFamily='Plus Jakarta Display' borderBottomColor='#56577A'>\n\t\t\t\t\t\t\t\t\tBudget\n\t\t\t\t\t\t\t\t</Th>\n\t\t\t\t\t\t\t\t<Th color='gray.400' fontFamily='Plus Jakarta Display' borderBottomColor='#56577A'>\n\t\t\t\t\t\t\t\t\tCompletion\n\t\t\t\t\t\t\t\t</Th>\n\t\t\t\t\t\t\t</Tr>\n\t\t\t\t\t\t</Thead>\n\t\t\t\t\t\t<Tbody>\n\t\t\t\t\t\t\t{dashboardTableData.map((row, index, arr) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<DashboardTableRow\n\t\t\t\t\t\t\t\t\t\tname={row.name}\n\t\t\t\t\t\t\t\t\t\tlogo={row.logo}\n\t\t\t\t\t\t\t\t\t\tmembers={row.members}\n\t\t\t\t\t\t\t\t\t\tbudget={row.budget}\n\t\t\t\t\t\t\t\t\t\tprogression={row.progression}\n\t\t\t\t\t\t\t\t\t\tlastItem={index === arr.length - 1 ? true : false}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</Tbody>\n\t\t\t\t\t</Table>\n\t\t\t\t</Card>\n\t\t\t\t{/* Orders Overview */}\n\t\t\t\t<Card>\n\t\t\t\t\t<CardHeader mb='32px'>\n\t\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t\t<Text fontSize='lg' color='#fff' fontWeight='bold' mb='6px'>\n\t\t\t\t\t\t\t\tOrders overview\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Flex align='center'>\n\t\t\t\t\t\t\t\t<Icon as={AiFillCheckCircle} color='green.500' w='15px' h='15px' me='5px' />\n\t\t\t\t\t\t\t\t<Text fontSize='sm' color='gray.400' fontWeight='normal'>\n\t\t\t\t\t\t\t\t\t<Text fontWeight='bold' as='span' color='gray.400'>\n\t\t\t\t\t\t\t\t\t\t+30%\n\t\t\t\t\t\t\t\t\t</Text>{' '}\n\t\t\t\t\t\t\t\t\tthis month\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardHeader>\n\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t<Flex direction='column' lineHeight='21px'>\n\t\t\t\t\t\t\t{timelineData.map((row, index, arr) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<TimelineRow\n\t\t\t\t\t\t\t\t\t\tlogo={row.logo}\n\t\t\t\t\t\t\t\t\t\ttitle={row.title}\n\t\t\t\t\t\t\t\t\t\tdate={row.date}\n\t\t\t\t\t\t\t\t\t\tcolor={row.color}\n\t\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\t\tarrLength={arr.length}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</Card>\n\t\t\t</Grid>\n\t\t</Flex>\n\t);\n}\n"
  },
  {
    "path": "src/views/Dashboard/Profile.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n// Chakra imports\nimport {\n\tAvatar,\n\tAvatarBadge,\n\tAvatarGroup,\n\tBox,\n\tButton,\n\tCircularProgress,\n\tCircularProgressLabel,\n\tDarkMode,\n\tFlex,\n\tGrid,\n\tIcon,\n\tImage,\n\tLink,\n\tSwitch,\n\tText\n} from '@chakra-ui/react';\nimport avatar11 from 'assets/img/avatars/avatar11.png';\n// Images\nimport avatar2 from 'assets/img/avatars/avatar2.png';\nimport avatar3 from 'assets/img/avatars/avatar3.png';\nimport avatar4 from 'assets/img/avatars/avatar4.png';\nimport avatar6 from 'assets/img/avatars/avatar6.png';\nimport bgProfile from 'assets/img/bgProfile.png';\nimport ProjectImage1 from 'assets/img/ProjectImage1.png';\nimport ProjectImage2 from 'assets/img/ProjectImage2.png';\nimport ProjectImage3 from 'assets/img/ProjectImage3.png';\n// Custom components\nimport Card from 'components/Card/Card';\nimport CardBody from 'components/Card/CardBody';\nimport CardHeader from 'components/Card/CardHeader';\nimport LineChart from 'components/Charts/LineChart';\nimport IconBox from 'components/Icons/IconBox';\nimport { CarIcon, FulgerIcon, FulgerWhiteIcon } from 'components/Icons/Icons';\nimport { Separator } from 'components/Separator/Separator';\nimport React from 'react';\nimport { BsArrowRight } from 'react-icons/bs';\nimport { FaCube, FaFacebook, FaInstagram, FaPencilAlt, FaPenFancy, FaTwitter } from 'react-icons/fa';\n// Icons\nimport { IoDocumentsSharp } from 'react-icons/io5';\n// Data\nimport {\n\tlineChartDataProfile1,\n\tlineChartDataProfile2,\n\tlineChartOptionsProfile1,\n\tlineChartOptionsProfile2\n} from 'variables/charts';\n\nfunction Profile() {\n\treturn (\n\t\t<Flex direction='column' mt={{ sm: '25px', md: '0px' }}>\n\t\t\t<Box\n\t\t\t\tmb={{ sm: '24px', md: '50px', xl: '20px' }}\n\t\t\t\tborderRadius='15px'\n\t\t\t\tpx='0px'\n\t\t\t\tdisplay='flex'\n\t\t\t\tflexDirection='column'\n\t\t\t\tjustifyContent='center'\n\t\t\t\talign='center'>\n\t\t\t\t{/* Header */}\n\t\t\t\t<Card\n\t\t\t\t\tdirection={{ sm: 'column', md: 'row' }}\n\t\t\t\t\tmx='auto'\n\t\t\t\t\tmaxH='330px'\n\t\t\t\t\tw={{ sm: '90%', xl: '100%' }}\n\t\t\t\t\tjustifyContent={{ sm: 'center', md: 'space-between' }}\n\t\t\t\t\talign='center'\n\t\t\t\t\tp='24px'\n\t\t\t\t\tborderRadius='20px'\n\t\t\t\t\tmt='100px'>\n\t\t\t\t\t<Flex align='center' direction={{ sm: 'column', md: 'row' }}>\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\talign='center'\n\t\t\t\t\t\t\tmb={{ sm: '10px', md: '0px' }}\n\t\t\t\t\t\t\tdirection={{ sm: 'column', md: 'row' }}\n\t\t\t\t\t\t\tw={{ sm: '100%' }}\n\t\t\t\t\t\t\ttextAlign={{ sm: 'center', md: 'start' }}>\n\t\t\t\t\t\t\t<Avatar me={{ md: '22px' }} src={avatar11} w='80px' h='80px' borderRadius='15px'>\n\t\t\t\t\t\t\t\t<AvatarBadge\n\t\t\t\t\t\t\t\t\tcursor='pointer'\n\t\t\t\t\t\t\t\t\tborderRadius='8px'\n\t\t\t\t\t\t\t\t\tborder='transparent'\n\t\t\t\t\t\t\t\t\tbg='linear-gradient(138.78deg, rgba(6, 11, 40, 0.94) 17.44%, rgba(10, 14, 35, 0.49) 93.55%, rgba(10, 14, 35, 0.69) 93.55%)'\n\t\t\t\t\t\t\t\t\tboxSize='26px'\n\t\t\t\t\t\t\t\t\tbackdropFilter='blur(120px)'>\n\t\t\t\t\t\t\t\t\t<Icon h='12px' w='12px' color='#fff' as={FaPencilAlt} />\n\t\t\t\t\t\t\t\t</AvatarBadge>\n\t\t\t\t\t\t\t</Avatar>\n\t\t\t\t\t\t\t<Flex direction='column' maxWidth='100%' my={{ sm: '14px' }}>\n\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\tfontSize={{ sm: 'lg', lg: 'xl' }}\n\t\t\t\t\t\t\t\t\tcolor='#fff'\n\t\t\t\t\t\t\t\t\tfontWeight='bold'\n\t\t\t\t\t\t\t\t\tms={{ sm: '8px', md: '0px' }}>\n\t\t\t\t\t\t\t\t\tMark Johnson\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t<Text fontSize={{ sm: 'sm', md: 'md' }} color='gray.400'>\n\t\t\t\t\t\t\t\t\tmark@simmmple.com\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t<Flex direction={{ sm: 'column', lg: 'row' }} w={{ sm: '100%', md: '50%', lg: 'auto' }}>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tborderRadius='12px'\n\t\t\t\t\t\t\t\tbg='brand.200'\n\t\t\t\t\t\t\t\t_hover={{ opacity: '0.8' }}\n\t\t\t\t\t\t\t\t_active={{ opacity: '0.9' }}\n\t\t\t\t\t\t\t\tme={{ base: 'none', lg: '20px' }}\n\t\t\t\t\t\t\t\tleftIcon={<Icon color='white' as={FaCube} me='6px' />}>\n\t\t\t\t\t\t\t\t<Text fontSize='xs' color='#fff' fontWeight='bold'>\n\t\t\t\t\t\t\t\t\tOVERVIEW\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tborderRadius='12px'\n\t\t\t\t\t\t\t\tbg='transparent'\n\t\t\t\t\t\t\t\t_hover={{\n\t\t\t\t\t\t\t\t\tbg: 'brand.200'\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t_active={{\n\t\t\t\t\t\t\t\t\tbg: 'brand.200'\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tme={{ base: 'none', lg: '20px' }}\n\t\t\t\t\t\t\t\tleftIcon={<Icon color='white' as={IoDocumentsSharp} me='6px' />}>\n\t\t\t\t\t\t\t\t<Text fontSize='xs' color='#fff' fontWeight='bold'>\n\t\t\t\t\t\t\t\t\tTEAMS\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tborderRadius='12px'\n\t\t\t\t\t\t\t\tbg='transparent'\n\t\t\t\t\t\t\t\t_hover={{\n\t\t\t\t\t\t\t\t\tbg: 'brand.200'\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t_active={{\n\t\t\t\t\t\t\t\t\tbg: 'brand.200'\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tleftIcon={<Icon color='white' as={FaPenFancy} me='6px' />}>\n\t\t\t\t\t\t\t\t<Text fontSize='xs' color='#fff' fontWeight='bold'>\n\t\t\t\t\t\t\t\t\tPROJECTS\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</Flex>\n\t\t\t\t</Card>\n\t\t\t</Box>\n\t\t\t<Grid\n\t\t\t\ttemplateColumns={{\n\t\t\t\t\tsm: '1fr',\n\t\t\t\t\txl: 'repeat(2, 1fr)',\n\t\t\t\t\t'2xl': '1fr 2fr 1.2fr'\n\t\t\t\t}}\n\t\t\t\tgap='22px'\n\t\t\t\tmb='24px'>\n\t\t\t\t{/* Welcome Card */}\n\t\t\t\t<Card\n\t\t\t\t\tbgImage={bgProfile}\n\t\t\t\t\tbgSize='cover'\n\t\t\t\t\tmaxW={{ sm: '325px', md: '725px', lg: '980px' }}\n\t\t\t\t\th={{ sm: '270px', lg: '350px', xl: '410px' }}\n\t\t\t\t\tgridArea={{ xl: '1 / 1 / 2 / 2', '2xl': 'auto' }}>\n\t\t\t\t\t<Flex direction='column' h='100%'>\n\t\t\t\t\t\t<Text color='#fff' fontSize='30px' fontWeight='bold' mb='3px'>\n\t\t\t\t\t\t\tWelcome back!\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t<Text color='#fff' fontSize='sm' mb='auto'>\n\t\t\t\t\t\t\tNice to see you, Mark Johnson!\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t<Button alignSelf='flex-start' variant='no-hover' bg='transparent' p='0px'>\n\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\tfontSize='xs'\n\t\t\t\t\t\t\t\tcolor='#fff'\n\t\t\t\t\t\t\t\tme='5px'\n\t\t\t\t\t\t\t\tcursor='pointer'\n\t\t\t\t\t\t\t\ttransition='all .3s ease'\n\t\t\t\t\t\t\t\t_hover={{ me: '6px' }}>\n\t\t\t\t\t\t\t\tTab to record\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\tas={BsArrowRight}\n\t\t\t\t\t\t\t\tw='13px'\n\t\t\t\t\t\t\t\th='13px'\n\t\t\t\t\t\t\t\tcolor='#fff'\n\t\t\t\t\t\t\t\ttransition='all .3s ease'\n\t\t\t\t\t\t\t\tcursor='pointer'\n\t\t\t\t\t\t\t\t_hover={{ transform: 'translateX(20%)' }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</Flex>\n\t\t\t\t</Card>\n\t\t\t\t{/* Car Informations */}\n\t\t\t\t<Card\n\t\t\t\t\tp='16px'\n\t\t\t\t\tmaxH={{ lg: '410px' }}\n\t\t\t\t\tmaxW={{ sm: '325px', md: '725px', lg: '980px', xl: '100%' }}\n\t\t\t\t\tgridArea={{ xl: '2 / 1 / 3 / 3', '2xl': 'auto' }}>\n\t\t\t\t\t<CardHeader p='12px 5px' mb='12px'>\n\t\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t\t<Text fontSize='lg' color='#fff' fontWeight='bold' mb='6px'>\n\t\t\t\t\t\t\t\tCar Informations\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Text fontSize='sm' color='gray.400'>\n\t\t\t\t\t\t\t\tHello, Mark Johnson! Your Car is ready.\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardHeader>\n\t\t\t\t\t<CardBody w='100%'>\n\t\t\t\t\t\t<Flex w='100%' direction={{ sm: 'column', md: 'row' }}>\n\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\tdirection='column'\n\t\t\t\t\t\t\t\talign='center'\n\t\t\t\t\t\t\t\tme={{ md: '16px', lg: '50px' }}\n\t\t\t\t\t\t\t\tmb={{ sm: '12px', md: '0px' }}>\n\t\t\t\t\t\t\t\t<CircularProgress\n\t\t\t\t\t\t\t\t\tsize={200}\n\t\t\t\t\t\t\t\t\tvalue={68}\n\t\t\t\t\t\t\t\t\tthickness={6}\n\t\t\t\t\t\t\t\t\tcolor='green.400'\n\t\t\t\t\t\t\t\t\tvariant='vision'>\n\t\t\t\t\t\t\t\t\t<CircularProgressLabel>\n\t\t\t\t\t\t\t\t\t\t<Flex direction='column' justify='center' align='center'>\n\t\t\t\t\t\t\t\t\t\t\t<LightningIcon w='14px' h='22px' mb='8px' />\n\t\t\t\t\t\t\t\t\t\t\t<Text color='#fff' fontSize='36px' fontWeight='bold' mb='6px'>\n\t\t\t\t\t\t\t\t\t\t\t\t68%\n\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t\t<Text color='gray.400' fontSize='sm'>\n\t\t\t\t\t\t\t\t\t\t\t\tCurrent load\n\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t\t</CircularProgressLabel>\n\t\t\t\t\t\t\t\t</CircularProgress>\n\t\t\t\t\t\t\t\t<Flex direction='column' mt='18px' align='center'>\n\t\t\t\t\t\t\t\t\t<Text color='#fff' fontSize='lg' fontWeight='bold' mb='2px'>\n\t\t\t\t\t\t\t\t\t\t0h 58 min\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Text color='gray.500' fontSize='sm'>\n\t\t\t\t\t\t\t\t\t\tTime to full charge\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t<Grid\n\t\t\t\t\t\t\t\ttemplateColumns={{ sm: '1fr', md: 'repeat(2, 1fr)' }}\n\t\t\t\t\t\t\t\tgap='24px'\n\t\t\t\t\t\t\t\tw='100%'\n\t\t\t\t\t\t\t\talignSelf='flex-start'>\n\t\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\t\talign='center'\n\t\t\t\t\t\t\t\t\tp='18px'\n\t\t\t\t\t\t\t\t\tjustify='space-between'\n\t\t\t\t\t\t\t\t\tbg='linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)'\n\t\t\t\t\t\t\t\t\tborderRadius='20px'>\n\t\t\t\t\t\t\t\t\t<Flex direction='column' me='auto'>\n\t\t\t\t\t\t\t\t\t\t<Text fontSize='xs' color='gray.400' mb='3px'>\n\t\t\t\t\t\t\t\t\t\t\tBattery Health\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t<Text color='#fff' fontSize='22px' fontWeight='bold'>\n\t\t\t\t\t\t\t\t\t\t\t76%\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t\t<IconBox bg='brand.200' w='56px' h='56px' direction='column'>\n\t\t\t\t\t\t\t\t\t\t<CarIcon w='28px' h='28px' />\n\t\t\t\t\t\t\t\t\t\t<FulgerWhiteIcon w='8px' h='11px' transform='rotate(90deg)' />\n\t\t\t\t\t\t\t\t\t</IconBox>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\t\talign='center'\n\t\t\t\t\t\t\t\t\tp='18px'\n\t\t\t\t\t\t\t\t\tpe='0px'\n\t\t\t\t\t\t\t\t\tjustify='space-between'\n\t\t\t\t\t\t\t\t\tbg='linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)'\n\t\t\t\t\t\t\t\t\tborderRadius='20px'>\n\t\t\t\t\t\t\t\t\t<Flex direction='column' me='auto'>\n\t\t\t\t\t\t\t\t\t\t<Text fontSize='xs' color='gray.400' mb='3px'>\n\t\t\t\t\t\t\t\t\t\t\tEfficiency\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t<Text color='#fff' fontSize='22px' fontWeight='bold'>\n\t\t\t\t\t\t\t\t\t\t\t+20%\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t\t<Box maxH='75px'>\n\t\t\t\t\t\t\t\t\t\t<LineChart\n\t\t\t\t\t\t\t\t\t\t\tlineChartData={lineChartDataProfile1}\n\t\t\t\t\t\t\t\t\t\t\tlineChartOptions={lineChartOptionsProfile1}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</Box>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\t\talign='center'\n\t\t\t\t\t\t\t\t\tp='18px'\n\t\t\t\t\t\t\t\t\tjustify='space-between'\n\t\t\t\t\t\t\t\t\tbg='linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)'\n\t\t\t\t\t\t\t\t\tborderRadius='20px'>\n\t\t\t\t\t\t\t\t\t<Flex direction='column' me='auto'>\n\t\t\t\t\t\t\t\t\t\t<Text fontSize='xs' color='gray.400' mb='3px'>\n\t\t\t\t\t\t\t\t\t\t\tConsumption\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t<Text color='#fff' fontSize='22px' fontWeight='bold'>\n\t\t\t\t\t\t\t\t\t\t\t163W/km\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t\t<IconBox bg='brand.200' w='56px' h='56px'>\n\t\t\t\t\t\t\t\t\t\t<FulgerWhiteIcon w='24px' h='24px' color='#fff' />\n\t\t\t\t\t\t\t\t\t</IconBox>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\t\talign='center'\n\t\t\t\t\t\t\t\t\tp='18px'\n\t\t\t\t\t\t\t\t\tpe='0px'\n\t\t\t\t\t\t\t\t\tjustify='space-between'\n\t\t\t\t\t\t\t\t\tbg='linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)'\n\t\t\t\t\t\t\t\t\tborderRadius='20px'>\n\t\t\t\t\t\t\t\t\t<Flex direction='column' me='auto'>\n\t\t\t\t\t\t\t\t\t\t<Text fontSize='xs' color='gray.400' mb='3px'>\n\t\t\t\t\t\t\t\t\t\t\tThis Week\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t<Text color='#fff' fontSize='22px' fontWeight='bold'>\n\t\t\t\t\t\t\t\t\t\t\t1.342km\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t\t<Box maxH='75px'>\n\t\t\t\t\t\t\t\t\t\t<LineChart\n\t\t\t\t\t\t\t\t\t\t\tlineChartData={lineChartDataProfile2}\n\t\t\t\t\t\t\t\t\t\t\tlineChartOptions={lineChartOptionsProfile2}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</Box>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t</Grid>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</Card>\n\t\t\t\t{/* Profile Information */}\n\t\t\t\t<Card\n\t\t\t\t\tp='16px'\n\t\t\t\t\tmaxH={{ md: '410px' }}\n\t\t\t\t\tmaxW={{ sm: '325px', md: '725px', lg: '980px' }}\n\t\t\t\t\tgridArea={{ xl: '1 / 2 / 2 / 3', '2xl': 'auto' }}>\n\t\t\t\t\t<CardHeader p='12px 5px' mb='12px'>\n\t\t\t\t\t\t<Text fontSize='lg' color='#fff' fontWeight='bold'>\n\t\t\t\t\t\t\tProfile Information\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</CardHeader>\n\t\t\t\t\t<CardBody px='5px'>\n\t\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t\t<Text fontSize='sm' color={'gray.400'} fontWeight='400' mb='15px'>\n\t\t\t\t\t\t\t\tHi, I’m Mark Johnson, Decisions: If you can’t decide, the answer is no. If two equally\n\t\t\t\t\t\t\t\tdifficult paths, choose the one more painful in the short term (pain avoidance is\n\t\t\t\t\t\t\t\tcreating an illusion of equality).\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Separator mb='30px' />\n\t\t\t\t\t\t\t<Flex align='center' mb='18px'>\n\t\t\t\t\t\t\t\t<Text fontSize='sm' color={'gray.400'} me='10px'>\n\t\t\t\t\t\t\t\t\tFull Name:{' '}\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t<Text fontSize='sm' color='#fff' fontWeight='400'>\n\t\t\t\t\t\t\t\t\tMark Johnson\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t<Flex align='center' mb='18px'>\n\t\t\t\t\t\t\t\t<Text fontSize='sm' color={'gray.400'} me='10px'>\n\t\t\t\t\t\t\t\t\tMobile:{' '}\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t<Text fontSize='sm' color='#fff' fontWeight='400'>\n\t\t\t\t\t\t\t\t\t(44) 123 1234 123\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t<Flex align='center' mb='18px'>\n\t\t\t\t\t\t\t\t<Text fontSize='sm' color={'gray.400'} me='10px'>\n\t\t\t\t\t\t\t\t\tEmail:{' '}\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t<Text fontSize='sm' color='#fff' fontWeight='400'>\n\t\t\t\t\t\t\t\t\tmark@simmmple.com\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t<Flex align='center' mb='18px'>\n\t\t\t\t\t\t\t\t<Text fontSize='sm' color={'gray.400'} me='10px'>\n\t\t\t\t\t\t\t\t\tLocation:{' '}\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t<Text fontSize='sm' color='#fff' fontWeight='400'>\n\t\t\t\t\t\t\t\t\tUnited States\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t<Flex align='center' mb='18px'>\n\t\t\t\t\t\t\t\t<Text fontSize='sm' color={'gray.400'} me='10px'>\n\t\t\t\t\t\t\t\t\tSocial Media:{' '}\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t<Flex>\n\t\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\t\thref='#'\n\t\t\t\t\t\t\t\t\t\tcolor='teal.300'\n\t\t\t\t\t\t\t\t\t\tfontSize='lg'\n\t\t\t\t\t\t\t\t\t\tme='10px'\n\t\t\t\t\t\t\t\t\t\t_hover={{ color: 'teal.300' }}>\n\t\t\t\t\t\t\t\t\t\t<Icon color='white' as={FaFacebook} w='12px' h='12px' />\n\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\t\thref='#'\n\t\t\t\t\t\t\t\t\t\tcolor='teal.300'\n\t\t\t\t\t\t\t\t\t\tfontSize='lg'\n\t\t\t\t\t\t\t\t\t\tme='10px'\n\t\t\t\t\t\t\t\t\t\t_hover={{ color: 'teal.300' }}>\n\t\t\t\t\t\t\t\t\t\t<Icon color='white' as={FaInstagram} w='12px' h='12px' />\n\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\t\thref='#'\n\t\t\t\t\t\t\t\t\t\tcolor='teal.300'\n\t\t\t\t\t\t\t\t\t\tfontSize='lg'\n\t\t\t\t\t\t\t\t\t\tme='10px'\n\t\t\t\t\t\t\t\t\t\t_hover={{ color: 'teal.300' }}>\n\t\t\t\t\t\t\t\t\t\t<Icon color='white' as={FaTwitter} w='12px' h='12px' />\n\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</Card>\n\t\t\t</Grid>\n\t\t\t<Grid templateColumns={{ sm: '1fr', xl: '1fr 3fr' }} gap='20px'>\n\t\t\t\t<DarkMode>\n\t\t\t\t\t{/* Platform Settings */}\n\t\t\t\t\t<Card p='16px' gridArea={{ xl: '1 / 1 / 2 / 2' }}>\n\t\t\t\t\t\t<CardHeader p='12px 5px' mb='12px'>\n\t\t\t\t\t\t\t<Text fontSize='lg' color='#fff' fontWeight='bold'>\n\t\t\t\t\t\t\t\tPlatform Settings\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t<CardBody px='5px'>\n\t\t\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t\t\t<Text fontSize='10px' color={'gray.400'} mb='20px'>\n\t\t\t\t\t\t\t\t\tACCOUNT\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t<Flex align='center' mb='20px'>\n\t\t\t\t\t\t\t\t\t<Switch variant='brand' colorScheme='brand' me='10px' defaultChecked />\n\t\t\t\t\t\t\t\t\t<Text noOfLines={1} fontSize='sm' color={'gray.400'} fontWeight='400'>\n\t\t\t\t\t\t\t\t\t\tEmail me when someone follows me\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t<Flex align='center' mb='20px'>\n\t\t\t\t\t\t\t\t\t<Switch colorScheme='brand' me='10px' />\n\t\t\t\t\t\t\t\t\t<Text noOfLines={1} fontSize='sm' color={'gray.400'} fontWeight='400'>\n\t\t\t\t\t\t\t\t\t\tEmail me when someone answers on my post\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t<Flex align='center' mb='20px'>\n\t\t\t\t\t\t\t\t\t<Switch colorScheme='brand' me='10px' defaultChecked />\n\t\t\t\t\t\t\t\t\t<Text noOfLines={1} fontSize='sm' color={'gray.400'} fontWeight='400'>\n\t\t\t\t\t\t\t\t\t\tEmail me when someone mentions me\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t<Text fontSize='10px' color={'gray.400'} m='6px 0px 20px 0px'>\n\t\t\t\t\t\t\t\t\tAPPLICATION\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t<Flex align='center' mb='20px'>\n\t\t\t\t\t\t\t\t\t<Switch colorScheme='brand' me='10px' />\n\t\t\t\t\t\t\t\t\t<Text noOfLines={1} fontSize='sm' color={'gray.400'} fontWeight='400'>\n\t\t\t\t\t\t\t\t\t\tNew launches and projects\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t<Flex align='center' mb='20px'>\n\t\t\t\t\t\t\t\t\t<Switch colorScheme='brand' me='10px' defaultChecked />\n\t\t\t\t\t\t\t\t\t<Text noOfLines={1} fontSize='sm' color={'gray.400'} fontWeight='400'>\n\t\t\t\t\t\t\t\t\t\tMonthly product changes\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t<Flex align='center' mb='20px'>\n\t\t\t\t\t\t\t\t\t<Switch colorScheme='brand' me='10px' />\n\t\t\t\t\t\t\t\t\t<Text noOfLines={1} fontSize='sm' color={'gray.400'} fontWeight='400'>\n\t\t\t\t\t\t\t\t\t\tSubscribe to newsletter\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t<Flex align='center' mb='20px'>\n\t\t\t\t\t\t\t\t\t<Switch colorScheme='brand' me='10px' defaultChecked />\n\t\t\t\t\t\t\t\t\t<Text noOfLines={1} fontSize='sm' color={'gray.400'} fontWeight='400'>\n\t\t\t\t\t\t\t\t\t\tReceive mails weekly\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t</CardBody>\n\t\t\t\t\t</Card>\n\t\t\t\t</DarkMode>\n\t\t\t\t{/* Projects */}\n\t\t\t\t<Card gridArea={{ xl: '1 /2 /2/ 5' }} p='16px'>\n\t\t\t\t\t<CardHeader p='12px 5px' mb='12px'>\n\t\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t\t<Text fontSize='lg' color='#fff' fontWeight='bold'>\n\t\t\t\t\t\t\t\tProjects\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Text fontSize='sm' color={'gray.400'} fontWeight='400'>\n\t\t\t\t\t\t\t\tArchitects design houses\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardHeader>\n\t\t\t\t\t<CardBody px='5px'>\n\t\t\t\t\t\t<Grid\n\t\t\t\t\t\t\ttemplateColumns={{\n\t\t\t\t\t\t\t\tsm: '1fr',\n\t\t\t\t\t\t\t\tmd: '1fr 1fr',\n\t\t\t\t\t\t\t\txl: 'repeat(3, 1fr)'\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\ttemplateRows={{\n\t\t\t\t\t\t\t\tsm: '1fr 1fr 1fr auto',\n\t\t\t\t\t\t\t\tmd: '1fr 1fr',\n\t\t\t\t\t\t\t\txl: '1fr'\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tgap='24px'>\n\t\t\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t\t\t<Box mb='20px' position='relative' borderRadius='20px'>\n\t\t\t\t\t\t\t\t\t<Image src={ProjectImage1} borderRadius='20px' />\n\t\t\t\t\t\t\t\t</Box>\n\t\t\t\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t\t\t\t<Text fontSize='10px' color={'gray.400'} mb='10px'>\n\t\t\t\t\t\t\t\t\t\tProject #1\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Text fontSize='xl' color='#fff' fontWeight='bold' mb='10px'>\n\t\t\t\t\t\t\t\t\t\tModern\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Text fontSize='sm' color={'gray.400'} fontWeight='400' mb='20px'>\n\t\t\t\t\t\t\t\t\t\tAs Uber works through a huge amount of internal management turmoil.\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Flex justifyContent='space-between' mt='auto'>\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tvariant='outlineWhite'\n\t\t\t\t\t\t\t\t\t\t\tminW='110px'\n\t\t\t\t\t\t\t\t\t\t\th='36px'\n\t\t\t\t\t\t\t\t\t\t\tfontSize='10px'\n\t\t\t\t\t\t\t\t\t\t\tpx='1.5rem'>\n\t\t\t\t\t\t\t\t\t\t\tVIEW ALL\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<AvatarGroup size='xs'>\n\t\t\t\t\t\t\t\t\t\t\t<Avatar borderColor='#121241' name='Ryan Florence' src={avatar6} />\n\t\t\t\t\t\t\t\t\t\t\t<Avatar borderColor='#121241' name='Segun Adebayo' src={avatar2} />\n\t\t\t\t\t\t\t\t\t\t\t<Avatar borderColor='#121241' name='Kent Dodds' src={avatar3} />\n\t\t\t\t\t\t\t\t\t\t\t<Avatar borderColor='#121241' name='Prosper Otemuyiwa' src={avatar4} />\n\t\t\t\t\t\t\t\t\t\t</AvatarGroup>\n\t\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t\t\t<Box mb='20px' position='relative' borderRadius='20px'>\n\t\t\t\t\t\t\t\t\t<Image src={ProjectImage2} borderRadius='20px' />\n\t\t\t\t\t\t\t\t</Box>\n\t\t\t\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t\t\t\t<Text fontSize='10px' color={'gray.400'} mb='10px'>\n\t\t\t\t\t\t\t\t\t\tProject #2\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Text fontSize='xl' color='#fff' fontWeight='bold' mb='10px'>\n\t\t\t\t\t\t\t\t\t\tScandinavian\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Text fontSize='sm' color={'gray.400'} mb='20px'>\n\t\t\t\t\t\t\t\t\t\tMusic is something that every person has his or her own specific opinion about.\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Flex justifyContent='space-between' mt='auto'>\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tvariant='outlineWhite'\n\t\t\t\t\t\t\t\t\t\t\tminW='110px'\n\t\t\t\t\t\t\t\t\t\t\th='36px'\n\t\t\t\t\t\t\t\t\t\t\tfontSize='10px'\n\t\t\t\t\t\t\t\t\t\t\tpx='1.5rem'>\n\t\t\t\t\t\t\t\t\t\t\tVIEW ALL\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<AvatarGroup size='xs'>\n\t\t\t\t\t\t\t\t\t\t\t<Avatar borderColor='#121241' name='Ryan Florence' src={avatar6} />\n\t\t\t\t\t\t\t\t\t\t\t<Avatar borderColor='#121241' name='Segun Adebayo' src={avatar2} />\n\t\t\t\t\t\t\t\t\t\t\t<Avatar borderColor='#121241' name='Kent Dodds' src={avatar3} />\n\t\t\t\t\t\t\t\t\t\t\t<Avatar borderColor='#121241' name='Prosper Otemuyiwa' src={avatar4} />\n\t\t\t\t\t\t\t\t\t\t</AvatarGroup>\n\t\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t<Flex direction='column' h='100%'>\n\t\t\t\t\t\t\t\t<Box mb='20px' position='relative' borderRadius='20px'>\n\t\t\t\t\t\t\t\t\t<Image src={ProjectImage3} borderRadius='20px' />\n\t\t\t\t\t\t\t\t</Box>\n\t\t\t\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t\t\t\t<Text fontSize='10px' color={'gray.400'} mb='10px'>\n\t\t\t\t\t\t\t\t\t\tProject #3\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Text fontSize='xl' color='#fff' fontWeight='bold' mb='10px'>\n\t\t\t\t\t\t\t\t\t\tMinimalist\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Text fontSize='sm' color={'gray.400'} fontWeight='400' mb='20px'>\n\t\t\t\t\t\t\t\t\t\tDifferent people have different taste, especially various types of music.\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Flex justifyContent='space-between' mt='auto'>\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tvariant='outlineWhite'\n\t\t\t\t\t\t\t\t\t\t\tminW='110px'\n\t\t\t\t\t\t\t\t\t\t\th='36px'\n\t\t\t\t\t\t\t\t\t\t\tfontSize='10px'\n\t\t\t\t\t\t\t\t\t\t\tpx='1.5rem'>\n\t\t\t\t\t\t\t\t\t\t\tVIEW ALL\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t<AvatarGroup size='xs'>\n\t\t\t\t\t\t\t\t\t\t\t<Avatar borderColor='#121241' name='Ryan Florence' src={avatar6} />\n\t\t\t\t\t\t\t\t\t\t\t<Avatar borderColor='#121241' name='Segun Adebayo' src={avatar2} />\n\t\t\t\t\t\t\t\t\t\t\t<Avatar borderColor='#121241' name='Kent Dodds' src={avatar3} />\n\t\t\t\t\t\t\t\t\t\t\t<Avatar borderColor='#121241' name='Prosper Otemuyiwa' src={avatar4} />\n\t\t\t\t\t\t\t\t\t\t</AvatarGroup>\n\t\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t</Grid>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</Card>\n\t\t\t</Grid>\n\t\t</Flex>\n\t);\n}\n\nexport default Profile;\n"
  },
  {
    "path": "src/views/Dashboard/Tables.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport React from \"react\";\n\n// Chakra imports\nimport {\n  Flex,\n  Table,\n  Tbody,\n  Icon,\n  Text,\n  Th,\n  Thead,\n  Tr,\n} from \"@chakra-ui/react\";\n\n// Custom components\nimport Card from \"components/Card/Card.js\";\nimport CardHeader from \"components/Card/CardHeader.js\";\nimport CardBody from \"components/Card/CardBody.js\";\n\n// Table Components\nimport TablesProjectRow from \"components/Tables/TablesProjectRow\";\nimport TablesTableRow from \"components/Tables/TablesTableRow\";\n\n// Data\nimport { tablesProjectData, tablesTableData } from \"variables/general\";\n\n// Icons\nimport { AiFillCheckCircle } from \"react-icons/ai\";\n\nfunction Tables() {\n  return (\n    <Flex direction='column' pt={{ base: \"120px\", md: \"75px\" }}>\n      {/* Authors Table */}\n      <Card overflowX={{ sm: \"scroll\", xl: \"hidden\" }} pb='0px'>\n        <CardHeader p='6px 0px 22px 0px'>\n          <Text fontSize='lg' color='#fff' fontWeight='bold'>\n            Authors Table\n          </Text>\n        </CardHeader>\n        <CardBody>\n          <Table variant='simple' color='#fff'>\n            <Thead>\n              <Tr my='.8rem' ps='0px' color='gray.400'>\n                <Th\n                  ps='0px'\n                  color='gray.400'\n                  fontFamily='Plus Jakarta Display'\n                  borderBottomColor='#56577A'>\n                  Author\n                </Th>\n                <Th\n                  color='gray.400'\n                  fontFamily='Plus Jakarta Display'\n                  borderBottomColor='#56577A'>\n                  Function\n                </Th>\n                <Th\n                  color='gray.400'\n                  fontFamily='Plus Jakarta Display'\n                  borderBottomColor='#56577A'>\n                  Status\n                </Th>\n                <Th\n                  color='gray.400'\n                  fontFamily='Plus Jakarta Display'\n                  borderBottomColor='#56577A'>\n                  Employed\n                </Th>\n                <Th borderBottomColor='#56577A'></Th>\n              </Tr>\n            </Thead>\n            <Tbody>\n              {tablesTableData.map((row, index, arr) => {\n                return (\n                  <TablesTableRow\n                    name={row.name}\n                    logo={row.logo}\n                    email={row.email}\n                    subdomain={row.subdomain}\n                    domain={row.domain}\n                    status={row.status}\n                    date={row.date}\n                    lastItem={index === arr.length - 1 ? true : false}\n                  />\n                );\n              })}\n            </Tbody>\n          </Table>\n        </CardBody>\n      </Card>\n      {/* Projects Table */}\n      <Card my='22px' overflowX={{ sm: \"scroll\", xl: \"hidden\" }} pb='0px'>\n        <CardHeader p='6px 0px 22px 0px'>\n          <Flex direction='column'>\n            <Text fontSize='lg' color='#fff' fontWeight='bold' mb='.5rem'>\n              Projects Table\n            </Text>\n            <Flex align='center'>\n              <Icon\n                as={AiFillCheckCircle}\n                color='green.500'\n                w='15px'\n                h='15px'\n                me='5px'\n              />\n              <Text fontSize='sm' color='gray.400' fontWeight='normal'>\n                <Text fontWeight='bold' as='span' color='gray.400'>\n                  +30%\n                </Text>{\" \"}\n                this month\n              </Text>\n            </Flex>\n          </Flex>\n        </CardHeader>\n        <CardBody>\n          <Table variant='simple' color='#fff'>\n            <Thead>\n              <Tr my='.8rem' ps='0px'>\n                <Th\n                  ps='0px'\n                  color='gray.400'\n                  fontFamily='Plus Jakarta Display'\n                  borderBottomColor='#56577A'>\n                  Companies\n                </Th>\n                <Th\n                  color='gray.400'\n                  fontFamily='Plus Jakarta Display'\n                  borderBottomColor='#56577A'>\n                  Budget\n                </Th>\n                <Th\n                  color='gray.400'\n                  fontFamily='Plus Jakarta Display'\n                  borderBottomColor='#56577A'>\n                  Status\n                </Th>\n                <Th\n                  color='gray.400'\n                  fontFamily='Plus Jakarta Display'\n                  borderBottomColor='#56577A'>\n                  Completion\n                </Th>\n                <Th borderBottomColor='#56577A'></Th>\n              </Tr>\n            </Thead>\n            <Tbody>\n              {tablesProjectData.map((row, index, arr) => {\n                return (\n                  <TablesProjectRow\n                    name={row.name}\n                    logo={row.logo}\n                    status={row.status}\n                    budget={row.budget}\n                    progression={row.progression}\n                    lastItem={index === arr.length - 1 ? true : false}\n                  />\n                );\n              })}\n            </Tbody>\n          </Table>\n        </CardBody>\n      </Card>\n    </Flex>\n  );\n}\n\nexport default Tables;\n"
  },
  {
    "path": "src/views/Pages/SignIn.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport React from \"react\";\n// Chakra imports\nimport {\n  Box,\n  Flex,\n  Button,\n  FormControl,\n  FormLabel,\n  Heading,\n  Input,\n  Link,\n  Switch,\n  Text,\n  DarkMode,\n} from \"@chakra-ui/react\";\n\n// Assets\nimport signInImage from \"assets/img/signInImage.png\";\n\n// Custom Components\nimport AuthFooter from \"components/Footer/AuthFooter\";\nimport GradientBorder from \"components/GradientBorder/GradientBorder\";\n\nfunction SignIn() {\n  const titleColor = \"white\";\n  const textColor = \"gray.400\";\n\n  return (\n    <Flex position='relative'>\n      <Flex\n        minH='100vh'\n        h={{ base: \"120vh\", lg: \"fit-content\" }}\n        w='100%'\n        maxW='1044px'\n        mx='auto'\n        pt={{ sm: \"100px\", md: \"0px\" }}\n        flexDirection='column'\n        me={{ base: \"auto\", lg: \"50px\", xl: \"auto\" }}>\n        <Flex\n          alignItems='center'\n          justifyContent='start'\n          style={{ userSelect: \"none\" }}\n          mx={{ base: \"auto\", lg: \"unset\" }}\n          ms={{ base: \"auto\", lg: \"auto\" }}\n          w={{ base: \"100%\", md: \"50%\", lg: \"450px\" }}\n          px='50px'>\n          <Flex\n            direction='column'\n            w='100%'\n            background='transparent'\n            mt={{ base: \"50px\", md: \"150px\", lg: \"160px\", xl: \"245px\" }}\n            mb={{ base: \"60px\", lg: \"95px\" }}>\n            <Heading color={titleColor} fontSize='32px' mb='10px'>\n              Nice to see you!\n            </Heading>\n            <Text\n              mb='36px'\n              ms='4px'\n              color={textColor}\n              fontWeight='bold'\n              fontSize='14px'>\n              Enter your email and password to sign in\n            </Text>\n            <FormControl>\n              <FormLabel\n                ms='4px'\n                fontSize='sm'\n                fontWeight='normal'\n                color='white'>\n                Email\n              </FormLabel>\n              <GradientBorder\n                mb='24px'\n                w={{ base: \"100%\", lg: \"fit-content\" }}\n                borderRadius='20px'>\n                <Input\n                  color='white'\n                  bg='rgb(19,21,54)'\n                  border='transparent'\n                  borderRadius='20px'\n                  fontSize='sm'\n                  size='lg'\n                  w={{ base: \"100%\", md: \"346px\" }}\n                  maxW='100%'\n                  h='46px'\n                  placeholder='Your email adress'\n                />\n              </GradientBorder>\n            </FormControl>\n            <FormControl>\n              <FormLabel\n                ms='4px'\n                fontSize='sm'\n                fontWeight='normal'\n                color='white'>\n                Password\n              </FormLabel>\n              <GradientBorder\n                mb='24px'\n                w={{ base: \"100%\", lg: \"fit-content\" }}\n                borderRadius='20px'>\n                <Input\n                  color='white'\n                  bg='rgb(19,21,54)'\n                  border='transparent'\n                  borderRadius='20px'\n                  fontSize='sm'\n                  size='lg'\n                  w={{ base: \"100%\", md: \"346px\" }}\n                  maxW='100%'\n                  type='password'\n                  placeholder='Your password'\n                />\n              </GradientBorder>\n            </FormControl>\n            <FormControl display='flex' alignItems='center'>\n              <DarkMode>\n                <Switch id='remember-login' colorScheme='brand' me='10px' />\n              </DarkMode>\n              <FormLabel\n                htmlFor='remember-login'\n                mb='0'\n                ms='1'\n                fontWeight='normal'\n                color='white'>\n                Remember me\n              </FormLabel>\n            </FormControl>\n            <Button\n              variant='brand'\n              fontSize='10px'\n              type='submit'\n              w='100%'\n              maxW='350px'\n              h='45'\n              mb='20px'\n              mt='20px'>\n              SIGN IN\n            </Button>\n\n            <Flex\n              flexDirection='column'\n              justifyContent='center'\n              alignItems='center'\n              maxW='100%'\n              mt='0px'>\n              <Text color={textColor} fontWeight='medium'>\n                Don't have an account?\n                <Link color={titleColor} as='span' ms='5px' fontWeight='bold'>\n                  Sign Up\n                </Link>\n              </Text>\n            </Flex>\n          </Flex>\n        </Flex>\n        <Box\n          w={{ base: \"335px\", md: \"450px\" }}\n          mx={{ base: \"auto\", lg: \"unset\" }}\n          ms={{ base: \"auto\", lg: \"auto\" }}\n          mb='80px'>\n          <AuthFooter />\n        </Box>\n        <Box\n          display={{ base: \"none\", lg: \"block\" }}\n          overflowX='hidden'\n          h='100%'\n          maxW={{ md: \"50vw\", lg: \"50vw\" }}\n          minH='100vh'\n          w='960px'\n          position='absolute'\n          left='0px'>\n          <Box\n            bgImage={signInImage}\n            w='100%'\n            h='100%'\n            bgSize='cover'\n            bgPosition='50%'\n            position='absolute'\n            display='flex'\n            flexDirection='column'\n            justifyContent='center'\n            alignItems='center'\n            position='absolute'>\n            <Text\n              textAlign='center'\n              color='white'\n              letterSpacing='8px'\n              fontSize='20px'\n              fontWeight='500'>\n              INSPIRED BY THE FUTURE:\n            </Text>\n            <Text\n              textAlign='center'\n              color='transparent'\n              letterSpacing='8px'\n              fontSize='36px'\n              fontWeight='bold'\n              bgClip='text !important'\n              bg='linear-gradient(94.56deg, #FFFFFF 79.99%, #21242F 102.65%)'>\n              THE VISION UI DASHBOARD\n            </Text>\n          </Box>\n        </Box>\n      </Flex>\n    </Flex>\n  );\n}\n\nexport default SignIn;\n"
  },
  {
    "path": "src/views/Pages/SignUp.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n\nimport React from \"react\";\n\n// Chakra imports\nimport {\n  Box,\n  Flex,\n  Button,\n  FormControl,\n  FormLabel,\n  HStack,\n  Input,\n  Link,\n  Switch,\n  Text,\n  Icon,\n  DarkMode,\n} from \"@chakra-ui/react\";\n\n// Icons\nimport { FaApple, FaFacebook, FaGoogle } from \"react-icons/fa\";\n// Custom Components\nimport AuthFooter from \"components/Footer/AuthFooter\";\nimport GradientBorder from \"components/GradientBorder/GradientBorder\";\n\n// Assets\nimport signUpImage from \"assets/img/signUpImage.png\";\n\nfunction SignUp() {\n  const titleColor = \"white\";\n  const textColor = \"gray.400\";\n\n  return (\n    <Flex position='relative' overflow={{ lg: \"hidden\" }}>\n      <Flex\n        flexDirection='column'\n        h={{ sm: \"initial\", md: \"unset\" }}\n        w={{ base: \"90%\" }}\n        maxW='1044px'\n        mx='auto'\n        justifyContent='space-between'\n        pt={{ sm: \"100px\", md: \"0px\" }}\n        me={{ base: \"auto\", lg: \"50px\", xl: \"auto\" }}>\n        <Flex\n          alignItems='center'\n          justifyContent='start'\n          style={{ userSelect: \"none\" }}\n          flexDirection='column'\n          mx={{ base: \"auto\", lg: \"unset\" }}\n          ms={{ base: \"auto\", lg: \"auto\" }}\n          mb='50px'\n          w={{ base: \"100%\", md: \"50%\", lg: \"42%\" }}>\n          <Flex\n            direction='column'\n            textAlign='center'\n            justifyContent='center'\n            align='center'\n            mt={{ base: \"60px\", md: \"140px\", lg: \"200px\" }}\n            mb='50px'>\n            <Text\n              fontSize='4xl'\n              lineHeight='39px'\n              color='white'\n              fontWeight='bold'>\n              Welcome!\n            </Text>\n            <Text\n              fontSize='md'\n              color='white'\n              fontWeight='normal'\n              mt='10px'\n              w={{ base: \"100%\", md: \"90%\", lg: \"90%\", xl: \"80%\" }}>\n              Use these awesome forms to login or create new account in your\n              project for free.\n            </Text>\n          </Flex>\n          <GradientBorder p='2px' me={{ base: \"none\", lg: \"30px\", xl: \"none\" }}>\n            <Flex\n              background='transparent'\n              borderRadius='30px'\n              direction='column'\n              p='40px'\n              minW={{ base: \"unset\", md: \"430px\", xl: \"450px\" }}\n              w='100%'\n              mx={{ base: \"0px\" }}\n              bg={{\n                base: \"rgb(19,21,56)\",\n              }}>\n              <Text\n                fontSize='xl'\n                color={textColor}\n                fontWeight='bold'\n                textAlign='center'\n                mb='22px'>\n                Register With\n              </Text>\n              <HStack spacing='15px' justify='center' mb='22px'>\n                <GradientBorder borderRadius='15px'>\n                  <Flex\n                    _hover={{ filter: \"brightness(120%)\" }}\n                    transition='all .25s ease'\n                    cursor='pointer'\n                    justify='center'\n                    align='center'\n                    bg='rgb(19,21,54)'\n                    w='71px'\n                    h='71px'\n                    borderRadius='15px'>\n                    <Link href='#'>\n                      <Icon\n                        color={titleColor}\n                        as={FaFacebook}\n                        w='30px'\n                        h='30px'\n                        _hover={{ filter: \"brightness(120%)\" }}\n                      />\n                    </Link>\n                  </Flex>\n                </GradientBorder>\n                <GradientBorder borderRadius='15px'>\n                  <Flex\n                    _hover={{ filter: \"brightness(120%)\" }}\n                    transition='all .25s ease'\n                    cursor='pointer'\n                    justify='center'\n                    align='center'\n                    bg='rgb(19,21,54)'\n                    w='71px'\n                    h='71px'\n                    borderRadius='15px'>\n                    <Link href='#'>\n                      <Icon\n                        color={titleColor}\n                        as={FaApple}\n                        w='30px'\n                        h='30px'\n                        _hover={{ filter: \"brightness(120%)\" }}\n                      />\n                    </Link>\n                  </Flex>\n                </GradientBorder>\n                <GradientBorder borderRadius='15px'>\n                  <Flex\n                    _hover={{ filter: \"brightness(120%)\" }}\n                    transition='all .25s ease'\n                    cursor='pointer'\n                    justify='center'\n                    align='center'\n                    bg='rgb(19,21,54)'\n                    w='71px'\n                    h='71px'\n                    borderRadius='15px'>\n                    <Link href='#'>\n                      <Icon\n                        color={titleColor}\n                        as={FaGoogle}\n                        w='30px'\n                        h='30px'\n                        _hover={{ filter: \"brightness(120%)\" }}\n                      />\n                    </Link>\n                  </Flex>\n                </GradientBorder>\n              </HStack>\n              <Text\n                fontSize='lg'\n                color='gray.400'\n                fontWeight='bold'\n                textAlign='center'\n                mb='22px'>\n                or\n              </Text>\n              <FormControl>\n                <FormLabel\n                  color={titleColor}\n                  ms='4px'\n                  fontSize='sm'\n                  fontWeight='normal'>\n                  Name\n                </FormLabel>\n\n                <GradientBorder\n                  mb='24px'\n                  h='50px'\n                  w={{ base: \"100%\", lg: \"fit-content\" }}\n                  borderRadius='20px'>\n                  <Input\n                    color={titleColor}\n                    bg={{\n                      base: \"rgb(19,21,54)\",\n                    }}\n                    border='transparent'\n                    borderRadius='20px'\n                    fontSize='sm'\n                    size='lg'\n                    w={{ base: \"100%\", md: \"346px\" }}\n                    maxW='100%'\n                    h='46px'\n                    type='text'\n                    placeholder='Your name'\n                  />\n                </GradientBorder>\n                <FormLabel\n                  color={titleColor}\n                  ms='4px'\n                  fontSize='sm'\n                  fontWeight='normal'>\n                  Email\n                </FormLabel>\n                <GradientBorder\n                  mb='24px'\n                  h='50px'\n                  w={{ base: \"100%\", lg: \"fit-content\" }}\n                  borderRadius='20px'>\n                  <Input\n                    color={titleColor}\n                    bg={{\n                      base: \"rgb(19,21,54)\",\n                    }}\n                    border='transparent'\n                    borderRadius='20px'\n                    fontSize='sm'\n                    size='lg'\n                    w={{ base: \"100%\", md: \"346px\" }}\n                    maxW='100%'\n                    h='46px'\n                    type='email'\n                    placeholder='Your email address'\n                  />\n                </GradientBorder>\n                <FormLabel\n                  color={titleColor}\n                  ms='4px'\n                  fontSize='sm'\n                  fontWeight='normal'>\n                  Password\n                </FormLabel>\n                <GradientBorder\n                  mb='24px'\n                  h='50px'\n                  w={{ base: \"100%\", lg: \"fit-content\" }}\n                  borderRadius='20px'>\n                  <Input\n                    color={titleColor}\n                    bg={{\n                      base: \"rgb(19,21,54)\",\n                    }}\n                    border='transparent'\n                    borderRadius='20px'\n                    fontSize='sm'\n                    size='lg'\n                    w={{ base: \"100%\", md: \"346px\" }}\n                    maxW='100%'\n                    h='46px'\n                    type='password'\n                    placeholder='Your password'\n                  />\n                </GradientBorder>\n                <FormControl display='flex' alignItems='center' mb='24px'>\n                  <DarkMode>\n                    <Switch id='remember-login' colorScheme='brand' me='10px' />\n                  </DarkMode>\n\n                  <FormLabel\n                    color={titleColor}\n                    htmlFor='remember-login'\n                    mb='0'\n                    fontWeight='normal'>\n                    Remember me\n                  </FormLabel>\n                </FormControl>\n                <Button\n                  variant='brand'\n                  fontSize='10px'\n                  type='submit'\n                  w='100%'\n                  maxW='350px'\n                  h='45'\n                  mb='20px'\n                  mt='20px'>\n                  SIGN UP\n                </Button>\n              </FormControl>\n              <Flex\n                flexDirection='column'\n                justifyContent='center'\n                alignItems='center'\n                maxW='100%'\n                mt='0px'>\n                <Text color={textColor} fontWeight='medium'>\n                  Already have an account?\n                  <Link\n                    color={titleColor}\n                    as='span'\n                    ms='5px'\n                    href='#'\n                    fontWeight='bold'>\n                    Sign In\n                  </Link>\n                </Text>\n              </Flex>\n            </Flex>\n          </GradientBorder>\n        </Flex>\n        <Box\n          w={{ base: \"335px\", md: \"450px\" }}\n          mx={{ base: \"auto\", lg: \"unset\" }}\n          ms={{ base: \"auto\", lg: \"auto\" }}\n          mb='90px'>\n          <AuthFooter />\n        </Box>\n        <Box\n          display={{ base: \"none\", lg: \"block\" }}\n          overflowX='hidden'\n          h='1300px'\n          maxW={{ md: \"50vw\", lg: \"48vw\" }}\n          w='960px'\n          position='absolute'\n          left='0px'>\n          <Box\n            bgImage={signUpImage}\n            w='100%'\n            h='1300px'\n            bgSize='cover'\n            bgPosition='50%'\n            position='absolute'\n            display='flex'\n            flexDirection='column'\n            justifyContent='center'\n            alignItems='center'\n            position='absolute'>\n            <Text\n              textAlign='center'\n              color='white'\n              letterSpacing='8px'\n              fontSize='20px'\n              fontWeight='500'>\n              INSPIRED BY THE FUTURE:\n            </Text>\n            <Text\n              textAlign='center'\n              color='transparent'\n              letterSpacing='8px'\n              fontSize='36px'\n              fontWeight='bold'\n              bgClip='text !important'\n              bg='linear-gradient(94.56deg, #FFFFFF 79.99%, #21242F 102.65%)'>\n              THE VISION UI DASHBOARD\n            </Text>\n          </Box>\n        </Box>\n      </Flex>\n    </Flex>\n  );\n}\n\nexport default SignUp;\n"
  },
  {
    "path": "src/views/RTL/RTLPage.js",
    "content": "/*!\n\n=========================================================\n* Vision UI Free Chakra - v1.0.0\n=========================================================\n\n* Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra\n* Copyright 2021 Creative Tim (https://www.creative-tim.com/)\n* Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md)\n\n* Design and Coded by Simmmple & Creative Tim\n\n=========================================================\n\n* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\n*/\n// Chakra imports\nimport {\n\tBox,\n\tButton,\n\tCircularProgress,\n\tCircularProgressLabel,\n\tFlex,\n\tGrid,\n\tIcon,\n\tProgress,\n\tSimpleGrid,\n\tSpacer,\n\tStack,\n\tStat,\n\tStatHelpText,\n\tStatLabel,\n\tStatNumber,\n\tTable,\n\tTbody,\n\tText,\n\tTh,\n\tThead,\n\tTr\n} from '@chakra-ui/react';\nimport medusa from 'assets/img/cardimgfree.png';\n// Custom components\nimport Card from 'components/Card/Card.js';\nimport CardBody from 'components/Card/CardBody.js';\nimport CardHeader from 'components/Card/CardHeader.js';\nimport BarChart from 'components/Charts/BarChart';\nimport LineChart from 'components/Charts/LineChart';\nimport IconBox from 'components/Icons/IconBox';\n// Custom icons\nimport { CartIcon, DocumentIcon, GlobeIcon, RocketIcon, StatsIcon, WalletIcon } from 'components/Icons/Icons.js';\n// Tables\nimport DashboardTableRow from 'components/Tables/DashboardTableRow';\nimport TimelineRow from 'components/Tables/TimelineRow';\nimport React from 'react';\n// Styles for the circular bar\nimport { AiFillCheckCircle } from 'react-icons/ai';\nimport { BiHappy } from 'react-icons/bi';\n// icons\nimport { BsArrowLeft } from 'react-icons/bs';\nimport { IoCheckmarkDoneCircleSharp, IoEllipsisHorizontal } from 'react-icons/io5';\n// Data\nimport {\n\tbarChartDataDashboard,\n\tbarChartOptionsDashboard,\n\tlineChartDataDashboard,\n\tlineChartOptionsDashboard\n} from 'variables/charts';\nimport { dashboardTableData, timelineData } from 'variables/general';\n\nexport default function Dashboard() {\n\treturn (\n\t\t<Flex flexDirection='column' pt={{ base: '120px', md: '75px' }}>\n\t\t\t<SimpleGrid columns={{ sm: 1, md: 2, xl: 4 }} spacing='24px'>\n\t\t\t\t{/* MiniStatistics Card */}\n\t\t\t\t<Card>\n\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t<Flex flexDirection='row' align='center' justify='center' w='100%'>\n\t\t\t\t\t\t\t<Stat me='auto'>\n\t\t\t\t\t\t\t\t<StatLabel fontSize='sm' color='gray.400' fontWeight='bold' pb='2px'>\n\t\t\t\t\t\t\t\t\tToday's Money\n\t\t\t\t\t\t\t\t</StatLabel>\n\t\t\t\t\t\t\t\t<Flex>\n\t\t\t\t\t\t\t\t\t<StatNumber fontSize='lg' color='#fff'>\n\t\t\t\t\t\t\t\t\t\t$53,000\n\t\t\t\t\t\t\t\t\t</StatNumber>\n\t\t\t\t\t\t\t\t\t<StatHelpText\n\t\t\t\t\t\t\t\t\t\talignSelf='flex-end'\n\t\t\t\t\t\t\t\t\t\tjustifySelf='flex-end'\n\t\t\t\t\t\t\t\t\t\tm='0px'\n\t\t\t\t\t\t\t\t\t\tcolor='green.400'\n\t\t\t\t\t\t\t\t\t\tfontWeight='bold'\n\t\t\t\t\t\t\t\t\t\tps='3px'\n\t\t\t\t\t\t\t\t\t\tfontSize='md'>\n\t\t\t\t\t\t\t\t\t\t+55%\n\t\t\t\t\t\t\t\t\t</StatHelpText>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t</Stat>\n\t\t\t\t\t\t\t<IconBox as='box' h={'45px'} w={'45px'} bg='brand.200'>\n\t\t\t\t\t\t\t\t<WalletIcon h={'24px'} w={'24px'} color='#fff' />\n\t\t\t\t\t\t\t</IconBox>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</Card>\n\t\t\t\t{/* MiniStatistics Card */}\n\t\t\t\t<Card minH='83px'>\n\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t<Flex flexDirection='row' align='center' justify='center' w='100%'>\n\t\t\t\t\t\t\t<Stat me='auto'>\n\t\t\t\t\t\t\t\t<StatLabel fontSize='sm' color='gray.400' fontWeight='bold' pb='2px'>\n\t\t\t\t\t\t\t\t\tToday's Users\n\t\t\t\t\t\t\t\t</StatLabel>\n\t\t\t\t\t\t\t\t<Flex>\n\t\t\t\t\t\t\t\t\t<StatNumber fontSize='lg' color='#fff'>\n\t\t\t\t\t\t\t\t\t\t2,300\n\t\t\t\t\t\t\t\t\t</StatNumber>\n\t\t\t\t\t\t\t\t\t<StatHelpText\n\t\t\t\t\t\t\t\t\t\talignSelf='flex-end'\n\t\t\t\t\t\t\t\t\t\tjustifySelf='flex-end'\n\t\t\t\t\t\t\t\t\t\tm='0px'\n\t\t\t\t\t\t\t\t\t\tcolor='green.400'\n\t\t\t\t\t\t\t\t\t\tfontWeight='bold'\n\t\t\t\t\t\t\t\t\t\tps='3px'\n\t\t\t\t\t\t\t\t\t\tfontSize='md'>\n\t\t\t\t\t\t\t\t\t\t+5%\n\t\t\t\t\t\t\t\t\t</StatHelpText>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t</Stat>\n\t\t\t\t\t\t\t<IconBox as='box' h={'45px'} w={'45px'} bg='brand.200'>\n\t\t\t\t\t\t\t\t<GlobeIcon h={'24px'} w={'24px'} color='#fff' />\n\t\t\t\t\t\t\t</IconBox>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</Card>\n\t\t\t\t{/* MiniStatistics Card */}\n\t\t\t\t<Card>\n\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t<Flex flexDirection='row' align='center' justify='center' w='100%'>\n\t\t\t\t\t\t\t<Stat>\n\t\t\t\t\t\t\t\t<StatLabel fontSize='sm' color='gray.400' fontWeight='bold' pb='2px'>\n\t\t\t\t\t\t\t\t\tNew Clients\n\t\t\t\t\t\t\t\t</StatLabel>\n\t\t\t\t\t\t\t\t<Flex>\n\t\t\t\t\t\t\t\t\t<StatNumber fontSize='lg' color='#fff'>\n\t\t\t\t\t\t\t\t\t\t+3,020\n\t\t\t\t\t\t\t\t\t</StatNumber>\n\t\t\t\t\t\t\t\t\t<StatHelpText\n\t\t\t\t\t\t\t\t\t\talignSelf='flex-end'\n\t\t\t\t\t\t\t\t\t\tjustifySelf='flex-end'\n\t\t\t\t\t\t\t\t\t\tm='0px'\n\t\t\t\t\t\t\t\t\t\tcolor='red.500'\n\t\t\t\t\t\t\t\t\t\tfontWeight='bold'\n\t\t\t\t\t\t\t\t\t\tps='3px'\n\t\t\t\t\t\t\t\t\t\tfontSize='md'>\n\t\t\t\t\t\t\t\t\t\t-14%\n\t\t\t\t\t\t\t\t\t</StatHelpText>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t</Stat>\n\t\t\t\t\t\t\t<Spacer />\n\t\t\t\t\t\t\t<IconBox as='box' h={'45px'} w={'45px'} bg='brand.200'>\n\t\t\t\t\t\t\t\t<DocumentIcon h={'24px'} w={'24px'} color='#fff' />\n\t\t\t\t\t\t\t</IconBox>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</Card>\n\t\t\t\t{/* MiniStatistics Card */}\n\t\t\t\t<Card>\n\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t<Flex flexDirection='row' align='center' justify='center' w='100%'>\n\t\t\t\t\t\t\t<Stat me='auto'>\n\t\t\t\t\t\t\t\t<StatLabel fontSize='sm' color='gray.400' fontWeight='bold' pb='2px'>\n\t\t\t\t\t\t\t\t\tTotal Sales\n\t\t\t\t\t\t\t\t</StatLabel>\n\t\t\t\t\t\t\t\t<Flex>\n\t\t\t\t\t\t\t\t\t<StatNumber fontSize='lg' color='#fff' fontWeight='bold'>\n\t\t\t\t\t\t\t\t\t\t$173,000\n\t\t\t\t\t\t\t\t\t</StatNumber>\n\t\t\t\t\t\t\t\t\t<StatHelpText\n\t\t\t\t\t\t\t\t\t\talignSelf='flex-end'\n\t\t\t\t\t\t\t\t\t\tjustifySelf='flex-end'\n\t\t\t\t\t\t\t\t\t\tm='0px'\n\t\t\t\t\t\t\t\t\t\tcolor='green.400'\n\t\t\t\t\t\t\t\t\t\tfontWeight='bold'\n\t\t\t\t\t\t\t\t\t\tps='3px'\n\t\t\t\t\t\t\t\t\t\tfontSize='md'>\n\t\t\t\t\t\t\t\t\t\t+8%\n\t\t\t\t\t\t\t\t\t</StatHelpText>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t</Stat>\n\t\t\t\t\t\t\t<IconBox as='box' h={'45px'} w={'45px'} bg='brand.200'>\n\t\t\t\t\t\t\t\t<CartIcon h={'24px'} w={'24px'} color='#fff' />\n\t\t\t\t\t\t\t</IconBox>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</Card>\n\t\t\t</SimpleGrid>\n\t\t\t<Grid templateColumns={{ sm: '1fr', md: '1fr 1fr', '2xl': '2fr 1.2fr 1.5fr' }} my='26px' gap='18px'>\n\t\t\t\t{/* Welcome Card */}\n\t\t\t\t<Card\n\t\t\t\t\tp='0px'\n\t\t\t\t\tgridArea={{ md: '1 / 1 / 2 / 3', '2xl': 'auto' }}\n\t\t\t\t\tbgImage={medusa}\n\t\t\t\t\tbgPosition='center'\n\t\t\t\t\tbgRepeat='no-repeat'\n\t\t\t\t\tbgSize='cover'>\n\t\t\t\t\t<CardBody w='100%' h='100%'>\n\t\t\t\t\t\t<Flex flexDirection={{ sm: 'column', lg: 'row' }} w='100%' h='100%'>\n\t\t\t\t\t\t\t<Flex flexDirection='column' h='100%' p='22px' minW='60%' lineHeight='1.6'>\n\t\t\t\t\t\t\t\t<Text fontSize='sm' color='gray.400' fontWeight='bold'>\n\t\t\t\t\t\t\t\t\tWelcome back\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t<Text fontSize='28px' color='#fff' fontWeight='bold' mb='18px'>\n\t\t\t\t\t\t\t\t\tMark Johnson\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t<Text fontSize='md' color='gray.400' fontWeight='normal' mb='auto'>\n\t\t\t\t\t\t\t\t\tGlad to see you again! <br />\n\t\t\t\t\t\t\t\t\tAsk me anything.\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t<Spacer />\n\t\t\t\t\t\t\t\t<Flex align='center'>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tp='0px'\n\t\t\t\t\t\t\t\t\t\tvariant='no-hover'\n\t\t\t\t\t\t\t\t\t\tbg='transparent'\n\t\t\t\t\t\t\t\t\t\tmy={{ sm: '1.5rem', lg: '0px' }}>\n\t\t\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\t\t\tfontSize='sm'\n\t\t\t\t\t\t\t\t\t\t\tcolor='#fff'\n\t\t\t\t\t\t\t\t\t\t\tfontWeight='bold'\n\t\t\t\t\t\t\t\t\t\t\tcursor='pointer'\n\t\t\t\t\t\t\t\t\t\t\ttransition='all .3s ease'\n\t\t\t\t\t\t\t\t\t\t\tmy={{ sm: '1.5rem', lg: '0px' }}\n\t\t\t\t\t\t\t\t\t\t\t_hover={{ me: '4px' }}>\n\t\t\t\t\t\t\t\t\t\t\tTab to record\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\tas={BsArrowLeft}\n\t\t\t\t\t\t\t\t\t\t\tw='20px'\n\t\t\t\t\t\t\t\t\t\t\th='20px'\n\t\t\t\t\t\t\t\t\t\t\tcolor='#fff'\n\t\t\t\t\t\t\t\t\t\t\tfontSize='2xl'\n\t\t\t\t\t\t\t\t\t\t\ttransition='all .3s ease'\n\t\t\t\t\t\t\t\t\t\t\tmx='.3rem'\n\t\t\t\t\t\t\t\t\t\t\tcursor='pointer'\n\t\t\t\t\t\t\t\t\t\t\tpt='4px'\n\t\t\t\t\t\t\t\t\t\t\t_hover={{ transform: 'translateX(-20%)' }}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</Card>\n\t\t\t\t{/* Satisfaction Rate */}\n\t\t\t\t<Card gridArea={{ md: '2 / 1 / 3 / 2', '2xl': 'auto' }}>\n\t\t\t\t\t<CardHeader mb='24px'>\n\t\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t\t<Text color='#fff' fontSize='lg' fontWeight='bold' mb='4px'>\n\t\t\t\t\t\t\t\tSatisfaction Rate\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Text color='gray.400' fontSize='sm'>\n\t\t\t\t\t\t\t\tFrom all projects\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardHeader>\n\t\t\t\t\t<Flex direction='column' justify='center' align='center'>\n\t\t\t\t\t\t<Box zIndex='-1'>\n\t\t\t\t\t\t\t<CircularProgress\n\t\t\t\t\t\t\t\tsize={200}\n\t\t\t\t\t\t\t\tvalue={80}\n\t\t\t\t\t\t\t\tthickness={6}\n\t\t\t\t\t\t\t\tcolor='#582CFF'\n\t\t\t\t\t\t\t\tvariant='vision'\n\t\t\t\t\t\t\t\trounded>\n\t\t\t\t\t\t\t\t<CircularProgressLabel>\n\t\t\t\t\t\t\t\t\t<IconBox mb='20px' mx='auto' bg='brand.200' borderRadius='50%' w='48px' h='48px'>\n\t\t\t\t\t\t\t\t\t\t<Icon as={BiHappy} color='#fff' w='30px' h='30px' />\n\t\t\t\t\t\t\t\t\t</IconBox>\n\t\t\t\t\t\t\t\t</CircularProgressLabel>\n\t\t\t\t\t\t\t</CircularProgress>\n\t\t\t\t\t\t</Box>\n\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\tdirection='row'\n\t\t\t\t\t\t\tspacing={{ sm: '42px', md: '68px' }}\n\t\t\t\t\t\t\tjustify='center'\n\t\t\t\t\t\t\tmaxW={{ sm: '270px', md: '300px', lg: '100%' }}\n\t\t\t\t\t\t\tmx={{ sm: 'auto', md: '0px' }}\n\t\t\t\t\t\t\tp='18px 22px'\n\t\t\t\t\t\t\tbg='linear-gradient(126.97deg, rgb(6, 11, 40) 28.26%, rgba(10, 14, 35) 91.2%)'\n\t\t\t\t\t\t\tborderRadius='20px'\n\t\t\t\t\t\t\tposition='absolute'\n\t\t\t\t\t\t\tbottom='5%'>\n\t\t\t\t\t\t\t<Text fontSize='xs' color='gray.400'>\n\t\t\t\t\t\t\t\t0%\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Flex direction='column' align='center' minW='80px'>\n\t\t\t\t\t\t\t\t<Text color='#fff' fontSize='28px' fontWeight='bold'>\n\t\t\t\t\t\t\t\t\t95%\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t<Text fontSize='xs' color='gray.400'>\n\t\t\t\t\t\t\t\t\tBased on likes\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t<Text fontSize='xs' color='gray.400'>\n\t\t\t\t\t\t\t\t100%\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t</Flex>\n\t\t\t\t</Card>\n\t\t\t\t{/* Referral Tracking */}\n\t\t\t\t<Card gridArea={{ md: '2 / 2 / 3 / 3', '2xl': 'auto' }}>\n\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t<Flex justify='space-between' align='center' mb='40px'>\n\t\t\t\t\t\t\t<Text color='#fff' fontSize='lg' fontWeight='bold'>\n\t\t\t\t\t\t\t\tReferral Tracking\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Button borderRadius='12px' w='38px' h='38px' bg='#22234B' _hover='none' _active='none'>\n\t\t\t\t\t\t\t\t<Icon as={IoEllipsisHorizontal} color='#7551FF' />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t<Flex direction={{ sm: 'column', md: 'row' }}>\n\t\t\t\t\t\t\t<Flex direction='column' me={{ md: '6px', lg: '52px' }} mb={{ sm: '16px', md: '0px' }}>\n\t\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\t\tdirection='column'\n\t\t\t\t\t\t\t\t\tp='22px'\n\t\t\t\t\t\t\t\t\tpe={{ sm: '22e', md: '8px', lg: '22px' }}\n\t\t\t\t\t\t\t\t\tminW={{ sm: '220px', md: '140px', lg: '220px' }}\n\t\t\t\t\t\t\t\t\tbg='linear-gradient(126.97deg, #060C29 28.26%, rgba(4, 12, 48, 0.5) 91.2%)'\n\t\t\t\t\t\t\t\t\tborderRadius='20px'\n\t\t\t\t\t\t\t\t\tmb='20px'>\n\t\t\t\t\t\t\t\t\t<Text color='gray.400' fontSize='sm' mb='4px'>\n\t\t\t\t\t\t\t\t\t\tInvited\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Text color='#fff' fontSize='lg' fontWeight='bold'>\n\t\t\t\t\t\t\t\t\t\t145 people\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\t\tdirection='column'\n\t\t\t\t\t\t\t\t\tp='22px'\n\t\t\t\t\t\t\t\t\tpe={{ sm: '22px', md: '8px', lg: '22px' }}\n\t\t\t\t\t\t\t\t\tminW={{ sm: '170px', md: '140px', lg: '170px' }}\n\t\t\t\t\t\t\t\t\tbg='linear-gradient(126.97deg, #060C29 28.26%, rgba(4, 12, 48, 0.5) 91.2%)'\n\t\t\t\t\t\t\t\t\tborderRadius='20px'>\n\t\t\t\t\t\t\t\t\t<Text color='gray.400' fontSize='sm' mb='4px'>\n\t\t\t\t\t\t\t\t\t\tBonus\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Text color='#fff' fontSize='lg' fontWeight='bold'>\n\t\t\t\t\t\t\t\t\t\t1,465\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t<Box mx={{ sm: 'auto', md: '0px' }}>\n\t\t\t\t\t\t\t\t<CircularProgress\n\t\t\t\t\t\t\t\t\tsize={window.innerWidth >= 1024 ? 200 : window.innerWidth >= 768 ? 170 : 200}\n\t\t\t\t\t\t\t\t\tvalue={70}\n\t\t\t\t\t\t\t\t\tthickness={6}\n\t\t\t\t\t\t\t\t\tcolor='#05CD99'\n\t\t\t\t\t\t\t\t\tvariant='vision'>\n\t\t\t\t\t\t\t\t\t<CircularProgressLabel>\n\t\t\t\t\t\t\t\t\t\t<Flex direction='column' justify='center' align='center'>\n\t\t\t\t\t\t\t\t\t\t\t<Text color='gray.400' fontSize='sm'>\n\t\t\t\t\t\t\t\t\t\t\t\tSafety\n\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\t\t\t\tcolor='#fff'\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize={{ md: '36px', lg: '50px' }}\n\t\t\t\t\t\t\t\t\t\t\t\tfontWeight='bold'\n\t\t\t\t\t\t\t\t\t\t\t\tmb='4px'>\n\t\t\t\t\t\t\t\t\t\t\t\t9.3\n\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t\t<Text color='gray.400' fontSize='sm'>\n\t\t\t\t\t\t\t\t\t\t\t\tTotal Score\n\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t\t</CircularProgressLabel>\n\t\t\t\t\t\t\t\t</CircularProgress>\n\t\t\t\t\t\t\t</Box>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</Flex>\n\t\t\t\t</Card>\n\t\t\t</Grid>\n\t\t\t<Grid\n\t\t\t\ttemplateColumns={{ sm: '1fr', lg: '1.7fr 1.3fr' }}\n\t\t\t\tmaxW={{ sm: '350px', md: '100%' }}\n\t\t\t\tgap='24px'\n\t\t\t\tmb='24px'>\n\t\t\t\t{/* Sales Overview */}\n\t\t\t\t<Card p='28px 0px 0px 0px'>\n\t\t\t\t\t<CardHeader mb='20px' ps='22px'>\n\t\t\t\t\t\t<Flex direction='column' alignSelf='flex-start'>\n\t\t\t\t\t\t\t<Text fontSize='lg' color='#fff' fontWeight='bold' mb='6px'>\n\t\t\t\t\t\t\t\tSales Overview\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Text fontSize='md' fontWeight='medium' color='gray.400'>\n\t\t\t\t\t\t\t\t<Text as='span' color='green.400' fontWeight='bold'>\n\t\t\t\t\t\t\t\t\t(+5%) more\n\t\t\t\t\t\t\t\t</Text>{' '}\n\t\t\t\t\t\t\t\tin 2021\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardHeader>\n\t\t\t\t\t<Box w='100%' minH={{ sm: '300px' }}>\n\t\t\t\t\t\t<LineChart\n\t\t\t\t\t\t\tlineChartData={lineChartDataDashboard}\n\t\t\t\t\t\t\tlineChartOptions={lineChartOptionsDashboard}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Box>\n\t\t\t\t</Card>\n\t\t\t\t{/* Active Users */}\n\t\t\t\t<Card p='16px'>\n\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t<Flex direction='column' w='100%'>\n\t\t\t\t\t\t\t<Box\n\t\t\t\t\t\t\t\tbg='linear-gradient(126.97deg, #060C29 28.26%, rgba(4, 12, 48, 0.5) 91.2%)'\n\t\t\t\t\t\t\t\tborderRadius='20px'\n\t\t\t\t\t\t\t\tdisplay={{ sm: 'flex', md: 'block' }}\n\t\t\t\t\t\t\t\tjustify={{ sm: 'center', md: 'flex-start' }}\n\t\t\t\t\t\t\t\talign={{ sm: 'center', md: 'flex-start' }}\n\t\t\t\t\t\t\t\tminH={{ sm: '180px', md: '220px' }}\n\t\t\t\t\t\t\t\tp={{ sm: '0px', md: '22px' }}>\n\t\t\t\t\t\t\t\t<BarChart\n\t\t\t\t\t\t\t\t\tbarChartOptions={barChartOptionsDashboard}\n\t\t\t\t\t\t\t\t\tbarChartData={barChartDataDashboard}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Box>\n\t\t\t\t\t\t\t<Flex direction='column' mt='24px' mb='36px' alignSelf='flex-start'>\n\t\t\t\t\t\t\t\t<Text fontSize='lg' color='#fff' fontWeight='bold' mb='6px'>\n\t\t\t\t\t\t\t\t\tActive Users\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t<Text fontSize='md' fontWeight='medium' color='gray.400'>\n\t\t\t\t\t\t\t\t\t<Text as='span' color='green.400' fontWeight='bold'>\n\t\t\t\t\t\t\t\t\t\t(+23%)\n\t\t\t\t\t\t\t\t\t</Text>{' '}\n\t\t\t\t\t\t\t\t\tthan last week\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t<SimpleGrid gap={{ sm: '12px' }} columns={4}>\n\t\t\t\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t\t\t\t<Flex alignItems='center'>\n\t\t\t\t\t\t\t\t\t\t<IconBox as='box' h={'30px'} w={'30px'} bg='brand.200' me='6px'>\n\t\t\t\t\t\t\t\t\t\t\t<WalletIcon h={'15px'} w={'15px'} color='#fff' />\n\t\t\t\t\t\t\t\t\t\t</IconBox>\n\t\t\t\t\t\t\t\t\t\t<Text fontSize='sm' color='gray.400'>\n\t\t\t\t\t\t\t\t\t\t\tUsers\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\t\tfontSize={{ sm: 'md', lg: 'lg' }}\n\t\t\t\t\t\t\t\t\t\tcolor='#fff'\n\t\t\t\t\t\t\t\t\t\tfontWeight='bold'\n\t\t\t\t\t\t\t\t\t\tmb='6px'\n\t\t\t\t\t\t\t\t\t\tmy='6px'>\n\t\t\t\t\t\t\t\t\t\t32,984\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Progress colorScheme='brand' bg='#2D2E5F' borderRadius='30px' h='5px' value={20} />\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t\t\t\t<Flex alignItems='center'>\n\t\t\t\t\t\t\t\t\t\t<IconBox as='box' h={'30px'} w={'30px'} bg='brand.200' me='6px'>\n\t\t\t\t\t\t\t\t\t\t\t<RocketIcon h={'15px'} w={'15px'} color='#fff' />\n\t\t\t\t\t\t\t\t\t\t</IconBox>\n\t\t\t\t\t\t\t\t\t\t<Text fontSize='sm' color='gray.400'>\n\t\t\t\t\t\t\t\t\t\t\tClicks\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\t\tfontSize={{ sm: 'md', lg: 'lg' }}\n\t\t\t\t\t\t\t\t\t\tcolor='#fff'\n\t\t\t\t\t\t\t\t\t\tfontWeight='bold'\n\t\t\t\t\t\t\t\t\t\tmb='6px'\n\t\t\t\t\t\t\t\t\t\tmy='6px'>\n\t\t\t\t\t\t\t\t\t\t2.42m\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Progress colorScheme='brand' bg='#2D2E5F' borderRadius='30px' h='5px' value={90} />\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t\t\t\t<Flex alignItems='center'>\n\t\t\t\t\t\t\t\t\t\t<IconBox as='box' h={'30px'} w={'30px'} bg='brand.200' me='6px'>\n\t\t\t\t\t\t\t\t\t\t\t<CartIcon h={'15px'} w={'15px'} color='#fff' />\n\t\t\t\t\t\t\t\t\t\t</IconBox>\n\t\t\t\t\t\t\t\t\t\t<Text fontSize='sm' color='gray.400'>\n\t\t\t\t\t\t\t\t\t\t\tSales\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\t\tfontSize={{ sm: 'md', lg: 'lg' }}\n\t\t\t\t\t\t\t\t\t\tcolor='#fff'\n\t\t\t\t\t\t\t\t\t\tfontWeight='bold'\n\t\t\t\t\t\t\t\t\t\tmb='6px'\n\t\t\t\t\t\t\t\t\t\tmy='6px'>\n\t\t\t\t\t\t\t\t\t\t2,400$\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Progress colorScheme='brand' bg='#2D2E5F' borderRadius='30px' h='5px' value={30} />\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t\t\t\t<Flex alignItems='center'>\n\t\t\t\t\t\t\t\t\t\t<IconBox as='box' h={'30px'} w={'30px'} bg='brand.200' me='6px'>\n\t\t\t\t\t\t\t\t\t\t\t<StatsIcon h={'15px'} w={'15px'} color='#fff' />\n\t\t\t\t\t\t\t\t\t\t</IconBox>\n\t\t\t\t\t\t\t\t\t\t<Text fontSize='sm' color='gray.400'>\n\t\t\t\t\t\t\t\t\t\t\tItems\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\t\tfontSize={{ sm: 'md', lg: 'lg' }}\n\t\t\t\t\t\t\t\t\t\tcolor='#fff'\n\t\t\t\t\t\t\t\t\t\tfontWeight='bold'\n\t\t\t\t\t\t\t\t\t\tmb='6px'\n\t\t\t\t\t\t\t\t\t\tmy='6px'>\n\t\t\t\t\t\t\t\t\t\t320\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t<Progress colorScheme='brand' bg='#2D2E5F' borderRadius='30px' h='5px' value={50} />\n\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t</SimpleGrid>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</Card>\n\t\t\t</Grid>\n\t\t\t<Grid templateColumns={{ sm: '1fr', md: '1fr 1fr', lg: '2fr 1fr' }} gap='24px'>\n\t\t\t\t{/* Projects */}\n\t\t\t\t<Card p='16px' overflowX={{ sm: 'scroll', xl: 'hidden' }}>\n\t\t\t\t\t<CardHeader p='12px 0px 28px 0px'>\n\t\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t\t<Text fontSize='lg' color='#fff' fontWeight='bold' pb='8px'>\n\t\t\t\t\t\t\t\tProjects\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Flex align='center'>\n\t\t\t\t\t\t\t\t<Icon as={IoCheckmarkDoneCircleSharp} color='teal.300' w={4} h={4} pe='3px' />\n\t\t\t\t\t\t\t\t<Text fontSize='sm' color='gray.400' fontWeight='normal'>\n\t\t\t\t\t\t\t\t\t<Text fontWeight='bold' as='span'>\n\t\t\t\t\t\t\t\t\t\t30 done\n\t\t\t\t\t\t\t\t\t</Text>{' '}\n\t\t\t\t\t\t\t\t\tthis month.\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardHeader>\n\t\t\t\t\t<Table variant='simple' color='#fff'>\n\t\t\t\t\t\t<Thead>\n\t\t\t\t\t\t\t<Tr my='.8rem' ps='0px'>\n\t\t\t\t\t\t\t\t<Th\n\t\t\t\t\t\t\t\t\tps='0px'\n\t\t\t\t\t\t\t\t\tcolor='gray.400'\n\t\t\t\t\t\t\t\t\tfontFamily='Plus Jakarta Display'\n\t\t\t\t\t\t\t\t\tborderBottomColor='#56577A'>\n\t\t\t\t\t\t\t\t\tCompanies\n\t\t\t\t\t\t\t\t</Th>\n\t\t\t\t\t\t\t\t<Th color='gray.400' fontFamily='Plus Jakarta Display' borderBottomColor='#56577A'>\n\t\t\t\t\t\t\t\t\tMembers\n\t\t\t\t\t\t\t\t</Th>\n\t\t\t\t\t\t\t\t<Th color='gray.400' fontFamily='Plus Jakarta Display' borderBottomColor='#56577A'>\n\t\t\t\t\t\t\t\t\tBudget\n\t\t\t\t\t\t\t\t</Th>\n\t\t\t\t\t\t\t\t<Th color='gray.400' fontFamily='Plus Jakarta Display' borderBottomColor='#56577A'>\n\t\t\t\t\t\t\t\t\tCompletion\n\t\t\t\t\t\t\t\t</Th>\n\t\t\t\t\t\t\t</Tr>\n\t\t\t\t\t\t</Thead>\n\t\t\t\t\t\t<Tbody>\n\t\t\t\t\t\t\t{dashboardTableData.map((row, index, arr) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<DashboardTableRow\n\t\t\t\t\t\t\t\t\t\tname={row.name}\n\t\t\t\t\t\t\t\t\t\tlogo={row.logo}\n\t\t\t\t\t\t\t\t\t\tmembers={row.members}\n\t\t\t\t\t\t\t\t\t\tbudget={row.budget}\n\t\t\t\t\t\t\t\t\t\tprogression={row.progression}\n\t\t\t\t\t\t\t\t\t\tlastItem={index === arr.length - 1 ? true : false}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</Tbody>\n\t\t\t\t\t</Table>\n\t\t\t\t</Card>\n\t\t\t\t{/* Orders Overview */}\n\t\t\t\t<Card>\n\t\t\t\t\t<CardHeader mb='32px'>\n\t\t\t\t\t\t<Flex direction='column'>\n\t\t\t\t\t\t\t<Text fontSize='lg' color='#fff' fontWeight='bold' mb='6px'>\n\t\t\t\t\t\t\t\tOrders overview\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Flex align='center'>\n\t\t\t\t\t\t\t\t<Icon as={AiFillCheckCircle} color='green.500' w='15px' h='15px' me='5px' />\n\t\t\t\t\t\t\t\t<Text fontSize='sm' color='gray.400' fontWeight='normal'>\n\t\t\t\t\t\t\t\t\t<Text fontWeight='bold' as='span' color='gray.400'>\n\t\t\t\t\t\t\t\t\t\t+30%\n\t\t\t\t\t\t\t\t\t</Text>{' '}\n\t\t\t\t\t\t\t\t\tthis month\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardHeader>\n\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t<Flex direction='column' lineHeight='21px'>\n\t\t\t\t\t\t\t{timelineData.map((row, index, arr) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<TimelineRow\n\t\t\t\t\t\t\t\t\t\tlogo={row.logo}\n\t\t\t\t\t\t\t\t\t\ttitle={row.title}\n\t\t\t\t\t\t\t\t\t\tdate={row.date}\n\t\t\t\t\t\t\t\t\t\tcolor={row.color}\n\t\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\t\tarrLength={arr.length}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</CardBody>\n\t\t\t\t</Card>\n\t\t\t</Grid>\n\t\t</Flex>\n\t);\n}\n"
  }
]