├── .eslintrc ├── .github └── workflows │ └── prod.yml ├── .gitignore ├── .prettierrc ├── README.md ├── jsconfig.json ├── package-lock.json ├── package.json ├── public ├── assets │ ├── front │ │ └── wow.min.js │ └── images │ │ └── favicon.svg ├── index.html └── robots.txt ├── src ├── App.js ├── App.test.js ├── assets │ ├── fonts │ │ ├── cryptocoins │ │ │ ├── cryptocoins.ttf │ │ │ ├── cryptocoins.woff │ │ │ └── cryptocoins.woff2 │ │ ├── cryptofont.css │ │ ├── feather.css │ │ ├── feather │ │ │ ├── feather.eot │ │ │ ├── feather.svg │ │ │ ├── feather.ttf │ │ │ └── feather.woff │ │ ├── fontawesome.css │ │ ├── fontawesome │ │ │ ├── fa-brands-400.eot │ │ │ ├── fa-brands-400.svg │ │ │ ├── fa-brands-400.ttf │ │ │ ├── fa-brands-400.woff │ │ │ ├── fa-brands-400.woff2 │ │ │ ├── fa-regular-400.eot │ │ │ ├── fa-regular-400.svg │ │ │ ├── fa-regular-400.ttf │ │ │ ├── fa-regular-400.woff │ │ │ ├── fa-regular-400.woff2 │ │ │ ├── fa-solid-900.eot │ │ │ ├── fa-solid-900.svg │ │ │ ├── fa-solid-900.ttf │ │ │ ├── fa-solid-900.woff │ │ │ └── fa-solid-900.woff2 │ │ ├── inter │ │ │ ├── Inter-Bold.woff │ │ │ ├── Inter-Bold.woff2 │ │ │ ├── Inter-Medium.woff │ │ │ ├── Inter-Medium.woff2 │ │ │ ├── Inter-Regular.woff │ │ │ ├── Inter-Regular.woff2 │ │ │ ├── Inter-SemiBold.woff │ │ │ ├── Inter-SemiBold.woff2 │ │ │ └── inter.css │ │ ├── material.css │ │ └── material │ │ │ └── material.woff2 │ ├── images │ │ ├── favicon.svg │ │ ├── logo-dark.svg │ │ ├── logo-sm-light.svg │ │ ├── logo-sm.svg │ │ ├── logo.svg │ │ ├── user │ │ │ └── avatar-2.jpg │ │ └── widget │ │ │ ├── p1.jpg │ │ │ ├── p2.jpg │ │ │ ├── p3.jpg │ │ │ └── p4.jpg │ └── scss │ │ ├── react-modules │ │ ├── _carousel.scss │ │ ├── _popover.scss │ │ ├── _react-rating.scss │ │ └── _tooltip.scss │ │ ├── settings │ │ ├── _custom-variables.scss │ │ ├── _theme-variables.scss │ │ └── dark │ │ │ ├── _custom-variables.scss │ │ │ └── _theme-variables.scss │ │ ├── style.scss │ │ └── themes │ │ ├── _general.scss │ │ ├── _generic.scss │ │ ├── components │ │ ├── _badge.scss │ │ ├── _button.scss │ │ ├── _card.scss │ │ ├── _dropdown.scss │ │ ├── _form.scss │ │ ├── _table.scss │ │ └── _widget.scss │ │ ├── layouts │ │ ├── _pc-common.scss │ │ ├── _pc-header.scss │ │ └── _pc-sidebar.scss │ │ ├── pages │ │ ├── _authentication.scss │ │ ├── _icon-lauouts.scss │ │ └── _pages.scss │ │ └── plugins │ │ └── _data-tables.scss ├── components │ ├── Card │ │ └── MainCard.js │ ├── Loader │ │ ├── Bar.js │ │ ├── Container.js │ │ ├── Loader.js │ │ ├── Progress.js │ │ └── Spinner.js │ ├── Modal │ │ └── AnimatedModal.js │ ├── Notifications │ │ └── BasicNotifications.js │ └── Widgets │ │ ├── FeedTable.js │ │ ├── ProductTable.js │ │ └── Statistic │ │ ├── FlatCard.js │ │ ├── IcoCard.js │ │ ├── NotificationCard.js │ │ ├── OrderCard.js │ │ ├── OrderVisitorCard.js │ │ ├── ProductCard.js │ │ ├── StatisticBlink.js │ │ └── SubscribeCard.js ├── config │ └── constant.js ├── contexts │ └── ConfigContext.js ├── data │ ├── feedData.js │ ├── productTableData.js │ └── tableData.js ├── hooks │ ├── useOutsideClick.js │ └── useWindowSize.js ├── index.js ├── index.scss ├── layouts │ └── AdminLayout │ │ ├── Breadcrumb │ │ └── index.js │ │ ├── MobileHeader │ │ └── index.js │ │ ├── Modal │ │ └── index.js │ │ ├── NavBar │ │ ├── NavLeft │ │ │ └── index.js │ │ ├── NavRight │ │ │ └── index.js │ │ └── index.js │ │ ├── Navigation │ │ ├── NavContent │ │ │ ├── NavBadge │ │ │ │ └── index.js │ │ │ ├── NavCollapse │ │ │ │ └── index.js │ │ │ ├── NavGroup │ │ │ │ └── index.js │ │ │ ├── NavIcon │ │ │ │ └── index.js │ │ │ ├── NavItem │ │ │ │ └── index.js │ │ │ └── index.js │ │ └── index.js │ │ └── index.js ├── menu-items-collapse.js ├── menu-items.js ├── react-app-env.d.js ├── react-app-env.d.ts ├── reportWebVitals.js ├── routes │ ├── renderRoutes.js │ └── routes.js ├── setupTests.js ├── store │ ├── actions.js │ └── index.js ├── utils │ └── helper.js └── views │ ├── auth │ ├── signin │ │ └── SignIn1.js │ └── signup │ │ └── SignUp1.js │ ├── charts │ └── apex-chart │ │ ├── chart │ │ ├── area-chart-1.js │ │ ├── bar-chart-1.js │ │ ├── bar-chart-2.js │ │ ├── bar-chart-3.js │ │ ├── bar-chart-4.js │ │ ├── bubble-chart-1.js │ │ ├── bubble-chart-2.js │ │ ├── candlestick-chart.js │ │ ├── daily-visitor.js │ │ ├── heat-map-chart-1.js │ │ ├── heat-map-chart-2.js │ │ ├── line-chart-1.js │ │ ├── line-chart-3.js │ │ ├── line-chart.js │ │ ├── mixed-chart-1.js │ │ ├── mixed-chart-2.js │ │ ├── pie-chart-1.js │ │ ├── pie-chart-2.js │ │ ├── radar-chart-1.js │ │ ├── radar-chart-2.js │ │ ├── radial-bar-chart-1.js │ │ ├── radial-bar-chart-2.js │ │ ├── scatter-chart-1.js │ │ └── scatter-chart-2.js │ │ └── index.js │ ├── dashboard │ └── DashSales │ │ ├── chart │ │ ├── sales-account-chart.js │ │ ├── sales-customer-satisfication-chart.js │ │ ├── sales-support-chart.js │ │ └── sales-support-chart1.js │ │ └── index.js │ ├── maps │ ├── GmapSearchAPI.js │ ├── GoogleMaps.js │ └── google-maps │ │ ├── BasicMap.js │ │ ├── GmapSearch.js │ │ ├── Marker.js │ │ ├── MarkerClusterer.js │ │ └── StreetViewPanorma.js │ ├── page-layouts │ ├── CommonContent.js │ └── vertical │ │ └── CollapseMenu.js │ ├── sample │ └── index.js │ ├── tables │ └── bootstrap │ │ └── BasicTable.js │ └── ui-elements │ ├── basic │ └── BasicTypography.js │ └── icons │ ├── Feather.js │ └── data │ └── feather-icon.js └── yarn.lock /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "env": { 4 | "browser": true, 5 | "es2021": true 6 | }, 7 | "extends": ["airbnb", "prettier", "plugin:jsx-a11y/recommended", "plugin:react-hooks/recommended"], 8 | "settings": { 9 | "import/resolver": { 10 | "node": { 11 | "moduleDirectory": ["node_modules", "src/"] 12 | } 13 | } 14 | }, 15 | "parser": "@babel/eslint-parser", 16 | "parserOptions": { 17 | "requireConfigFile": false, 18 | "ecmaFeatures": { 19 | "experimentalObjectRestSpread": true, 20 | "impliedStrict": true 21 | }, 22 | "ecmaVersion": 12, 23 | "babelOptions": { 24 | "presets": ["@babel/preset-react"] 25 | } 26 | }, 27 | "plugins": ["prettier", "react", "react-hooks"], 28 | "rules": { 29 | "react/jsx-filename-extension": 0, 30 | "no-param-reassign": 0, 31 | "react/prop-types": 0, 32 | "react/require-default-props": 0, 33 | "react/no-array-index-key": 0, 34 | "react/jsx-props-no-spreading": 0, 35 | "react/forbid-prop-types": 0, 36 | "import/order": 0, 37 | "no-console": 0, 38 | "jsx-a11y/anchor-is-valid": 0, 39 | "jsx-a11y/label-has-associated-control": 0, 40 | "react/no-unescaped-entities": 0, 41 | "no-use-before-define": 0, 42 | "jsx-a11y/no-onchange": 0, 43 | "no-shadow": 2, 44 | "no-unused-vars": [ 45 | 2, 46 | { 47 | "ignoreRestSiblings": false 48 | } 49 | ], 50 | "prettier/prettier": [ 51 | 2, 52 | { 53 | "bracketSpacing": true, 54 | "printWidth": 140, 55 | "singleQuote": true, 56 | "trailingComma": "none", 57 | "tabWidth": 4, 58 | "useTabs": false, 59 | "endOfLine": "auto" 60 | } 61 | ] 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /.github/workflows/prod.yml: -------------------------------------------------------------------------------- 1 | name: DashBoardKit - Production Deploy 2 | 3 | # Controls when the action will run. 4 | on: 5 | # Triggers the workflow on push or pull request events but only for the master branch 6 | push: 7 | branches: [master] 8 | pull_request: 9 | branches: [master] 10 | 11 | jobs: 12 | sftp-deploy: 13 | name: 🎉 Deploy 14 | runs-on: ubuntu-latest 15 | 16 | steps: 17 | - name: 🚚 Get latest code 18 | uses: actions/checkout@v1 19 | 20 | - name: Install Node.js 14 21 | uses: actions/setup-node@v1 22 | with: 23 | node-version: '14.x' 24 | 25 | - name: 🔨 Build Project 26 | run: | 27 | yarn 28 | yarn build 29 | 30 | - name: 📂 Deploy to Server 31 | uses: easingthemes/ssh-deploy@v2.1.5 32 | env: 33 | SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }} 34 | # ARGS: "-rltgoDzvO --delete" 35 | SOURCE: 'build/' 36 | REMOTE_HOST: 192.34.62.123 37 | REMOTE_USER: dashboardkit 38 | TARGET: public_html/react/free 39 | EXCLUDE: '/dist/, /node_modules/' 40 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | /.eslintcache 25 | #package-lock.json 26 | /.vscode 27 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "bracketSpacing": true, 3 | "printWidth": 140, 4 | "singleQuote": true, 5 | "trailingComma": "none", 6 | "tabWidth": 4, 7 | "useTabs": false, 8 | "endOfLine": "auto" 9 | } 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Dashboardkit React Bootstrap 2 | 3 | [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) 4 | [![Price](https://img.shields.io/badge/price-FREE-0098f7.svg)](https://github.com/codedthemes/dashboardkit-free-bootstrap-admin-template/blob/main/LICENSE) 5 | [![GitHub package version](https://img.shields.io/github/package-json/v/codedthemes/dashboardkit-free-bootstrap-admin-template)](https://github.com/codedthemes/dashboardkit-free-bootstrap-admin-template/) 6 | 7 | DashboardKit Bootstrap React Admin Dashboard Template [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Get%20DashboardKit%20Bootstrap%205%20Admin%20Template&url=https://dashboardkit.io&via=codedthemes&hashtags=bootstrap,webdev,developers) 8 | 9 | Save your development time with ready to use DashboardKit React Bootstrap Admin Template. DashboardKit is made for everyone, no matter you are a novice developer, designer, project manager/owner. It is made by an Elite Author with having 5+ years of experience in dashboard making. 10 | 11 | [Pro version](https://dashboardkit.io) of DashboardKit contains features like 10+ Ready to use layouts, Advance UI components, Form components & plugins, Advance Table examples, charts, 11+ Apps, Extra pages, and lots more. 12 | 13 | ![Berry React Material Admin Template](https://dashboardkit.io/adv-banner/git-main.gif) 14 | 15 | ## Why DashboardKit? 16 | 17 | DashboardKit free Bootstrap react admin template includes the following feature pages with having MIT license usage. 18 | 19 | * Professional UI design 20 | 21 | * Fully Responsive, all modern browser supported 22 | * Flexible & High-Performance code 23 | * Easy Documentation Guide 24 | 25 | ## Free version preview 26 | #### Preview 27 | 28 | - [Demo](https://dashboardkit.io/react/free/) 29 | 30 | ## Pro version preview & Purchase 31 | #### Preview 32 | 33 | - [Demo](https://dashboardkit.io/react) 34 | 35 | #### Purchase 36 | 37 | - [Get DashboardKit](https://dashboardkit.io/product/dashboardkit-reactjs-admin-template/) 38 | 39 | ## Table of contents 40 | 41 | * [Getting Started](#getting-started) 42 | * [Documentation](#documentation) 43 | * [Technology Stack](#technology-stack) 44 | * [Author](#author) 45 | * [Issues?](#issues) 46 | * [License](#license) 47 | * [Follow us](#follow-us) 48 | 49 | ## Getting Started 50 | 51 | - Clone from Github - https://github.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template.git 52 | - Go to root dir 53 | - Run command 'yarn' or 'npm install' 54 | - Run command 'yarn start' or 'npm run start' 55 | 56 | ## Documentation 57 | 58 | DashboardKit documentation helps you out in all aspects from Installation to deployment. Link to access [Documentation](https://codedthemes.gitbook.io/dashboardkit-react/). 59 | 60 | ## Technology Stack 61 | 62 | - React 63 | - React Bootstrap 64 | - React Redux 65 | - Create React App 66 | - React Router 67 | - Axios 68 | - Redux-saga 69 | - Node 70 | - Saas 71 | 72 | 73 | ## Author 74 | 75 | DashboardKit is managed by Team [CodedThemes](https://codedthemes.com). 76 | 77 | ## Issues 78 | 79 | Please generate a Github issue if you found a bug in any version. We are trying to be responsive to resolve the issue. 80 | 81 | ## License 82 | 83 | - Licensed cover under [MIT](https://github.com/codedthemes/dashboardkit-free-bootstrap-admin-template/blob/main/LICENSE) 84 | 85 | ## Follow us 86 | - Website [https://dashboardkit.io](https://dashboardkit.io) 87 | - CodedThemes [https://codedthemes.com](https://codedthemes.com) 88 | - Dribbble [https://dribbble.com/codedthemes](https://dribbble.com/codedthemes) 89 | - Facebook [https://www.facebook.com/codedthemes](https://www.facebook.com/codedthemes) 90 | - Twitter [https://twitter.com/codedthemes](https://twitter.com/codedthemes) 91 | 92 | ## Further Support 93 | - Create Ticket here: https://codedthemes.support-hub.io/ 94 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "baseUrl": "src", 6 | "paths": { 7 | "*": ["src/*"] 8 | }, 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": ["src"] 24 | } 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dashboard-kit-free-react-bootstrap-admin-template", 3 | "version": "1.0.0", 4 | "private": true, 5 | "homepage": "https://dashboardkit.io/react/free", 6 | "dependencies": { 7 | "@tanem/react-nprogress": "^3.0.54", 8 | "@testing-library/jest-dom": "^5.11.9", 9 | "@testing-library/react": "^11.2.5", 10 | "apexcharts": "^3.24.0", 11 | "bootstrap": "5.0.1", 12 | "feather-icons-react": "^0.4.3", 13 | "lodash": "^4.17.21", 14 | "namor": "^2.0.2", 15 | "node-sass": "^5.0.0", 16 | "prop-types": "^15.7.2", 17 | "react": "^16.4.0", 18 | "react-apexcharts": "^1.3.7", 19 | "react-app-polyfill": "^2.0.0", 20 | "react-bootstrap": "^1.4.3", 21 | "react-bootstrap-range-slider": "^3.0.3", 22 | "react-copy-to-clipboard": "^5.0.3", 23 | "react-dom": "^16.4.0", 24 | "react-google-maps": "^9.4.5", 25 | "react-perfect-scrollbar": "^1.5.8", 26 | "react-redux": "^7.2.2", 27 | "react-router-dom": "^5.2.0", 28 | "react-scripts": "4.0.2", 29 | "react-slidedown": "^2.4.5", 30 | "react-table": "^7.6.3", 31 | "react-toast-notifications": "^2.4.3", 32 | "react-useinterval": "^1.0.2", 33 | "recompose": "^0.30.0", 34 | "redux": "^4.0.5", 35 | "redux-devtools-extension": "^2.13.9", 36 | "redux-form": "^8.3.7", 37 | "redux-saga": "^1.1.3", 38 | "rodal": "^1.8.1", 39 | "styled-components": "^5.2.1", 40 | "typescript": "^4.1.5", 41 | "web-vitals": "^1.1.0" 42 | }, 43 | "scripts": { 44 | "start": "react-scripts start", 45 | "build": "react-scripts build", 46 | "test": "react-scripts test", 47 | "eject": "react-scripts eject" 48 | }, 49 | "eslintConfig": { 50 | "extends": [ 51 | "react-app", 52 | "react-app/jest" 53 | ] 54 | }, 55 | "browserslist": { 56 | "production": [ 57 | ">0.2%", 58 | "not dead", 59 | "not op_mini all" 60 | ], 61 | "development": [ 62 | "last 1 chrome version", 63 | "last 1 firefox version", 64 | "last 1 safari version" 65 | ] 66 | }, 67 | "compilerOptions": { 68 | "baseUrl": "src" 69 | }, 70 | "include": [ 71 | "src" 72 | ], 73 | "devDependencies": { 74 | "@babel/core": "^7.14.8", 75 | "@babel/eslint-parser": "^7.14.7", 76 | "@babel/preset-react": "^7.14.5", 77 | "eslint": "^7.31.0", 78 | "eslint-config-airbnb": "18.2.1", 79 | "eslint-config-prettier": "^8.3.0", 80 | "eslint-plugin-import": "2.22.1", 81 | "eslint-plugin-jsx-a11y": "6.4.1", 82 | "eslint-plugin-prettier": "^3.4.0", 83 | "eslint-plugin-react": "7.21.5", 84 | "eslint-plugin-react-hooks": "^4.2.0", 85 | "prettier": "^2.2.1" 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /public/assets/images/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 18 | DashboardKit Bootstrap 5 Admin Template 19 | 20 | 21 | 22 | 23 |
24 | 34 | 35 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // third party 4 | import { BrowserRouter as Router } from 'react-router-dom'; 5 | 6 | // project imports 7 | import routes from 'routes/routes'; 8 | import renderRoutes from 'routes/renderRoutes'; 9 | import { BASENAME } from 'config/constant'; 10 | 11 | // -----------------------|| APP ||-----------------------// 12 | const App = () => {renderRoutes(routes)}; 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | // third party 2 | import { render, screen } from '@testing-library/react'; 3 | 4 | // project imports 5 | import App from './App'; 6 | 7 | // testcases 8 | test('renders learn react link', () => { 9 | render(); 10 | const linkElement = screen.getByText(/learn react/i); 11 | expect(linkElement).toBeInTheDocument(); 12 | }); 13 | -------------------------------------------------------------------------------- /src/assets/fonts/cryptocoins/cryptocoins.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/cryptocoins/cryptocoins.ttf -------------------------------------------------------------------------------- /src/assets/fonts/cryptocoins/cryptocoins.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/cryptocoins/cryptocoins.woff -------------------------------------------------------------------------------- /src/assets/fonts/cryptocoins/cryptocoins.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/cryptocoins/cryptocoins.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/feather/feather.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/feather/feather.eot -------------------------------------------------------------------------------- /src/assets/fonts/feather/feather.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/feather/feather.ttf -------------------------------------------------------------------------------- /src/assets/fonts/feather/feather.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/feather/feather.woff -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome/fa-brands-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/fontawesome/fa-brands-400.eot -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/fontawesome/fa-brands-400.ttf -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome/fa-brands-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/fontawesome/fa-brands-400.woff -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome/fa-brands-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/fontawesome/fa-brands-400.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome/fa-regular-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/fontawesome/fa-regular-400.eot -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/fontawesome/fa-regular-400.ttf -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome/fa-regular-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/fontawesome/fa-regular-400.woff -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/fontawesome/fa-regular-400.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome/fa-solid-900.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/fontawesome/fa-solid-900.eot -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/fontawesome/fa-solid-900.ttf -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome/fa-solid-900.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/fontawesome/fa-solid-900.woff -------------------------------------------------------------------------------- /src/assets/fonts/fontawesome/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/fontawesome/fa-solid-900.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/inter/Inter-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/inter/Inter-Bold.woff -------------------------------------------------------------------------------- /src/assets/fonts/inter/Inter-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/inter/Inter-Bold.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/inter/Inter-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/inter/Inter-Medium.woff -------------------------------------------------------------------------------- /src/assets/fonts/inter/Inter-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/inter/Inter-Medium.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/inter/Inter-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/inter/Inter-Regular.woff -------------------------------------------------------------------------------- /src/assets/fonts/inter/Inter-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/inter/Inter-Regular.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/inter/Inter-SemiBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/inter/Inter-SemiBold.woff -------------------------------------------------------------------------------- /src/assets/fonts/inter/Inter-SemiBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/inter/Inter-SemiBold.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/inter/inter.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Inter'; 3 | font-style: normal; 4 | font-weight: 400; 5 | font-display: swap; 6 | src: url('Inter-Regular.woff2?v=3.13') format('woff2'), url('Inter-Regular.woff?v=3.13') format('woff'); 7 | } 8 | 9 | @font-face { 10 | font-family: 'Inter'; 11 | font-style: normal; 12 | font-weight: 500; 13 | font-display: swap; 14 | src: url('Inter-Medium.woff2?v=3.13') format('woff2'), url('Inter-Medium.woff?v=3.13') format('woff'); 15 | } 16 | 17 | @font-face { 18 | font-family: 'Inter'; 19 | font-style: normal; 20 | font-weight: 600; 21 | font-display: swap; 22 | src: url('Inter-SemiBold.woff2?v=3.13') format('woff2'), url('Inter-SemiBold.woff?v=3.13') format('woff'); 23 | } 24 | 25 | @font-face { 26 | font-family: 'Inter'; 27 | font-style: normal; 28 | font-weight: 700; 29 | font-display: swap; 30 | src: url('Inter-Bold.woff2?v=3.13') format('woff2'), url('Inter-Bold.woff?v=3.13') format('woff'); 31 | } 32 | -------------------------------------------------------------------------------- /src/assets/fonts/material.css: -------------------------------------------------------------------------------- 1 | /* fallback */ 2 | @font-face { 3 | font-family: 'Material Icons Two Tone'; 4 | font-style: normal; 5 | font-weight: 400; 6 | src: url(material/material.woff2) format('woff2'); 7 | } 8 | 9 | .material-icons-two-tone { 10 | font-family: 'Material Icons Two Tone'; 11 | font-weight: normal; 12 | font-style: normal; 13 | font-size: 24px; 14 | line-height: 1; 15 | letter-spacing: normal; 16 | text-transform: none; 17 | display: inline-block; 18 | white-space: nowrap; 19 | word-wrap: normal; 20 | direction: ltr; 21 | -webkit-font-feature-settings: 'liga'; 22 | -webkit-font-smoothing: antialiased; 23 | } 24 | -------------------------------------------------------------------------------- /src/assets/fonts/material/material.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/fonts/material/material.woff2 -------------------------------------------------------------------------------- /src/assets/images/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/images/logo-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/images/logo-sm-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/images/logo-sm.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/images/user/avatar-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/images/user/avatar-2.jpg -------------------------------------------------------------------------------- /src/assets/images/widget/p1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/images/widget/p1.jpg -------------------------------------------------------------------------------- /src/assets/images/widget/p2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/images/widget/p2.jpg -------------------------------------------------------------------------------- /src/assets/images/widget/p3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/images/widget/p3.jpg -------------------------------------------------------------------------------- /src/assets/images/widget/p4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codedthemes/dashboard-kit-free-react-bootstrap-admin-template/402a8d98d440059dd71f91e3b03a0c34a678e735/src/assets/images/widget/p4.jpg -------------------------------------------------------------------------------- /src/assets/scss/react-modules/_react-rating.scss: -------------------------------------------------------------------------------- 1 | .theme-bar-block { 2 | > span { 3 | display: block; 4 | width: 12px; 5 | padding: 5px 0; 6 | height: 28px; 7 | float: left; 8 | background-color: #fbedd9; 9 | margin: 1px; 10 | text-align: center; 11 | &.active { 12 | background-color: #edb867; 13 | } 14 | } 15 | } 16 | 17 | .current-rating-block { 18 | font-size: 20px; 19 | float: left; 20 | padding: 0 20px 0 20px; 21 | color: #edb867; 22 | font-weight: 400; 23 | } 24 | 25 | .theme-bar-movie { 26 | > span { 27 | display: block; 28 | width: 60px; 29 | height: 8px; 30 | float: left; 31 | background-color: #bbcefb; 32 | margin: 1px; 33 | &.active { 34 | background-color: #4278f5; 35 | } 36 | } 37 | } 38 | 39 | .current-rating-movie { 40 | clear: both; 41 | width: 240px; 42 | text-align: center; 43 | font-weight: 600; 44 | display: block; 45 | padding: 0.5em 0; 46 | color: #4278f5; 47 | } 48 | 49 | .theme-bar-square { 50 | > span { 51 | display: block; 52 | width: 30px; 53 | height: 30px; 54 | float: left; 55 | border: 2px solid #bbcefb; 56 | background-color: white; 57 | margin: 2px; 58 | text-decoration: none; 59 | font-size: 14px; 60 | line-height: 2; 61 | text-align: center; 62 | color: #bbcefb; 63 | font-weight: 600; 64 | &.active { 65 | border: 2px solid #4278f5; 66 | color: #4278f5; 67 | } 68 | } 69 | } 70 | 71 | .pill-rating { 72 | .theme-bar-pill { 73 | > span { 74 | padding: 7px 15px; 75 | background-color: #bef5e8; 76 | color: #50e3c2; 77 | text-decoration: none; 78 | font-size: 13px; 79 | line-height: 3; 80 | text-align: center; 81 | font-weight: 400; 82 | &.active { 83 | background-color: #50e3c2; 84 | color: white; 85 | } 86 | } 87 | } 88 | > span > span { 89 | &:last-child { 90 | span { 91 | border-radius: 0 25px 25px 0; 92 | } 93 | } 94 | &:first-child { 95 | span { 96 | border-radius: 25px 0 0 25px; 97 | } 98 | } 99 | } 100 | } 101 | 102 | .reverse-rating { 103 | > span { 104 | direction: rtl !important; 105 | } 106 | .theme-bar-reverse { 107 | > span { 108 | display: block; 109 | width: 22px; 110 | height: 22px; 111 | float: left; 112 | background-color: #bef5e8; 113 | margin: 1px; 114 | font-size: 15px; 115 | font-weight: 400; 116 | line-height: 1.4; 117 | color: #50e3c2; 118 | text-align: center; 119 | &.active { 120 | background-color: #50e3c2; 121 | color: white; 122 | } 123 | } 124 | } 125 | } 126 | 127 | .current-rating-reverse { 128 | line-height: 1.3; 129 | float: left; 130 | padding: 10px 0; 131 | color: #50e3c2; 132 | font-size: 17px; 133 | font-weight: 400; 134 | width: 100%; 135 | } 136 | 137 | .horizontal-rating { 138 | width: 120px; 139 | -webkit-transform: rotate(180deg); 140 | -moz-transform: rotate(180deg); 141 | -o-transform: rotate(180deg); 142 | -ms-transform: rotate(180deg); 143 | transform: rotate(180deg); 144 | 145 | > span > span { 146 | display: block !important; 147 | } 148 | .theme-bar-horizontal { 149 | > span { 150 | display: block; 151 | width: 120px; 152 | height: 5px; 153 | background-color: #fbedd9; 154 | margin: 1px; 155 | &.active { 156 | background-color: #edb867; 157 | } 158 | } 159 | } 160 | } 161 | 162 | .current-rating-horizontal { 163 | width: 120px; 164 | font-size: 18px; 165 | font-weight: 600; 166 | line-height: 2; 167 | text-align: center; 168 | color: #edb867; 169 | } 170 | -------------------------------------------------------------------------------- /src/assets/scss/react-modules/_tooltip.scss: -------------------------------------------------------------------------------- 1 | // Base class 2 | .tooltip { 3 | position: absolute; 4 | z-index: $zindex-tooltip; 5 | display: block; 6 | margin: $tooltip-margin; 7 | // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. 8 | // So reset our font and text properties to avoid inheriting weird values. 9 | @include reset-text(); 10 | @include font-size($tooltip-font-size); 11 | // Allow breaking very long words so they don't overflow the tooltip's bounds 12 | word-wrap: break-word; 13 | opacity: 0; 14 | 15 | &.show { 16 | opacity: $tooltip-opacity; 17 | } 18 | 19 | .tooltip-arrow, 20 | .arrow { 21 | position: absolute; 22 | display: block; 23 | width: $tooltip-arrow-width; 24 | height: $tooltip-arrow-height; 25 | 26 | &::before { 27 | position: absolute; 28 | content: ''; 29 | border-color: transparent; 30 | border-style: solid; 31 | } 32 | } 33 | } 34 | 35 | .bs-tooltip-top { 36 | padding: $tooltip-arrow-height 0; 37 | 38 | .tooltip-arrow, 39 | .arrow { 40 | bottom: 0; 41 | 42 | &::before { 43 | top: -1px; 44 | border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0; 45 | border-top-color: $tooltip-arrow-color; 46 | } 47 | } 48 | } 49 | 50 | .bs-tooltip-end, 51 | .bs-tooltip-right { 52 | padding: 0 $tooltip-arrow-height; 53 | 54 | .tooltip-arrow, 55 | .arrow { 56 | left: 0; 57 | width: $tooltip-arrow-height; 58 | height: $tooltip-arrow-width; 59 | 60 | &::before { 61 | right: -1px; 62 | border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0; 63 | border-right-color: $tooltip-arrow-color; 64 | } 65 | } 66 | } 67 | 68 | .bs-tooltip-bottom { 69 | padding: $tooltip-arrow-height 0; 70 | 71 | .tooltip-arrow, 72 | .arrow { 73 | top: 0; 74 | 75 | &::before { 76 | bottom: -1px; 77 | border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height; 78 | border-bottom-color: $tooltip-arrow-color; 79 | } 80 | } 81 | } 82 | 83 | .bs-tooltip-start, 84 | .bs-tooltip-left { 85 | padding: 0 $tooltip-arrow-height; 86 | 87 | .tooltip-arrow, 88 | .arrow { 89 | right: 0; 90 | width: $tooltip-arrow-height; 91 | height: $tooltip-arrow-width; 92 | 93 | &::before { 94 | left: -1px; 95 | border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height; 96 | border-left-color: $tooltip-arrow-color; 97 | } 98 | } 99 | } 100 | 101 | .bs-tooltip-auto { 102 | &[data-popper-placement^='top'] { 103 | @extend .bs-tooltip-top; 104 | } 105 | &[data-popper-placement^='right'] { 106 | @extend .bs-tooltip-end; 107 | } 108 | &[data-popper-placement^='bottom'] { 109 | @extend .bs-tooltip-bottom; 110 | } 111 | &[data-popper-placement^='left'] { 112 | @extend .bs-tooltip-start; 113 | } 114 | } 115 | 116 | // Wrapper for the tooltip content 117 | .tooltip-inner { 118 | max-width: $tooltip-max-width; 119 | padding: $tooltip-padding-y $tooltip-padding-x; 120 | color: $tooltip-color; 121 | text-align: center; 122 | background-color: $tooltip-bg; 123 | @include border-radius($tooltip-border-radius); 124 | } 125 | -------------------------------------------------------------------------------- /src/assets/scss/settings/_theme-variables.scss: -------------------------------------------------------------------------------- 1 | // ======================================= 2 | // List of variables for layout 3 | // ======================================= 4 | 5 | $header-height: 70px; 6 | $sidebar-width: 280px; 7 | $sidebar-collapsed-width: 70px; 8 | 9 | // header 10 | $header-background: #fff; 11 | $header-color: #525b69; 12 | $header-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08); 13 | $brand-color: #161c25; 14 | 15 | // Menu 16 | $sidebar-background: #1c232f; 17 | $sidebar-color: #ced4dc; 18 | $sidebar-icon-color: #778290; 19 | $sidebar-active-color: #fff; 20 | $sidebar-caption: $primary; 21 | $sidebar-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08); 22 | 23 | // horizontal menu 24 | $topbar-height: 60px; 25 | $topbar-background: #1c232f; 26 | $topbar-color: #b5bdca; 27 | $header-submenu-background: #fff; 28 | $header-submenu-color: #1c232f; 29 | 30 | // card block 31 | $card-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.1); 32 | 33 | $soft-bg-level: -80%; 34 | -------------------------------------------------------------------------------- /src/assets/scss/settings/dark/_theme-variables.scss: -------------------------------------------------------------------------------- 1 | // ======================================= 2 | // List of variables for layout 3 | // ======================================= 4 | 5 | $header-height: 70px; 6 | $sidebar-width: 280px; 7 | $sidebar-collapsed-width: 70px; 8 | 9 | // header 10 | $header-background: #161c25; 11 | $header-color: #ced4dc; 12 | $header-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08); 13 | $brand-color: #161c25; 14 | 15 | // Menu 16 | $sidebar-background: #1c232f; 17 | $sidebar-color: #ced4dc; 18 | $sidebar-icon-color: #b3aee4; 19 | $sidebar-active-color: #fff; 20 | $sidebar-caption: $primary; 21 | $sidebar-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08); 22 | 23 | // horizontal menu 24 | $topbar-height: 60px; 25 | $topbar-background: #1c232f; 26 | $topbar-color: #b5bdca; 27 | $header-submenu-background: #fff; 28 | $header-submenu-color: #1c232f; 29 | 30 | // card block 31 | $card-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.1); 32 | 33 | $soft-bg-level: -80%; 34 | -------------------------------------------------------------------------------- /src/assets/scss/themes/components/_badge.scss: -------------------------------------------------------------------------------- 1 | // ============================ 2 | // Badge css start 3 | // ============================ 4 | 5 | .badge { 6 | @each $color, $value in $theme-colors { 7 | &-#{$color} { 8 | background: $value; 9 | } 10 | } 11 | @each $color, $value in $theme-colors { 12 | &.badge-light-#{$color} { 13 | background: shift-color($value, $soft-bg-level); 14 | color: $value; 15 | border-color: shift-color($value, $soft-bg-level); 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/assets/scss/themes/components/_button.scss: -------------------------------------------------------------------------------- 1 | // ============================ 2 | // Button css start 3 | // ============================ 4 | 5 | .btn { 6 | font-size: 14px; 7 | text-transform: capitalize; 8 | 9 | i { 10 | font-size: 18px; 11 | } 12 | 13 | svg { 14 | width: 18px; 15 | height: 18px; 16 | } 17 | 18 | &[class*='btn-light-'] { 19 | box-shadow: none; 20 | } 21 | 22 | &[class*='btn-outline-']:not(:hover) { 23 | box-shadow: none; 24 | } 25 | 26 | &.btn-shadow { 27 | box-shadow: 0 6px 7px -1px rgba(80, 86, 175, 0.3); 28 | } 29 | 30 | &.btn-sm { 31 | i { 32 | font-size: 14px; 33 | } 34 | } 35 | } 36 | @each $color, $value in $theme-colors { 37 | .btn-light-#{$color} { 38 | background: shift-color($value, $soft-bg-level); 39 | color: $value; 40 | border-color: shift-color($value, $soft-bg-level); 41 | 42 | &:hover { 43 | background: $value; 44 | color: #fff; 45 | border-color: $value; 46 | } 47 | 48 | &.focus, 49 | &:focus { 50 | background: $value; 51 | color: #fff; 52 | border-color: $value; 53 | } 54 | 55 | &:not(:disabled):not(.disabled).active, 56 | &:not(:disabled):not(.disabled):active, 57 | .show > &.dropdown-toggle { 58 | background: $value; 59 | color: #fff; 60 | border-color: $value; 61 | } 62 | } 63 | 64 | .btn-check:active, 65 | .btn-check:checked { 66 | + .btn-light-#{$color} { 67 | background: $value; 68 | color: #fff; 69 | border-color: $value; 70 | } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /src/assets/scss/themes/components/_card.scss: -------------------------------------------------------------------------------- 1 | // ============================ 2 | // Card css start 3 | // ============================ 4 | 5 | .card { 6 | box-shadow: $card-shadow; 7 | margin-bottom: 24px; 8 | transition: box-shadow 0.2s ease-in-out; 9 | 10 | .card-header { 11 | border-bottom: 1px solid $border-color; 12 | 13 | h5 { 14 | margin-bottom: 0; 15 | color: #525f71; 16 | font: { 17 | size: 14px; 18 | weight: 600; 19 | } 20 | 21 | + p, 22 | + small { 23 | margin-top: 10px; 24 | 25 | &:last-child { 26 | margin-bottom: 0; 27 | } 28 | } 29 | } 30 | .card-header-right { 31 | right: 10px; 32 | top: 10px; 33 | display: inline-block; 34 | float: right; 35 | padding: 0; 36 | position: absolute; 37 | @media only screen and (max-width: 575px) { 38 | display: none; 39 | } 40 | 41 | .dropdown-menu { 42 | margin-top: 0; 43 | 44 | li { 45 | cursor: pointer; 46 | 47 | a { 48 | font-size: 14px; 49 | text-transform: capitalize; 50 | } 51 | } 52 | } 53 | 54 | .btn.dropdown-toggle { 55 | border: none; 56 | background: transparent; 57 | box-shadow: none; 58 | color: #888; 59 | 60 | i { 61 | margin-right: 0; 62 | } 63 | 64 | &:after { 65 | display: none; 66 | } 67 | 68 | &:focus { 69 | box-shadow: none; 70 | outline: none; 71 | } 72 | } 73 | // custom toggler 74 | .btn.dropdown-toggle { 75 | border: none; 76 | background: transparent; 77 | box-shadow: none; 78 | padding: 0; 79 | width: 20px; 80 | height: 20px; 81 | right: 8px; 82 | top: 8px; 83 | 84 | &.mobile-menu span { 85 | background-color: #888; 86 | height: 2px; 87 | border-radius: 5px; 88 | 89 | &:after, 90 | &:before { 91 | border-radius: 5px; 92 | height: 2px; 93 | background-color: #888; 94 | } 95 | } 96 | } 97 | 98 | .nav-pills { 99 | padding: 0; 100 | box-shadow: none; 101 | background: transparent; 102 | } 103 | } 104 | } 105 | 106 | .card-footer { 107 | transition: box-shadow 0.2s ease-in-out; 108 | border-top: 1px solid $border-color; 109 | } 110 | 111 | &:hover { 112 | .card-footer[class*='bg-'] { 113 | box-shadow: none; 114 | } 115 | } 116 | @each $color, $value in $theme-colors { 117 | // .card-footer.bg-#{$color}, 118 | &.bg-#{$color} { 119 | box-shadow: 0 9px 9px -1px transparentize($value, 0.7); 120 | } 121 | } 122 | } 123 | @include media-breakpoint-down(sm) { 124 | .card { 125 | margin-bottom: 20px; 126 | } 127 | } 128 | // Card css end 129 | -------------------------------------------------------------------------------- /src/assets/scss/themes/components/_dropdown.scss: -------------------------------------------------------------------------------- 1 | // ============================ 2 | // dropdown css start 3 | // ============================ 4 | 5 | .dropdown-toggle { 6 | &.drp-icon, 7 | &.arrow-none { 8 | &:after { 9 | display: none; 10 | } 11 | } 12 | } 13 | 14 | .dropdown-menu { 15 | padding: 15px 0; 16 | box-shadow: 0 4px 24px 0 rgba(62, 57, 107, 0.18); 17 | border: none; 18 | border-radius: 2px; 19 | } 20 | 21 | .pc-header { 22 | .dropdown-menu { 23 | animation: 0.4s ease-in-out 0s normal forwards 1 fadein; 24 | } 25 | } 26 | @keyframes fadein { 27 | from { 28 | transform: translate3d(0, 8px, 0); 29 | opacity: 0; 30 | } 31 | 32 | to { 33 | transform: translate3d(0, 0, 0); 34 | opacity: 1; 35 | } 36 | } 37 | 38 | .dropdown .dropdown-item { 39 | &.active, 40 | &:active, 41 | &:focus, 42 | &:hover { 43 | i { 44 | &.material-icons-two-tone { 45 | background-color: $dropdown-link-hover-color; 46 | } 47 | } 48 | } 49 | } 50 | 51 | .dropdown { 52 | .dropdown-item { 53 | padding: 10px 25px; 54 | 55 | i { 56 | font-size: 18px; 57 | margin-right: 10px; 58 | 59 | &.material-icons-two-tone { 60 | vertical-align: bottom; 61 | font-size: 22px; 62 | background-color: $header-color; 63 | } 64 | } 65 | 66 | svg { 67 | width: 18px; 68 | height: 18px; 69 | margin-right: 10px; 70 | fill: #f2f2f2; 71 | } 72 | 73 | .float-right { 74 | svg { 75 | width: 14px; 76 | height: 14px; 77 | } 78 | } 79 | } 80 | } 81 | // dropdown css end 82 | -------------------------------------------------------------------------------- /src/assets/scss/themes/components/_table.scss: -------------------------------------------------------------------------------- 1 | // ============================ 2 | // Table css start 3 | // ============================ 4 | 5 | .table { 6 | &.table-align-center { 7 | td, 8 | th { 9 | vertical-align: middle; 10 | } 11 | } 12 | thead th { 13 | padding: 0.9rem 0.75rem; 14 | } 15 | td, 16 | th { 17 | vertical-align: middle; 18 | } 19 | &.table-borderless { 20 | td, 21 | th { 22 | border: none !important; 23 | } 24 | } 25 | } 26 | 27 | .table-hover tbody tr:hover { 28 | background-color: transparentize($primary, 0.97); 29 | } 30 | -------------------------------------------------------------------------------- /src/assets/scss/themes/pages/_icon-lauouts.scss: -------------------------------------------------------------------------------- 1 | /** ===================== 2 | Icon layouts css start 3 | ========================== **/ 4 | 5 | .i-main { 6 | .i-block { 7 | display: inline-flex; 8 | align-items: center; 9 | justify-content: center; 10 | width: 70px; 11 | height: 70px; 12 | margin: 5px; 13 | border: 1px solid $border-color; 14 | position: relative; 15 | cursor: pointer; 16 | 17 | i { 18 | font-size: 30px; 19 | } 20 | 21 | label { 22 | margin-bottom: 0; 23 | display: none; 24 | } 25 | 26 | span.ic-badge { 27 | position: absolute; 28 | bottom: 0; 29 | right: 0; 30 | } 31 | } 32 | } 33 | /**====== Icon layouts css end ======**/ 34 | -------------------------------------------------------------------------------- /src/components/Card/MainCard.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | // react-bootstrap 4 | import { Dropdown, Card, Collapse } from 'react-bootstrap'; 5 | 6 | // third party 7 | import { Link } from 'react-router-dom'; 8 | import PropTypes from 'prop-types'; 9 | 10 | // project imports 11 | import useWindowSize from 'hooks/useWindowSize'; 12 | 13 | // -----------------------|| MAIN CARD ||-----------------------// 14 | function MainCard({ isOption, title, children, cardClass, optionClass }) { 15 | const [fullCard, setFullCard] = useState(false); 16 | const [collapseCard, setCollapseCard] = useState(false); 17 | const [loadCard, setloadCard] = useState(false); 18 | const [cardRemove, setCardRemove] = useState(false); 19 | 20 | const windowSize = useWindowSize(); 21 | 22 | const cardReloadHandler = () => { 23 | setloadCard(true); 24 | setInterval(() => { 25 | setloadCard(false); 26 | }, 3000); 27 | }; 28 | 29 | const cardRemoveHandler = () => { 30 | setCardRemove(true); 31 | }; 32 | 33 | let loader; 34 | let cardHeaderRight = <>; 35 | let cardHeader = <>; 36 | let mainCardClass = []; 37 | 38 | if (isOption) { 39 | cardHeaderRight = ( 40 |
41 | 42 | 43 | 44 | 45 | 46 | setFullCard(!fullCard)}> 47 | 48 | {fullCard ? 'Restore' : 'Maximize'} 49 | 50 | setCollapseCard(!collapseCard)}> 51 | 52 | {collapseCard ? 'Expand' : 'Collapse'} 53 | 54 | 55 | 56 | Reload 57 | 58 | 59 | 60 | Remove 61 | 62 | 63 | 64 |
65 | ); 66 | } 67 | 68 | cardHeader = ( 69 | 70 | {title} 71 | {cardHeaderRight} 72 | 73 | ); 74 | 75 | if (fullCard) { 76 | mainCardClass = [...mainCardClass, 'full-card']; 77 | } 78 | 79 | if (loadCard) { 80 | mainCardClass = [...mainCardClass, 'card-load']; 81 | loader = ( 82 |
83 | 84 |
85 | ); 86 | } 87 | 88 | if (cardRemove) { 89 | mainCardClass = [...mainCardClass, 'd-none']; 90 | } 91 | 92 | if (cardClass) { 93 | mainCardClass = [...mainCardClass, cardClass]; 94 | } 95 | 96 | return fullCard ? ( 97 | 101 | {cardHeader} 102 | 103 |
104 | {children} 105 |
106 | 107 | {loader} 108 | 109 | ) : ( 110 | 111 | {cardHeader} 112 | 113 |
114 | {children} 115 |
116 | 117 | {loader} 118 | 119 | ); 120 | } 121 | 122 | MainCard.propTypes = { 123 | isOption: PropTypes.bool, 124 | title: PropTypes.string.isRequired, 125 | children: PropTypes.node.isRequired, 126 | cardClass: PropTypes.string, 127 | optionClass: PropTypes.string 128 | }; 129 | 130 | export default MainCard; 131 | -------------------------------------------------------------------------------- /src/components/Loader/Bar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // third party 4 | import PropTypes from 'prop-types'; 5 | 6 | // -----------------------|| BAR ||-----------------------// 7 | const Bar = ({ animationDuration, progress }) => ( 8 |
21 |
33 |
34 | ); 35 | 36 | Bar.propTypes = { 37 | animationDuration: PropTypes.number.isRequired, 38 | progress: PropTypes.number.isRequired 39 | }; 40 | 41 | export default Bar; 42 | -------------------------------------------------------------------------------- /src/components/Loader/Container.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // third party 4 | import PropTypes from 'prop-types'; 5 | 6 | // -----------------------|| CONTAINER ||-----------------------// 7 | const Container = ({ animationDuration, children, isFinished }) => ( 8 |
15 | {children} 16 |
17 | ); 18 | 19 | Container.propTypes = { 20 | animationDuration: PropTypes.number.isRequired, 21 | children: PropTypes.node.isRequired, 22 | isFinished: PropTypes.bool.isRequired 23 | }; 24 | 25 | export default Container; 26 | -------------------------------------------------------------------------------- /src/components/Loader/Loader.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // project imports 4 | import Progress from './Progress'; 5 | 6 | // -----------------------|| LOADER ||-----------------------// 7 | const Loader = () => ; 8 | 9 | export default Loader; 10 | -------------------------------------------------------------------------------- /src/components/Loader/Progress.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // third party 4 | import { useNProgress } from '@tanem/react-nprogress'; 5 | import PropTypes from 'prop-types'; 6 | 7 | // project imports 8 | import Bar from './Bar'; 9 | import Container from './Container'; 10 | import Spinner from './Spinner'; 11 | 12 | // -----------------------|| PROGRESS ||-----------------------// 13 | const Progress = ({ isAnimating }) => { 14 | const { animationDuration, isFinished, progress } = useNProgress({ 15 | isAnimating 16 | }); 17 | 18 | return ( 19 | 20 | 21 | 22 | 23 | ); 24 | }; 25 | 26 | Progress.propTypes = { 27 | isAnimating: PropTypes.bool.isRequired 28 | }; 29 | 30 | export default Progress; 31 | -------------------------------------------------------------------------------- /src/components/Loader/Spinner.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Spinner = () => ( 4 |
13 |
26 |
27 | ); 28 | 29 | export default Spinner; 30 | -------------------------------------------------------------------------------- /src/components/Modal/AnimatedModal.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // third party 4 | import Rodal from 'rodal'; 5 | import 'rodal/lib/rodal.css'; 6 | import PropTypes from 'prop-types'; 7 | 8 | // -----------------------|| ANIMATED MODAL ||-----------------------// 9 | const AnimatedModal = ({ visible, onClose, animation, children }) => ( 10 | 11 | {children} 12 | 13 | ); 14 | 15 | AnimatedModal.propTypes = { 16 | visible: PropTypes.bool.isRequired, 17 | onClose: PropTypes.func.isRequired, 18 | animation: PropTypes.string.isRequired, 19 | children: PropTypes.node.isRequired 20 | }; 21 | 22 | export default AnimatedModal; 23 | -------------------------------------------------------------------------------- /src/components/Notifications/BasicNotifications.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // react-bootstrap 4 | import { Alert, Button } from 'react-bootstrap'; 5 | 6 | // third party 7 | import { ToastProvider, ToastConsumer } from 'react-toast-notifications'; 8 | import PropTypes from 'prop-types'; 9 | 10 | const AlertMessage = ({ appearance, children, onDismiss }) => ( 11 | 12 | {children} 13 | 14 | ); 15 | 16 | // -----------------------|| BASIC NOTIFICATIONS ||-----------------------// 17 | const BasicNotifications = ({ appearance, placement, autoDismiss, message, buttonLabel }) => ( 18 | 19 | 20 | {({ add }) => ( 21 | 23 | add(message, { 24 | appearance, 25 | autoDismiss 26 | }) 27 | } 28 | aria-hidden="true" 29 | > 30 | 31 | 32 | )} 33 | 34 | 35 | ); 36 | 37 | BasicNotifications.propTypes = { 38 | appearance: PropTypes.string.isRequired, 39 | placement: PropTypes.string.isRequired, 40 | autoDismiss: PropTypes.bool.isRequired, 41 | message: PropTypes.string.isRequired, 42 | buttonLabel: PropTypes.string.isRequired 43 | }; 44 | 45 | export default BasicNotifications; 46 | -------------------------------------------------------------------------------- /src/components/Widgets/FeedTable.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // react-bootstrap 4 | import { Row, Col, Card } from 'react-bootstrap'; 5 | 6 | // third party 7 | import { Link } from 'react-router-dom'; 8 | import PerfectScrollbar from 'react-perfect-scrollbar'; 9 | import PropTypes from 'prop-types'; 10 | 11 | // -----------------------|| FEED CARD ||-----------------------// 12 | const FeedCard = ({ wrapclass, title, height, options }) => ( 13 | 14 | 15 | {title} 16 | 17 |
18 | 19 | 20 | {options.map((x, i) => ( 21 | 22 | 23 | 28 | 29 | 30 | 31 |
32 | {x.heading} {x.publishon} 33 |
34 | 35 | 36 | 37 | ))} 38 | 39 | 40 |
41 | 42 | ); 43 | 44 | FeedCard.propTypes = { 45 | wrapclass: PropTypes.string.isRequired, 46 | title: PropTypes.string.isRequired, 47 | height: PropTypes.string.isRequired, 48 | options: PropTypes.array.isRequired 49 | }; 50 | 51 | export default FeedCard; 52 | -------------------------------------------------------------------------------- /src/components/Widgets/ProductTable.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // react-bootstrap 4 | import { Card, Table } from 'react-bootstrap'; 5 | 6 | // third party 7 | import { Link } from 'react-router-dom'; 8 | import PerfectScrollbar from 'react-perfect-scrollbar'; 9 | import PropTypes from 'prop-types'; 10 | 11 | // -----------------------|| PRODUCT TABLE ||-----------------------// 12 | const ProductTable = ({ wrapclass, title, height, tableheading, rowdata }) => ( 13 | 14 | 15 | {title} 16 | 17 | 18 | 19 | 20 | 21 | 22 | {tableheading.map((x, i) => ( 23 | 24 | ))} 25 | 26 | 27 | 28 | {rowdata.map((y, j) => ( 29 | 30 | 31 | 32 | 37 | 38 | 45 | 46 | ))} 47 | 48 |
{x}
{y.name}{y.image} 33 |
34 | 35 |
36 | 		{y.price} 39 | {y.action.map((z, k) => ( 40 | 41 | 0 ? 'ms-3' : ''}`} /> 42 | 43 | ))} 44 |
49 | 50 | 51 | 52 | ); 53 | 54 | ProductTable.propTypes = { 55 | wrapclass: PropTypes.string.isRequired, 56 | title: PropTypes.string.isRequired, 57 | height: PropTypes.string.isRequired, 58 | tableheading: PropTypes.array.isRequired, 59 | rowdata: PropTypes.array.isRequired 60 | }; 61 | 62 | export default ProductTable; 63 | -------------------------------------------------------------------------------- /src/components/Widgets/Statistic/FlatCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // react-bootstrap 4 | import { Row, Col } from 'react-bootstrap'; 5 | 6 | // third party 7 | import PropTypes from 'prop-types'; 8 | 9 | // -----------------------|| FLAT CARD ||-----------------------// 10 | const FlatCard = ({ params }) => { 11 | let iconClass = ['material-icons-two-tone']; 12 | if (params.icon && params.iconClass) { 13 | iconClass = [...iconClass, params.iconClass]; 14 | } 15 | 16 | return ( 17 | 18 | 19 | {params.icon} 20 | 21 | 22 |
{params.value}
23 | {params.title} 24 | 25 | 26 | ); 27 | }; 28 | 29 | FlatCard.propTypes = { 30 | params: PropTypes.object.isRequired 31 | }; 32 | 33 | export default FlatCard; 34 | -------------------------------------------------------------------------------- /src/components/Widgets/Statistic/IcoCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // react-bootstrap 4 | import { Col, Card } from 'react-bootstrap'; 5 | 6 | // third party 7 | import { Link } from 'react-router-dom'; 8 | import PropTypes from 'prop-types'; 9 | 10 | // -----------------------|| ICO CARD ||-----------------------// 11 | const IcoCard = ({ icon, title, caption, category, totalAmount, amount, percentage, time }) => { 12 | let iconClass = ['cc f-36 mr-3']; 13 | if (icon) { 14 | iconClass = [...iconClass, icon]; 15 | } 16 | 17 | return ( 18 | 19 | 20 | 21 |
22 | {icon && ( 23 |
24 | 25 | 26 | 27 |
28 | )} 29 |
30 |

{title}

31 | {caption} 32 |
33 |
34 |
35 |
36 |

37 | {amount} / {totalAmount} 38 |

39 |

{category}

40 |
41 |
42 |

43 | {percentage} 44 |

45 |

{time}

46 |
47 |
48 | 49 | 50 | 51 | ); 52 | }; 53 | 54 | IcoCard.propTypes = { 55 | icon: PropTypes.string.isRequired, 56 | title: PropTypes.string.isRequired, 57 | caption: PropTypes.string.isRequired, 58 | category: PropTypes.string.isRequired, 59 | totalAmount: PropTypes.string.isRequired, 60 | amount: PropTypes.string.isRequired, 61 | percentage: PropTypes.string.isRequired, 62 | time: PropTypes.string.isRequired 63 | }; 64 | 65 | export default IcoCard; 66 | -------------------------------------------------------------------------------- /src/components/Widgets/Statistic/NotificationCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // react-bootstrap 4 | import { Card, Row, Col } from 'react-bootstrap'; 5 | 6 | // third party 7 | import PropTypes from 'prop-types'; 8 | 9 | // -----------------------|| NOTIFICATION CARD ||-----------------------// 10 | const NotificationCard = ({ params }) => { 11 | let cardClass = ['notification-card feed-card']; 12 | if (params.class) { 13 | cardClass = [...cardClass, params.class]; 14 | } 15 | 16 | return ( 17 | 18 | 19 | 20 | 21 | {params.iconClass} 22 | 23 | 24 |
25 |

{params.primaryText}

26 |

27 | {params.secondaryText} {params.secondarySubText} 28 |

29 |
30 | 31 | 32 | 33 | 34 | ); 35 | }; 36 | 37 | NotificationCard.propTypes = { 38 | params: PropTypes.object.isRequired 39 | }; 40 | 41 | export default NotificationCard; 42 | -------------------------------------------------------------------------------- /src/components/Widgets/Statistic/OrderCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // react-bootstrap 4 | import { Card } from 'react-bootstrap'; 5 | 6 | // third party 7 | import PropTypes from 'prop-types'; 8 | 9 | // -----------------------|| ORDER CARD ||-----------------------// 10 | const OrderCard = ({ params }) => { 11 | let bgClass = 'bg-primary'; 12 | if (params.variant) { 13 | bgClass = `bg-${params.variant}`; 14 | } 15 | 16 | return ( 17 | 18 | 19 |
{params.title}
20 |

{params.value}

21 |

22 | {params.subValue1} 23 | {params.subValue2} 24 |

25 | {params.icon} 26 | 27 | 28 | ); 29 | }; 30 | 31 | OrderCard.propTypes = { 32 | params: PropTypes.object.isRequired 33 | }; 34 | 35 | export default OrderCard; 36 | -------------------------------------------------------------------------------- /src/components/Widgets/Statistic/OrderVisitorCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // react-bootstrap 4 | import { Card } from 'react-bootstrap'; 5 | 6 | // third party 7 | import PropTypes from 'prop-types'; 8 | 9 | // -----------------------|| ORDER VISITOR CARD ||-----------------------// 10 | const OrderVisitorCard = ({ params }) => ( 11 | 12 | 13 |
{params.title}
14 |

15 | 16 | {params.value} 17 |

18 |

19 | {params.subValue1} {params.subValue2}{' '} 20 |

21 | 22 | 23 | ); 24 | 25 | OrderVisitorCard.propTypes = { 26 | params: PropTypes.object.isRequired 27 | }; 28 | 29 | export default OrderVisitorCard; 30 | -------------------------------------------------------------------------------- /src/components/Widgets/Statistic/ProductCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // react-bootstrap 4 | import { Card, Row, Col } from 'react-bootstrap'; 5 | 6 | // third party 7 | import PropTypes from 'prop-types'; 8 | 9 | // -----------------------|| PRODUCT CARD ||-----------------------// 10 | const ProductCard = ({ params }) => { 11 | let cardClass = ['prod-p-card']; 12 | let iconClass = 'text-primary'; 13 | let textClass = ''; 14 | if (params.variant) { 15 | cardClass = [...cardClass, `bg-${params.variant}`]; 16 | textClass = 'text-white'; 17 | iconClass = 'text-white'; 18 | } 19 | 20 | let rowClass = ['align-items-center']; 21 | if (params.secondaryText) { 22 | rowClass = [...rowClass, 'm-b-25']; 23 | } 24 | 25 | return ( 26 | 27 | 28 | 29 | 30 |
{params.title}
31 |

{params.primaryText}

32 | 33 | 34 | {params.icon} 35 | 36 | 37 |

{params.secondaryText}

38 | 39 | 40 | ); 41 | }; 42 | 43 | ProductCard.propTypes = { 44 | params: PropTypes.object.isRequired 45 | }; 46 | 47 | export default ProductCard; 48 | -------------------------------------------------------------------------------- /src/components/Widgets/Statistic/StatisticBlink.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // react-bootstrap 4 | import { Card, ProgressBar } from 'react-bootstrap'; 5 | 6 | // third party 7 | import PropTypes from 'prop-types'; 8 | 9 | // -----------------------|| STATISTIC BLINK ||-----------------------// 10 | const StatisticBlink = ({ params }) => ( 11 | 12 | 13 |
{params.title}
14 | {params.primaryText} 15 |

{params.secondaryText}

16 | 17 | 18 | {params.footerText && ( 19 | 20 |
{params.footerText}
21 | 22 | )} 23 | 24 | ); 25 | 26 | StatisticBlink.propTypes = { 27 | params: PropTypes.object.isRequired 28 | }; 29 | 30 | export default StatisticBlink; 31 | -------------------------------------------------------------------------------- /src/components/Widgets/Statistic/SubscribeCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // react-bootstrap 4 | import { Card, Button } from 'react-bootstrap'; 5 | 6 | // third party 7 | import PropTypes from 'prop-types'; 8 | 9 | // -----------------------|| SUBSCRIBE CARD ||-----------------------// 10 | const SubscribeCard = ({ params }) => { 11 | let iconClass = ['feather d-block f-40']; 12 | if (params.iconClass) { 13 | iconClass = [...iconClass, `text-${params.variant}`, params.iconClass]; 14 | } 15 | 16 | return ( 17 | 18 | 19 | 20 |

21 | {params.primaryText} {params.primarySubText} 22 |

23 |

{params.secondaryText}

24 | 27 | 28 | 29 | ); 30 | }; 31 | 32 | SubscribeCard.propTypes = { 33 | params: PropTypes.object.isRequired 34 | }; 35 | 36 | export default SubscribeCard; 37 | -------------------------------------------------------------------------------- /src/config/constant.js: -------------------------------------------------------------------------------- 1 | // imports from project 2 | export const BASENAME = '/react/free'; 3 | export const BASE_URL = '/dashboard/sales'; 4 | export const BASE_TITLE = ' | DashboardKit Bootstrap 5 Free Admin Template'; 5 | 6 | // -----------------------|| Application default Configuration ||-----------------------// 7 | export const CONFIG = { 8 | layout: 'vertical', // vertical, horizontal 9 | collapseMenu: false, // true for mini-menu 10 | layoutType: 'dark-sidebar', // light-sidebar 11 | pageType: '', // app-dark-mode 12 | colorBrand: '', // bg-primary, bg-danger, bg-warning, bg-info, bg-success, bg-dark 13 | headerBackColor: '' // bg-primary, bg-danger, bg-warning, bg-info, bg-success, bg-dark 14 | }; 15 | -------------------------------------------------------------------------------- /src/data/feedData.js: -------------------------------------------------------------------------------- 1 | // Feed data to display in card widget 2 | 3 | const FeedData = { 4 | wrapclass: 'feed-card', 5 | height: '385px', 6 | title: 'Feeds', 7 | options: [ 8 | { 9 | icon: 'bell', 10 | heading: 'You have 3 pending tasks.', 11 | publishon: 'Just Now', 12 | link: '#' 13 | }, 14 | { 15 | icon: 'shopping-cart', 16 | bgclass: 'light-primary', 17 | heading: 'New order received', 18 | publishon: '30 min ago' 19 | }, 20 | { 21 | icon: 'file-text', 22 | heading: 'You have 3 pending tasks.', 23 | publishon: 'Just Now', 24 | link: '/sales' 25 | }, 26 | { 27 | icon: 'bell', 28 | heading: 'You have 3 pending tasks.', 29 | publishon: 'Just Now' 30 | }, 31 | { 32 | icon: 'shopping-cart', 33 | bgclass: 'light-primary', 34 | heading: 'You have 4 tasks Done.', 35 | publishon: '30 min ago' 36 | }, 37 | { 38 | icon: 'file-text', 39 | heading: 'You have 3 pending tasks.', 40 | publishon: 'Just Now' 41 | }, 42 | { 43 | icon: 'bell', 44 | heading: 'You have 3 pending tasks.', 45 | publishon: 'Just Now', 46 | link: '#' 47 | }, 48 | { 49 | icon: 'shopping-cart', 50 | bgclass: 'light-primary', 51 | heading: 'New order received', 52 | publishon: '30 min ago' 53 | }, 54 | { 55 | icon: 'file-text', 56 | heading: 'You have 3 pending tasks.', 57 | publishon: 'Just Now', 58 | link: '/sales' 59 | }, 60 | { 61 | icon: 'bell', 62 | heading: 'You have 3 pending tasks.', 63 | publishon: 'Just Now' 64 | }, 65 | { 66 | icon: 'shopping-cart', 67 | bgclass: 'light-primary', 68 | heading: 'You have 4 tasks Done.', 69 | publishon: '30 min ago' 70 | }, 71 | { 72 | icon: 'file-text', 73 | heading: 'You have 3 pending tasks.', 74 | publishon: 'Just Now' 75 | } 76 | ] 77 | }; 78 | 79 | export default FeedData; 80 | -------------------------------------------------------------------------------- /src/data/tableData.js: -------------------------------------------------------------------------------- 1 | // third party 2 | import namor from 'namor'; 3 | 4 | // project imports 5 | import { range } from 'utils/helper'; 6 | 7 | const newPerson = () => { 8 | const statusChance = Math.random(); 9 | const getStatus = () => { 10 | if (statusChance > 0.66) { 11 | return 'relationship'; 12 | } 13 | if (statusChance > 0.33) { 14 | return 'complicated'; 15 | } 16 | return 'single'; 17 | }; 18 | 19 | return { 20 | firstName: namor.generate({ words: 1, numbers: 0 }), 21 | lastName: namor.generate({ words: 1, numbers: 0 }), 22 | age: Math.floor(Math.random() * 30), 23 | visits: Math.floor(Math.random() * 100), 24 | progress: Math.floor(Math.random() * 100), 25 | status: getStatus() 26 | }; 27 | }; 28 | 29 | export default function makeData(lens) { 30 | const count = [lens]; 31 | 32 | const makeDataLevel = (depth = 0) => { 33 | const len = count[depth]; 34 | return range(len).map(() => ({ 35 | ...newPerson(), 36 | subRows: count[depth + 1] ? makeDataLevel(depth + 1) : undefined 37 | })); 38 | }; 39 | 40 | return makeDataLevel(); 41 | } 42 | 43 | export const TableData = [ 44 | { 45 | id: 1, 46 | firstName: 'Mark', 47 | lastName: 'Otto', 48 | username: '@mdo' 49 | }, 50 | { 51 | id: 2, 52 | firstName: 'Jacob', 53 | lastName: 'Thornton', 54 | username: '@fat' 55 | }, 56 | { 57 | id: 3, 58 | firstName: 'Larry', 59 | lastName: 'the Bird', 60 | username: '@twitter' 61 | }, 62 | { 63 | id: 4, 64 | firstName: 'Larry', 65 | lastName: 'the Bird', 66 | username: '@twitter' 67 | } 68 | ]; 69 | -------------------------------------------------------------------------------- /src/hooks/useOutsideClick.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | 3 | const useOutsideClick = (ref, callback) => { 4 | const handleClick = (e) => { 5 | if (ref.current && !ref.current.contains(e.target)) { 6 | callback(); 7 | } 8 | }; 9 | 10 | useEffect(() => { 11 | document.addEventListener('click', handleClick); 12 | return () => { 13 | document.removeEventListener('click', handleClick); 14 | }; 15 | }); 16 | }; 17 | 18 | export default useOutsideClick; 19 | -------------------------------------------------------------------------------- /src/hooks/useWindowSize.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | 3 | const useWindowSize = () => { 4 | const [windowSize, setWindowSize] = useState({ 5 | width: 0, 6 | height: 0 7 | }); 8 | 9 | useEffect(() => { 10 | function handleResize() { 11 | setWindowSize({ 12 | width: window.innerWidth, 13 | height: window.innerHeight 14 | }); 15 | } 16 | window.addEventListener('resize', handleResize); 17 | handleResize(); 18 | 19 | return () => window.removeEventListener('resize', handleResize); 20 | }, []); 21 | 22 | return windowSize; 23 | }; 24 | 25 | export default useWindowSize; 26 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // polyfill for legacy browsers 4 | import 'react-app-polyfill/ie11'; 5 | import 'react-app-polyfill/stable'; 6 | 7 | // third party 8 | import ReactDOM from 'react-dom'; 9 | import { ConfigProvider } from './contexts/ConfigContext'; 10 | 11 | // project imports 12 | import App from './App'; 13 | import reportWebVitals from './reportWebVitals'; 14 | 15 | // style + assets 16 | import './index.scss'; 17 | 18 | // -----------------------|| REACT DOM RENDER ||-----------------------// 19 | ReactDOM.render( 20 | 21 | 22 | , 23 | document.getElementById('root') 24 | ); 25 | 26 | reportWebVitals(); 27 | -------------------------------------------------------------------------------- /src/index.scss: -------------------------------------------------------------------------------- 1 | // Default Style 2 | @import 'assets/scss/style'; 3 | -------------------------------------------------------------------------------- /src/layouts/AdminLayout/Breadcrumb/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | 3 | // react-bootstrap 4 | import { ListGroup, Row, Col, Button, Dropdown } from 'react-bootstrap'; 5 | 6 | // third party 7 | import { Link } from 'react-router-dom'; 8 | import FeatherIcon from 'feather-icons-react'; 9 | 10 | // project imports 11 | import navigation from 'menu-items'; 12 | import { BASE_TITLE, BASENAME } from 'config/constant'; 13 | 14 | // -----------------------|| BREADCRUMB ||-----------------------// 15 | const Breadcrumb = () => { 16 | const [main, setMain] = useState({}); 17 | const [item, setItem] = useState({}); 18 | const getCollapse = (items) => { 19 | if (items.children) { 20 | items.children.filter((collapse) => { 21 | if (collapse.type && collapse.type === 'collapse') { 22 | getCollapse(collapse); 23 | } else if (collapse.type && collapse.type === 'item') { 24 | if (document.location.pathname === BASENAME + collapse.url) { 25 | setMain(items); 26 | setItem(collapse); 27 | } 28 | } 29 | return false; 30 | }); 31 | } 32 | }; 33 | useEffect(() => { 34 | navigation.items.map((data) => { 35 | if (data.type && data.type === 'group') { 36 | getCollapse(data); 37 | } 38 | return false; 39 | }); 40 | }); 41 | 42 | let mainContent; 43 | let itemContent; 44 | let breadcrumbContent; 45 | let title = ''; 46 | if (main && main.type === 'collapse') { 47 | mainContent = ( 48 | 49 | {main.title} 50 | 51 | ); 52 | } 53 | 54 | if (item && item.type === 'item') { 55 | title = item.title; 56 | itemContent = ( 57 | 58 | {title} 59 | 60 | ); 61 | 62 | if (item.breadcrumbs !== false) { 63 | breadcrumbContent = ( 64 |
65 |
66 | 67 | 68 |
69 |
{title}
70 |
71 | 72 | 73 | Home 74 | 75 | {mainContent} 76 | {itemContent} 77 | 78 | 79 | {main.title === 'Layouts' && ( 80 | 81 | 84 |
85 | 86 | 87 | 88 | 89 | 90 | 91 | Action 92 | 93 | 94 | Another action 95 | 96 | 97 | Something else here 98 | 99 | 100 | 101 |
102 | 103 | )} 104 | 105 |
106 |
107 | ); 108 | } 109 | 110 | document.title = title + BASE_TITLE; 111 | } 112 | 113 | return <>{breadcrumbContent}; 114 | }; 115 | 116 | export default Breadcrumb; 117 | -------------------------------------------------------------------------------- /src/layouts/AdminLayout/MobileHeader/index.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | 3 | // third party 4 | import { Link } from 'react-router-dom'; 5 | import FeatherIcon from 'feather-icons-react'; 6 | 7 | // project imports 8 | import { ConfigContext } from 'contexts/ConfigContext'; 9 | import * as actionType from 'store/actions'; 10 | 11 | // assets 12 | import logo from 'assets/images/logo.svg'; 13 | 14 | // -----------------------|| MOBILE HEADER ||-----------------------// 15 | const MobileHeader = () => { 16 | const configContext = useContext(ConfigContext); 17 | const { collapseTabMenu, collapseHeaderMenu, layout } = configContext.state; 18 | const { dispatch } = configContext; 19 | 20 | const navToggleHandler = () => { 21 | dispatch({ type: actionType.COLLAPSE_MENU }); 22 | }; 23 | 24 | const tabToggleHandler = () => { 25 | dispatch({ type: actionType.COLLAPSE_TABMENU, collapseTabMenu: !collapseTabMenu }); 26 | }; 27 | 28 | const headerToggleHandler = () => { 29 | dispatch({ type: actionType.COLLAPSE_HEADERMENU, collapseHeaderMenu: !collapseHeaderMenu }); 30 | }; 31 | 32 | return ( 33 |
34 |
35 | 36 |
37 |
38 | {layout !== 'topbar' && ( 39 | 40 |
41 |
42 |
43 |
44 |
45 | 46 | )} 47 | 48 | 49 | 50 | 51 | 52 | 53 |
54 |
55 | ); 56 | }; 57 | 58 | export default MobileHeader; 59 | -------------------------------------------------------------------------------- /src/layouts/AdminLayout/Modal/index.js: -------------------------------------------------------------------------------- 1 | import React, { useContext, useState, useEffect } from 'react'; 2 | 3 | // react-bootstrap 4 | import { Modal, Button } from 'react-bootstrap'; 5 | 6 | // project imports 7 | import { ConfigContext } from 'contexts/ConfigContext'; 8 | import * as actionType from 'store/actions'; 9 | 10 | // -----------------------|| MODAL COMP ||-----------------------// 11 | const ModalComp = () => { 12 | const configContext = useContext(ConfigContext); 13 | const { notificationModal } = configContext.state; 14 | const { dispatch } = configContext; 15 | 16 | const [show, setShow] = useState(false); 17 | 18 | useEffect(() => { 19 | if (notificationModal) { 20 | setShow(notificationModal); 21 | } 22 | }, [notificationModal]); 23 | 24 | const handleClose = () => { 25 | setShow(!notificationModal); 26 | dispatch({ type: actionType.NOTIFICATION_MODAL, notificationModal: false }); 27 | }; 28 | 29 | return ( 30 | 31 | 32 | 39 | 42 | 43 | 44 | ); 45 | }; 46 | 47 | export default ModalComp; 48 | -------------------------------------------------------------------------------- /src/layouts/AdminLayout/NavBar/NavRight/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // react-bootstrap 4 | import { ListGroup, Dropdown, Form } from 'react-bootstrap'; 5 | 6 | // third party 7 | import { Link } from 'react-router-dom'; 8 | import FeatherIcon from 'feather-icons-react'; 9 | 10 | // assets 11 | import avatar2 from 'assets/images/user/avatar-2.jpg'; 12 | 13 | // -----------------------|| NAV RIGHT ||-----------------------// 14 | const NavRight = () => ( 15 | 16 | 17 | 18 | 19 | search 20 | 21 | 22 |
23 |
24 | 25 | 26 |
27 |
28 | 29 | 30 | 31 | 32 | 33 | 34 | userimage 35 | 36 | Joseph William 37 | Administrator 38 | 39 | 40 | 41 | 42 |
43 | 44 | 49 | Upgrade To Pro 50 | 51 | 52 |
53 | 54 | 55 | Profile 56 | 57 | 58 | Lock Screen 59 | 60 | 61 | chrome_reader_mode Logout 62 | 63 | 64 | 65 | 66 | 67 | ); 68 | 69 | export default NavRight; 70 | -------------------------------------------------------------------------------- /src/layouts/AdminLayout/NavBar/index.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | 3 | // react-bootstrap 4 | import { Container } from 'react-bootstrap'; 5 | 6 | // third party 7 | import { Link } from 'react-router-dom'; 8 | 9 | // project imports 10 | import NavLeft from './NavLeft'; 11 | import NavRight from './NavRight'; 12 | import { ConfigContext } from 'contexts/ConfigContext'; 13 | import * as actionType from 'store/actions'; 14 | 15 | // assets 16 | import logo from 'assets/images/logo.svg'; 17 | 18 | // -----------------------|| NAV BAR ||-----------------------// 19 | const NavBar = () => { 20 | const configContext = useContext(ConfigContext); 21 | const { headerBackColor, layout, collapseLayout, collapseTabMenu, collapseHeaderMenu } = configContext.state; 22 | const { dispatch } = configContext; 23 | 24 | const navBarToggleHandler = () => { 25 | if (!collapseLayout) { 26 | dispatch({ type: actionType.COLLAPSE_LAYOUT }); 27 | dispatch({ type: actionType.COLLAPSE_MENU }); 28 | } else { 29 | dispatch({ type: actionType.COLLAPSE_LAYOUT, collapseLayout: false }); 30 | dispatch({ type: actionType.COLLAPSE_MENU, collapseMenu: false }); 31 | } 32 | }; 33 | 34 | let headerClass = ['pc-header', headerBackColor]; 35 | if (collapseHeaderMenu) { 36 | headerClass = [...headerClass, 'mob-header-active']; 37 | } 38 | 39 | let mheaderClass = ['m-header']; 40 | const mHeaderEnable = !!(layout === 'horizontal' || layout === 'modern' || layout === 'advance' || layout === 'topbar'); 41 | 42 | if (layout === 'modern' || layout === 'advance') { 43 | mheaderClass = [...mheaderClass, 'd-flex align-items-center']; 44 | } 45 | 46 | const mHeader = ( 47 |
48 | 49 | 50 | 51 |
52 | ); 53 | 54 | let mobDrpClass = ['me-auto pc-mob-drp t']; 55 | if (collapseTabMenu) { 56 | mobDrpClass = [...mobDrpClass, 'mob-drp-active']; 57 | } 58 | 59 | let navBarToggle; 60 | if (layout === 'navbar-toggle') { 61 | navBarToggle = ( 62 |
63 | 64 | vertical_split 65 | 66 |
67 | ); 68 | } 69 | 70 | let navBar = ( 71 | <> 72 |
73 | {navBarToggle} 74 | {mHeaderEnable && mHeader} 75 |
76 | 77 |
78 |
79 | 80 |
81 |
82 | {(collapseTabMenu || collapseHeaderMenu) &&
} 83 | 84 | ); 85 | 86 | if (layout === 'horizontal' || layout === 'topbar') { 87 | navBar = {navBar}; 88 | } 89 | 90 | return
{navBar}
; 91 | }; 92 | 93 | export default NavBar; 94 | -------------------------------------------------------------------------------- /src/layouts/AdminLayout/Navigation/NavContent/NavBadge/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // third party 4 | import PropTypes from 'prop-types'; 5 | 6 | // -----------------------|| NAV BADGE ||-----------------------// 7 | const NavBadge = ({ items }) => { 8 | let navBadges; 9 | if (items.badge) { 10 | const badgeClass = ['label', 'pc-badge', items.badge.type]; 11 | 12 | navBadges = {items.badge.title}; 13 | } 14 | 15 | return <>{navBadges}; 16 | }; 17 | 18 | NavBadge.propTypes = { 19 | items: PropTypes.object.isRequired 20 | }; 21 | 22 | export default NavBadge; 23 | -------------------------------------------------------------------------------- /src/layouts/AdminLayout/Navigation/NavContent/NavCollapse/index.js: -------------------------------------------------------------------------------- 1 | import React, { useContext, useEffect } from 'react'; 2 | 3 | // react-bootstrap 4 | import { ListGroup } from 'react-bootstrap'; 5 | 6 | // third party 7 | import { Link } from 'react-router-dom'; 8 | import FeatherIcon from 'feather-icons-react'; 9 | import { SlideDown } from 'react-slidedown'; 10 | import 'react-slidedown/lib/slidedown.css'; 11 | import PropTypes from 'prop-types'; 12 | 13 | // project imports 14 | import NavItem from '../NavItem'; 15 | /* eslint-disable import/no-self-import */ 16 | import LoopNavCollapse from './index'; 17 | import NavIcon from '../NavIcon'; 18 | import NavBadge from '../NavBadge'; 19 | import { ConfigContext } from 'contexts/ConfigContext'; 20 | import * as actionType from 'store/actions'; 21 | import useWindowSize from 'hooks/useWindowSize'; 22 | 23 | // -----------------------|| NAV COLLAPSE ||-----------------------// 24 | const NavCollapse = ({ collapse, type }) => { 25 | const configContext = useContext(ConfigContext); 26 | const { dispatch } = configContext; 27 | const windowSize = useWindowSize(); 28 | 29 | const { layout, isOpen, isTrigger, collapseLayout } = configContext.state; 30 | 31 | useEffect(() => { 32 | const currentIndex = document.location.pathname 33 | .toString() 34 | .split('/') 35 | .findIndex((id) => id === collapse.id); 36 | if (currentIndex > -1) { 37 | dispatch({ type: actionType.COLLAPSE_TOGGLE, menu: { id: collapse.id, type } }); 38 | } 39 | }, [collapse, dispatch, type]); 40 | 41 | let navItems; 42 | if (collapse.children) { 43 | const collapses = collapse.children; 44 | navItems = Object.keys(collapses).map((item) => { 45 | item = collapses[item]; 46 | switch (item.type) { 47 | case 'collapse': 48 | return ; 49 | case 'item': 50 | return ; 51 | default: 52 | return false; 53 | } 54 | }); 55 | } 56 | 57 | let itemTitle = collapse.title; 58 | if (collapse.icon) { 59 | itemTitle = {collapse.title}; 60 | } 61 | 62 | let navLinkClass = ['pc-link']; 63 | 64 | let navItemClass = ['pc-item', 'pc-hasmenu']; 65 | const openIndex = isOpen.findIndex((id) => id === collapse.id); 66 | if (openIndex > -1) { 67 | navItemClass = [...navItemClass, 'active']; 68 | if (layout !== 'horizontal') { 69 | navLinkClass = [...navLinkClass, 'active']; 70 | } 71 | } 72 | 73 | const triggerIndex = isTrigger.findIndex((id) => id === collapse.id); 74 | if (triggerIndex > -1) { 75 | navItemClass = [...navItemClass, 'pc-trigger']; 76 | } 77 | 78 | const currentIndex = document.location.pathname 79 | .toString() 80 | .split('/') 81 | .findIndex((id) => id === collapse.id); 82 | if (currentIndex > -1) { 83 | navItemClass = [...navItemClass, 'active']; 84 | if (layout !== 'horizontal') { 85 | navLinkClass = [...navLinkClass, 'active']; 86 | } 87 | } 88 | 89 | const subContent = ( 90 | <> 91 | dispatch({ type: actionType.COLLAPSE_TOGGLE, menu: { id: collapse.id, type } })} 95 | > 96 | 97 | {itemTitle} 98 | 99 | 100 | 101 | 102 | 103 | {(!collapseLayout || windowSize.width < 992) && ( 104 | 105 | {triggerIndex > -1 ? navItems : null} 106 | 107 | )} 108 | {collapseLayout && windowSize.width >= 992 && ( 109 | 110 | {navItems} 111 | 112 | )} 113 | 114 | ); 115 | 116 | let mainContent; 117 | if (layout === 'horizontal') { 118 | mainContent = ( 119 | dispatch({ type: actionType.NAV_COLLAPSE_LEAVE, menu: { id: collapse.id, type } })} 124 | onMouseEnter={() => dispatch({ type: actionType.COLLAPSE_TOGGLE, menu: { id: collapse.id, type } })} 125 | > 126 | {subContent} 127 | 128 | ); 129 | } else { 130 | mainContent = ( 131 | 132 | {subContent} 133 | 134 | ); 135 | } 136 | 137 | return <>{mainContent}; 138 | }; 139 | 140 | NavCollapse.propTypes = { 141 | collapse: PropTypes.array.isRequired, 142 | type: PropTypes.string.isRequired 143 | }; 144 | 145 | export default NavCollapse; 146 | -------------------------------------------------------------------------------- /src/layouts/AdminLayout/Navigation/NavContent/NavGroup/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // react-bootstrap 4 | import { ListGroup } from 'react-bootstrap'; 5 | 6 | // third party 7 | import PropTypes from 'prop-types'; 8 | 9 | // project imports 10 | import NavCollapse from '../NavCollapse'; 11 | import NavItem from '../NavItem'; 12 | 13 | // -----------------------|| NAV GROUP ||-----------------------// 14 | const NavGroup = ({ layout, group, id }) => { 15 | let navItems; 16 | 17 | if (group.children) { 18 | const groups = group.children; 19 | navItems = Object.keys(groups).map((item) => { 20 | item = groups[item]; 21 | switch (item.type) { 22 | case 'collapse': 23 | return ; 24 | case 'item': 25 | return ; 26 | default: 27 | return false; 28 | } 29 | }); 30 | } 31 | 32 | return ( 33 | <> 34 | {group.title && ( 35 | 36 | 37 | {group.subtitle} 38 | 39 | )} 40 | {navItems} 41 | 42 | ); 43 | }; 44 | 45 | NavGroup.propTypes = { 46 | layout: PropTypes.string.isRequired, 47 | group: PropTypes.object.isRequired, 48 | id: PropTypes.string 49 | }; 50 | 51 | export default NavGroup; 52 | -------------------------------------------------------------------------------- /src/layouts/AdminLayout/Navigation/NavContent/NavIcon/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // third party 4 | import PropTypes from 'prop-types'; 5 | 6 | // -----------------------|| NAV ICON ||-----------------------// 7 | const NavIcon = ({ items }) => { 8 | let navIcons; 9 | if (items.icon) { 10 | navIcons = ( 11 | 12 | {items.iconname} 13 | 14 | ); 15 | } 16 | 17 | return <>{navIcons}; 18 | }; 19 | 20 | NavIcon.propTypes = { 21 | items: PropTypes.object.isRequired 22 | }; 23 | 24 | export default NavIcon; 25 | -------------------------------------------------------------------------------- /src/layouts/AdminLayout/Navigation/NavContent/NavItem/index.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | 3 | // react-bootstrap 4 | import { ListGroup } from 'react-bootstrap'; 5 | 6 | // thrid party 7 | import { Link, NavLink } from 'react-router-dom'; 8 | import FeatherIcon from 'feather-icons-react'; 9 | import PropTypes from 'prop-types'; 10 | 11 | // project imports 12 | import NavIcon from '../NavIcon'; 13 | import NavBadge from '../NavBadge'; 14 | import { ConfigContext } from 'contexts/ConfigContext'; 15 | import * as actionType from 'store/actions'; 16 | import useWindowSize from 'hooks/useWindowSize'; 17 | 18 | // -----------------------|| NAV ITEM ||-----------------------// 19 | const NavItem = ({ layout, item }) => { 20 | const windowSize = useWindowSize(); 21 | const configContext = useContext(ConfigContext); 22 | const { dispatch } = configContext; 23 | 24 | let itemTitle = item.title; 25 | if (item.icon) { 26 | itemTitle = ( 27 | <> 28 | {item.title} 29 | {item.type === 'collapse' && ( 30 | 31 | 32 | 33 | )} 34 | 35 | ); 36 | } 37 | 38 | let itemTarget = ''; 39 | if (item.target) { 40 | itemTarget = '_blank'; 41 | } 42 | let navItemClass = ['pc-item']; 43 | const currentIndex = document.location.pathname 44 | .toString() 45 | .split('/') 46 | .findIndex((id) => id === item.id); 47 | if (currentIndex > -1) { 48 | navItemClass = [...navItemClass, 'active']; 49 | } 50 | 51 | const navLinkClass = ['pc-link']; 52 | 53 | let subContent; 54 | if (item.external) { 55 | subContent = ( 56 | 57 | 58 | {itemTitle} 59 | 60 | 61 | ); 62 | } else { 63 | subContent = ( 64 | 65 | 66 | {itemTitle} 67 | 68 | 69 | ); 70 | } 71 | let mainContent; 72 | if (layout === 'horizontal') { 73 | mainContent = ( 74 | dispatch({ type: actionType.NAV_CONTENT_LEAVE })} 79 | > 80 | {subContent} 81 | 82 | ); 83 | } else if (windowSize.width < 992) { 84 | mainContent = ( 85 | dispatch({ type: actionType.COLLAPSE_MENU })} 90 | > 91 | {subContent} 92 | 93 | ); 94 | } else { 95 | mainContent = ( 96 | 97 | {subContent} 98 | 99 | ); 100 | } 101 | 102 | return <>{mainContent}; 103 | }; 104 | 105 | NavItem.propTypes = { 106 | layout: PropTypes.string.isRequired, 107 | item: PropTypes.object.isRequired 108 | }; 109 | 110 | export default NavItem; 111 | -------------------------------------------------------------------------------- /src/layouts/AdminLayout/Navigation/NavContent/index.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | 3 | // react-bootstrap 4 | import { ListGroup } from 'react-bootstrap'; 5 | 6 | // third party 7 | import { Link } from 'react-router-dom'; 8 | import PerfectScrollbar from 'react-perfect-scrollbar'; 9 | import PropTypes from 'prop-types'; 10 | 11 | // project imports 12 | import NavGroup from './NavGroup'; 13 | import { ConfigContext } from 'contexts/ConfigContext'; 14 | import * as actionType from 'store/actions'; 15 | 16 | // assets 17 | import logo from 'assets/images/logo.svg'; 18 | import logoDark from 'assets/images/logo-dark.svg'; 19 | import logoSM from 'assets/images/logo-sm.svg'; 20 | import logoSMLight from 'assets/images/logo-sm-light.svg'; 21 | 22 | // -----------------------|| NAV CONTENT ||-----------------------// 23 | const NavContent = ({ navigation, activeNav }) => { 24 | const configContext = useContext(ConfigContext); 25 | const { dispatch } = configContext; 26 | 27 | const { layout, collapseLayout, colorBrand } = configContext.state; 28 | 29 | const navItems = navigation.map((item) => { 30 | let navItem = <>; 31 | switch (item.type) { 32 | case 'group': 33 | if (activeNav) { 34 | navItem = ( 35 |
36 | 37 |
38 | ); 39 | } else { 40 | navItem = ; 41 | } 42 | return navItem; 43 | default: 44 | return false; 45 | } 46 | }); 47 | 48 | let navContentNode = ( 49 | 50 | 51 | {navItems} 52 | 53 |
54 |
55 |
68 |
69 | 70 | ); 71 | 72 | if (collapseLayout) { 73 | navContentNode = ( 74 | 75 | {navItems} 76 | 77 | ); 78 | } 79 | 80 | let mheaderClass = ['m-header']; 81 | if (colorBrand) { 82 | mheaderClass = [...mheaderClass, colorBrand]; 83 | } 84 | const mHeaderEnable = !!(layout === 'horizontal' || layout === 'modern' || layout === 'advance'); 85 | 86 | if (layout === 'modern') { 87 | mheaderClass = [...mheaderClass, 'd-flex align-items-center']; 88 | } 89 | 90 | const mHeader = ( 91 |
92 | 93 | 94 | 95 | 96 |
97 | ); 98 | 99 | let mainContent; 100 | if (layout === 'horizontal') { 101 | mainContent = ( 102 | dispatch({ type: actionType.NAV_CONTENT_LEAVE })} 108 | > 109 | {navItems} 110 | 111 | ); 112 | } else { 113 | mainContent = ( 114 | <> 115 | {!mHeaderEnable && mHeader} 116 |
{navContentNode}
117 | 118 | ); 119 | } 120 | 121 | return <>{mainContent}; 122 | }; 123 | 124 | NavContent.propTypes = { 125 | navigation: PropTypes.object.isRequired, 126 | activeNav: PropTypes.string 127 | }; 128 | 129 | export default NavContent; 130 | -------------------------------------------------------------------------------- /src/layouts/AdminLayout/index.js: -------------------------------------------------------------------------------- 1 | import React, { useContext, useEffect } from 'react'; 2 | 3 | // react-bootstrap 4 | import { Container } from 'react-bootstrap'; 5 | 6 | // third party 7 | import PropTypes from 'prop-types'; 8 | 9 | // project imports 10 | import MobileHeader from './MobileHeader'; 11 | import Navigation from './Navigation'; 12 | import NavBar from './NavBar'; 13 | import Breadcrumb from './Breadcrumb'; 14 | import ModalComponent from './Modal'; 15 | import useWindowSize from 'hooks/useWindowSize'; 16 | import { ConfigContext } from 'contexts/ConfigContext'; 17 | import * as actionType from 'store/actions'; 18 | 19 | // -----------------------|| ADMIN LAYOUT ||-----------------------// 20 | const AdminLayout = ({ children }) => { 21 | const windowSize = useWindowSize(); 22 | const configContext = useContext(ConfigContext); 23 | const bodyElement = document.body; 24 | const { layout, pageType, collapseLayout } = configContext.state; 25 | const { dispatch } = configContext; 26 | useEffect(() => { 27 | if (windowSize.width > 992 && windowSize.width <= 1024 && layout !== 'horizontal') { 28 | dispatch({ type: actionType.COLLAPSE_MENU }); 29 | } 30 | }, [dispatch, layout, windowSize]); 31 | 32 | if (pageType === 'app-dark-mode') { 33 | document.documentElement.classList.add('app-dark-mode'); 34 | } else { 35 | document.documentElement.classList.remove('app-dark-mode'); 36 | } 37 | 38 | if (windowSize.width > 992 && collapseLayout) { 39 | bodyElement.classList.add('minimenu'); 40 | } else { 41 | bodyElement.classList.remove('minimenu'); 42 | } 43 | 44 | if (layout === 'horizontal') { 45 | bodyElement.classList.add('pc-horizontal'); 46 | } else if (layout === 'topbar') { 47 | bodyElement.classList.add('pc-horizontal', 'layout-topbar'); 48 | } else if (layout === 'modern') { 49 | bodyElement.classList.add('modern-layout'); 50 | } else if (layout === 'advance') { 51 | bodyElement.classList.add('advance-layout'); 52 | } else if (layout === 'tab') { 53 | bodyElement.classList.add('tab-layout'); 54 | } 55 | 56 | let containerClass = ['pc-container']; 57 | if (layout === 'nested') { 58 | containerClass = [...containerClass, 'sidebar-layouts']; 59 | } 60 | 61 | let adminlayout = ( 62 | <> 63 | 64 | 65 | 66 | 67 |
68 |
69 | 70 | {children} 71 |
72 |
73 | 84 | 85 | ); 86 | if (layout === 'horizontal' || layout === 'topbar') { 87 | adminlayout = ( 88 | <> 89 | 90 | 91 | 92 | 93 | {layout !== 'topbar' && } 94 |
95 |
96 | 97 | {children} 98 |
99 |
100 | 101 | 102 | ); 103 | } 104 | return <>{adminlayout}; 105 | }; 106 | 107 | AdminLayout.propTypes = { 108 | children: PropTypes.node 109 | }; 110 | 111 | export default AdminLayout; 112 | -------------------------------------------------------------------------------- /src/react-app-env.d.js: -------------------------------------------------------------------------------- 1 | // declare modules for type script compatibility 2 | /// 3 | // declare module 'feather-icons-react'; 4 | // declare module 'react-image-video-lightbox'; 5 | // declare module 'rodal'; 6 | // declare module 'react-nestable'; 7 | // declare module 'pnotify/dist/es/PNotify'; 8 | // declare module '@ckeditor/ckeditor5-react'; 9 | // declare module '@ckeditor/ckeditor5-build-balloon'; 10 | // declare module '@ckeditor/ckeditor5-build-classic'; 11 | // declare module '@ckeditor/ckeditor5-build-decoupled-document'; 12 | // declare module '@ckeditor/ckeditor5-build-inline'; 13 | // declare module 'react-tinymce'; 14 | // declare module 'react-bootstrap-validation'; 15 | // declare module 'react-bootstrap4-form-validation'; 16 | // declare module 'react-bootstrap-time-picker'; 17 | // declare module 'react-bootstrap-carousel'; 18 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = (onPerfEntry) => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/routes/renderRoutes.js: -------------------------------------------------------------------------------- 1 | import React, { StrictMode, Suspense, Fragment } from 'react'; 2 | 3 | // third party 4 | import { Switch, Route } from 'react-router-dom'; 5 | 6 | // project imports 7 | import Loader from 'components/Loader/Loader'; 8 | 9 | // Routing control for aplication 10 | const renderRoutes = (routes) => ( 11 | 12 | }> 13 | 14 | {routes.map((route, i) => { 15 | const Guard = route.guard || Fragment; 16 | const Layout = route.layout || Fragment; 17 | const Component = route.component; 18 | 19 | return ( 20 | ( 25 | 26 | {route.routes ? renderRoutes(route.routes) : } 27 | 28 | )} 29 | /> 30 | ); 31 | })} 32 | 33 | 34 | 35 | ); 36 | 37 | export default renderRoutes; 38 | -------------------------------------------------------------------------------- /src/routes/routes.js: -------------------------------------------------------------------------------- 1 | import React, { lazy } from 'react'; 2 | 3 | // third party 4 | import { Redirect } from 'react-router-dom'; 5 | 6 | // project imports 7 | import AdminLayout from 'layouts/AdminLayout'; 8 | import { BASE_URL } from 'config/constant'; 9 | 10 | // -----------------------|| Routes ||-----------------------// 11 | const routes = [ 12 | { 13 | exact: true, 14 | path: '/auth/signup-1', 15 | component: lazy(() => import('../views/auth/signup/SignUp1')) 16 | }, 17 | { 18 | exact: true, 19 | path: '/auth/signin-1', 20 | component: lazy(() => import('../views/auth/signin/SignIn1')) 21 | }, 22 | { 23 | path: '*', 24 | layout: AdminLayout, 25 | routes: [ 26 | { 27 | exact: true, 28 | path: '/dashboard/sales', 29 | component: lazy(() => import('../views/dashboard/DashSales')) 30 | }, 31 | { 32 | exact: true, 33 | path: '/basic/typography', 34 | component: lazy(() => import('../views/ui-elements/basic/BasicTypography')) 35 | }, 36 | { 37 | exact: true, 38 | path: '/icons/Feather', 39 | component: lazy(() => import('../views/ui-elements/icons/Feather')) 40 | }, 41 | { 42 | exact: true, 43 | path: '/bootstrap-table/basic-table', 44 | component: lazy(() => import('../views/tables/bootstrap/BasicTable')) 45 | }, 46 | { 47 | exact: true, 48 | path: '/charts/apex-chart', 49 | component: lazy(() => import('../views/charts/apex-chart')) 50 | }, 51 | { 52 | exact: true, 53 | path: '/maps/google-map', 54 | component: lazy(() => import('../views/maps/GoogleMaps')) 55 | }, 56 | { 57 | exact: true, 58 | path: '/sample-page', 59 | component: lazy(() => import('../views/sample')) 60 | }, 61 | { 62 | path: '*', 63 | exact: true, 64 | component: () => 65 | } 66 | ] 67 | } 68 | ]; 69 | 70 | export default routes; 71 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/store/actions.js: -------------------------------------------------------------------------------- 1 | export const CHANGE_LAYOUT = 'CHANGE_LAYOUT'; 2 | export const COLLAPSE_MENU = 'COLLAPSE_MENU'; 3 | export const COLLAPSE_TABMENU = 'COLLAPSE_TABMENU'; 4 | export const COLLAPSE_HEADERMENU = 'COLLAPSE_HEADERMENU'; 5 | export const COLLAPSE_LAYOUT = 'COLLAPSE_LAYOUT'; 6 | export const COLLAPSE_TOGGLE = 'COLLAPSE_TOGGLE'; 7 | export const HEADER_BACK_COLOR = 'HEADER_BACK_COLOR'; 8 | export const COLOR_BRAND = 'COLOR_BRAND'; 9 | export const LAYOUT_TYPE = 'LAYOUT_TYPE'; 10 | export const PAGE_TYPE = 'PAGE_TYPE'; 11 | export const NAV_COLLAPSE_LEAVE = 'NAV_COLLAPSE_LEAVE'; 12 | export const NAV_CONTENT_LEAVE = 'NAV_CONTENT_LEAVE'; 13 | export const RESET = 'RESET'; 14 | export const NOTIFICATION_MODAL = 'NOTIFICATION_MODAL'; 15 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | // third party 2 | import { useDispatch as useReduxDispatch, useSelector as useReduxSelector } from 'react-redux'; 3 | 4 | export const useSelector = useReduxSelector; 5 | 6 | export const useDispatch = () => useReduxDispatch(); 7 | -------------------------------------------------------------------------------- /src/utils/helper.js: -------------------------------------------------------------------------------- 1 | // Helper functions 2 | 3 | export const range = (len) => { 4 | const arr = []; 5 | for (let i = 0; i < len; i += 1) { 6 | arr.push(i); 7 | } 8 | return arr; 9 | }; 10 | 11 | export const requireAll = (requireContext) => requireContext.keys().map(requireContext); 12 | 13 | export const randomDate = (start, end, format) => { 14 | const today = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); 15 | const dd = today.getDate(); 16 | const mm = today.getMonth() + 1; 17 | const yyyy = today.getFullYear(); 18 | 19 | let formattedDate = ''; 20 | 21 | if (format === 'dd/mm/yyyy') { 22 | formattedDate = `${dd < 10 ? `0${dd}` : dd}/${mm < 10 ? `0${mm}` : mm}/${yyyy}`; 23 | } else if (format === 'yyyy-mm-dd') { 24 | formattedDate = `${yyyy}-${mm < 10 ? `0${mm}` : mm}-${dd < 10 ? `0${dd}` : dd}`; 25 | } 26 | 27 | return formattedDate; 28 | }; 29 | -------------------------------------------------------------------------------- /src/views/auth/signin/SignIn1.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // react-bootstrap 4 | import { Card, Row, Col, Button, Form, InputGroup } from 'react-bootstrap'; 5 | 6 | // third party 7 | import { NavLink } from 'react-router-dom'; 8 | import FeatherIcon from 'feather-icons-react'; 9 | 10 | // assets 11 | import logoDark from 'assets/images/logo-dark.svg'; 12 | 13 | // -----------------------|| SIGNIN 1 ||-----------------------// 14 | const Signin1 = () => ( 15 |
16 |
17 | 18 | 19 | 20 | 21 | 22 |

Signin

23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |

40 | Forgot password?{' '} 41 | 42 | Reset 43 | 44 |

45 |

46 | Don’t have an account?{' '} 47 | 48 | Signup 49 | 50 |

51 | 52 | 53 | 54 | 55 |
56 |
57 | ); 58 | 59 | export default Signin1; 60 | -------------------------------------------------------------------------------- /src/views/auth/signup/SignUp1.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // react-bootstrap 4 | import { Card, Row, Col, Button, InputGroup, Form } from 'react-bootstrap'; 5 | 6 | // third party 7 | import { NavLink } from 'react-router-dom'; 8 | import FeatherIcon from 'feather-icons-react'; 9 | 10 | // assets 11 | import logoDark from 'assets/images/logo-dark.svg'; 12 | 13 | // -----------------------|| SIGNUP 1 ||-----------------------// 14 | const SignUp1 = () => ( 15 |
16 |
17 | 18 | 19 | 20 | 21 | 22 |

Sign up

23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 47 | 48 |

49 | Already have an account?{' '} 50 | 51 | Signin 52 | 53 |

54 | 55 | 56 | 57 | 58 |
59 |
60 | ); 61 | 62 | export default SignUp1; 63 | -------------------------------------------------------------------------------- /src/views/charts/apex-chart/chart/area-chart-1.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 350, 3 | type: 'area', 4 | options: { 5 | dataLabels: { 6 | enabled: false 7 | }, 8 | stroke: { 9 | curve: 'smooth' 10 | }, 11 | colors: ['#ffa21d', '#ea4d4d'], 12 | xaxis: { 13 | type: 'datetime', 14 | categories: [ 15 | '2018-09-19T00:00:00', 16 | '2018-09-19T01:30:00', 17 | '2018-09-19T02:30:00', 18 | '2018-09-19T03:30:00', 19 | '2018-09-19T04:30:00', 20 | '2018-09-19T05:30:00', 21 | '2018-09-19T06:30:00' 22 | ] 23 | }, 24 | tooltip: { 25 | x: { 26 | format: 'dd/MM/yy HH:mm' 27 | } 28 | } 29 | }, 30 | series: [ 31 | { 32 | name: 'series1', 33 | data: [31, 40, 28, 51, 42, 109, 100] 34 | }, 35 | { 36 | name: 'series2', 37 | data: [11, 32, 45, 32, 34, 52, 41] 38 | } 39 | ] 40 | }; 41 | 42 | export default chartData; 43 | -------------------------------------------------------------------------------- /src/views/charts/apex-chart/chart/bar-chart-1.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 350, 3 | type: 'bar', 4 | options: { 5 | plotOptions: { 6 | bar: { 7 | horizontal: false, 8 | columnWidth: '55%' 9 | } 10 | }, 11 | dataLabels: { 12 | enabled: false 13 | }, 14 | colors: ['#17c666', '#7267EF', '#EA4D4D'], 15 | stroke: { 16 | show: true, 17 | width: 2, 18 | colors: ['transparent'] 19 | }, 20 | fill: { 21 | type: 'solid' 22 | }, 23 | xaxis: { 24 | categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'] 25 | }, 26 | yaxis: { 27 | title: { 28 | text: '$ (thousands)' 29 | } 30 | }, 31 | tooltip: { 32 | y: { 33 | formatter(val) { 34 | return `$ ${val} thousands`; 35 | } 36 | } 37 | } 38 | }, 39 | series: [ 40 | { 41 | name: 'Net Profit', 42 | data: [44, 55, 57, 56, 61, 58, 63] 43 | }, 44 | { 45 | name: 'Revenue', 46 | data: [76, 85, 101, 98, 87, 105, 91] 47 | }, 48 | { 49 | name: 'Free Cash Flow', 50 | data: [35, 41, 36, 26, 45, 48, 52] 51 | } 52 | ] 53 | }; 54 | export default chartData; 55 | -------------------------------------------------------------------------------- /src/views/charts/apex-chart/chart/bar-chart-2.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 350, 3 | type: 'bar', 4 | options: { 5 | chart: { 6 | stacked: true, 7 | toolbar: { 8 | show: true 9 | }, 10 | zoom: { 11 | enabled: true 12 | } 13 | }, 14 | colors: ['#7267EF', '#17c666', '#ffa21d', '#EA4D4D'], 15 | responsive: [ 16 | { 17 | breakpoint: 480, 18 | options: { 19 | legend: { 20 | position: 'bottom', 21 | offsetX: -10, 22 | offsetY: 0 23 | } 24 | } 25 | } 26 | ], 27 | plotOptions: { 28 | bar: { 29 | horizontal: false 30 | } 31 | }, 32 | series: [ 33 | { 34 | name: 'PRODUCT A', 35 | data: [44, 55, 41, 67, 22, 43] 36 | }, 37 | { 38 | name: 'PRODUCT B', 39 | data: [13, 23, 20, 8, 13, 27] 40 | }, 41 | { 42 | name: 'PRODUCT C', 43 | data: [11, 17, 15, 15, 21, 14] 44 | }, 45 | { 46 | name: 'PRODUCT D', 47 | data: [21, 7, 25, 13, 22, 8] 48 | } 49 | ], 50 | xaxis: { 51 | type: 'datetime', 52 | categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT', '01/05/2011 GMT', '01/06/2011 GMT'] 53 | }, 54 | legend: { 55 | position: 'right', 56 | offsetY: 40 57 | }, 58 | fill: { 59 | type: 'solid' 60 | } 61 | }, 62 | series: [ 63 | { 64 | name: 'PRODUCT A', 65 | data: [44, 55, 41, 67, 22, 43] 66 | }, 67 | { 68 | name: 'PRODUCT B', 69 | data: [13, 23, 20, 8, 13, 27] 70 | }, 71 | { 72 | name: 'PRODUCT C', 73 | data: [11, 17, 15, 15, 21, 14] 74 | }, 75 | { 76 | name: 'PRODUCT D', 77 | data: [21, 7, 25, 13, 22, 8] 78 | } 79 | ] 80 | }; 81 | export default chartData; 82 | -------------------------------------------------------------------------------- /src/views/charts/apex-chart/chart/bar-chart-3.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 350, 3 | type: 'bar', 4 | options: { 5 | plotOptions: { 6 | bar: { 7 | horizontal: true, 8 | dataLabels: { 9 | position: 'top' 10 | } 11 | } 12 | }, 13 | colors: ['#7267EF', '#17c666'], 14 | dataLabels: { 15 | enabled: true, 16 | offsetX: -6, 17 | style: { 18 | fontSize: '12px', 19 | colors: ['#fff'] 20 | } 21 | }, 22 | stroke: { 23 | show: true, 24 | width: 1, 25 | colors: ['#fff'] 26 | }, 27 | fill: { 28 | type: 'solid' 29 | }, 30 | xaxis: { 31 | categories: [2001, 2002, 2003, 2004, 2005, 2006, 2007] 32 | } 33 | }, 34 | series: [ 35 | { 36 | data: [44, 55, 41, 64, 22, 43, 21] 37 | }, 38 | { 39 | data: [53, 32, 33, 52, 13, 44, 32] 40 | } 41 | ] 42 | }; 43 | export default chartData; 44 | -------------------------------------------------------------------------------- /src/views/charts/apex-chart/chart/bar-chart-4.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 350, 3 | type: 'bar', 4 | options: { 5 | chart: { 6 | stacked: true, 7 | stackType: '100%' 8 | }, 9 | plotOptions: { 10 | bar: { 11 | horizontal: true 12 | } 13 | }, 14 | colors: ['#7267EF', '#3ec9d6', '#17c666', '#ffa21d', '#EA4D4D'], 15 | stroke: { 16 | width: 1, 17 | colors: ['#fff'] 18 | }, 19 | title: { 20 | text: '100% Stacked Bar' 21 | }, 22 | xaxis: { 23 | categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014] 24 | }, 25 | 26 | tooltip: { 27 | y: { 28 | formatter(val) { 29 | return `${val}K`; 30 | } 31 | } 32 | }, 33 | fill: { 34 | type: 'solid' 35 | }, 36 | legend: { 37 | position: 'top', 38 | horizontalAlign: 'left', 39 | offsetX: 40 40 | } 41 | }, 42 | series: [ 43 | { 44 | name: 'Marine Sprite', 45 | data: [44, 55, 41, 37, 22, 43, 21] 46 | }, 47 | { 48 | name: 'Striking Calf', 49 | data: [53, 32, 33, 52, 13, 43, 32] 50 | }, 51 | { 52 | name: 'Tank Picture', 53 | data: [12, 17, 11, 9, 15, 11, 20] 54 | }, 55 | { 56 | name: 'Bucket Slope', 57 | data: [9, 7, 5, 8, 6, 9, 4] 58 | }, 59 | { 60 | name: 'Reborn Kid', 61 | data: [25, 12, 19, 32, 25, 24, 10] 62 | } 63 | ] 64 | }; 65 | export default chartData; 66 | -------------------------------------------------------------------------------- /src/views/charts/apex-chart/chart/bubble-chart-1.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 350, 3 | type: 'bubble', 4 | options: { 5 | dataLabels: { 6 | enabled: false 7 | }, 8 | colors: ['#7267ef', '#17c666', '#ffa21d', '#ea4d4d'], 9 | fill: { 10 | type: 'gradient', 11 | gradient: { 12 | shade: 'light', 13 | type: 'vertical', 14 | shadeIntensity: 0.25, 15 | inverseColors: true, 16 | opacityFrom: 1, 17 | opacityTo: 0.7, 18 | stops: [0, 100] 19 | } 20 | }, 21 | title: { 22 | text: 'Simple Bubble Chart' 23 | }, 24 | xaxis: { 25 | tickAmount: 12, 26 | type: 'category' 27 | }, 28 | yaxis: { 29 | max: 70 30 | } 31 | }, 32 | series: [ 33 | { 34 | name: 'Bubble1', 35 | data: generateBubbleData(new Date('11 Feb 2017 GMT').getTime(), 20, { 36 | min: 10, 37 | max: 60 38 | }) 39 | }, 40 | { 41 | name: 'Bubble2', 42 | data: generateBubbleData(new Date('11 Feb 2017 GMT').getTime(), 20, { 43 | min: 10, 44 | max: 60 45 | }) 46 | }, 47 | { 48 | name: 'Bubble3', 49 | data: generateBubbleData(new Date('11 Feb 2017 GMT').getTime(), 20, { 50 | min: 10, 51 | max: 60 52 | }) 53 | }, 54 | { 55 | name: 'Bubble4', 56 | data: generateBubbleData(new Date('11 Feb 2017 GMT').getTime(), 20, { 57 | min: 10, 58 | max: 60 59 | }) 60 | } 61 | ] 62 | }; 63 | export default chartData; 64 | 65 | function generateBubbleData(baseval, count, yrange) { 66 | let i = 0; 67 | const series = []; 68 | while (i < count) { 69 | const x = Math.floor(Math.random() * (750 - 1 + 1)) + 1; 70 | const y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min; 71 | const z = Math.floor(Math.random() * (75 - 15 + 1)) + 15; 72 | 73 | series.push([x, y, z]); 74 | baseval += 86400000; 75 | i += 1; 76 | } 77 | return series; 78 | } 79 | -------------------------------------------------------------------------------- /src/views/charts/apex-chart/chart/bubble-chart-2.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 350, 3 | type: 'bubble', 4 | options: { 5 | dataLabels: { 6 | enabled: false 7 | }, 8 | fill: { 9 | type: 'gradient' 10 | }, 11 | colors: ['#7267ef', '#17c666', '#ffa21d', '#ea4d4d'], 12 | title: { 13 | text: '3D Bubble Chart' 14 | }, 15 | xaxis: { 16 | tickAmount: 12, 17 | type: 'datetime', 18 | 19 | labels: { 20 | rotate: 0 21 | } 22 | }, 23 | yaxis: { 24 | max: 70 25 | }, 26 | theme: { 27 | palette: 'palette2' 28 | } 29 | }, 30 | series: [ 31 | { 32 | name: 'Product1', 33 | data: generateDatasehratheatbubble3d(new Date('11 Feb 2017 GMT').getTime(), 20, { 34 | min: 10, 35 | max: 60 36 | }) 37 | }, 38 | { 39 | name: 'Product2', 40 | data: generateDatasehratheatbubble3d(new Date('11 Feb 2017 GMT').getTime(), 20, { 41 | min: 10, 42 | max: 60 43 | }) 44 | }, 45 | { 46 | name: 'Product3', 47 | data: generateDatasehratheatbubble3d(new Date('11 Feb 2017 GMT').getTime(), 20, { 48 | min: 10, 49 | max: 60 50 | }) 51 | }, 52 | { 53 | name: 'Product4', 54 | data: generateDatasehratheatbubble3d(new Date('11 Feb 2017 GMT').getTime(), 20, { 55 | min: 10, 56 | max: 60 57 | }) 58 | } 59 | ] 60 | }; 61 | export default chartData; 62 | 63 | function generateDatasehratheatbubble3d(baseval, count, yrange) { 64 | let i = 0; 65 | const series = []; 66 | while (i < count) { 67 | const y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min; 68 | const z = Math.floor(Math.random() * (75 - 15 + 1)) + 15; 69 | 70 | series.push([baseval, y, z]); 71 | baseval += 86400000; 72 | i += 1; 73 | } 74 | return series; 75 | } 76 | -------------------------------------------------------------------------------- /src/views/charts/apex-chart/chart/heat-map-chart-1.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 350, 3 | type: 'heatmap', 4 | options: { 5 | dataLabels: { 6 | enabled: false 7 | }, 8 | colors: ['#7267ef'], 9 | title: { 10 | text: 'HeatMap Chart (Single color)' 11 | } 12 | }, 13 | series: [ 14 | { 15 | name: 'Metric1', 16 | data: generateDatasehratheat(12, { 17 | min: 0, 18 | max: 90 19 | }) 20 | }, 21 | { 22 | name: 'Metric2', 23 | data: generateDatasehratheat(12, { 24 | min: 0, 25 | max: 90 26 | }) 27 | }, 28 | { 29 | name: 'Metric3', 30 | data: generateDatasehratheat(12, { 31 | min: 0, 32 | max: 90 33 | }) 34 | }, 35 | { 36 | name: 'Metric4', 37 | data: generateDatasehratheat(12, { 38 | min: 0, 39 | max: 90 40 | }) 41 | }, 42 | { 43 | name: 'Metric5', 44 | data: generateDatasehratheat(12, { 45 | min: 0, 46 | max: 90 47 | }) 48 | }, 49 | { 50 | name: 'Metric6', 51 | data: generateDatasehratheat(12, { 52 | min: 0, 53 | max: 90 54 | }) 55 | }, 56 | { 57 | name: 'Metric7', 58 | data: generateDatasehratheat(12, { 59 | min: 0, 60 | max: 90 61 | }) 62 | }, 63 | { 64 | name: 'Metric8', 65 | data: generateDatasehratheat(12, { 66 | min: 0, 67 | max: 90 68 | }) 69 | }, 70 | { 71 | name: 'Metric9', 72 | data: generateDatasehratheat(12, { 73 | min: 0, 74 | max: 90 75 | }) 76 | } 77 | ] 78 | }; 79 | export default chartData; 80 | 81 | function generateDatasehratheat(count, yrange) { 82 | let i = 0; 83 | const series = []; 84 | while (i < count) { 85 | series.push({ 86 | x: `w${(i + 1).toString()}`, 87 | y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min 88 | }); 89 | i += 1; 90 | } 91 | return series; 92 | } 93 | -------------------------------------------------------------------------------- /src/views/charts/apex-chart/chart/heat-map-chart-2.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 350, 3 | type: 'heatmap', 4 | options: { 5 | stroke: { 6 | width: 0 7 | }, 8 | plotOptions: { 9 | heatmap: { 10 | radius: 30, 11 | enableShades: false, 12 | colorScale: { 13 | ranges: [ 14 | { 15 | from: 0, 16 | to: 50, 17 | color: '#ffa21d' 18 | }, 19 | { 20 | from: 51, 21 | to: 100, 22 | color: '#ea4d4d' 23 | } 24 | ] 25 | } 26 | } 27 | }, 28 | dataLabels: { 29 | enabled: true, 30 | style: { 31 | colors: ['#fff'] 32 | } 33 | }, 34 | colors: ['#7267ef', '#00bcd4', '#17c666', '#ffa21d', '#ea4d4d'], 35 | xaxis: { 36 | type: 'category' 37 | }, 38 | title: { 39 | text: 'Rounded (Range without Shades)' 40 | } 41 | }, 42 | series: [ 43 | { 44 | name: 'Metric1', 45 | data: generateDatasehrat(15, { 46 | min: 0, 47 | max: 90 48 | }) 49 | }, 50 | { 51 | name: 'Metric2', 52 | data: generateDatasehrat(15, { 53 | min: 0, 54 | max: 90 55 | }) 56 | }, 57 | { 58 | name: 'Metric3', 59 | data: generateDatasehrat(15, { 60 | min: 0, 61 | max: 90 62 | }) 63 | }, 64 | { 65 | name: 'Metric4', 66 | data: generateDatasehrat(15, { 67 | min: 0, 68 | max: 90 69 | }) 70 | }, 71 | { 72 | name: 'Metric5', 73 | data: generateDatasehrat(15, { 74 | min: 0, 75 | max: 90 76 | }) 77 | }, 78 | { 79 | name: 'Metric6', 80 | data: generateDatasehrat(15, { 81 | min: 0, 82 | max: 90 83 | }) 84 | }, 85 | { 86 | name: 'Metric7', 87 | data: generateDatasehrat(15, { 88 | min: 0, 89 | max: 90 90 | }) 91 | }, 92 | { 93 | name: 'Metric8', 94 | data: generateDatasehrat(15, { 95 | min: 0, 96 | max: 90 97 | }) 98 | }, 99 | { 100 | name: 'Metric8', 101 | data: generateDatasehrat(15, { 102 | min: 0, 103 | max: 90 104 | }) 105 | } 106 | ] 107 | }; 108 | export default chartData; 109 | 110 | function generateDatasehrat(count, yrange) { 111 | let i = 0; 112 | const series = []; 113 | while (i < count) { 114 | series.push({ 115 | x: (i + 1).toString(), 116 | y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min 117 | }); 118 | i += 1; 119 | } 120 | return series; 121 | } 122 | -------------------------------------------------------------------------------- /src/views/charts/apex-chart/chart/line-chart-1.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 300, 3 | type: 'line', 4 | options: { 5 | chart: { 6 | zoom: { 7 | enabled: false 8 | } 9 | }, 10 | dataLabels: { 11 | enabled: false 12 | }, 13 | stroke: { 14 | curve: 'straight' 15 | }, 16 | colors: ['#7267ef'], 17 | title: { 18 | text: 'Product Trends by Month', 19 | align: 'left' 20 | }, 21 | grid: { 22 | row: { 23 | colors: ['#f3f6ff', 'transparent'], // takes an array which will be repeated on columns 24 | opacity: 0.5 25 | } 26 | }, 27 | xaxis: { 28 | categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'] 29 | } 30 | }, 31 | series: [ 32 | { 33 | name: 'Desktops', 34 | data: [10, 41, 35, 51, 49, 62, 69, 91, 148] 35 | } 36 | ] 37 | }; 38 | 39 | export default chartData; 40 | -------------------------------------------------------------------------------- /src/views/charts/apex-chart/chart/line-chart-3.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 300, 3 | type: 'line', 4 | options: { 5 | chart: { 6 | zoom: { 7 | enabled: false 8 | } 9 | }, 10 | dataLabels: { 11 | enabled: false 12 | }, 13 | stroke: { 14 | width: [5, 7, 5], 15 | curve: 'straight', 16 | dashArray: [0, 8, 5] 17 | }, 18 | colors: ['#17c666', '#ffa21d', '#ea4d4d'], 19 | fill: { 20 | type: 'gradient', 21 | gradient: { 22 | shade: 'light' 23 | } 24 | }, 25 | title: { 26 | text: 'Page Statistics', 27 | align: 'left' 28 | }, 29 | markers: { 30 | size: 0, 31 | 32 | hover: { 33 | sizeOffset: 6 34 | } 35 | }, 36 | xaxis: { 37 | categories: [ 38 | '01 Jan', 39 | '02 Jan', 40 | '03 Jan', 41 | '04 Jan', 42 | '05 Jan', 43 | '06 Jan', 44 | '07 Jan', 45 | '08 Jan', 46 | '09 Jan', 47 | '10 Jan', 48 | '11 Jan', 49 | '12 Jan' 50 | ] 51 | }, 52 | tooltip: { 53 | y: [ 54 | { 55 | title: { 56 | formatter(val) { 57 | return `${val} (mins)`; 58 | } 59 | } 60 | }, 61 | { 62 | title: { 63 | formatter(val) { 64 | return `${val} per session`; 65 | } 66 | } 67 | }, 68 | { 69 | title: { 70 | formatter(val) { 71 | return val; 72 | } 73 | } 74 | } 75 | ] 76 | }, 77 | grid: { 78 | borderColor: '#f1f1f1' 79 | } 80 | }, 81 | series: [ 82 | { 83 | name: 'Session Duration', 84 | data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10] 85 | }, 86 | { 87 | name: 'Page Views', 88 | data: [35, 41, 62, 42, 13, 18, 29, 37, 36, 51, 32, 35] 89 | }, 90 | { 91 | name: 'Total Visits', 92 | data: [87, 57, 74, 99, 75, 38, 62, 47, 82, 56, 45, 47] 93 | } 94 | ] 95 | }; 96 | export default chartData; 97 | -------------------------------------------------------------------------------- /src/views/charts/apex-chart/chart/line-chart.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 300, 3 | type: 'area', 4 | options: { 5 | chart: { 6 | id: 'line-chart', 7 | animations: { 8 | enabled: true, 9 | easing: 'linear', 10 | dynamicAnimation: { 11 | speed: 2000 12 | } 13 | }, 14 | toolbar: { 15 | show: false 16 | }, 17 | zoom: { 18 | enabled: false 19 | } 20 | }, 21 | dataLabels: { 22 | enabled: false 23 | }, 24 | stroke: { 25 | curve: 'smooth' 26 | }, 27 | colors: ['#7267ef'], 28 | fill: { 29 | type: 'gradient', 30 | gradient: { 31 | shadeIntensity: 1, 32 | type: 'horizontal', 33 | opacityFrom: 0.8, 34 | opacityTo: 0, 35 | stops: [0, 100] 36 | } 37 | }, 38 | markers: { 39 | size: 0 40 | }, 41 | xaxis: { 42 | type: 'datetime', 43 | range: 777600000 44 | }, 45 | yaxis: { 46 | max: 100 47 | }, 48 | legend: { 49 | show: false 50 | } 51 | }, 52 | series: [ 53 | { 54 | name: 'active Users :', 55 | data: [] 56 | } 57 | ] 58 | }; 59 | export default chartData; 60 | -------------------------------------------------------------------------------- /src/views/charts/apex-chart/chart/mixed-chart-1.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 350, 3 | type: 'line', 4 | options: { 5 | stroke: { 6 | width: [0, 4] 7 | }, 8 | colors: ['#7267EF', '#EA4D4D'], 9 | fill: { 10 | type: 'solid' 11 | }, 12 | title: { 13 | text: 'Traffic Sources' 14 | }, 15 | labels: [ 16 | '01 Jan 2001', 17 | '02 Jan 2001', 18 | '03 Jan 2001', 19 | '04 Jan 2001', 20 | '05 Jan 2001', 21 | '06 Jan 2001', 22 | '07 Jan 2001', 23 | '08 Jan 2001', 24 | '09 Jan 2001', 25 | '10 Jan 2001', 26 | '11 Jan 2001', 27 | '12 Jan 2001' 28 | ], 29 | xaxis: { 30 | type: 'datetime' 31 | }, 32 | yaxis: [ 33 | { 34 | title: { 35 | text: 'Website Blog' 36 | } 37 | }, 38 | { 39 | opposite: true, 40 | title: { 41 | text: 'Social Media' 42 | } 43 | } 44 | ] 45 | }, 46 | series: [ 47 | { 48 | name: 'Website Blog', 49 | type: 'column', 50 | data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160] 51 | }, 52 | { 53 | name: 'Social Media', 54 | type: 'line', 55 | data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16] 56 | } 57 | ] 58 | }; 59 | export default chartData; 60 | -------------------------------------------------------------------------------- /src/views/charts/apex-chart/chart/mixed-chart-2.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 350, 3 | type: 'line', 4 | options: { 5 | chart: { 6 | stacked: false 7 | }, 8 | stroke: { 9 | width: [0, 2, 5], 10 | curve: 'smooth' 11 | }, 12 | plotOptions: { 13 | bar: { 14 | columnWidth: '50%' 15 | } 16 | }, 17 | colors: ['#EA4D4D', '#7267EF', '#ffa21d'], 18 | fill: { 19 | type: 'solid' 20 | }, 21 | labels: [ 22 | '01/01/2003', 23 | '02/01/2003', 24 | '03/01/2003', 25 | '04/01/2003', 26 | '05/01/2003', 27 | '06/01/2003', 28 | '07/01/2003', 29 | '08/01/2003', 30 | '09/01/2003', 31 | '10/01/2003', 32 | '11/01/2003' 33 | ], 34 | markers: { 35 | size: 0 36 | }, 37 | xaxis: { 38 | type: 'datetime' 39 | }, 40 | yaxis: { 41 | min: 0 42 | }, 43 | tooltip: { 44 | shared: true, 45 | intersect: false, 46 | y: { 47 | formatter(y) { 48 | if (typeof y !== 'undefined') { 49 | return `${y.toFixed(0)} views`; 50 | } 51 | return y; 52 | } 53 | } 54 | }, 55 | legend: { 56 | labels: { 57 | useSeriesColors: true 58 | }, 59 | markers: { 60 | customHTML() { 61 | return ''; 62 | } 63 | } 64 | } 65 | }, 66 | series: [ 67 | { 68 | name: 'Facebook', 69 | type: 'column', 70 | data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30] 71 | }, 72 | { 73 | name: 'Vine', 74 | type: 'area', 75 | data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43] 76 | }, 77 | { 78 | name: 'Dribbble', 79 | type: 'line', 80 | data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39] 81 | } 82 | ] 83 | }; 84 | export default chartData; 85 | -------------------------------------------------------------------------------- /src/views/charts/apex-chart/chart/pie-chart-1.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 320, 3 | type: 'pie', 4 | options: { 5 | labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'], 6 | colors: ['#7267EF', '#17c666', '#3ec9d6', '#ffa21d', '#EA4D4D'], 7 | legend: { 8 | show: true, 9 | position: 'bottom' 10 | }, 11 | fill: { 12 | type: 'solid' 13 | }, 14 | dataLabels: { 15 | enabled: true, 16 | dropShadow: { 17 | enabled: false 18 | } 19 | }, 20 | responsive: [ 21 | { 22 | breakpoint: 480, 23 | options: { 24 | legend: { 25 | position: 'bottom' 26 | } 27 | } 28 | } 29 | ] 30 | }, 31 | series: [44, 55, 13, 43, 22] 32 | }; 33 | export default chartData; 34 | -------------------------------------------------------------------------------- /src/views/charts/apex-chart/chart/pie-chart-2.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 320, 3 | type: 'donut', 4 | options: { 5 | colors: ['#7267EF', '#17c666', '#3ec9d6', '#ffa21d', '#EA4D4D'], 6 | fill: { 7 | type: 'solid' 8 | }, 9 | legend: { 10 | show: true, 11 | position: 'bottom' 12 | }, 13 | plotOptions: { 14 | pie: { 15 | donut: { 16 | labels: { 17 | show: true, 18 | name: { 19 | show: true 20 | }, 21 | value: { 22 | show: true 23 | } 24 | } 25 | } 26 | } 27 | }, 28 | dataLabels: { 29 | enabled: true, 30 | dropShadow: { 31 | enabled: false 32 | } 33 | }, 34 | responsive: [ 35 | { 36 | breakpoint: 480, 37 | options: { 38 | legend: { 39 | position: 'bottom' 40 | } 41 | } 42 | } 43 | ] 44 | }, 45 | series: [44, 55, 41, 17, 15] 46 | }; 47 | export default chartData; 48 | -------------------------------------------------------------------------------- /src/views/charts/apex-chart/chart/radar-chart-1.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 350, 3 | type: 'radar', 4 | options: { 5 | labels: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], 6 | plotOptions: { 7 | radar: { 8 | size: 140, 9 | polygons: { 10 | strokeColors: '#f3f6ff', 11 | fill: { 12 | colors: ['#f3f6ff', '#fff'] 13 | } 14 | } 15 | } 16 | }, 17 | title: { 18 | text: 'Radar with Polygon Fill' 19 | }, 20 | colors: ['#ea4d4d'], 21 | markers: { 22 | size: 4, 23 | colors: ['#fff'], 24 | strokeColors: '#ea4d4d', 25 | strokeWidth: 2 26 | }, 27 | fill: { 28 | type: 'gradient', 29 | gradient: { 30 | shade: 'light', 31 | type: 'vertical', 32 | shadeIntensity: 0.25, 33 | inverseColors: true, 34 | opacityFrom: 0.5, 35 | opacityTo: 0.7, 36 | stops: [40, 100] 37 | } 38 | }, 39 | tooltip: { 40 | y: { 41 | formatter(val) { 42 | return val; 43 | } 44 | } 45 | }, 46 | yaxis: { 47 | tickAmount: 7, 48 | labels: { 49 | formatter(val, i) { 50 | if (i % 2 === 0) { 51 | return val; 52 | } 53 | return ''; 54 | } 55 | } 56 | } 57 | }, 58 | series: [ 59 | { 60 | name: 'Series 1', 61 | data: [20, 100, 40, 30, 50, 80, 33] 62 | } 63 | ] 64 | }; 65 | export default chartData; 66 | -------------------------------------------------------------------------------- /src/views/charts/apex-chart/chart/radar-chart-2.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 350, 3 | type: 'radar', 4 | options: { 5 | chart: { 6 | dropShadow: { 7 | enabled: true, 8 | blur: 1, 9 | left: 1, 10 | top: 1 11 | } 12 | }, 13 | title: { 14 | text: 'Radar Chart - Multi Series' 15 | }, 16 | colors: ['#7267ef', '#17c666', '#ea4d4d'], 17 | stroke: { 18 | width: 0 19 | }, 20 | fill: { 21 | type: 'gradient', 22 | gradient: { 23 | shade: 'light', 24 | type: 'vertical', 25 | shadeIntensity: 0.25, 26 | inverseColors: true, 27 | opacityFrom: 1, 28 | opacityTo: 0.7, 29 | stops: [40, 100] 30 | } 31 | }, 32 | markers: { 33 | size: 0 34 | }, 35 | labels: ['2011', '2012', '2013', '2014', '2015', '2016'] 36 | }, 37 | series: [ 38 | { 39 | name: 'Series 1', 40 | data: [80, 50, 30, 40, 100, 20] 41 | }, 42 | { 43 | name: 'Series 2', 44 | data: [20, 30, 40, 80, 20, 80] 45 | }, 46 | { 47 | name: 'Series 3', 48 | data: [44, 76, 78, 13, 43, 10] 49 | } 50 | ] 51 | }; 52 | export default chartData; 53 | -------------------------------------------------------------------------------- /src/views/charts/apex-chart/chart/radial-bar-chart-1.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 350, 3 | type: 'radialBar', 4 | options: { 5 | plotOptions: { 6 | radialBar: { 7 | hollow: { 8 | size: '60%' 9 | } 10 | } 11 | }, 12 | colors: ['#7267EF'], 13 | fill: { 14 | type: 'solid' 15 | }, 16 | labels: ['Cricket'] 17 | }, 18 | series: [60] 19 | }; 20 | export default chartData; 21 | -------------------------------------------------------------------------------- /src/views/charts/apex-chart/chart/radial-bar-chart-2.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 350, 3 | type: 'radialBar', 4 | options: { 5 | plotOptions: { 6 | radialBar: { 7 | offsetY: -30, 8 | startAngle: 0, 9 | endAngle: 270, 10 | hollow: { 11 | margin: 5, 12 | size: '30%', 13 | background: 'transparent', 14 | image: undefined 15 | }, 16 | dataLabels: { 17 | name: { 18 | show: false 19 | }, 20 | value: { 21 | show: false 22 | } 23 | } 24 | } 25 | }, 26 | colors: ['#7267EF', '#17c666', '#ffa21d', '#EA4D4D'], 27 | fill: { 28 | type: 'solid' 29 | }, 30 | labels: ['Vimeo', 'Messenger', 'Facebook', 'LinkedIn'], 31 | legend: { 32 | show: true, 33 | floating: true, 34 | fontSize: '16px', 35 | position: 'left', 36 | offsetX: 0, 37 | offsetY: 0, 38 | labels: { 39 | useSeriesColors: true 40 | }, 41 | formatter(seriesName, opts) { 42 | return `${seriesName}: ${opts.w.globals.series[opts.seriesIndex]}`; 43 | }, 44 | itemMargin: { 45 | horizontal: 1 46 | } 47 | }, 48 | responsive: [ 49 | { 50 | breakpoint: 480, 51 | options: { 52 | legend: { 53 | show: false 54 | } 55 | } 56 | } 57 | ] 58 | }, 59 | series: [76, 67, 61, 90] 60 | }; 61 | export default chartData; 62 | -------------------------------------------------------------------------------- /src/views/charts/apex-chart/chart/scatter-chart-1.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 350, 3 | type: 'scatter', 4 | options: { 5 | chart: { 6 | zoom: { 7 | enabled: true, 8 | type: 'xy' 9 | } 10 | }, 11 | dataLabels: { 12 | enabled: false 13 | }, 14 | colors: ['#7267ef', '#17c666', '#ea4d4d', '#ffa21d', '#00bcd4'], 15 | xaxis: { 16 | tickAmount: 10, 17 | labels: { 18 | formatter: (val) => parseFloat(val).toFixed(1) 19 | } 20 | }, 21 | yaxis: { 22 | tickAmount: 7 23 | } 24 | }, 25 | series: [ 26 | { 27 | name: 'SAMPLE A', 28 | data: [ 29 | [16.4, 5.4], 30 | [21.7, 2], 31 | [25.4, 3], 32 | [19, 2], 33 | [10.9, 1], 34 | [13.6, 3.2], 35 | [10.9, 7.4], 36 | [10.9, 0], 37 | [10.9, 8.2], 38 | [16.4, 0], 39 | [16.4, 1.8], 40 | [13.6, 0.3], 41 | [13.6, 0], 42 | [29.9, 0], 43 | [27.1, 2.3], 44 | [16.4, 0], 45 | [13.6, 3.7], 46 | [10.9, 5.2], 47 | [16.4, 6.5], 48 | [10.9, 0], 49 | [24.5, 7.1], 50 | [10.9, 0], 51 | [8.1, 4.7], 52 | [19, 0], 53 | [21.7, 1.8], 54 | [27.1, 0], 55 | [24.5, 0], 56 | [27.1, 0], 57 | [29.9, 1.5], 58 | [27.1, 0.8], 59 | [22.1, 2] 60 | ] 61 | }, 62 | { 63 | name: 'SAMPLE B', 64 | data: [ 65 | [36.4, 13.4], 66 | [1.7, 11], 67 | [5.4, 8], 68 | [9, 17], 69 | [1.9, 4], 70 | [3.6, 12.2], 71 | [1.9, 14.4], 72 | [1.9, 9], 73 | [1.9, 13.2], 74 | [1.4, 7], 75 | [6.4, 8.8], 76 | [3.6, 4.3], 77 | [1.6, 10], 78 | [9.9, 2], 79 | [7.1, 15], 80 | [1.4, 0], 81 | [3.6, 13.7], 82 | [1.9, 15.2], 83 | [6.4, 16.5], 84 | [0.9, 10], 85 | [4.5, 17.1], 86 | [10.9, 10], 87 | [0.1, 14.7], 88 | [9, 10], 89 | [12.7, 11.8], 90 | [2.1, 10], 91 | [2.5, 10], 92 | [27.1, 10], 93 | [2.9, 11.5], 94 | [7.1, 10.8], 95 | [2.1, 12] 96 | ] 97 | }, 98 | { 99 | name: 'SAMPLE C', 100 | data: [ 101 | [21.7, 3], 102 | [23.6, 3.5], 103 | [24.6, 3], 104 | [29.9, 3], 105 | [21.7, 20], 106 | [23, 2], 107 | [10.9, 3], 108 | [28, 4], 109 | [27.1, 0.3], 110 | [16.4, 4], 111 | [13.6, 0], 112 | [19, 5], 113 | [22.4, 3], 114 | [24.5, 3], 115 | [32.6, 3], 116 | [27.1, 4], 117 | [29.6, 6], 118 | [31.6, 8], 119 | [21.6, 5], 120 | [20.9, 4], 121 | [22.4, 0], 122 | [32.6, 10.3], 123 | [29.7, 20.8], 124 | [24.5, 0.8], 125 | [21.4, 0], 126 | [21.7, 6.9], 127 | [28.6, 7.7], 128 | [15.4, 0], 129 | [18.1, 0], 130 | [33.4, 0], 131 | [16.4, 0] 132 | ] 133 | } 134 | ] 135 | }; 136 | export default chartData; 137 | -------------------------------------------------------------------------------- /src/views/charts/apex-chart/chart/scatter-chart-2.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 350, 3 | type: 'scatter', 4 | options: { 5 | chart: { 6 | zoom: { 7 | type: 'xy' 8 | } 9 | }, 10 | dataLabels: { 11 | enabled: false 12 | }, 13 | colors: ['#7267ef', '#17c666', '#ea4d4d', '#ffa21d', '#00bcd4'], 14 | grid: { 15 | xaxis: { 16 | lines: { 17 | show: true 18 | } 19 | }, 20 | yaxis: { 21 | lines: { 22 | show: true 23 | } 24 | } 25 | }, 26 | xaxis: { 27 | type: 'datetime' 28 | }, 29 | yaxis: { 30 | max: 70 31 | } 32 | }, 33 | series: [ 34 | { 35 | name: 'TEAM 1', 36 | data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 20, { 37 | min: 10, 38 | max: 60 39 | }) 40 | }, 41 | { 42 | name: 'TEAM 2', 43 | data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 20, { 44 | min: 10, 45 | max: 60 46 | }) 47 | }, 48 | { 49 | name: 'TEAM 3', 50 | data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 30, { 51 | min: 10, 52 | max: 60 53 | }) 54 | }, 55 | { 56 | name: 'TEAM 4', 57 | data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, { 58 | min: 10, 59 | max: 60 60 | }) 61 | }, 62 | { 63 | name: 'TEAM 5', 64 | data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 30, { 65 | min: 10, 66 | max: 60 67 | }) 68 | } 69 | ] 70 | }; 71 | export default chartData; 72 | 73 | function generateDayWiseTimeSeries(baseval, count, yrange) { 74 | let i = 0; 75 | const series = []; 76 | while (i < count) { 77 | const y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min; 78 | 79 | series.push([baseval, y]); 80 | baseval += 86400000; 81 | i += 1; 82 | } 83 | return series; 84 | } 85 | -------------------------------------------------------------------------------- /src/views/dashboard/DashSales/chart/sales-account-chart.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 350, 3 | type: 'line', 4 | options: { 5 | stroke: { 6 | width: [0, 3], 7 | curve: 'smooth' 8 | }, 9 | plotOptions: { 10 | bar: { 11 | columnWidth: '50%' 12 | } 13 | }, 14 | colors: ['#7267EF', '#c7d9ff'], 15 | fill: { 16 | opacity: [0.85, 1] 17 | }, 18 | labels: [ 19 | '01/01/2003', 20 | '02/01/2003', 21 | '03/01/2003', 22 | '04/01/2003', 23 | '05/01/2003', 24 | '06/01/2003', 25 | '07/01/2003', 26 | '08/01/2003', 27 | '09/01/2003', 28 | '10/01/2003', 29 | '11/01/2003' 30 | ], 31 | markers: { 32 | size: 0 33 | }, 34 | xaxis: { 35 | type: 'datetime' 36 | }, 37 | yaxis: { 38 | min: 0 39 | }, 40 | tooltip: { 41 | shared: true, 42 | intersect: false, 43 | y: { 44 | formatter(y) { 45 | if (typeof y !== 'undefined') { 46 | return `$ ${y.toFixed(0)}`; 47 | } 48 | return y; 49 | } 50 | } 51 | }, 52 | legend: { 53 | labels: { 54 | useSeriesColors: true 55 | }, 56 | markers: { 57 | customHTML() { 58 | return ''; 59 | } 60 | } 61 | } 62 | }, 63 | series: [ 64 | { 65 | name: 'Total Sales', 66 | type: 'column', 67 | data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30] 68 | }, 69 | { 70 | name: 'Average', 71 | type: 'line', 72 | data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39] 73 | } 74 | ] 75 | }; 76 | export default chartData; 77 | -------------------------------------------------------------------------------- /src/views/dashboard/DashSales/chart/sales-customer-satisfication-chart.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 260, 3 | // type: 'pie', 4 | options: { 5 | labels: ['extremely Satisfied', 'Satisfied', 'Poor', 'Very Poor'], 6 | legend: { 7 | show: true, 8 | offsetY: 50 9 | }, 10 | dataLabels: { 11 | enabled: true, 12 | dropShadow: { 13 | enabled: false 14 | } 15 | }, 16 | theme: { 17 | monochrome: { 18 | enabled: true, 19 | color: '#7267EF' 20 | } 21 | }, 22 | responsive: [ 23 | { 24 | breakpoint: 768, 25 | options: { 26 | chart: { 27 | height: 320 28 | }, 29 | legend: { 30 | position: 'bottom', 31 | offsetY: 0 32 | } 33 | } 34 | } 35 | ] 36 | }, 37 | series: [66, 50, 40, 30] 38 | }; 39 | export default chartData; 40 | -------------------------------------------------------------------------------- /src/views/dashboard/DashSales/chart/sales-support-chart.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | type: 'area', 3 | height: 85, 4 | options: { 5 | chart: { 6 | width: '100%', 7 | sparkline: { 8 | enabled: true 9 | } 10 | }, 11 | colors: ['#7267EF'], 12 | stroke: { 13 | curve: 'smooth', 14 | width: 2 15 | }, 16 | tooltip: { 17 | fixed: { 18 | enabled: false 19 | }, 20 | x: { 21 | show: false 22 | }, 23 | y: { 24 | title: { 25 | formatter() { 26 | return 'Ticket '; 27 | } 28 | } 29 | }, 30 | marker: { 31 | show: false 32 | } 33 | } 34 | }, 35 | series: [ 36 | { 37 | data: [0, 20, 10, 45, 30, 55, 20, 30, 0] 38 | } 39 | ] 40 | }; 41 | 42 | export default chartData; 43 | -------------------------------------------------------------------------------- /src/views/dashboard/DashSales/chart/sales-support-chart1.js: -------------------------------------------------------------------------------- 1 | const chartData = { 2 | height: 85, 3 | type: 'bar', 4 | options: { 5 | chart: { 6 | sparkline: { 7 | enabled: true 8 | } 9 | }, 10 | colors: ['#7267EF'], 11 | plotOptions: { 12 | bar: { 13 | columnWidth: '70%' 14 | } 15 | }, 16 | xaxis: { 17 | crosshairs: { 18 | width: 1 19 | } 20 | }, 21 | tooltip: { 22 | fixed: { 23 | enabled: false 24 | }, 25 | x: { 26 | show: false 27 | }, 28 | y: { 29 | title: { 30 | formatter() { 31 | return ''; 32 | } 33 | } 34 | }, 35 | marker: { 36 | show: false 37 | } 38 | } 39 | }, 40 | series: [ 41 | { 42 | data: [ 43 | 25, 66, 41, 89, 63, 25, 44, 12, 36, 9, 54, 44, 12, 36, 9, 54, 25, 66, 41, 89, 63, 25, 44, 12, 36, 9, 25, 44, 12, 36, 9, 54 44 | ] 45 | } 46 | ] 47 | }; 48 | export default chartData; 49 | -------------------------------------------------------------------------------- /src/views/maps/GmapSearchAPI.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // react-bootstrap 4 | import { Row, Col, Card, Button, Form, InputGroup, ButtonGroup } from 'react-bootstrap'; 5 | 6 | // project imports 7 | import GmapSearch from './google-maps/GmapSearch'; 8 | 9 | // -----------------------|| GOOGLE MAP SEARCH ||-----------------------// 10 | const GoogleMapsSearch = () => ( 11 | <> 12 | 13 | 14 | 15 | 16 | Google Map Search 17 | 18 | 19 |
20 | 28 |
29 |
30 | 31 |
32 |
33 |
34 |
35 | 36 | 37 | 38 | 41 | 44 | 47 | 48 |   49 | 52 | 55 | 56 | 57 |
58 | 59 | 60 | 61 | 62 | 63 | ); 64 | 65 | export default GoogleMapsSearch; 66 | -------------------------------------------------------------------------------- /src/views/maps/google-maps/BasicMap.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // third party 4 | import { withScriptjs, withGoogleMap, GoogleMap } from 'react-google-maps'; 5 | import { compose, withProps } from 'recompose'; 6 | 7 | // -----------------------|| BASIC MAP ||-----------------------// 8 | const BasicMap = compose( 9 | withProps({ 10 | googleMapURL: 11 | 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAChufWiMfwsmyX3Se1dRaN4t31z0xmIMo&v=3.exp&libraries=geometry,drawing,places', 12 | loadingElement:
, 13 | containerElement:
, 14 | mapElement:
15 | }), 16 | withScriptjs, 17 | withGoogleMap 18 | )(() => ); 19 | 20 | export default BasicMap; 21 | -------------------------------------------------------------------------------- /src/views/maps/google-maps/GmapSearch.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // third party 4 | import { withScriptjs, withGoogleMap, GoogleMap } from 'react-google-maps'; 5 | import { compose, withProps } from 'recompose'; 6 | 7 | // -----------------------|| GMAP SEARCH ||-----------------------// 8 | const GmapSearch = compose( 9 | withProps({ 10 | googleMapURL: 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&libraries=places&v=weekly', 11 | loadingElement:
, 12 | containerElement:
, 13 | mapElement:
14 | }), 15 | withScriptjs, 16 | withGoogleMap 17 | )(() => ); 18 | 19 | export default GmapSearch; 20 | -------------------------------------------------------------------------------- /src/views/maps/google-maps/Marker.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // third party 4 | import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps'; 5 | import InfoBox from 'react-google-maps/lib/components/addons/InfoBox'; 6 | import { compose, withProps, withStateHandlers } from 'recompose'; 7 | 8 | // -----------------------|| MAP WITH A MARKER ||-----------------------// 9 | const MapWithAMarker = compose( 10 | withProps({ 11 | googleMapURL: 12 | 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAChufWiMfwsmyX3Se1dRaN4t31z0xmIMo&v=3.exp&libraries=geometry,drawing,places', 13 | loadingElement:
, 14 | containerElement:
, 15 | mapElement:
16 | }), 17 | withStateHandlers( 18 | () => ({ 19 | isOpen: false 20 | }), 21 | { 22 | onToggleOpen: 23 | ({ isOpen }) => 24 | () => ({ 25 | isOpen: !isOpen 26 | }) 27 | } 28 | ), 29 | withScriptjs, 30 | withGoogleMap 31 | )((props) => ( 32 | 33 | 34 | {props.isOpen && ( 35 | 36 |
37 |

38 | Buy Now at{' '} 39 | 40 | Themeforest 41 | 42 |

43 |
44 | 45 | )} 46 | 47 | 48 | )); 49 | 50 | export default MapWithAMarker; 51 | -------------------------------------------------------------------------------- /src/views/maps/google-maps/MarkerClusterer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // third party 4 | import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps'; 5 | import { compose, withProps, withHandlers } from 'recompose'; 6 | import MarkerClusterer from 'react-google-maps/lib/components/addons/MarkerClusterer'; 7 | 8 | // -----------------------|| MAP WITH A MARKER CLUSTERER ||-----------------------// 9 | const MapWithAMarkerClusterer = compose( 10 | withProps({ 11 | googleMapURL: 12 | 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAChufWiMfwsmyX3Se1dRaN4t31z0xmIMo&v=3.exp&libraries=geometry,drawing,places', 13 | loadingElement:
, 14 | containerElement:
, 15 | mapElement:
16 | }), 17 | withHandlers({ 18 | onMarkerClustererClick: () => (markerClusterer) => { 19 | const clickedMarkers = markerClusterer.getMarkers(); 20 | console.log(`Current clicked markers length: ${clickedMarkers.length}`); 21 | console.log(clickedMarkers); 22 | } 23 | }), 24 | withScriptjs, 25 | withGoogleMap 26 | )((props) => ( 27 | 28 | 29 | {props.markers.map((marker) => ( 30 | 31 | ))} 32 | 33 | 34 | )); 35 | 36 | export default MapWithAMarkerClusterer; 37 | -------------------------------------------------------------------------------- /src/views/maps/google-maps/StreetViewPanorma.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // third party 4 | import { compose, withProps } from 'recompose'; 5 | import { withScriptjs, withGoogleMap, GoogleMap, StreetViewPanorama, OverlayView } from 'react-google-maps'; 6 | 7 | const getPixelPositionOffset = (width, height) => ({ 8 | x: -(width / 2), 9 | y: -(height / 2) 10 | }); 11 | 12 | // -----------------------|| STREET VIEW PANORMA WITH OVERLAY VIEW ||-----------------------// 13 | const StreetViewPanormaWithAnOverlayView = compose( 14 | withProps({ 15 | googleMapURL: 16 | 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAChufWiMfwsmyX3Se1dRaN4t31z0xmIMo&v=3.exp&libraries=geometry,drawing,places', 17 | loadingElement:
, 18 | containerElement:
, 19 | mapElement:
, 20 | center: { lat: 49.2853171, lng: -123.1119202 } 21 | }), 22 | withScriptjs, 23 | withGoogleMap 24 | )((props) => ( 25 | 26 | 27 | 32 |
OverlayView
33 | 34 | 35 | 36 | )); 37 | 38 | export default StreetViewPanormaWithAnOverlayView; 39 | -------------------------------------------------------------------------------- /src/views/page-layouts/vertical/CollapseMenu.js: -------------------------------------------------------------------------------- 1 | import React, { useContext, useEffect } from 'react'; 2 | 3 | // project imports 4 | import { ConfigContext } from 'contexts/ConfigContext'; 5 | import * as actionType from 'store/actions'; 6 | import CommonContent from '../CommonContent'; 7 | 8 | // -----------------------|| VERTICAL ||-----------------------// 9 | const Vertical = () => { 10 | const configContext = useContext(ConfigContext); 11 | const { layout, collapseLayout } = configContext.state; 12 | const { dispatch } = configContext; 13 | useEffect(() => { 14 | if (layout !== 'vertical') { 15 | dispatch({ type: actionType.CHANGE_LAYOUT, layout: 'vertical' }); 16 | } 17 | if (!collapseLayout) { 18 | dispatch({ type: actionType.COLLAPSE_LAYOUT }); 19 | dispatch({ type: actionType.COLLAPSE_MENU }); 20 | } 21 | }, [collapseLayout, dispatch, layout]); 22 | 23 | return ( 24 | <> 25 | 26 | 27 | ); 28 | }; 29 | 30 | export default Vertical; 31 | -------------------------------------------------------------------------------- /src/views/sample/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // react-bootstrap 4 | import { Card, Row, Col } from 'react-bootstrap'; 5 | 6 | // -----------------------|| SAMPLE ||-----------------------// 7 | const Sample = () => ( 8 | 9 | 10 | 11 | 12 | Hello card 13 | 14 | 15 |

16 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna 17 | aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 18 | Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 19 | sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 20 |

21 | 22 | 23 | 24 | 25 | ); 26 | 27 | export default Sample; 28 | -------------------------------------------------------------------------------- /src/views/ui-elements/icons/Feather.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | // react-bootstrap 4 | import { Row, Col, Card, OverlayTrigger, Tooltip } from 'react-bootstrap'; 5 | 6 | // third party 7 | import { CopyToClipboard } from 'react-copy-to-clipboard'; 8 | import FeatherIcon from 'feather-icons-react'; 9 | 10 | // project imports 11 | import iconlist from './data/feather-icon'; 12 | 13 | // -----------------------|| FEATHER ||-----------------------// 14 | const Feather = () => { 15 | const [iconFilter, setIconFilter] = useState(iconlist); 16 | 17 | const iconSearchFilter = (e) => { 18 | setIconFilter(iconlist.filter((name) => name.includes(e.target?.value))); 19 | }; 20 | 21 | const copyHandler = (icon) => { 22 | document.querySelector(`[data-clipboard-text="${icon}"]`)?.querySelector('.ic-badge')?.remove(); 23 | document 24 | .querySelector(`[data-clipboard-text="${icon}"]`) 25 | ?.insertAdjacentHTML('beforeend', 'copied'); 26 | setTimeout(() => { 27 | document.querySelector(`[data-clipboard-text="${icon}"]`)?.querySelector('.ic-badge')?.remove(); 28 | }, 3000); 29 | }; 30 | return ( 31 | <> 32 | 33 | 34 | 35 | 36 | Feather Icon 37 |

38 | Use svg icon with <FeatherIcon icon="<< Copyed code >>"> in you html code 39 |

40 | 41 | 42 | 43 | 44 | 51 | 52 | 53 |
54 | {iconFilter.map((icon) => ( 55 | {icon}}> 56 | 57 |
66 | 67 |
68 | 69 | 70 | ))} 71 |
72 | 73 | 74 | 75 | 76 | 77 | ); 78 | }; 79 | 80 | export default Feather; 81 | -------------------------------------------------------------------------------- /src/views/ui-elements/icons/data/feather-icon.js: -------------------------------------------------------------------------------- 1 | const iconlist = [ 2 | 'alert-octagon', 3 | 'alert-circle', 4 | 'activity', 5 | 'alert-triangle', 6 | 'align-center', 7 | 'airplay', 8 | 'align-justify', 9 | 'align-left', 10 | 'align-right', 11 | 'arrow-down-left', 12 | 'arrow-down-right', 13 | 'anchor', 14 | 'aperture', 15 | 'arrow-left', 16 | 'arrow-right', 17 | 'arrow-down', 18 | 'arrow-up-left', 19 | 'arrow-up-right', 20 | 'arrow-up', 21 | 'award', 22 | 'bar-chart', 23 | 'at-sign', 24 | 'bar-chart-2', 25 | 'battery-charging', 26 | 'bell-off', 27 | 'battery', 28 | 'bluetooth', 29 | 'bell', 30 | 'book', 31 | 'briefcase', 32 | 'camera-off', 33 | 'calendar', 34 | 'bookmark', 35 | 'box', 36 | 'camera', 37 | 'check-circle', 38 | 'check', 39 | 'check-square', 40 | 'cast', 41 | 'chevron-down', 42 | 'chevron-left', 43 | 'chevron-right', 44 | 'chevron-up', 45 | 'chevrons-down', 46 | 'chevrons-right', 47 | 'chevrons-up', 48 | 'chevrons-left', 49 | 'circle', 50 | 'clipboard', 51 | 'chrome', 52 | 'clock', 53 | 'cloud-lightning', 54 | 'cloud-drizzle', 55 | 'cloud-rain', 56 | 'cloud-off', 57 | 'codepen', 58 | 'cloud-snow', 59 | 'compass', 60 | 'copy', 61 | 'corner-down-right', 62 | 'corner-down-left', 63 | 'corner-left-down', 64 | 'corner-left-up', 65 | 'corner-up-left', 66 | 'corner-up-right', 67 | 'corner-right-down', 68 | 'corner-right-up', 69 | 'cpu', 70 | 'credit-card', 71 | 'crosshair', 72 | 'disc', 73 | 'delete', 74 | 'download-cloud', 75 | 'download', 76 | 'droplet', 77 | 'edit-2', 78 | 'edit', 79 | 'external-link', 80 | 'eye', 81 | 'feather', 82 | 'facebook', 83 | 'file-minus', 84 | 'eye-off', 85 | 'fast-forward', 86 | 'file-text', 87 | 'film', 88 | 'file', 89 | 'file-plus', 90 | 'folder', 91 | 'filter', 92 | 'flag', 93 | 'globe', 94 | 'grid', 95 | 'heart', 96 | 'home', 97 | 'github', 98 | 'image', 99 | 'inbox', 100 | 'layers', 101 | 'info', 102 | 'instagram', 103 | 'layout', 104 | 'link-2', 105 | 'life-buoy', 106 | 'link', 107 | 'log-in', 108 | 'list', 109 | 'lock', 110 | 'log-out', 111 | 'loader', 112 | 'mail', 113 | 'maximize-2', 114 | 'map', 115 | 'map-pin', 116 | 'menu', 117 | 'message-circle', 118 | 'message-square', 119 | 'minimize-2', 120 | 'mic-off', 121 | 'minus-circle', 122 | 'mic', 123 | 'minus-square', 124 | 'minus', 125 | 'moon', 126 | 'monitor', 127 | 'more-vertical', 128 | 'more-horizontal', 129 | 'move', 130 | 'music', 131 | 'navigation-2', 132 | 'navigation', 133 | 'octagon', 134 | 'package', 135 | 'pause-circle', 136 | 'pause', 137 | 'percent', 138 | 'phone-call', 139 | 'phone-forwarded', 140 | 'phone-missed', 141 | 'phone-off', 142 | 'phone-incoming', 143 | 'phone', 144 | 'phone-outgoing', 145 | 'pie-chart', 146 | 'play-circle', 147 | 'play', 148 | 'plus-square', 149 | 'plus-circle', 150 | 'plus', 151 | 'pocket', 152 | 'printer', 153 | 'power', 154 | 'radio', 155 | 'repeat', 156 | 'refresh-ccw', 157 | 'rewind', 158 | 'rotate-ccw', 159 | 'refresh-cw', 160 | 'rotate-cw', 161 | 'save', 162 | 'search', 163 | 'server', 164 | 'scissors', 165 | 'share-2', 166 | 'share', 167 | 'shield', 168 | 'settings', 169 | 'skip-back', 170 | 'shuffle', 171 | 'sidebar', 172 | 'skip-forward', 173 | 'slack', 174 | 'slash', 175 | 'smartphone', 176 | 'square', 177 | 'speaker', 178 | 'star', 179 | 'stop-circle', 180 | 'sun', 181 | 'sunrise', 182 | 'tablet', 183 | 'tag', 184 | 'sunset', 185 | 'target', 186 | 'thermometer', 187 | 'thumbs-up', 188 | 'thumbs-down', 189 | 'toggle-left', 190 | 'toggle-right', 191 | 'trash-2', 192 | 'trash', 193 | 'trending-up', 194 | 'trending-down', 195 | 'triangle', 196 | 'type', 197 | 'twitter', 198 | 'upload', 199 | 'umbrella', 200 | 'upload-cloud', 201 | 'unlock', 202 | 'user-check', 203 | 'user-minus', 204 | 'user-plus', 205 | 'user-x', 206 | 'user', 207 | 'users', 208 | 'video-off', 209 | 'video', 210 | 'voicemail', 211 | 'volume-x', 212 | 'volume-2', 213 | 'volume-1', 214 | 'volume', 215 | 'watch', 216 | 'wifi', 217 | 'x-square', 218 | 'wind', 219 | 'x', 220 | 'x-circle', 221 | 'zap', 222 | 'zoom-in', 223 | 'zoom-out', 224 | 'command', 225 | 'cloud', 226 | 'hash', 227 | 'headphones', 228 | 'underline', 229 | 'italic', 230 | 'bold', 231 | 'crop', 232 | 'help-circle', 233 | 'paperclip', 234 | 'shopping-cart', 235 | 'tv', 236 | 'wifi-off', 237 | 'minimize', 238 | 'maximize', 239 | 'gitlab', 240 | 'sliders' 241 | ]; 242 | 243 | export default iconlist; 244 | --------------------------------------------------------------------------------