├── .env.example ├── .gitattributes ├── .gitignore ├── .gitpod.yml ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── commit.sh ├── deployer.json ├── gulpfile.js ├── jsconfig.json ├── package.json ├── public ├── apple-icon.png ├── favicon.ico ├── index.html └── manifest.json └── src ├── ProtectedRoute.js ├── api ├── auth.js └── index.js ├── assets ├── img │ ├── BackgroundCard1.png │ ├── BgSignUp.png │ ├── ImageArchitect1.png │ ├── ImageArchitect2.png │ ├── ImageArchitect3.png │ ├── ProfileBackground.png │ ├── SidebarHelpImage.png │ ├── avatars │ │ ├── avatar1.png │ │ ├── avatar10.png │ │ ├── avatar2.png │ │ ├── avatar3.png │ │ ├── avatar4.png │ │ ├── avatar5.png │ │ ├── avatar6.png │ │ ├── avatar7.png │ │ ├── avatar8.png │ │ └── avatar9.png │ ├── people-image.png │ └── signInImage.png └── svg │ ├── account-circle.svg │ ├── adobexd-logo.svg │ ├── atlassian-logo.svg │ ├── box-3d.svg │ ├── build.svg │ ├── cart.svg │ ├── credit.svg │ ├── cube.svg │ ├── document.svg │ ├── globe.svg │ ├── help.svg │ ├── home.svg │ ├── invision-logo.svg │ ├── jira-logo.svg │ ├── key.svg │ ├── logo-colored.svg │ ├── logo-white.svg │ ├── logo.svg │ ├── mastercard-icon.svg │ ├── notifications.svg │ ├── paypal.svg │ ├── person-auth.svg │ ├── person-circle-auth.svg │ ├── person.svg │ ├── profile.svg │ ├── rocket.svg │ ├── search.svg │ ├── settings.svg │ ├── slack-logo.svg │ ├── spotify-logo.svg │ ├── stats.svg │ ├── visa.svg │ ├── wallet.svg │ └── watch.svg ├── auth-context └── auth.context.js ├── components ├── Card │ ├── Card.js │ ├── CardBody.js │ └── CardHeader.js ├── Charts │ ├── BarChart.js │ └── LineChart.js ├── Configurator │ └── Configurator.js ├── FixedPlugin │ └── FixedPlugin.js ├── Footer │ └── Footer.js ├── Icons │ ├── IconBox.js │ └── Icons.js ├── Layout │ ├── MainPanel.js │ ├── PanelContainer.js │ └── PanelContent.js ├── Menu │ └── ItemContent.js ├── Navbars │ ├── AdminNavbar.js │ ├── AdminNavbarLinks.js │ ├── AuthNavbar.js │ └── SearchBar │ │ └── SearchBar.js ├── RTLProvider │ └── RTLProvider.js ├── Separator │ └── Separator.js ├── Sidebar │ ├── SidebarContent.js │ ├── SidebarHelp.js │ ├── SidebarResponsive.js │ └── index.js └── Tables │ ├── BillingRow.js │ ├── DashboardTableRow.js │ ├── InvoicesRow.js │ ├── TablesProjectRow.js │ ├── TablesTableRow.js │ ├── TimelineRow.js │ └── TransactionRow.js ├── config └── constant.js ├── index.js ├── layouts ├── Admin.js ├── Auth.js └── RTL.js ├── routes.js ├── theme ├── additions │ ├── card │ │ ├── Card.js │ │ ├── CardBody.js │ │ └── CardHeader.js │ └── layout │ │ ├── MainPanel.js │ │ ├── PanelContainer.js │ │ └── PanelContent.js ├── components │ ├── badge.js │ ├── button.js │ ├── drawer.js │ └── link.js ├── foundations │ ├── breakpoints.js │ └── text.js ├── styles.js └── theme.js ├── variables ├── charts.js └── general.js └── views ├── Auth ├── SignIn.js └── SignUp.js └── Dashboard ├── Billing ├── components │ ├── BillingInformation.js │ ├── CreditCard.js │ ├── Invoices.js │ ├── PaymentMethod.js │ ├── PaymentStatistics.js │ └── Transactions.js └── index.js ├── Dashboard ├── components │ ├── ActiveUsers.js │ ├── BuiltByDevelopers.js │ ├── ChartStatistics.js │ ├── MiniStatistics.js │ ├── OrdersOverview.js │ ├── Projects.js │ ├── SalesOverview.js │ └── WorkWithTheRockets.js └── index.js ├── Profile ├── components │ ├── Conversations.js │ ├── Header.js │ ├── PlatformSettings.js │ ├── ProfileInformation.js │ ├── ProjectCard.js │ └── Projects.js └── index.js ├── RTL └── index.js └── Tables ├── components ├── Authors.js └── Projects.js └── index.js /.env.example: -------------------------------------------------------------------------------- 1 | GENERATE_SOURCEMAP=false 2 | REACT_APP_BACKEND_SERVER=http://127.0.0.1:5000/api/ 3 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | yarn.lock 3 | package-lock.json 4 | build 5 | .DS_Store 6 | .env -------------------------------------------------------------------------------- /.gitpod.yml: -------------------------------------------------------------------------------- 1 | # This configuration file was automatically generated by Gitpod. 2 | # Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file) 3 | # and commit this file to your remote git repository to share the goodness with others. 4 | 5 | tasks: 6 | - init: npm install && npm run build 7 | command: npm run start 8 | 9 | 10 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [v1.0.7] 2022-12-03 4 | ### Changes 5 | 6 | - UI/UX Changes 7 | - Minor Fixes 8 | 9 | ## [v1.0.6] 2022-12-03 10 | ### Changes 11 | 12 | - Bump UI: `v2.0.3` 13 | - Updates for [LIVE Deployer](https://appseed.us/go-live/) 14 | 15 | ## [v1.0.5] 2022-11-08 16 | ### Improvements 17 | 18 | - Save Compat matrix in `package.json` 19 | - `build` node 20 | - Yarn, NPM 21 | - NodeJS versions 22 | 23 | ## [1.0.4] 2022-11-05 24 | ### Improvements 25 | 26 | - Added `env.sample` 27 | - `API_URL` can be specified in `env` (optional) 28 | - data used in `src/config.js` 29 | - Added `compatibility matrix` for Node, yarn & NPM 30 | - Testing tool: [Render API Wrapper](https://github.com/app-generator/deploy-automation-render) 31 | 32 | ## [1.0.3] 2021-11-16 33 | ### Improvements 34 | 35 | - Added Docker Support 36 | - Fixes: 37 | - Logout over Flask API Server 38 | 39 | ## [1.0.2] 2021-10-13 40 | ### Improvements 41 | 42 | - Added Usable JWT Authentication Flow 43 | - Login/Logout/Register 44 | 45 | ## [1.0.1] 2021-10-09 46 | ### Initial Import 47 | 48 | - Added RTL Page 49 | - Bug Fixing 50 | - Added Chakra UI - Base Framework 51 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # MIT License 2 | 3 | Copyright (c) 2019 - present [CodedThemes](https://codedthemes.com/) / [AppSeed](http://appseed.us/) 4 | 5 |
6 | 7 | ## Licensing Information 8 | 9 |
10 | 11 | | Item | - | 12 | | ---------------------------------- | --- | 13 | | License Type | MIT | 14 | | Use for print | **YES** | 15 | | Create single personal website/app | **YES** | 16 | | Create single website/app for client | **YES** | 17 | | Create multiple website/apps for clients | **YES** | 18 | | Create multiple SaaS applications | **YES** | 19 | | End-product paying users | **YES** | 20 | | Product sale | **YES** | 21 | | Remove footer credits | **YES** | 22 | | --- | --- | 23 | | Remove copyright mentions from source code | NO | 24 | | Production deployment assistance | NO | 25 | | Create HTML/CSS template for sale | NO | 26 | | Create Theme/Template for CMS for sale | NO | 27 | | Separate sale of our UI Elements | NO | 28 | 29 |
30 | 31 | --- 32 | For more information regarding licensing, please contact the AppSeed Service < *support@appseed.us* > 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [React Purity Dashboard](https://app-generator.dev/product/purity-dashboard/api-nodejs/react/) 2 | 3 | Start your Development with an Innovative Admin Template for **Chakra UI** and **React**. [React Purity Dashboard](https://app-generator.dev/product/purity-dashboard/api-nodejs/react/) is built with over 70 frontend individual elements, like buttons, inputs, navbars, navtabs, cards or alerts, giving you the freedom of choosing and combining. All components can take variations in colour, that you can easily modify using Chakra's style props. The product comes with a simple JWT authentication flow: login/register/logout. 4 | 5 | - 👉 [React Purity Dashboard](https://app-generator.dev/product/purity-dashboard/api-nodejs/react/) - product page 6 | - 👉 [React Purity Dashboard](https://node-js-react-purity-dashboard.appseed-srv1.com/#/auth/signin) - LIVE Demo 7 | 8 |
9 | 10 | > 🚀 Provided by **[App Generator](https://app-generator.dev/)** 11 | 12 | - ✅ Innovative Chakra Design - **Crafted by [Creative-Tim](https://app-generator.dev/agency/creative-tim/)** 13 | - ✅ React, Redux, Redux-persist 14 | - ✅ Authentication: JWT Login/Register/Logout 15 | - ✅ Full-stack ready using **[Node JS API Server](https://github.com/app-generator/api-server-nodejs)** (open-source project) 16 | - Features: Typescript / SQLite / TypeORM / Joy (validation) / Passport library - `passport-jwt` strategy. 17 | 18 |
19 | 20 | ![React Purity Dashboard - Open-source full-stack prodyct crafted by AppSeed and Creative-Tim.](https://user-images.githubusercontent.com/51070104/205427640-007904ec-9cd5-4060-86c6-47675b36cda1.png) 21 | 22 |
23 | 24 | ## Tests 25 | 26 | > `Compatibility matrix` using Ubuntu `18.04 LTS` as reference. 27 | 28 | | NodeJS | NPM | YARN | 29 | | --- | --- | --- | 30 | | `v12.0.0` | ✅ | ✅ | 31 | | `v14.0.0` | ✅ | ✅ | 32 | | `v16.0.0` | ✅ | ✅ | 33 | | `v18.0.0` | ✅ | ✅ | 34 | 35 |
36 | 37 | ## How to use it 38 | 39 | To use the product Node JS (>= 12.x) is required and GIT to clone/download the project from the public repository. 40 | 41 | > 👉 **Step 1** - Clone the project 42 | 43 | ```bash 44 | $ git clone https://github.com/app-generator/react-purity-dashboard.git 45 | $ cd react-purity-dashboard 46 | ``` 47 | 48 |
49 | 50 | > 👉 **Step 2** - Install dependencies via NPM or yarn 51 | 52 | ```bash 53 | $ npm i 54 | // OR 55 | $ yarn 56 | ``` 57 | 58 |
59 | 60 | > 👉 **Step 3** - Edit the `.env` using the template `.env.sample`. 61 | 62 | ```env 63 | 64 | REACT_APP_BACKEND_SERVER='http://localhost:5000/api/' 65 | 66 | REACT_APP_GITHUB_OAUTH_CLIENT_ID = ... # Github OAuth Client 67 | REACT_APP_GITHUB_OAUTH_CLIENT_SECRET = ... # Github OAuth Secret 68 | REACT_APP_GITHUB_OAUTH_REDIRECT_URL = ... # Github OAuth Callback URL 69 | ``` 70 | 71 |
72 | 73 | > 👉 **Step 4** - Start in development mode 74 | 75 | ```bash 76 | $ npm run start 77 | // OR 78 | $ yarn start 79 | ``` 80 | 81 |
82 | 83 | ## Configure the backend server 84 | 85 | The product comes with a usable JWT Authentication flow that provides only the basic requests: login/logout/register. 86 | 87 | > 👉 **API Server URL** - `src/config/constant.js` 88 | 89 | ```javascript 90 | const config = { 91 | ... 92 | API_SERVER: 'http://localhost:5000/api/' // <-- The magic line 93 | }; 94 | ``` 95 | 96 |
97 | 98 | **API Server Descriptor** - POSTMAN Collection 99 | 100 | The API Server signature is provided by the [Unified API Definition](https://docs.appseed.us/boilerplate-code/api-unified-definition) 101 | 102 | - [API POSTMAN Collection](https://github.com/app-generator/api-server-unified/blob/main/api.postman_collection.json) - can be used to mock (simulate) the backend server or code a new one in your preferred framework. 103 | 104 |
105 | 106 | ## Node JS API Server 107 | 108 | The product is also open-source and is already configured to work with Berry Dashboard Template - product features: 109 | 110 | - Typescript / Node js / Express server 111 | - JWT authentication (`passport-jwt` strategy) 112 | - Persistence: SQLite 113 | 114 | > Links 115 | 116 | - [Node JS API](https://github.com/app-generator/api-server-nodejs) - source code 117 | - [Node JS API](https://appseed.us/boilerplate-code/nodejs-starter) - product page 118 | 119 |
120 | 121 | ![Node JS API - Open-source API server built on top of Express Nodejs Framework.](https://user-images.githubusercontent.com/51070104/124934824-c210a700-e00d-11eb-9d01-e05bd8bfb608.png) 122 | 123 |
124 | 125 | ### Compile the API Server 126 | 127 | **Step #1** - Clone the project 128 | 129 | ```bash 130 | $ git clone https://github.com/app-generator/api-server-nodejs.git 131 | $ cd api-server-nodejs 132 | ``` 133 | 134 | **Step #2** - Install dependencies via NPM or Yarn 135 | 136 | ```bash 137 | $ npm i 138 | // OR 139 | $ yarn 140 | ``` 141 | 142 | **Step #3** - Run the SQLite migration via TypeORM 143 | 144 | ``` 145 | $ yarn typeorm migration:run 146 | ``` 147 | 148 | **Step #4** - Start the API server (development mode) 149 | 150 | ```bash 151 | $ npm dev 152 | // OR 153 | $ yarn dev 154 | ``` 155 | 156 | The API server will start using the `PORT` specified in `.env` file (default 5000). 157 | 158 |
159 | 160 | --- 161 | [React Purity Dashboard](https://app-generator.dev/product/purity-dashboard/api-nodejs/react/) - Provided by **[App-Generator](https://app-generator.dev/)**. 162 | -------------------------------------------------------------------------------- /commit.sh: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-purity-nodejs/c6bac1faf3c31754d1cc192708210fd34645066d/commit.sh -------------------------------------------------------------------------------- /deployer.json: -------------------------------------------------------------------------------- 1 | { 2 | "api-server":"https://api-server-nodejs.appseed.us/api/", 3 | "name":"react-purity-dashboard", 4 | "framework": "react", 5 | "type": "static", 6 | "build": { 7 | "npm": "v14.0.0" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const gap = require("gulp-append-prepend"); 3 | 4 | gulp.task("licenses", async function () { 5 | // this is to add Creative Tim licenses in the production mode for the minified js 6 | gulp 7 | .src("build/static/js/*chunk.js", { base: "./" }) 8 | .pipe( 9 | gap.prependText(`/*! 10 | 11 | ========================================================= 12 | * Purity UI Dashboard - v1.0.1 13 | ========================================================= 14 | 15 | * Product Page: https://www.creative-tim.com/product/purity-ui-dashboard 16 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 17 | * Licensed under MIT (https://github.com/creativetimofficial/purity-ui-dashboard/blob/master/LICENSE.md) 18 | 19 | * Design by Creative Tim & Coded by Simmmple 20 | 21 | ========================================================= 22 | 23 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 24 | 25 | */`) 26 | ) 27 | .pipe(gulp.dest("./", { overwrite: true })); 28 | 29 | // this is to add Creative Tim licenses in the production mode for the minified html 30 | gulp 31 | .src("build/index.html", { base: "./" }) 32 | .pipe( 33 | gap.prependText(``) 52 | ) 53 | .pipe(gulp.dest("./", { overwrite: true })); 54 | 55 | // this is to add Creative Tim licenses in the production mode for the minified css 56 | gulp 57 | .src("build/static/css/*chunk.css", { base: "./" }) 58 | .pipe( 59 | gap.prependText(`/*! 60 | 61 | ========================================================= 62 | * Purity UI Dashboard - v1.0.1 63 | ========================================================= 64 | 65 | * Product Page: https://www.creative-tim.com/product/purity-ui-dashboard 66 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 67 | * Licensed under MIT (https://github.com/creativetimofficial/purity-ui-dashboard/blob/master/LICENSE.md) 68 | 69 | * Design by Creative Tim & Coded by Simmmple 70 | 71 | ========================================================= 72 | 73 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 74 | 75 | */`) 76 | ) 77 | .pipe(gulp.dest("./", { overwrite: true })); 78 | return; 79 | }); 80 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src", 4 | "paths": { 5 | "*": ["src/*"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "purity-dashboard-react", 3 | "version": "2.0.2", 4 | "private": true, 5 | "dependencies": { 6 | "@chakra-ui/icons": "^1.1.5", 7 | "@chakra-ui/react": "1.8.8", 8 | "@chakra-ui/system": "^1.12.1", 9 | "@chakra-ui/theme-tools": "^1.3.6", 10 | "@emotion/cache": "^11.7.1", 11 | "@emotion/react": "^11.8.1", 12 | "@emotion/styled": "^11.8.1", 13 | "@fontsource/open-sans": "^4.5.0", 14 | "@fontsource/raleway": "^4.5.0", 15 | "@fontsource/roboto": "^4.5.8", 16 | "apexcharts": "^3.27.3", 17 | "axios": "^1.2.0", 18 | "classnames": "2.3.1", 19 | "framer-motion": "^4.1.17", 20 | "match-sorter": "6.3.0", 21 | "moment": "2.29.1", 22 | "node-sass": "7.0.1", 23 | "nouislider": "15.0.0", 24 | "react": "16.14.0", 25 | "react-apexcharts": "^1.3.9", 26 | "react-big-calendar": "0.33.2", 27 | "react-bootstrap-sweetalert": "^5.2.0", 28 | "react-datetime": "3.1.1", 29 | "react-dom": "16.14.0", 30 | "react-github-btn": "^1.2.1", 31 | "react-icons": "^4.2.0", 32 | "react-jvectormap": "0.0.16", 33 | "react-router-dom": "5.2.1", 34 | "react-scripts": "5.0.0", 35 | "react-swipeable-views": "0.14.0", 36 | "react-table": "7.7.0", 37 | "react-tagsinput": "3.19.0", 38 | "stylis": "^4.0.13", 39 | "stylis-plugin-rtl": "^2.1.1" 40 | }, 41 | "resolutions": { 42 | "react-error-overlay": "6.0.11" 43 | }, 44 | "scripts": { 45 | "start": "react-scripts start", 46 | "build": "react-scripts build && gulp licenses", 47 | "test": "react-scripts test --env=jsdom", 48 | "eject": "react-scripts eject", 49 | "deploy": "npm run build", 50 | "lint:check": "eslint . --ext=js,jsx; exit 0", 51 | "lint:fix": "eslint . --ext=js,jsx --fix; exit 0", 52 | "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start" 53 | }, 54 | "optionalDependencies": { 55 | "@babel/core": "7.14.0", 56 | "typescript": "4.2.4" 57 | }, 58 | "devDependencies": { 59 | "@babel/plugin-transform-react-jsx-source": "^7.14.5", 60 | "eslint-config-prettier": "8.3.0", 61 | "eslint-plugin-prettier": "3.4.0", 62 | "gulp": "4.0.2", 63 | "gulp-append-prepend": "1.0.9", 64 | "prettier": "2.2.1" 65 | }, 66 | "browserslist": { 67 | "production": [ 68 | "cover 99.8%", 69 | "not dead", 70 | "not OperaMini all" 71 | ], 72 | "development": [ 73 | "cover 99.8%", 74 | "not dead", 75 | "not OperaMini all" 76 | ] 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /public/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-purity-nodejs/c6bac1faf3c31754d1cc192708210fd34645066d/public/apple-icon.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-purity-nodejs/c6bac1faf3c31754d1cc192708210fd34645066d/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 20 | 21 | 22 | 23 | 24 | 28 | 29 | 33 | 34 | 35 | 40 | 44 | 45 | 51 | 57 | 58 | 62 | 67 | 71 | 72 | 73 | 82 | Purity UI Dashboard by Creative Tim & Simmmple 83 | 84 | 85 | 86 |
87 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/ProtectedRoute.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useAuth } from './auth-context/auth.context'; 3 | import { useHistory, Outlet } from 'react-router-dom'; 4 | import SweetAlert from "react-bootstrap-sweetalert"; 5 | import { Route } from "react-router-dom"; 6 | 7 | export const ProtectedRoute = ({ ...rest }) => { 8 | const history = useHistory(); 9 | let { user } = useAuth(); 10 | return (<> 11 | {(!user || !user.token || user.token === "") ? ( 12 | history.push("/auth/signin")} 15 | onConfirm={() => history.push("/auth/signin")} 16 | confirmBtnCssClass={"px-5"} 17 | /> 18 | ) : ( 19 | 20 | )} 21 | ); 22 | }; 23 | -------------------------------------------------------------------------------- /src/api/auth.js: -------------------------------------------------------------------------------- 1 | import axios from "./index"; 2 | 3 | class AuthApi { 4 | static Login = (data) => { 5 | return axios.post(`${base}/login`, data); 6 | }; 7 | 8 | static Register = (data) => { 9 | return axios.post(`${base}/register`, data); 10 | }; 11 | 12 | static Logout = (data) => { 13 | return axios.post(`${base}/logout`, data, { headers: { Authorization: `${data.token}` } }); 14 | }; 15 | } 16 | 17 | let base = "users"; 18 | 19 | export default AuthApi; 20 | -------------------------------------------------------------------------------- /src/api/index.js: -------------------------------------------------------------------------------- 1 | import Axios from "axios"; 2 | import { API_SERVER } from "../config/constant"; 3 | 4 | const axios = Axios.create({ 5 | baseURL: `${API_SERVER}`, 6 | headers: { "Content-Type": "application/json" }, 7 | }); 8 | 9 | axios.interceptors.request.use( 10 | (config) => { 11 | return Promise.resolve(config); 12 | }, 13 | (error) => Promise.reject(error) 14 | ); 15 | 16 | axios.interceptors.response.use( 17 | (response) => Promise.resolve(response), 18 | (error) => { 19 | return Promise.reject(error); 20 | } 21 | ); 22 | 23 | export default axios; 24 | -------------------------------------------------------------------------------- /src/assets/img/BackgroundCard1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-purity-nodejs/c6bac1faf3c31754d1cc192708210fd34645066d/src/assets/img/BackgroundCard1.png -------------------------------------------------------------------------------- /src/assets/img/BgSignUp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-purity-nodejs/c6bac1faf3c31754d1cc192708210fd34645066d/src/assets/img/BgSignUp.png -------------------------------------------------------------------------------- /src/assets/img/ImageArchitect1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-purity-nodejs/c6bac1faf3c31754d1cc192708210fd34645066d/src/assets/img/ImageArchitect1.png -------------------------------------------------------------------------------- /src/assets/img/ImageArchitect2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-purity-nodejs/c6bac1faf3c31754d1cc192708210fd34645066d/src/assets/img/ImageArchitect2.png -------------------------------------------------------------------------------- /src/assets/img/ImageArchitect3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-purity-nodejs/c6bac1faf3c31754d1cc192708210fd34645066d/src/assets/img/ImageArchitect3.png -------------------------------------------------------------------------------- /src/assets/img/ProfileBackground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-purity-nodejs/c6bac1faf3c31754d1cc192708210fd34645066d/src/assets/img/ProfileBackground.png -------------------------------------------------------------------------------- /src/assets/img/SidebarHelpImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-purity-nodejs/c6bac1faf3c31754d1cc192708210fd34645066d/src/assets/img/SidebarHelpImage.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-purity-nodejs/c6bac1faf3c31754d1cc192708210fd34645066d/src/assets/img/avatars/avatar1.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-purity-nodejs/c6bac1faf3c31754d1cc192708210fd34645066d/src/assets/img/avatars/avatar10.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-purity-nodejs/c6bac1faf3c31754d1cc192708210fd34645066d/src/assets/img/avatars/avatar2.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-purity-nodejs/c6bac1faf3c31754d1cc192708210fd34645066d/src/assets/img/avatars/avatar3.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-purity-nodejs/c6bac1faf3c31754d1cc192708210fd34645066d/src/assets/img/avatars/avatar4.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-purity-nodejs/c6bac1faf3c31754d1cc192708210fd34645066d/src/assets/img/avatars/avatar5.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-purity-nodejs/c6bac1faf3c31754d1cc192708210fd34645066d/src/assets/img/avatars/avatar6.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-purity-nodejs/c6bac1faf3c31754d1cc192708210fd34645066d/src/assets/img/avatars/avatar7.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-purity-nodejs/c6bac1faf3c31754d1cc192708210fd34645066d/src/assets/img/avatars/avatar8.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-purity-nodejs/c6bac1faf3c31754d1cc192708210fd34645066d/src/assets/img/avatars/avatar9.png -------------------------------------------------------------------------------- /src/assets/img/people-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-purity-nodejs/c6bac1faf3c31754d1cc192708210fd34645066d/src/assets/img/people-image.png -------------------------------------------------------------------------------- /src/assets/img/signInImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-purity-nodejs/c6bac1faf3c31754d1cc192708210fd34645066d/src/assets/img/signInImage.png -------------------------------------------------------------------------------- /src/assets/svg/account-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/svg/adobexd-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/assets/svg/atlassian-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/svg/box-3d.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/svg/build.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/assets/svg/cart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/assets/svg/credit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/assets/svg/cube.svg: -------------------------------------------------------------------------------- 1 | Cube -------------------------------------------------------------------------------- /src/assets/svg/document.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/globe.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/svg/help.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/assets/svg/home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/invision-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/svg/jira-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/svg/key.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/svg/logo-colored.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/assets/svg/logo-white.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/svg/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/assets/svg/mastercard-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/svg/notifications.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/assets/svg/paypal.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/person-auth.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/svg/person-circle-auth.svg: -------------------------------------------------------------------------------- 1 | Person Circle -------------------------------------------------------------------------------- /src/assets/svg/person.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/svg/profile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/assets/svg/rocket.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/svg/settings.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/svg/slack-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/svg/spotify-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/svg/stats.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/assets/svg/visa.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/wallet.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svg/watch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/auth-context/auth.context.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | 4 | const AuthContext = React.createContext(null); 5 | 6 | export const AuthProvider = ({ userData, children }) => { 7 | let [user, setUser] = React.useState(userData); 8 | user = typeof user === "string" ? JSON.parse(user) : user; 9 | 10 | return {children}; 11 | }; 12 | 13 | AuthProvider.propTypes = { 14 | userData: PropTypes.any, 15 | children: PropTypes.any, 16 | }; 17 | 18 | export const useAuth = () => React.useContext(AuthContext); 19 | -------------------------------------------------------------------------------- /src/components/Card/Card.js: -------------------------------------------------------------------------------- 1 | import { Box, useStyleConfig } from "@chakra-ui/react"; 2 | function Card(props) { 3 | const { variant, children, ...rest } = props; 4 | const styles = useStyleConfig("Card", { variant }); 5 | // Pass the computed styles into the `__css` prop 6 | return ( 7 | 8 | {children} 9 | 10 | ); 11 | } 12 | 13 | export default Card; 14 | -------------------------------------------------------------------------------- /src/components/Card/CardBody.js: -------------------------------------------------------------------------------- 1 | import { Box, useStyleConfig } from "@chakra-ui/react"; 2 | function CardBody(props) { 3 | const { variant, children, ...rest } = props; 4 | const styles = useStyleConfig("CardBody", { variant }); 5 | // Pass the computed styles into the `__css` prop 6 | return ( 7 | 8 | {children} 9 | 10 | ); 11 | } 12 | 13 | export default CardBody; 14 | -------------------------------------------------------------------------------- /src/components/Card/CardHeader.js: -------------------------------------------------------------------------------- 1 | import { Box, useStyleConfig } from "@chakra-ui/react"; 2 | function CardHeader(props) { 3 | const { variant, children, ...rest } = props; 4 | const styles = useStyleConfig("CardHeader", { variant }); 5 | // Pass the computed styles into the `__css` prop 6 | return ( 7 | 8 | {children} 9 | 10 | ); 11 | } 12 | 13 | export default CardHeader; 14 | -------------------------------------------------------------------------------- /src/components/Charts/BarChart.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Card from "components/Card/Card"; 3 | import Chart from "react-apexcharts"; 4 | import { barChartData, barChartOptions } from "variables/charts"; 5 | 6 | class BarChart extends Component { 7 | constructor(props) { 8 | super(props); 9 | this.state = { 10 | chartData: [], 11 | chartOptions: {}, 12 | }; 13 | } 14 | 15 | componentDidMount() { 16 | this.setState({ 17 | chartData: barChartData, 18 | chartOptions: barChartOptions, 19 | }); 20 | } 21 | 22 | render() { 23 | return ( 24 | 31 | 38 | 39 | ); 40 | } 41 | } 42 | 43 | export default BarChart; 44 | -------------------------------------------------------------------------------- /src/components/Charts/LineChart.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactApexChart from "react-apexcharts"; 3 | import { lineChartData, lineChartOptions } from "variables/charts"; 4 | 5 | class LineChart extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | 9 | this.state = { 10 | chartData: [], 11 | chartOptions: {}, 12 | }; 13 | } 14 | 15 | componentDidMount() { 16 | this.setState({ 17 | chartData: lineChartData, 18 | chartOptions: lineChartOptions, 19 | }); 20 | } 21 | 22 | render() { 23 | return ( 24 | 31 | ); 32 | } 33 | } 34 | 35 | export default LineChart; 36 | -------------------------------------------------------------------------------- /src/components/FixedPlugin/FixedPlugin.js: -------------------------------------------------------------------------------- 1 | // Chakra Imports 2 | import { Button, useColorModeValue } from "@chakra-ui/react"; 3 | // Custom Icons 4 | import { SettingsIcon } from "components/Icons/Icons"; 5 | import PropTypes from "prop-types"; 6 | import React from "react"; 7 | 8 | export default function FixedPlugin(props) { 9 | const { secondary, onChange, onSwitch, fixed, ...rest } = props; 10 | // Chakra Color Mode 11 | let navbarIcon = useColorModeValue("gray.500", "gray.200"); 12 | let bgButton = useColorModeValue("white", "gray.600"); 13 | let fixedDisplay = "flex"; 14 | if (props.secondary) { 15 | fixedDisplay = "none"; 16 | } 17 | 18 | const settingsRef = React.useRef(); 19 | return ( 20 | <> 21 | 42 | 43 | ); 44 | } 45 | 46 | FixedPlugin.propTypes = { 47 | fixed: PropTypes.bool, 48 | onChange: PropTypes.func, 49 | onSwitch: PropTypes.func, 50 | }; 51 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | /*eslint-disable*/ 2 | import React from "react"; 3 | import { Flex, Link, List, ListItem, Text } from "@chakra-ui/react"; 4 | import PropTypes from "prop-types"; 5 | 6 | export default function Footer(props) { 7 | // const linkTeal = useColorModeValue("teal.400", "red.200");= 8 | return ( 9 | 22 | 30 | © 31 | 37 | {document.documentElement.dir === "rtl" 38 | ? " توقيت الإبداعية" 39 | : "Creative Tim "} 40 | 41 | & 42 | 48 | {document.documentElement.dir === "rtl" ? "سيممبل " : " Simmmple"} 49 | 50 | {document.documentElement.dir === "rtl" 51 | ? "للحصول على ويب أفضل" 52 | : " for a better web"} 53 | 54 | 55 | 61 | 62 | {document.documentElement.dir === "rtl" 63 | ? "توقيت الإبداعية" 64 | : "Creative Tim"} 65 | 66 | 67 | 73 | 74 | {document.documentElement.dir === "rtl" ? "سيممبل" : "Simmmple"} 75 | 76 | 77 | 83 | 88 | {document.documentElement.dir === "rtl" ? "مدونة" : "Blog"} 89 | 90 | 91 | 92 | 97 | {document.documentElement.dir === "rtl" ? "رخصة" : "License"} 98 | 99 | 100 | 101 | 102 | ); 103 | } 104 | -------------------------------------------------------------------------------- /src/components/Icons/IconBox.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Flex } from "@chakra-ui/react"; 3 | 4 | export default function IconBox(props) { 5 | const { children, ...rest } = props; 6 | 7 | return ( 8 | 14 | {children} 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /src/components/Layout/MainPanel.js: -------------------------------------------------------------------------------- 1 | import { Box, useStyleConfig } from "@chakra-ui/react"; 2 | function MainPanel(props) { 3 | const { variant, children, ...rest } = props; 4 | const styles = useStyleConfig("MainPanel", { variant }); 5 | // Pass the computed styles into the `__css` prop 6 | return ( 7 | 8 | {children} 9 | 10 | ); 11 | } 12 | 13 | export default MainPanel; 14 | -------------------------------------------------------------------------------- /src/components/Layout/PanelContainer.js: -------------------------------------------------------------------------------- 1 | import { Box, useStyleConfig } from "@chakra-ui/react"; 2 | function PanelContainer(props) { 3 | const { variant, children, ...rest } = props; 4 | const styles = useStyleConfig("PanelContainer", { variant }); 5 | // Pass the computed styles into the `__css` prop 6 | return ( 7 | 8 | {children} 9 | 10 | ); 11 | } 12 | 13 | export default PanelContainer; 14 | -------------------------------------------------------------------------------- /src/components/Layout/PanelContent.js: -------------------------------------------------------------------------------- 1 | import { Box, useStyleConfig } from "@chakra-ui/react"; 2 | function PanelContent(props) { 3 | const { variant, children, ...rest } = props; 4 | const styles = useStyleConfig("PanelContent", { variant }); 5 | // Pass the computed styles into the `__css` prop 6 | return ( 7 | 8 | {children} 9 | 10 | ); 11 | } 12 | 13 | export default PanelContent; 14 | -------------------------------------------------------------------------------- /src/components/Menu/ItemContent.js: -------------------------------------------------------------------------------- 1 | // chakra imports 2 | import { Avatar, Flex, Text, useColorModeValue } from "@chakra-ui/react"; 3 | import { ClockIcon } from "components/Icons/Icons"; 4 | import PropTypes from "prop-types"; 5 | import React from "react"; 6 | 7 | export function ItemContent(props) { 8 | const navbarIcon = useColorModeValue("gray.500", "gray.200"); 9 | const notificationColor = useColorModeValue("gray.700", "white"); 10 | const spacing = " "; 11 | return ( 12 | <> 13 | 19 | 20 | 21 | 22 | {props.boldInfo} 23 | {spacing} 24 | 25 | {props.info} 26 | 27 | 28 | 29 | 30 | {props.time} 31 | 32 | 33 | 34 | 35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /src/components/Navbars/AdminNavbar.js: -------------------------------------------------------------------------------- 1 | // Chakra Imports 2 | import { 3 | Box, 4 | Breadcrumb, 5 | BreadcrumbItem, 6 | BreadcrumbLink, 7 | Flex, 8 | Link, 9 | useColorModeValue, 10 | } from "@chakra-ui/react"; 11 | import PropTypes from "prop-types"; 12 | import React, { useState } from "react"; 13 | import AdminNavbarLinks from "./AdminNavbarLinks"; 14 | 15 | export default function AdminNavbar(props) { 16 | const [scrolled, setScrolled] = useState(false); 17 | const { 18 | variant, 19 | children, 20 | fixed, 21 | secondary, 22 | brandText, 23 | onOpen, 24 | ...rest 25 | } = props; 26 | 27 | // Here are all the props that may change depending on navbar's type or state.(secondary, variant, scrolled) 28 | let mainText = useColorModeValue("gray.700", "gray.200"); 29 | let secondaryText = useColorModeValue("gray.400", "gray.200"); 30 | let navbarPosition = "absolute"; 31 | let navbarFilter = "none"; 32 | let navbarBackdrop = "blur(21px)"; 33 | let navbarShadow = "none"; 34 | let navbarBg = "none"; 35 | let navbarBorder = "transparent"; 36 | let secondaryMargin = "0px"; 37 | let paddingX = "15px"; 38 | if (props.fixed === true) 39 | if (scrolled === true) { 40 | navbarPosition = "fixed"; 41 | navbarShadow = useColorModeValue( 42 | "0px 7px 23px rgba(0, 0, 0, 0.05)", 43 | "none" 44 | ); 45 | navbarBg = useColorModeValue( 46 | "linear-gradient(112.83deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.8) 110.84%)", 47 | "linear-gradient(112.83deg, rgba(255, 255, 255, 0.21) 0%, rgba(255, 255, 255, 0) 110.84%)" 48 | ); 49 | navbarBorder = useColorModeValue("#FFFFFF", "rgba(255, 255, 255, 0.31)"); 50 | navbarFilter = useColorModeValue( 51 | "none", 52 | "drop-shadow(0px 7px 23px rgba(0, 0, 0, 0.05))" 53 | ); 54 | } 55 | if (props.secondary) { 56 | navbarBackdrop = "none"; 57 | navbarPosition = "absolute"; 58 | mainText = "white"; 59 | secondaryText = "white"; 60 | secondaryMargin = "22px"; 61 | paddingX = "30px"; 62 | } 63 | const changeNavbar = () => { 64 | if (window.scrollY > 1) { 65 | setScrolled(true); 66 | } else { 67 | setScrolled(false); 68 | } 69 | }; 70 | window.addEventListener("scroll", changeNavbar); 71 | return ( 72 | 107 | 115 | 116 | 117 | 118 | 119 | Pages 120 | 121 | 122 | 123 | 124 | 125 | {brandText} 126 | 127 | 128 | 129 | {/* Here we create navbar brand, based on route name */} 130 | 146 | {brandText} 147 | 148 | 149 | 150 | 156 | 157 | 158 | 159 | ); 160 | } 161 | 162 | AdminNavbar.propTypes = { 163 | brandText: PropTypes.string, 164 | variant: PropTypes.string, 165 | secondary: PropTypes.bool, 166 | fixed: PropTypes.bool, 167 | onOpen: PropTypes.func, 168 | }; 169 | -------------------------------------------------------------------------------- /src/components/Navbars/AuthNavbar.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { 3 | Box, 4 | Button, 5 | Flex, 6 | HStack, 7 | Link, 8 | Text, 9 | useColorModeValue, 10 | } from "@chakra-ui/react"; 11 | import { 12 | CreativeTimLogo, 13 | DocumentIcon, 14 | HomeIcon, 15 | PersonIcon, 16 | RocketIcon, 17 | } from "components/Icons/Icons"; 18 | import SidebarResponsive from "components/Sidebar/SidebarResponsive"; 19 | import PropTypes from "prop-types"; 20 | import React from "react"; 21 | import { NavLink } from "react-router-dom"; 22 | import routes from "routes.js"; 23 | export default function AuthNavbar(props) { 24 | const [open, setOpen] = React.useState(false); 25 | const handleDrawerToggle = () => { 26 | setOpen(!open); 27 | }; 28 | const { logo, logoText, secondary, ...rest } = props; 29 | // verifies if routeName is the one active (in browser input) 30 | const activeRoute = (routeName) => { 31 | return window.location.href.indexOf(routeName) > -1 ? true : false; 32 | }; 33 | // Chakra color mode 34 | let navbarIcon = useColorModeValue("gray.700", "gray.200"); 35 | let mainText = useColorModeValue("gray.700", "gray.200"); 36 | let navbarBg = useColorModeValue( 37 | "linear-gradient(112.83deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.8) 110.84%)", 38 | "linear-gradient(112.83deg, rgba(255, 255, 255, 0.21) 0%, rgba(255, 255, 255, 0) 110.84%)" 39 | ); 40 | let navbarBorder = useColorModeValue( 41 | "1.5px solid #FFFFFF", 42 | "1.5px solid rgba(255, 255, 255, 0.31)" 43 | ); 44 | let navbarShadow = useColorModeValue( 45 | "0px 7px 23px rgba(0, 0, 0, 0.05)", 46 | "none" 47 | ); 48 | let navbarFilter = useColorModeValue( 49 | "none", 50 | "drop-shadow(0px 7px 23px rgba(0, 0, 0, 0.05))" 51 | ); 52 | let navbarBackdrop = "blur(21px)"; 53 | let bgButton = useColorModeValue( 54 | "linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)", 55 | "gray.800" 56 | ); 57 | let navbarPosition = "fixed"; 58 | let colorButton = "white"; 59 | if (props.secondary === true) { 60 | navbarIcon = "white"; 61 | navbarBg = "none"; 62 | navbarBorder = "none"; 63 | navbarShadow = "initial"; 64 | navbarFilter = "initial"; 65 | navbarBackdrop = "none"; 66 | bgButton = "white"; 67 | colorButton = "gray.700"; 68 | mainText = "white"; 69 | navbarPosition = "absolute"; 70 | } 71 | var brand = ( 72 | 82 | 83 | 84 | {logoText} 85 | 86 | 87 | ); 88 | var linksAuth = ( 89 | 90 | 91 | 103 | 104 | 105 | 119 | 120 | 121 | 135 | 136 | 137 | 150 | 151 | 152 | ); 153 | return ( 154 | 172 | 173 | {brand} 174 | 178 | 185 | 186 | {linksAuth} 187 | 188 | 202 | 203 | 204 | 205 | ); 206 | } 207 | 208 | AuthNavbar.propTypes = { 209 | color: PropTypes.oneOf(["primary", "info", "success", "warning", "danger"]), 210 | brandText: PropTypes.string, 211 | }; 212 | -------------------------------------------------------------------------------- /src/components/Navbars/SearchBar/SearchBar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | IconButton, 4 | Input, 5 | InputGroup, 6 | InputLeftElement, 7 | useColorModeValue, 8 | } from "@chakra-ui/react"; 9 | import { SearchIcon } from "@chakra-ui/icons"; 10 | export function SearchBar(props) { 11 | // Pass the computed styles into the `__css` prop 12 | const { variant, children, ...rest } = props; 13 | // Chakra Color Mode 14 | const mainTeal = useColorModeValue("teal.300", "teal.300"); 15 | const searchIconColor = useColorModeValue("gray.700", "gray.200"); 16 | const inputBg = useColorModeValue("white", "gray.800"); 17 | return ( 18 | 29 | } 44 | > 45 | } 46 | /> 47 | 53 | 54 | ); 55 | } 56 | -------------------------------------------------------------------------------- /src/components/RTLProvider/RTLProvider.js: -------------------------------------------------------------------------------- 1 | import { CacheProvider } from "@emotion/react"; 2 | import createCache from "@emotion/cache"; 3 | import rtl from "stylis-plugin-rtl"; 4 | // NB: A unique `key` is important for it to work! 5 | const options = { 6 | rtl: { key: "css-ar", stylisPlugins: [rtl] }, 7 | ltr: { key: "css-en" }, 8 | }; 9 | export function RtlProvider({ children }) { 10 | const dir = document.documentElement.dir == "ar" ? "rtl" : "ltr"; 11 | const cache = createCache(options[dir]); 12 | return ; 13 | } 14 | -------------------------------------------------------------------------------- /src/components/Separator/Separator.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Flex } from "@chakra-ui/react"; 3 | 4 | export function Separator(props) { 5 | const { variant, children, ...rest } = props; 6 | return ( 7 | 13 | {children} 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /src/components/Sidebar/SidebarContent.js: -------------------------------------------------------------------------------- 1 | /*eslint-disable*/ 2 | // chakra imports 3 | import { 4 | Box, 5 | Button, Flex, 6 | Link, 7 | Stack, 8 | Text, 9 | useColorModeValue 10 | } from "@chakra-ui/react"; 11 | import IconBox from "components/Icons/IconBox"; 12 | import { CreativeTimLogo } from "components/Icons/Icons"; 13 | import { Separator } from "components/Separator/Separator"; 14 | import { SidebarHelp } from "components/Sidebar/SidebarHelp"; 15 | import React from "react"; 16 | import { NavLink, useLocation } from "react-router-dom"; 17 | 18 | // this function creates the links and collapses that appear in the sidebar (left menu) 19 | 20 | 21 | const SidebarContent = ({ logoText, routes }) => { 22 | 23 | // to check for active links and opened collapses 24 | let location = useLocation(); 25 | // this is for the rest of the collapses 26 | const [state, setState] = React.useState({}); 27 | 28 | // verifies if routeName is the one active (in browser input) 29 | const activeRoute = (routeName) => { 30 | return location.pathname === routeName ? "active" : ""; 31 | }; 32 | const createLinks = (routes) => { 33 | // Chakra Color Mode 34 | const activeBg = useColorModeValue("white", "gray.700"); 35 | const inactiveBg = useColorModeValue("white", "gray.700"); 36 | const activeColor = useColorModeValue("gray.700", "white"); 37 | const inactiveColor = useColorModeValue("gray.400", "gray.400"); 38 | 39 | return routes.map((prop, key) => { 40 | if (prop.redirect) { 41 | return null; 42 | } 43 | if (prop.category) { 44 | var st = {}; 45 | st[prop["state"]] = !state[prop.state]; 46 | return ( 47 |
48 | 61 | {document.documentElement.dir === "rtl" 62 | ? prop.rtlName 63 | : prop.name} 64 | 65 | {createLinks(prop.views)} 66 |
67 | ); 68 | } 69 | return ( 70 | 71 | {activeRoute(prop.layout + prop.path) === "active" ? ( 72 | 121 | ) : ( 122 | 171 | )} 172 | 173 | ); 174 | }); 175 | }; 176 | 177 | const links = <>{createLinks(routes)}; 178 | 179 | return ( 180 | <> 181 | 182 | 193 | 194 | 195 | {logoText} 196 | 197 | 198 | 199 | 200 | 201 | {links} 202 | 203 | 204 | 205 | ) 206 | } 207 | 208 | export default SidebarContent -------------------------------------------------------------------------------- /src/components/Sidebar/SidebarHelp.js: -------------------------------------------------------------------------------- 1 | import { QuestionIcon } from "@chakra-ui/icons"; 2 | import { Button, Flex, Link, Text } from "@chakra-ui/react"; 3 | import SidebarHelpImage from "assets/img/SidebarHelpImage.png"; 4 | import IconBox from "components/Icons/IconBox"; 5 | import React from "react"; 6 | 7 | export function SidebarHelp(props) { 8 | // Pass the computed styles into the `__css` prop 9 | const { children, ...rest } = props; 10 | return ( 11 | 22 | 23 | 24 | 25 | 26 | Need help? 27 | 28 | 29 | Please check our docs 30 | 31 | 35 | 53 | 54 | 55 | ); 56 | } 57 | -------------------------------------------------------------------------------- /src/components/Sidebar/index.js: -------------------------------------------------------------------------------- 1 | /*eslint-disable*/ 2 | // chakra imports 3 | import { 4 | Box, useColorModeValue 5 | } from "@chakra-ui/react"; 6 | import React from "react"; 7 | import SidebarContent from "./SidebarContent"; 8 | 9 | // FUNCTIONS 10 | 11 | function Sidebar(props) { 12 | // to check for active links and opened collapses 13 | const mainPanel = React.useRef(); 14 | let variantChange = "0.2s linear"; 15 | 16 | const { logoText, routes, sidebarVariant } = props; 17 | 18 | // BRAND 19 | // Chakra Color Mode 20 | let sidebarBg = "none"; 21 | let sidebarRadius = "0px"; 22 | let sidebarMargins = "0px"; 23 | if (sidebarVariant === "opaque") { 24 | sidebarBg = useColorModeValue("white", "gray.700"); 25 | sidebarRadius = "16px"; 26 | sidebarMargins = "16px 0px 16px 16px"; 27 | } 28 | 29 | // SIDEBAR 30 | return ( 31 | 32 | 33 | 50 | 55 | 56 | 57 | 58 | ); 59 | } 60 | 61 | 62 | 63 | 64 | export default Sidebar; 65 | -------------------------------------------------------------------------------- /src/components/Tables/BillingRow.js: -------------------------------------------------------------------------------- 1 | import { 2 | Box, 3 | Button, 4 | Flex, 5 | Icon, 6 | Text, 7 | useColorModeValue, 8 | } from "@chakra-ui/react"; 9 | import React from "react"; 10 | import { FaPencilAlt, FaTrashAlt } from "react-icons/fa"; 11 | 12 | function BillingRow(props) { 13 | const textColor = useColorModeValue("gray.700", "white"); 14 | const bgColor = useColorModeValue("#F8F9FA", "gray.800"); 15 | const nameColor = useColorModeValue("gray.500", "white"); 16 | const { name, company, email, number } = props; 17 | 18 | return ( 19 | 20 | 21 | 22 | 23 | {name} 24 | 25 | 26 | Company Name:{" "} 27 | 28 | {company} 29 | 30 | 31 | 32 | Email Address:{" "} 33 | 34 | {email} 35 | 36 | 37 | 38 | VAT Number:{" "} 39 | 40 | {number} 41 | 42 | 43 | 44 | 49 | 62 | 70 | 71 | 72 | 73 | ); 74 | } 75 | 76 | export default BillingRow; 77 | -------------------------------------------------------------------------------- /src/components/Tables/DashboardTableRow.js: -------------------------------------------------------------------------------- 1 | import { 2 | Avatar, 3 | AvatarGroup, 4 | Flex, 5 | Icon, 6 | Progress, 7 | Td, 8 | Text, 9 | Tr, 10 | useColorModeValue, 11 | } from "@chakra-ui/react"; 12 | import React from "react"; 13 | 14 | function DashboardTableRow(props) { 15 | const { logo, name, members, budget, progression } = props; 16 | const textColor = useColorModeValue("gray.700", "white"); 17 | return ( 18 | 19 | 20 | 21 | 22 | 28 | {name} 29 | 30 | 31 | 32 | 33 | 34 | 35 | {members.map((member) => { 36 | return ( 37 | 43 | ); 44 | })} 45 | 46 | 47 | 48 | 49 | {budget} 50 | 51 | 52 | 53 | 54 | {`${progression}%`} 60 | 66 | 67 | 68 | 69 | ); 70 | } 71 | 72 | export default DashboardTableRow; 73 | -------------------------------------------------------------------------------- /src/components/Tables/InvoicesRow.js: -------------------------------------------------------------------------------- 1 | import { 2 | Box, 3 | Button, 4 | Flex, 5 | Icon, 6 | Spacer, 7 | Text, 8 | useColorModeValue, 9 | } from "@chakra-ui/react"; 10 | import React from "react"; 11 | 12 | function InvoicesRow(props) { 13 | const textColor = useColorModeValue("gray.700", "white"); 14 | const { date, code, price, format, logo } = props; 15 | 16 | return ( 17 | 18 | 19 | 20 | {date} 21 | 22 | 23 | {code} 24 | 25 | 26 | 27 | 28 | 29 | {price} 30 | 31 | 32 | 40 | 41 | ); 42 | } 43 | 44 | export default InvoicesRow; 45 | -------------------------------------------------------------------------------- /src/components/Tables/TablesProjectRow.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | Tr, 4 | Td, 5 | Flex, 6 | Text, 7 | Progress, 8 | Icon, 9 | Button, 10 | useColorModeValue, 11 | } from "@chakra-ui/react"; 12 | import { FaEllipsisV } from "react-icons/fa"; 13 | 14 | function DashboardTableRow(props) { 15 | const { logo, name, status, budget, progression } = props; 16 | const textColor = useColorModeValue("gray.700", "white"); 17 | return ( 18 | 19 | 20 | 21 | 22 | 28 | {name} 29 | 30 | 31 | 32 | 33 | 34 | {budget} 35 | 36 | 37 | 38 | 39 | {status} 40 | 41 | 42 | 43 | 44 | {`${progression}%`} 50 | 56 | 57 | 58 | 59 | 62 | 63 | 64 | ); 65 | } 66 | 67 | export default DashboardTableRow; 68 | -------------------------------------------------------------------------------- /src/components/Tables/TablesTableRow.js: -------------------------------------------------------------------------------- 1 | import { 2 | Avatar, 3 | Badge, 4 | Button, 5 | Flex, 6 | Td, 7 | Text, 8 | Tr, 9 | useColorModeValue, 10 | } from "@chakra-ui/react"; 11 | import React from "react"; 12 | 13 | function TablesTableRow(props) { 14 | const { logo, name, email, subdomain, domain, status, date } = props; 15 | const textColor = useColorModeValue("gray.700", "white"); 16 | const bgStatus = useColorModeValue("gray.400", "#1a202c"); 17 | const colorStatus = useColorModeValue("white", "gray.400"); 18 | 19 | return ( 20 | 21 | 22 | 23 | 24 | 25 | 31 | {name} 32 | 33 | 34 | {email} 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | {domain} 44 | 45 | 46 | {subdomain} 47 | 48 | 49 | 50 | 51 | 58 | {status} 59 | 60 | 61 | 62 | 63 | {date} 64 | 65 | 66 | 67 | 77 | 78 | 79 | ); 80 | } 81 | 82 | export default TablesTableRow; 83 | -------------------------------------------------------------------------------- /src/components/Tables/TimelineRow.js: -------------------------------------------------------------------------------- 1 | import { Box, Flex, Icon, Text, useColorModeValue } from "@chakra-ui/react"; 2 | import React from "react"; 3 | 4 | function TimelineRow(props) { 5 | const { logo, title, date, color, index, arrLength } = props; 6 | const textColor = useColorModeValue("gray.700", "white.300"); 7 | const bgIconColor = useColorModeValue("white.300", "gray.700"); 8 | 9 | return ( 10 | 11 | 12 | 24 | 29 | 30 | 31 | 32 | {title} 33 | 34 | 35 | {date} 36 | 37 | 38 | 39 | ); 40 | } 41 | 42 | export default TimelineRow; 43 | -------------------------------------------------------------------------------- /src/components/Tables/TransactionRow.js: -------------------------------------------------------------------------------- 1 | import { Box, Flex, Icon, Text, useColorModeValue } from "@chakra-ui/react"; 2 | import React from "react"; 3 | 4 | function TransactionRow(props) { 5 | const textColor = useColorModeValue("gray.700", "white"); 6 | const { name, date, logo, price } = props; 7 | 8 | return ( 9 | 10 | 11 | 28 | 29 | 30 | 31 | 36 | {name} 37 | 38 | 43 | {date} 44 | 45 | 46 | 47 | 56 | 57 | {price} 58 | 59 | 60 | 61 | ); 62 | } 63 | 64 | export default TransactionRow; 65 | -------------------------------------------------------------------------------- /src/config/constant.js: -------------------------------------------------------------------------------- 1 | let BACKEND_SERVER = null; 2 | if (process.env.REACT_APP_BACKEND_SERVER) { 3 | BACKEND_SERVER = process.env.REACT_APP_BACKEND_SERVER; 4 | } else { 5 | BACKEND_SERVER = "http://localhost:5000/"; 6 | } 7 | 8 | export const API_SERVER = BACKEND_SERVER; 9 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Purity UI Dashboard - v1.0.1 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/purity-ui-dashboard 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/purity-ui-dashboard/blob/master/LICENSE.md) 10 | 11 | * Design by Creative Tim & Coded by Simmmple 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import React from "react"; 19 | import ReactDOM from "react-dom"; 20 | import { HashRouter, Route, Switch, Redirect } from "react-router-dom"; 21 | 22 | import { AuthProvider } from "./auth-context/auth.context"; 23 | 24 | import AuthLayout from "layouts/Auth.js"; 25 | import AdminLayout from "layouts/Admin.js"; 26 | import RTLLayout from "layouts/RTL.js"; 27 | 28 | let user = localStorage.getItem("user"); 29 | user = JSON.parse(user); 30 | 31 | ReactDOM.render( 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | , 42 | document.getElementById("root") 43 | ); 44 | -------------------------------------------------------------------------------- /src/layouts/Admin.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { ChakraProvider, Portal, useDisclosure } from '@chakra-ui/react'; 3 | import Configurator from 'components/Configurator/Configurator'; 4 | import Footer from 'components/Footer/Footer.js'; 5 | // Layout components 6 | import AdminNavbar from 'components/Navbars/AdminNavbar.js'; 7 | import Sidebar from 'components/Sidebar'; 8 | import React, { useState } from 'react'; 9 | import { Redirect, Route, Switch } from 'react-router-dom'; 10 | import routes from 'routes.js'; 11 | import '@fontsource/roboto/400.css'; 12 | import '@fontsource/roboto/500.css'; 13 | import '@fontsource/roboto/700.css'; 14 | 15 | import { ProtectedRoute } from '../ProtectedRoute'; 16 | // Custom Chakra theme 17 | import theme from 'theme/theme.js'; 18 | import FixedPlugin from '../components/FixedPlugin/FixedPlugin'; 19 | // Custom components 20 | import MainPanel from '../components/Layout/MainPanel'; 21 | import PanelContainer from '../components/Layout/PanelContainer'; 22 | import PanelContent from '../components/Layout/PanelContent'; 23 | export default function Dashboard(props) { 24 | const { ...rest } = props; 25 | // states and functions 26 | const [ sidebarVariant, setSidebarVariant ] = useState('transparent'); 27 | const [ fixed, setFixed ] = useState(false); 28 | // functions for changing the states from components 29 | const getRoute = () => { 30 | return window.location.pathname !== '/admin/full-screen-maps'; 31 | }; 32 | const getActiveRoute = (routes) => { 33 | let activeRoute = 'Default Brand Text'; 34 | for (let i = 0; i < routes.length; i++) { 35 | if (routes[i].collapse) { 36 | let collapseActiveRoute = getActiveRoute(routes[i].views); 37 | if (collapseActiveRoute !== activeRoute) { 38 | return collapseActiveRoute; 39 | } 40 | } else if (routes[i].category) { 41 | let categoryActiveRoute = getActiveRoute(routes[i].views); 42 | if (categoryActiveRoute !== activeRoute) { 43 | return categoryActiveRoute; 44 | } 45 | } else { 46 | if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) { 47 | return routes[i].name; 48 | } 49 | } 50 | } 51 | return activeRoute; 52 | }; 53 | // This changes navbar state(fixed or not) 54 | const getActiveNavbar = (routes) => { 55 | let activeNavbar = false; 56 | for (let i = 0; i < routes.length; i++) { 57 | if (routes[i].category) { 58 | let categoryActiveNavbar = getActiveNavbar(routes[i].views); 59 | if (categoryActiveNavbar !== activeNavbar) { 60 | return categoryActiveNavbar; 61 | } 62 | } else { 63 | if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) { 64 | if (routes[i].secondaryNavbar) { 65 | return routes[i].secondaryNavbar; 66 | } 67 | } 68 | } 69 | } 70 | return activeNavbar; 71 | }; 72 | const getRoutes = (routes) => { 73 | return routes.map((prop, key) => { 74 | if (prop.collapse) { 75 | return getRoutes(prop.views); 76 | } 77 | if (prop.category === 'account') { 78 | return getRoutes(prop.views); 79 | } 80 | if (prop.layout === '/admin') { 81 | if(prop.protected){ 82 | return 83 | } 84 | return ; 85 | } else { 86 | return null; 87 | } 88 | }); 89 | }; 90 | const { isOpen, onOpen, onClose } = useDisclosure(); 91 | document.documentElement.dir = 'ltr'; 92 | // Chakra Color Mode 93 | return ( 94 | 95 | 102 | 107 | 108 | 116 | 117 | {getRoute() ? ( 118 | 119 | 120 | 121 | {getRoutes(routes)} 122 | 123 | 124 | 125 | 126 | ) : null} 127 |