Repository: creativetimofficial/vision-ui-dashboard-chakra Branch: main Commit: 1a8f8ae5f5ae Files: 76 Total size: 275.3 KB Directory structure: gitextract_95eyr4c7/ ├── .gitattributes ├── .gitignore ├── CHANGELOG.md ├── ISSUE_TEMPLATE.md ├── LICENSE ├── README.md ├── commit.sh ├── genezio.yaml ├── gulpfile.js ├── jsconfig.json ├── package.json ├── public/ │ ├── index.html │ ├── manifest.json │ └── robots.txt └── src/ ├── components/ │ ├── Card/ │ │ ├── Card.js │ │ ├── CardBody.js │ │ └── CardHeader.js │ ├── Charts/ │ │ ├── BarChart.js │ │ └── LineChart.js │ ├── Configurator/ │ │ └── Configurator.js │ ├── FixedPlugin/ │ │ └── FixedPlugin.js │ ├── Footer/ │ │ ├── AuthFooter.js │ │ └── Footer.js │ ├── GradientBorder/ │ │ └── GradientBorder.js │ ├── Icons/ │ │ ├── IconBox.js │ │ └── Icons.js │ ├── Layout/ │ │ ├── MainPanel.js │ │ ├── PanelContainer.js │ │ └── PanelContent.js │ ├── Menu/ │ │ └── ItemContent.js │ ├── Navbars/ │ │ ├── AdminNavbar.js │ │ ├── AdminNavbarLinks.js │ │ ├── AuthNavbar.js │ │ └── SearchBar/ │ │ └── SearchBar.js │ ├── RTLProvider/ │ │ └── RTLProvider.js │ ├── Separator/ │ │ └── Separator.js │ ├── Sidebar/ │ │ ├── Sidebar.js │ │ └── SidebarHelp.js │ └── Tables/ │ ├── BillingRow.js │ ├── DashboardTableRow.js │ ├── InvoicesRow.js │ ├── TablesProjectRow.js │ ├── TablesTableRow.js │ ├── TimelineRow.js │ └── TransactionRow.js ├── index.js ├── layouts/ │ ├── Admin.js │ ├── Auth.js │ └── RTL.js ├── routes.js ├── theme/ │ ├── additions/ │ │ ├── card/ │ │ │ ├── Card.js │ │ │ ├── CardBody.js │ │ │ └── CardHeader.js │ │ └── layout/ │ │ ├── MainPanel.js │ │ ├── PanelContainer.js │ │ └── PanelContent.js │ ├── bgAdmin.js │ ├── bgAuth.js │ ├── components/ │ │ ├── badge.js │ │ ├── button.js │ │ ├── drawer.js │ │ ├── link.js │ │ └── switch.js │ ├── foundations/ │ │ └── breakpoints.js │ ├── styles.js │ ├── themeAdmin.js │ └── themeAuth.js ├── variables/ │ ├── charts.js │ └── general.js └── views/ ├── Dashboard/ │ ├── Billing.js │ ├── Dashboard.js │ ├── Profile.js │ └── Tables.js ├── Pages/ │ ├── SignIn.js │ └── SignUp.js └── RTL/ └── RTLPage.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitattributes ================================================ # Auto detect text files and perform LF normalization * text=auto ================================================ FILE: .gitignore ================================================ node_modules package-lock.json build ================================================ FILE: CHANGELOG.md ================================================ # Changelog ## [1.0.2] 2022-07-24 ### Update v1.0.2 - We used the Chakra UI Circular Progress instead of the plugins since they were deprecated. The plugins are still used in previous versions! ## [1.0.1] 2022-05-16 ### Update v1.0.1 - The problem with npm install/ building the project was fixed. ### Added dependencies ``` chakra-ui/system 1.12.1 ``` ### Updated dependencies ``` chakra-ui/icons 1.0.14 → 1.1.5 chakra-ui/react 1.6.5 → 1.8.8 chakra-ui/theme-tools 1.1.9 → 1.3.6 ``` ## [1.0.0] 2022-01-10 ### Original Release - Added Chakra UI as base framework ================================================ FILE: ISSUE_TEMPLATE.md ================================================ ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2022 Creative Tim Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # [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) ![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) ![Product Gif](https://i.ibb.co/x8GDNYV/vision-ui-free-chakra.png) Most 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. Start 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. **Fully Coded Elements** Vision 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. Check all components here. **Documentation built by Developers** Each element is well presented in a very complex documentation. You can read more about the documentation here. **Example Pages** If you want to get inspiration or just show something directly to your clients, you can jump-start your development with our pre-built example pages. 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. View example pages here. **HELPFUL LINKS** - View Github Repository - Check FAQ Page #### Special thanks During the development of this dashboard, we have used many existing resources from awesome developers. We want to thank them for providing their tools open source: - [Chakra UI](https://chakra-ui.com/?ref=creative-tim) - Modern Open source framework - [ApexCharts.js](https://apexcharts.com?ref=creative-tim) - Modern & Interactive Open-source charts - [Quill Editor](https://www.npmjs.com/package/react-quill?ref=creative-tim) - ReactJS Text Editor provided by Quill - [React Table](https://react-table.tanstack.com/docs/overview?ref=creative-tim) - Collection of hooks for building powerful ReactJD tables - [ReactJS](https://reactjs.org?ref=creative-tim) - A popular JavaScript library for building user interfaces Let us know your thoughts below. And good luck with development! ## Table of Contents - [Vision UI Dashboard Free Chakra] (https://demos.creative-tim.com/vision-ui-dashboard-chakra/?ref=readme-vudchakra) - [Table of Contents](#table-of-contents) - [Versions](#versions) - [Demo](#demo) - [Quick start](#quick-start) - [Deploy](#deploy) - [Documentation](#documentation) - [File Structure](#file-structure) - [Browser Support](#browser-support) - [Resources](#resources) - [Reporting Issues](#reporting-issues) - [Licensing](#licensing) - [Useful Links](#useful-links) - [Social Media](#social-media) ## Versions [](https://www.creative-tim.com/product/vision-ui-dashboard-react?ref=readme-vudchakra)[](https://www.creative-tim.com/product/vision-ui-dashboard-chakra?ref=readme-vudchakra) | React | Chakra | | ]------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [![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) | ## Demo [View all Pages](https://demos.creative-tim.com/vision-ui-dashboard-chakra?ref=readme-vudchakra). # Quick start Quick start options: - Buy from [Creative Tim](https://www.creative-tim.com/product/vision-ui-dashboard-chakra?ref=readme-vudchakra). ## Deploy :rocket: You can deploy your own version of the template to Genezio with one click: [![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) ## Terminal Commands 1. Download and Install NodeJs LTS version from [NodeJs Official Page](https://nodejs.org/en/download/). 2. Navigate to the root / directory and run yarn install/npm install to install our local dependencies. ## Documentation The 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). ## File Structure Within the download you'll find the following directories and files: ``` vision-dashboard-chakra-free/ ├── .gitattributes ├── .gitigonore ├── CHANGELOG.md ├── commit.sh ├── gulpfile.js ├── ISSUE_TEMPLATE.md ├── jsconfig.json ├── package.json ├── README.md ├── public │ ├── favicon.png │ ├── index.html │ ├── apple-icon.png │ ├── robots.txt │ └── manifest.json └── src ├── assets │ ├── img │ └── svg ├── components │ ├── Card │ │ ├── Card.js │ │ ├── CardBody.js │ │ └── CardHeader.js │ ├── Charts │ │ ├── BarChart.js │ │ └── LineChart.js │ ├── Configurator │ │ └── Configurator.js │ ├── FixedPlugin │ │ └── FixedPlugin.js │ ├── Footer │ │ └── Footer.js │ ├── GradientBorder │ │ └── GradientBorder.js │ ├── Icons │ │ ├── IconBox.js │ │ └── Icons.js │ ├── Layout │ │ ├── MainPanel.js │ │ ├── PanelContainer.js │ │ └── PanelContent.js │ ├── Menu │ │ └── ItemContent.js │ ├── Navbars │ │ ├── Searchbar │ │ │ └── SearchBar.js │ │ ├── AdminNavbar.js │ │ ├── AdminNavbarLinks.js │ │ └── AuthNavbar.js │ ├── Other │ │ ├── BillingRow.js │ │ ├── InvoicesRow.js │ │ └── TransactionRow.js │ ├── Separator │ │ └── Separator.js │ ├── Sidebar │ │ ├── Sidebar.js │ │ └── SidebarHelp.js │ └── Tables │ ├── BillingRow.js │ ├── DashboardTableRow.js │ ├── InvoicesRow.js │ ├── TablesProjectRow.js │ ├── TablesTableRow.js │ ├── TimelineRow.js │ └── TransactionRow.js ├── layouts │ ├── Admin.js │ ├── Auth.js │ └── RTL.js ├── theme │ ├── additions │ │ ├── card │ │ │ ├── Card.js │ │ │ ├── CardBody.js │ │ │ └── CardHeader.js │ │ ├── layout │ │ │ ├── MainPanel.js │ │ │ ├── PanelContainer.js │ │ │ └── PanelContent.js │ ├── components │ │ ├── badge.js │ │ ├── button.js │ │ ├── link.js │ │ └── drawer.js │ ├── foundations │ │ └── breakpoints.js │ ├── bgAdmin.js │ ├── bgAuth.js │ ├── styles.js │ ├── themeAdmin.js │ └── themeAuth.js ├── variables │ ├── charts.js │ └── general.js ├── views │ ├── Dashboard │ │ ├── Billing.js │ │ ├── Dashboard.js │ │ ├── Profile.js │ │ └── Tables.js │ ├── Pages │ ├── SignIn.js │ └── SignUp.js │ └── RTL │ └── RTLPage.js ├── index.js └── routes.js ``` ## Browser Support At present, we officially aim to support the last two versions of the following browsers: ## Resources - [Live Preview](https://demos.creative-tim.com/vision-ui-dashboard-chakra?ref=readme-vudchakra) - [Buy Page](https://www.creative-tim.com/product/vision-ui-dashboard-chakra?ref=readme-vudchakra) - License Agreement: - Documentation is [here](https://demos.creative-tim.com/docs-vision-ui-dashboard-chakra?ref=readme-vudchakra) - [Support](https://www.creative-tim.com/contact-us?ref=readme-vudchakra) - Issues: [Github Issues Page](https://github.com/creativetimofficial/vision-ui-dashboard-chakra/issues) ## Reporting Issues We 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: 1. 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). 2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed. 3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help. ## Technical Support or Questions If you have questions or need help integrating the product please [contact us](https://www.creative-tim.com/contact-us?ref=readme-vudchakra) instead of opening an issue. ## Licensing - Copyright 2022 [Creative Tim](https://www.creative-tim.com?ref=readme-vudchakra) - Creative Tim [License](https://www.creative-tim.com/license?ref=readme-vudchakra) ## Useful Links - [More products](https://www.creative-tim.com/templates?ref=readme-vudchakra) from Creative Tim - [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w) - [Freebies](https://www.creative-tim.com/bootstrap-themes/free?ref=readme-vudchakra) from Creative Tim - [Affiliate Program](https://www.creative-tim.com/affiliates/new?ref=readme-vudchakra) (earn money) - [More products](https://simmmple.com/?ref=readme-vudchakra) from Simmmple ### Social Media - Creative Tim Twitter: Facebook: Dribbble: Instagram: ### Social Media - Simmmple Twitter: Facebook: Dribbble: Instagram: ================================================ FILE: commit.sh ================================================ ================================================ FILE: genezio.yaml ================================================ name: vision-ui-dashboard-chakra region: us-east-1 yamlVersion: 2 frontend: path: . publish: build scripts: deploy: - npm install --legacy-peer-deps - npm run build ================================================ FILE: gulpfile.js ================================================ const gulp = require("gulp"); const gap = require("gulp-append-prepend"); gulp.task("licenses", async function () { // this is to add Creative Tim licenses in the production mode for the minified js gulp .src("build/static/js/*chunk.js", { base: "./" }) .pipe( gap.prependText(`/*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */`) ) .pipe(gulp.dest("./", { overwrite: true })); // this is to add Creative Tim licenses in the production mode for the minified html gulp .src("build/index.html", { base: "./" }) .pipe( gap.prependText(``) ) .pipe(gulp.dest("./", { overwrite: true })); // this is to add Creative Tim licenses in the production mode for the minified css gulp .src("build/static/css/*chunk.css", { base: "./" }) .pipe( gap.prependText(`/*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */`) ) .pipe(gulp.dest("./", { overwrite: true })); return; }); ================================================ FILE: jsconfig.json ================================================ { "compilerOptions": { "baseUrl": "src", "paths": { "*": ["src/*"] } } } ================================================ FILE: package.json ================================================ { "name": "vision-dashboard-chakra", "version": "1.0.1", "private": true, "homepage": "https://demos.creative-tim.com/vision-ui-dashboard-chakra/#/", "dependencies": { "@chakra-ui/icons": "^1.1.5", "@chakra-ui/react": "1.8.8", "@chakra-ui/system": "^1.12.1", "@chakra-ui/theme-tools": "^1.3.6", "@emotion/cache": "^11.4.0", "@emotion/react": "^11.4.0", "@emotion/styled": "^11.3.0", "@fontsource/open-sans": "^4.5.0", "@fontsource/raleway": "^4.5.0", "@fontsource/roboto": "^4.5.0", "ajv": "^8.17.1", "apexcharts": "^3.27.3", "classnames": "2.3.1", "framer-motion": "^4.1.17", "match-sorter": "6.3.0", "moment": "2.29.1", "nouislider": "15.0.0", "react": "17.0.2", "react-apexcharts": "^1.3.9", "react-big-calendar": "0.33.2", "react-bootstrap-sweetalert": "5.2.0", "react-dom": "17.0.2", "react-github-btn": "^1.2.1", "react-icons": "^4.2.0", "react-jvectormap": "0.0.16", "react-leaflet-semicircle": "^3.0.3", "react-router-dom": "5.2.0", "react-scripts": "5.0.0", "react-swipeable-views": "0.14.0", "react-table": "7.7.0", "stylis": "^4.0.10", "stylis-plugin-rtl": "^2.1.0" }, "resolutions": { "react-error-overlay": "6.0.9" }, "target": "web", "scripts": { "start": "react-scripts start", "build": "cross-env PUBLIC_URL=/ cross-env CI=false react-scripts build && gulp licenses", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject", "deploy": "npm run build", "lint:check": "eslint . --ext=js,jsx; exit 0", "lint:fix": "eslint . --ext=js,jsx --fix; exit 0", "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start" }, "optionalDependencies": { "@babel/core": "7.16.12", "typescript": "4.2.4" }, "devDependencies": { "@babel/plugin-transform-react-jsx-source": "^7.14.5", "cross-env": "^7.0.3", "eslint-config-prettier": "8.3.0", "eslint-plugin-prettier": "3.4.0", "gulp": "4.0.2", "gulp-append-prepend": "1.0.9", "prettier": "2.2.1" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } ================================================ FILE: public/index.html ================================================ Vision UI Dashboard Chakra by Creative Tim & Simmmple
================================================ FILE: public/manifest.json ================================================ { "short_name": "React App", "name": "Create React App Sample", "icons": [ { "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" } ], "start_url": "./index.html", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" } ================================================ FILE: public/robots.txt ================================================ # https://www.robotstxt.org/robotstxt.html User-agent: * Disallow: ================================================ FILE: src/components/Card/Card.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ import { Box, useStyleConfig } from "@chakra-ui/react"; function Card(props) { const { variant, children, ...rest } = props; const styles = useStyleConfig("Card", { variant }); // Pass the computed styles into the `__css` prop return ( {children} ); } export default Card; ================================================ FILE: src/components/Card/CardBody.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ import { Box, useStyleConfig } from "@chakra-ui/react"; function CardBody(props) { const { variant, children, ...rest } = props; const styles = useStyleConfig("CardBody", { variant }); // Pass the computed styles into the `__css` prop return ( {children} ); } export default CardBody; ================================================ FILE: src/components/Card/CardHeader.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ import { Box, useStyleConfig } from "@chakra-ui/react"; function CardHeader(props) { const { variant, children, ...rest } = props; const styles = useStyleConfig("CardHeader", { variant }); // Pass the computed styles into the `__css` prop return ( {children} ); } export default CardHeader; ================================================ FILE: src/components/Charts/BarChart.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ import React, { Component } from "react"; import Chart from "react-apexcharts"; class BarChart extends Component { constructor(props) { super(props); this.state = { chartData: [], chartOptions: {}, }; } componentDidMount() { const { barChartData, barChartOptions } = this.props; this.setState({ chartData: barChartData, chartOptions: barChartOptions, }); } render() { return ( ); } } export default BarChart; ================================================ FILE: src/components/Charts/LineChart.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ import React from "react"; import ReactApexChart from "react-apexcharts"; class LineChart extends React.Component { constructor(props) { super(props); this.state = { chartData: [], chartOptions: {}, }; } componentDidMount() { const { lineChartData, lineChartOptions } = this.props; this.setState({ chartData: lineChartData, chartOptions: lineChartOptions, }); } render() { return ( ); } } export default LineChart; ================================================ FILE: src/components/Configurator/Configurator.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ // Chakra Imports import { Box, Button, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerHeader, Flex, Link, Switch, Text, DarkMode, LightMode, } from "@chakra-ui/react"; import GitHubButton from "react-github-btn"; import { Separator } from "components/Separator/Separator"; import PropTypes from "prop-types"; import React, { useState } from "react"; import { FaTwitter, FaFacebook } from "react-icons/fa"; export default function Configurator(props) { const { secondary, isOpen, onClose, fixed, ...rest } = props; const [switched, setSwitched] = useState(props.isChecked); // Chakra Color Mode let fixedDisplay = "flex"; if (props.secondary) { fixedDisplay = "none"; } let colorButton = "white"; const secondaryButtonColor = "white"; const settingsRef = React.useRef(); return ( <> Vision UI Configurator See your dashboard options. Navbar Fixed { if (switched === true) { props.onSwitch(false); setSwitched(false); } else { props.onSwitch(true); setSwitched(true); } }} /> Star Thank you for sharing! ); } Configurator.propTypes = { secondary: PropTypes.bool, isOpen: PropTypes.func, onClose: PropTypes.func, fixed: PropTypes.bool, }; ================================================ FILE: src/components/FixedPlugin/FixedPlugin.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ // Chakra Imports import { Button, useColorModeValue } from "@chakra-ui/react"; // Custom Icons import { SettingsIcon } from "components/Icons/Icons"; import PropTypes from "prop-types"; import React from "react"; export default function FixedPlugin(props) { const { secondary, onChange, onSwitch, fixed, ...rest } = props; // Chakra Color Mode let navbarIcon = "white"; let bgButton = "brand.200"; // if (props.secondary) { // fixedDisplay = "none"; // } const settingsRef = React.useRef(); return ( <> ); } FixedPlugin.propTypes = { fixed: PropTypes.bool, onChange: PropTypes.func, onSwitch: PropTypes.func, }; ================================================ FILE: src/components/Footer/AuthFooter.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ /*eslint-disable*/ import React from "react"; import { Flex, Link, List, ListItem, Text } from "@chakra-ui/react"; export default function AuthFooter(props) { return ( © {1900 + new Date().getYear()},{" "} {document.documentElement.dir === "rtl" ? " مصنوع من ❤️ بواسطة" : "Made with ❤️ by "} {document.documentElement.dir === "rtl" ? " توقيت الإبداعية" : "Simmmple "} & {document.documentElement.dir === "rtl" ? "سيممبل " : " Creative Tim"} {document.documentElement.dir === "rtl" ? "للحصول على ويب أفضل" : " for a better web"} {document.documentElement.dir === "rtl" ? "توقيت الإبداعية" : "Simmmple"} {document.documentElement.dir === "rtl" ? "سيممبل" : "Creative Tim"} {document.documentElement.dir === "rtl" ? "مدونة" : "Blog"} {document.documentElement.dir === "rtl" ? "رخصة" : "License"} ); } ================================================ FILE: src/components/Footer/Footer.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ /*eslint-disable*/ import React from "react"; import { Flex, Link, List, ListItem, Text } from "@chakra-ui/react"; export default function Footer(props) { return ( © {1900 + new Date().getYear()},{" "} {document.documentElement.dir === "rtl" ? " مصنوع من ❤️ بواسطة" : "Made with ❤️ by "} {document.documentElement.dir === "rtl" ? " توقيت الإبداعية" : "Simmmple "} & {document.documentElement.dir === "rtl" ? "سيممبل " : " Creative Tim"} {document.documentElement.dir === "rtl" ? "للحصول على ويب أفضل" : " for a better web"} {document.documentElement.dir === "rtl" ? "توقيت الإبداعية" : "Simmmple"} {document.documentElement.dir === "rtl" ? "سيممبل" : "Creative Tim"} {document.documentElement.dir === "rtl" ? "مدونة" : "Blog"} {document.documentElement.dir === "rtl" ? "رخصة" : "License"} ); } ================================================ FILE: src/components/GradientBorder/GradientBorder.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ import React from "react"; import { Flex } from "@chakra-ui/react"; export default function GradientBorder(props) { const { variant, children, ...rest } = props; return ( {children} ); } ================================================ FILE: src/components/Icons/IconBox.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ import React from "react"; import { Flex } from "@chakra-ui/react"; export default function IconBox(props) { const { children, ...rest } = props; return ( {children} ); } ================================================ FILE: src/components/Icons/Icons.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ import { createIcon } from "@chakra-ui/icons"; export const AdobexdLogo = createIcon({ displayName: "AdobexdLogo", viewBox: "0 0 24 24", path: ( ), }); export const AtlassianLogo = createIcon({ displayName: "AtlassianLogo", viewBox: "0 0 24 24", path: ( ), }); export const CartIcon = createIcon({ displayName: "CartIcon", viewBox: "0 0 24 24", path: ( ), }); export const ClockIcon = createIcon({ displayName: "ClockIcon", viewBox: "0 0 24 24", path: ( ), }); export const CreativeTimLogo = createIcon({ displayName: "CreativeTimLogo", viewBox: "0 0 100 100", path: ( ), // // }); export const CreditIcon = createIcon({ displayName: "CreditIcon", viewBox: "0 0 24 24", path: ( ), }); export const DashboardLogo = createIcon({ displayName: "DashboardLogo", viewBox: "0 0 1000 257", path: ( ), }); export const DashboardLogoWhite = createIcon({ displayName: "DashboardLogo", viewBox: "0 0 163.5 42", path: ( ), }); export const DocumentIcon = createIcon({ displayName: "DocumentIcon", viewBox: "0 0 24 24", path: ( ), }); export const GlobeIcon = createIcon({ displayName: "GlobeIcon", viewBox: "0 0 24 24", path: ( ), }); export const HelpIcon = createIcon({ displayName: "HelpIcon", viewBox: "0 0 24 24", path: ( ), }); export const HomeIcon = createIcon({ displayName: "HomeIcon", viewBox: "0 0 24 24", path: ( ), }); export const InvisionLogo = createIcon({ displayName: "InvisionLogo", viewBox: "0 0 24 24", path: ( ), }); export const JiraLogo = createIcon({ displayName: "JiraLogo", viewBox: "0 0 24 24", path: ( ), }); export const MastercardIcon = createIcon({ displayName: "MastercardIcon", viewBox: "0 0 24 24", path: ( ), }); export const PayPalIcon = createIcon({ displayName: "PayPalIcon", viewBox: "0 0 24 24", path: ( ), }); export const PersonIcon = createIcon({ displayName: "PersonIcon", viewBox: "0 0 24 24", path: ( ), }); export const ProfileIcon = createIcon({ displayName: "ProfileIcon", viewBox: "0 0 24 24", path: ( ), }); export const RocketIcon = createIcon({ displayName: "RocketIcon", viewBox: "0 0 24 24", path: ( ), }); export const SettingsIcon = createIcon({ displayName: "SettingsIcon", viewBox: "0 0 24 24", // path can also be an array of elements, if you have multiple paths, lines, shapes, etc. path: ( ), }); export const SlackLogo = createIcon({ displayName: "SlackLogo", viewBox: "0 0 24 24", path: ( ), }); export const SpotifyLogo = createIcon({ displayName: "SpotifyLogo", viewBox: "0 0 24 24", path: ( ), }); export const SupportIcon = createIcon({ // Doesn't display the full icon without w and h being specified displayName: "BuildIcon", viewBox: "0 0 24 24", path: ( ), }); export const StatsIcon = createIcon({ displayName: "StatsIcon", viewBox: "0 0 24 24", path: ( ), }); export const WalletIcon = createIcon({ displayName: "WalletIcon", viewBox: "0 0 24 24", path: ( ), }); export const VisaIcon = createIcon({ displayName: "VisaIcon", viewBox: "0 0 25 9", color: "#fff", path: ( ), }); export const BillIcon = createIcon({ displayName: "BillIcon", viewBox: "0 0 20 18", path: ( ), }); export const GraphIcon = createIcon({ displayName: "GraphIcon", viewBox: "0 0 61 20", path: ( ), }); export const FulgerIcon = createIcon({ displayName: "FulgerIcon", viewBox: "0 0 14 24", path: ( ), }); export const CarIcon = createIcon({ displayName: "CarIcon", viewBox: "0 0 22 19", path: ( ), }); export const FulgerWhiteIcon = createIcon({ displayName: "FulgerWhiteIcon", viewBox: "0 0 18 24", path: ( ), }); export const SimmmpleLogoWhite = createIcon({ displayName: "SimmmpleLogoWhite", viewBox: "0 0 22 22", path: ( ), }); ================================================ FILE: src/components/Layout/MainPanel.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ import { Box, useStyleConfig } from "@chakra-ui/react"; function MainPanel(props) { const { variant, children, ...rest } = props; const styles = useStyleConfig("MainPanel", { variant }); // Pass the computed styles into the `__css` prop return ( {children} ); } export default MainPanel; ================================================ FILE: src/components/Layout/PanelContainer.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ import { Box, useStyleConfig } from "@chakra-ui/react"; function PanelContainer(props) { const { variant, children, ...rest } = props; const styles = useStyleConfig("PanelContainer", { variant }); // Pass the computed styles into the `__css` prop return ( {children} ); } export default PanelContainer; ================================================ FILE: src/components/Layout/PanelContent.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ import { Box, useStyleConfig } from "@chakra-ui/react"; function PanelContent(props) { const { variant, children, ...rest } = props; const styles = useStyleConfig("PanelContent", { variant }); // Pass the computed styles into the `__css` prop return ( {children} ); } export default PanelContent; ================================================ FILE: src/components/Menu/ItemContent.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ // chakra imports import { Avatar, Flex, Text } from "@chakra-ui/react"; import { ClockIcon } from "components/Icons/Icons"; import React from "react"; export function ItemContent(props) { const navbarIcon = "gray.400"; const notificationColor = "white"; const spacing = " "; return ( <> {props.boldInfo} {spacing} {props.info} {props.time} ); } ================================================ FILE: src/components/Navbars/AdminNavbar.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ // Chakra Imports import { Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Flex, Link, useColorModeValue, } from "@chakra-ui/react"; import PropTypes from "prop-types"; import React, { useState } from "react"; import AdminNavbarLinks from "./AdminNavbarLinks"; export default function AdminNavbar(props) { const [scrolled, setScrolled] = useState(false); const { variant, children, fixed, secondary, brandText, onOpen, ...rest } = props; // Here are all the props that may change depending on navbar's type or state.(secondary, variant, scrolled) let mainText = "white"; let navbarPosition = "absolute"; let navbarFilter = "none"; let navbarBackdrop = "none"; let navbarShadow = "none"; let navbarBg = "none"; let navbarBorder = "transparent"; let secondaryMargin = "0px"; let paddingX = "15px"; if (props.fixed === true) if (scrolled === true) { navbarPosition = "fixed"; navbarShadow = "0px 7px 23px rgba(0, 0, 0, 0.05)"; navbarBg = "linear-gradient(rgba(255, 255, 255, 0) 0% rgba(255, 255, 255, 0.39) @ 100%)"; navbarBorder = "rgba(226, 232, 240, 0.3)"; navbarFilter = "drop-shadow(0px 7px 23px rgba(0, 0, 0, 0.05))"; navbarBackdrop = "blur(42px)"; } if (props.secondary) { navbarBackdrop = "blur(42px)"; // navbarPosition = "absolute"; // mainText = "white"; // secondaryText = "white"; // secondaryMargin = "22px"; // paddingX = "30px"; } const changeNavbar = () => { if (window.scrollY > 1) { setScrolled(true); } else { setScrolled(false); } }; window.addEventListener("scroll", changeNavbar); return ( Pages {brandText} {/* Here we create navbar brand, based on route name */} {brandText} ); } AdminNavbar.propTypes = { brandText: PropTypes.string, variant: PropTypes.string, secondary: PropTypes.bool, fixed: PropTypes.bool, onOpen: PropTypes.func, }; ================================================ FILE: src/components/Navbars/AdminNavbarLinks.js ================================================ // Chakra Icons import { BellIcon, SearchIcon } from "@chakra-ui/icons"; // Chakra Imports import { Button, Flex, IconButton, Input, InputGroup, InputLeftElement, Menu, MenuButton, MenuItem, MenuList, Text, } from "@chakra-ui/react"; // Assets import avatar1 from "assets/img/avatars/avatar1.png"; import avatar2 from "assets/img/avatars/avatar2.png"; import avatar3 from "assets/img/avatars/avatar3.png"; // Custom Icons import { ProfileIcon, SettingsIcon } from "components/Icons/Icons"; // Custom Components import { ItemContent } from "components/Menu/ItemContent"; import { SidebarResponsive } from "components/Sidebar/Sidebar"; import PropTypes from "prop-types"; import React from "react"; import { NavLink } from "react-router-dom"; import routes from "routes.js"; export default function HeaderLinks(props) { const { variant, children, fixed, secondary, onOpen, ...rest } = props; // Chakra Color Mode let inputBg = "#0F1535"; let mainText = "gray.400"; let navbarIcon = "white"; let searchIcon = "white"; if (secondary) { navbarIcon = "white"; mainText = "white"; } const settingsRef = React.useRef(); return ( }> } /> ); } HeaderLinks.propTypes = { variant: PropTypes.string, fixed: PropTypes.bool, secondary: PropTypes.bool, onOpen: PropTypes.func, }; ================================================ FILE: src/components/Navbars/AuthNavbar.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ // Chakra imports import { Box, Button, Flex, HStack, Link, Text, useColorModeValue, } from "@chakra-ui/react"; import { CreativeTimLogo, DocumentIcon, HomeIcon, PersonIcon, RocketIcon, } from "components/Icons/Icons"; import { SidebarResponsive } from "components/Sidebar/Sidebar"; import PropTypes from "prop-types"; import React from "react"; import { NavLink } from "react-router-dom"; import routes from "routes.js"; export default function AuthNavbar(props) { const [open, setOpen] = React.useState(false); const handleDrawerToggle = () => { setOpen(!open); }; const { logo, logoText, secondary, ...rest } = props; // verifies if routeName is the one active (in browser input) const activeRoute = (routeName) => { return window.location.href.indexOf(routeName) > -1 ? true : false; }; // Chakra color mode let navbarIcon = "white"; let mainText = "white"; let navbarBg = "linear-gradient(123.64deg, rgba(255, 255, 255, 0) -22.38%, rgba(255, 255, 255, 0.039) 70.38%)"; let navbarBorder = "rgba(226, 232, 240, 0.3)"; let navbarShadow = useColorModeValue( "0px 7px 23px rgba(0, 0, 0, 0.05)", "none" ); let navbarFilter = useColorModeValue( "none", "drop-shadow(0px 7px 23px rgba(0, 0, 0, 0.05))" ); let navbarBackdrop = "blur(42px)"; let navbarPosition = "fixed"; var brand = ( {logoText} ); var linksAuth = ( ); return ( {brand} {linksAuth} ); } AuthNavbar.propTypes = { color: PropTypes.oneOf(["primary", "info", "success", "warning", "danger"]), brandText: PropTypes.string, }; ================================================ FILE: src/components/Navbars/SearchBar/SearchBar.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ import React from "react"; import { IconButton, Input, InputGroup, InputLeftElement, useColorModeValue, } from "@chakra-ui/react"; import { SearchIcon } from "@chakra-ui/icons"; export function SearchBar(props) { // Pass the computed styles into the `__css` prop const { variant, children, ...rest } = props; // Chakra Color Mode const searchIconColor = "gray.700"; const inputBg = "gray.800"; return ( }> } /> ); } ================================================ FILE: src/components/RTLProvider/RTLProvider.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ import { CacheProvider } from "@emotion/react"; import createCache from "@emotion/cache"; import rtl from "stylis-plugin-rtl"; // NB: A unique `key` is important for it to work! const options = { rtl: { key: "css-ar", stylisPlugins: [rtl] }, ltr: { key: "css-en" }, }; export function RtlProvider({ children }) { const dir = document.documentElement.dir == "ar" ? "rtl" : "ltr"; const cache = createCache(options[dir]); return ; } ================================================ FILE: src/components/Separator/Separator.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ import React from "react"; import { Flex } from "@chakra-ui/react"; export function Separator(props) { const { variant, children, ...rest } = props; return ( {children} ); } ================================================ FILE: src/components/Sidebar/Sidebar.js ================================================ /*eslint-disable*/ import { HamburgerIcon } from "@chakra-ui/icons"; // chakra imports import { Box, Button, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerOverlay, Flex, Link, Stack, Text, useDisclosure, } from "@chakra-ui/react"; import IconBox from "components/Icons/IconBox"; import { SimmmpleLogoWhite } from "components/Icons/Icons"; import { Separator } from "components/Separator/Separator"; import { SidebarHelp } from "components/Sidebar/SidebarHelp"; import PropTypes from "prop-types"; import React from "react"; import { NavLink, useLocation } from "react-router-dom"; // FUNCTIONS function Sidebar(props) { // to check for active links and opened collapses let location = useLocation(); // this is for the rest of the collapses const [state, setState] = React.useState({}); const mainPanel = React.useRef(); let variantChange = "0.2s linear"; // verifies if routeName is the one active (in browser input) const activeRoute = (routeName) => { return location.pathname === routeName ? "active" : ""; }; // this function creates the links and collapses that appear in the sidebar (left menu) const createLinks = (routes) => { const { sidebarVariant } = props; // Chakra Color Mode let activeBg = "#1A1F37"; let inactiveBg = "#1A1F37"; let activeColor = "white"; let inactiveColor = "white"; let sidebarActiveShadow = "none"; return routes.map((prop, key) => { if (prop.redirect) { return null; } if (prop.category) { var st = {}; st[prop["state"]] = !state[prop.state]; return ( <> {document.documentElement.dir === "rtl" ? prop.rtlName : prop.name} {createLinks(prop.views)} ); } return ( {activeRoute(prop.layout + prop.path) === "active" ? ( ) : ( )} ); }); }; const { logoText, routes, sidebarVariant } = props; var links = <>{createLinks(routes)}; // BRAND // Chakra Color Mode let sidebarBg = "linear-gradient(111.84deg, rgba(6, 11, 38, 0.94) 59.3%, rgba(26, 31, 55, 0) 100%)"; let sidebarRadius = "16px"; let sidebarMargins = "16px 0px 16px 16px"; var brand = ( {logoText} ); // SIDEBAR return ( {brand} {links} ); } // FUNCTIONS export function SidebarResponsive(props) { // to check for active links and opened collapses let location = useLocation(); // this is for the rest of the collapses const [state, setState] = React.useState({}); const mainPanel = React.useRef(); // verifies if routeName is the one active (in browser input) const activeRoute = (routeName) => { return location.pathname === routeName ? "active" : ""; }; // this function creates the links and collapses that appear in the sidebar (left menu) const createLinks = (routes) => { // Chakra Color Mode const activeBg = "#1A1F37"; const inactiveBg = "#1A1F37"; const activeColor = "white"; const inactiveColor = "white"; return routes.map((prop, key) => { if (prop.redirect) { return null; } if (prop.category) { var st = {}; st[prop["state"]] = !state[prop.state]; return ( <> {document.documentElement.dir === "rtl" ? prop.rtlName : prop.name} {createLinks(prop.views)} ); } return ( {activeRoute(prop.layout + prop.path) === "active" ? ( ) : ( )} ); }); }; const { logoText, routes, iconColor, ...rest } = props; var links = <>{createLinks(routes)}; // BRAND // Chakra Color Mode var brand = ( {logoText} ); // SIDEBAR const { isOpen, onOpen, onClose } = useDisclosure(); const btnRef = React.useRef(); // Color variables return ( {brand} {links} ); } // PROPS Sidebar.propTypes = { logoText: PropTypes.string, routes: PropTypes.arrayOf(PropTypes.object), variant: PropTypes.string, }; SidebarResponsive.propTypes = { logoText: PropTypes.string, routes: PropTypes.arrayOf(PropTypes.object), }; export default Sidebar; ================================================ FILE: src/components/Sidebar/SidebarHelp.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ import { QuestionIcon } from "@chakra-ui/icons"; import { Button, Flex, Link, Text } from "@chakra-ui/react"; import SidebarHelpImage from "assets/img/SidebarHelpImage.png"; import IconBox from "components/Icons/IconBox"; import React from "react"; export function SidebarHelp(props) { // Pass the computed styles into the `__css` prop const { children, ...rest } = props; return ( Need help? Please check our docs ); } ================================================ FILE: src/components/Tables/BillingRow.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ import { Box, Button, Flex, Icon, Text } from "@chakra-ui/react"; import React from "react"; import { FaPencilAlt, FaTrashAlt } from "react-icons/fa"; function BillingRow(props) { const { name, company, email, number } = props; return ( {name} Company Name: {window.innerWidth < 768 ?
: null} {company} Email Address:{" "} {email} VAT Number:{" "} {number} ); } export default BillingRow; ================================================ FILE: src/components/Tables/DashboardTableRow.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ import { Avatar, AvatarGroup, Flex, Icon, Progress, Td, Text, Tr, useColorModeValue, } from "@chakra-ui/react"; import React from "react"; function DashboardTableRow(props) { const { logo, name, members, budget, progression, lastItem } = props; const textColor = useColorModeValue("gray.700", "white"); return ( {name} {members.map((member) => { return ( ); })} {budget} {`${progression}%`} ); } export default DashboardTableRow; ================================================ FILE: src/components/Tables/InvoicesRow.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ import { Box, Button, Flex, Icon, Spacer, Text } from "@chakra-ui/react"; function InvoicesRow(props) { const { date, code, price, format, logo } = props; return ( {date} {code} {price} ); } export default InvoicesRow; ================================================ FILE: src/components/Tables/TablesProjectRow.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ import React from "react"; import { Tr, Td, Flex, Text, Progress, Icon, Button, useColorModeValue, } from "@chakra-ui/react"; import { FaEllipsisV } from "react-icons/fa"; function DashboardTableRow(props) { const { logo, name, status, budget, progression, lastItem } = props; const textColor = useColorModeValue("gray.700", "white"); return ( {name} {budget} {status} {`${progression}%`} ); } export default DashboardTableRow; ================================================ FILE: src/components/Tables/TablesTableRow.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ import { Avatar, Badge, Button, Flex, Td, Text, Tr, useColorModeValue, } from "@chakra-ui/react"; import React from "react"; function TablesTableRow(props) { const { logo, name, email, subdomain, domain, status, date, lastItem, } = props; const textColor = useColorModeValue("gray.700", "white"); const bgStatus = useColorModeValue("gray.400", "#1a202c"); const colorStatus = useColorModeValue("white", "gray.400"); return ( {name} {email} {domain} {subdomain} {status} {date} ); } export default TablesTableRow; ================================================ FILE: src/components/Tables/TimelineRow.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ import { Box, Flex, Icon, Text, useColorModeValue } from "@chakra-ui/react"; import React from "react"; function TimelineRow(props) { const { logo, title, date, color, index, arrLength } = props; const textColor = useColorModeValue("gray.700", "white.300"); const bgIconColor = useColorModeValue("white.300", "gray.700"); return ( {title} {date} ); } export default TimelineRow; ================================================ FILE: src/components/Tables/TransactionRow.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ import { Box, Flex, Icon, Text } from "@chakra-ui/react"; import React from "react"; function TransactionRow(props) { const { name, date, logo, price } = props; return ( {name} {date} {price} ); } export default TransactionRow; ================================================ FILE: src/index.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ import React from "react"; import ReactDOM from "react-dom"; import { HashRouter, Route, Switch, Redirect } from "react-router-dom"; import AuthLayout from "layouts/Auth.js"; import AdminLayout from "layouts/Admin.js"; import RTLLayout from "layouts/RTL.js"; ReactDOM.render( , document.getElementById("root") ); ================================================ FILE: src/layouts/Admin.js ================================================ /*! ========================================================= * Vision UI Free Chakra - v1.0.0 ========================================================= * Product Page: https://www.creative-tim.com/product/vision-ui-free-chakra * Copyright 2021 Creative Tim (https://www.creative-tim.com/) * Licensed under MIT (https://github.com/creativetimofficial/vision-ui-free-chakra/blob/master LICENSE.md) * Design and Coded by Simmmple & Creative Tim ========================================================= * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ // Chakra imports import { ChakraProvider, Portal, useDisclosure } from "@chakra-ui/react"; import Configurator from "components/Configurator/Configurator"; import Footer from "components/Footer/Footer.js"; // Layout components import AdminNavbar from "components/Navbars/AdminNavbar.js"; import Sidebar from "components/Sidebar/Sidebar.js"; import React, { useState } from "react"; import { Redirect, Route, Switch } from "react-router-dom"; import routes from "routes.js"; // Custom Chakra theme import theme from "theme/themeAdmin.js"; import FixedPlugin from "../components/FixedPlugin/FixedPlugin"; // Custom components import MainPanel from "../components/Layout/MainPanel"; import PanelContainer from "../components/Layout/PanelContainer"; import PanelContent from "../components/Layout/PanelContent"; export default function Dashboard(props) { const { ...rest } = props; // states and functions const [sidebarVariant, setSidebarVariant] = useState("transparent"); const [fixed, setFixed] = useState(false); // ref for main panel div const mainPanel = React.createRef(); // functions for changing the states from components const getRoute = () => { return window.location.pathname !== "/admin/full-screen-maps"; }; const getActiveRoute = (routes) => { let activeRoute = "Default Brand Text"; for (let i = 0; i < routes.length; i++) { if (routes[i].collapse) { let collapseActiveRoute = getActiveRoute(routes[i].views); if (collapseActiveRoute !== activeRoute) { return collapseActiveRoute; } } else if (routes[i].category) { let categoryActiveRoute = getActiveRoute(routes[i].views); if (categoryActiveRoute !== activeRoute) { return categoryActiveRoute; } } else { if ( window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1 ) { return routes[i].name; } } } return activeRoute; }; // This changes navbar state(fixed or not) const getActiveNavbar = (routes) => { let activeNavbar = false; for (let i = 0; i < routes.length; i++) { if (routes[i].category) { let categoryActiveNavbar = getActiveNavbar(routes[i].views); if (categoryActiveNavbar !== activeNavbar) { return categoryActiveNavbar; } } else { if ( window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1 ) { if (routes[i].secondaryNavbar) { return routes[i].secondaryNavbar; } } } } return activeNavbar; }; const getRoutes = (routes) => { return routes.map((prop, key) => { if (prop.collapse) { return getRoutes(prop.views); } if (prop.category === "account") { return getRoutes(prop.views); } if (prop.layout === "/admin") { return ( ); } else { return null; } }); }; const { isOpen, onOpen, onClose } = useDisclosure(); document.documentElement.dir = "ltr"; // Chakra Color Mode return ( {getRoute() ? ( {getRoutes(routes)} ) : null}