├── .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 | 
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 | 
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 |
8 |
--------------------------------------------------------------------------------
/src/assets/svg/atlassian-logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/box-3d.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/build.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/cart.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/credit.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/cube.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/document.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/globe.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/help.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/home.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/invision-logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/jira-logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/key.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/logo-colored.svg:
--------------------------------------------------------------------------------
1 |
22 |
--------------------------------------------------------------------------------
/src/assets/svg/logo-white.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/logo.svg:
--------------------------------------------------------------------------------
1 |
22 |
--------------------------------------------------------------------------------
/src/assets/svg/mastercard-icon.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/assets/svg/notifications.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/paypal.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/person-auth.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/person-circle-auth.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/person.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/profile.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/rocket.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/search.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/settings.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/slack-logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/spotify-logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/stats.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/svg/visa.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/svg/wallet.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/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 | }
100 | >
101 | Dashboard
102 |
103 |
104 |
105 |
115 | }
116 | >
117 | Profile
118 |
119 |
120 |
121 |
131 | }
132 | >
133 | Sign Up
134 |
135 |
136 |
137 |
146 | }
147 | >
148 | Sign In
149 |
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 |
128 |
129 |
130 |
131 | {
137 | setFixed(value);
138 | }}
139 | onOpaque={() => setSidebarVariant('opaque')}
140 | onTransparent={() => setSidebarVariant('transparent')}
141 | />
142 |
143 |
144 | );
145 | }
146 |
--------------------------------------------------------------------------------
/src/layouts/Auth.js:
--------------------------------------------------------------------------------
1 | // chakra imports
2 | import { Box, ChakraProvider, Portal } from '@chakra-ui/react';
3 | import Footer from 'components/Footer/Footer.js';
4 | // core components
5 | import AuthNavbar from 'components/Navbars/AuthNavbar.js';
6 | import React from 'react';
7 | import { Redirect, Route, Switch } from 'react-router-dom';
8 | import routes from 'routes.js';
9 | import '@fontsource/roboto/400.css';
10 | import '@fontsource/roboto/500.css';
11 | import '@fontsource/roboto/700.css';
12 | import theme from 'theme/theme.js';
13 |
14 | export default function Pages(props) {
15 | const { ...rest } = props;
16 | // ref for the wrapper div
17 | const wrapper = React.createRef();
18 | React.useEffect(() => {
19 | document.body.style.overflow = 'unset';
20 | // Specify how to clean up after this effect:
21 | return function cleanup() {};
22 | });
23 | const getActiveRoute = (routes) => {
24 | let activeRoute = 'Default Brand Text';
25 | for (let i = 0; i < routes.length; i++) {
26 | if (routes[i].collapse) {
27 | let collapseActiveRoute = getActiveRoute(routes[i].views);
28 | if (collapseActiveRoute !== activeRoute) {
29 | return collapseActiveRoute;
30 | }
31 | } else if (routes[i].category) {
32 | let categoryActiveRoute = getActiveRoute(routes[i].views);
33 | if (categoryActiveRoute !== activeRoute) {
34 | return categoryActiveRoute;
35 | }
36 | } else {
37 | if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) {
38 | return routes[i].name;
39 | }
40 | }
41 | }
42 | return activeRoute;
43 | };
44 | const getActiveNavbar = (routes) => {
45 | let activeNavbar = false;
46 | for (let i = 0; i < routes.length; i++) {
47 | if (routes[i].category) {
48 | let categoryActiveNavbar = getActiveNavbar(routes[i].views);
49 | if (categoryActiveNavbar !== activeNavbar) {
50 | return categoryActiveNavbar;
51 | }
52 | } else {
53 | if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) {
54 | if (routes[i].secondaryNavbar) {
55 | return routes[i].secondaryNavbar;
56 | }
57 | }
58 | }
59 | }
60 | return activeNavbar;
61 | };
62 | const getRoutes = (routes) => {
63 | return routes.map((prop, key) => {
64 | if (prop.collapse) {
65 | return getRoutes(prop.views);
66 | }
67 | if (prop.category === 'account') {
68 | return getRoutes(prop.views);
69 | }
70 | if (prop.layout === '/auth') {
71 | return ;
72 | } else {
73 | return null;
74 | }
75 | });
76 | };
77 | const navRef = React.useRef();
78 | document.documentElement.dir = 'ltr';
79 | return (
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 | {getRoutes(routes)}
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 | );
99 | }
100 |
--------------------------------------------------------------------------------
/src/layouts/RTL.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import { ChakraProvider, Portal, useDisclosure } from '@chakra-ui/react';
3 | import { RtlProvider } from 'components/RTLProvider/RTLProvider';
4 | import Configurator from 'components/Configurator/Configurator';
5 | import Footer from 'components/Footer/Footer.js';
6 | // Layout components
7 | import AdminNavbar from 'components/Navbars/AdminNavbar.js';
8 | import Sidebar from 'components/Sidebar';
9 | import React, { useState } from 'react';
10 | import { Redirect, Route, Switch } from 'react-router-dom';
11 | import routes from 'routes.js';
12 | // Custom Chakra theme
13 | import theme from 'theme/theme.js';
14 | import FixedPlugin from '../components/FixedPlugin/FixedPlugin';
15 | // Custom components
16 | import MainPanel from '../components/Layout/MainPanel';
17 | import PanelContainer from '../components/Layout/PanelContainer';
18 | import '@fontsource/roboto/400.css';
19 | import '@fontsource/roboto/500.css';
20 | import '@fontsource/roboto/700.css';
21 | import PanelContent from '../components/Layout/PanelContent';
22 | export default function Dashboard(props) {
23 | const { ...rest } = props;
24 | // states and functions
25 | const [ sidebarVariant, setSidebarVariant ] = useState('transparent');
26 | const [ fixed, setFixed ] = useState(false);
27 | const getRoute = () => {
28 | return window.location.pathname !== '/admin/full-screen-maps';
29 | };
30 | const getActiveRoute = (routes) => {
31 | let activeRoute = 'Default Brand Text';
32 | for (let i = 0; i < routes.length; i++) {
33 | if (routes[i].collapse) {
34 | let collapseActiveRoute = getActiveRoute(routes[i].views);
35 | if (collapseActiveRoute !== activeRoute) {
36 | return collapseActiveRoute;
37 | }
38 | } else if (routes[i].category) {
39 | let categoryActiveRoute = getActiveRoute(routes[i].views);
40 | if (categoryActiveRoute !== activeRoute) {
41 | return categoryActiveRoute;
42 | }
43 | } else {
44 | if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) {
45 | return routes[i].name;
46 | }
47 | }
48 | }
49 | return activeRoute;
50 | };
51 | // This changes navbar state(fixed or not)
52 | const getActiveNavbar = (routes) => {
53 | let activeNavbar = false;
54 | for (let i = 0; i < routes.length; i++) {
55 | if (routes[i].category) {
56 | let categoryActiveNavbar = getActiveNavbar(routes[i].views);
57 | if (categoryActiveNavbar !== activeNavbar) {
58 | return categoryActiveNavbar;
59 | }
60 | } else {
61 | if (window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1) {
62 | if (routes[i].secondaryNavbar) {
63 | return routes[i].secondaryNavbar;
64 | }
65 | }
66 | }
67 | }
68 | return activeNavbar;
69 | };
70 | const getRoutes = (routes) => {
71 | return routes.map((prop, key) => {
72 | if (prop.collapse) {
73 | return getRoutes(prop.views);
74 | }
75 | if (prop.category === 'account') {
76 | return getRoutes(prop.views);
77 | }
78 | if (prop.layout === '/rtl' || prop.layout === '/admin') {
79 | return ;
80 | } else {
81 | return null;
82 | }
83 | });
84 | };
85 | const { isOpen, onOpen, onClose } = useDisclosure();
86 | document.documentElement.dir = 'rtl';
87 | // Chakra Color Mode
88 | return (
89 |
90 |
91 |
98 |
104 |
105 |
113 |
114 | {getRoute() ? (
115 |
116 |
117 |
118 | {getRoutes(routes)}
119 |
120 |
121 |
122 |
123 | ) : null}
124 |
125 |
126 |
127 |
128 | {
134 | setFixed(value);
135 | }}
136 | onOpaque={() => setSidebarVariant('opaque')}
137 | onTransparent={() => setSidebarVariant('transparent')}
138 | />
139 |
140 |
141 |
142 | );
143 | }
144 |
--------------------------------------------------------------------------------
/src/routes.js:
--------------------------------------------------------------------------------
1 | // import
2 | import Dashboard from "views/Dashboard/Dashboard";
3 | import Tables from "views/Dashboard/Tables";
4 | import Billing from "views/Dashboard/Billing";
5 | import RTLPage from "views/Dashboard/RTL";
6 | import Profile from "views/Dashboard/Profile";
7 | import SignIn from "views/Auth/SignIn.js";
8 | import SignUp from "views/Auth/SignUp.js";
9 |
10 | import {
11 | HomeIcon,
12 | StatsIcon,
13 | CreditIcon,
14 | PersonIcon,
15 | DocumentIcon,
16 | RocketIcon,
17 | SupportIcon,
18 | } from "components/Icons/Icons";
19 |
20 | var dashRoutes = [
21 | {
22 | path: "/dashboard",
23 | name: "Dashboard",
24 | rtlName: "لوحة القيادة",
25 | icon: ,
26 | component: Dashboard,
27 | layout: "/admin",
28 | protected: true,
29 | },
30 | {
31 | path: "/tables",
32 | name: "Tables",
33 | rtlName: "لوحة القيادة",
34 | icon: ,
35 | component: Tables,
36 | layout: "/admin",
37 | protected: true,
38 | },
39 | {
40 | path: "/billing",
41 | name: "Billing",
42 | rtlName: "لوحة القيادة",
43 | icon: ,
44 | component: Billing,
45 | layout: "/admin",
46 | protected: true,
47 | },
48 | {
49 | path: "/rtl-support-page",
50 | name: "RTL",
51 | rtlName: "آرتيإل",
52 | icon: ,
53 | component: RTLPage,
54 | layout: "/rtl",
55 | },
56 | {
57 | name: "ACCOUNT PAGES",
58 | category: "account",
59 | rtlName: "صفحات",
60 | state: "pageCollapse",
61 | views: [
62 | {
63 | path: "/profile",
64 | name: "Profile",
65 | rtlName: "لوحة القيادة",
66 | icon: ,
67 | secondaryNavbar: true,
68 | component: Profile,
69 | layout: "/admin",
70 | protected: true,
71 | },
72 | {
73 | path: "/signin",
74 | name: "Sign In",
75 | rtlName: "لوحة القيادة",
76 | icon: ,
77 | component: SignIn,
78 | layout: "/auth",
79 | },
80 | {
81 | path: "/signup",
82 | name: "Sign Up",
83 | rtlName: "لوحة القيادة",
84 | icon: ,
85 | secondaryNavbar: true,
86 | component: SignUp,
87 | layout: "/auth",
88 | },
89 | ],
90 | },
91 | ];
92 | export default dashRoutes;
93 |
--------------------------------------------------------------------------------
/src/theme/additions/card/Card.js:
--------------------------------------------------------------------------------
1 | const Card = {
2 | baseStyle: {
3 | p: "22px",
4 | display: "flex",
5 | flexDirection: "column",
6 | width: "100%",
7 | position: "relative",
8 | minWidth: "0px",
9 | wordWrap: "break-word",
10 | backgroundClip: "border-box",
11 | },
12 | variants: {
13 | panel: (props) => ({
14 | bg: props.colorMode === "dark" ? "gray.700" : "white",
15 | width: "100%",
16 | boxShadow: "0px 3.5px 5.5px rgba(0, 0, 0, 0.02)",
17 | borderRadius: "15px",
18 | }),
19 | },
20 | defaultProps: {
21 | variant: "panel",
22 | },
23 | };
24 |
25 | export const CardComponent = {
26 | components: {
27 | Card,
28 | },
29 | };
30 |
--------------------------------------------------------------------------------
/src/theme/additions/card/CardBody.js:
--------------------------------------------------------------------------------
1 | const CardBody = {
2 | baseStyle: {
3 | display: "flex",
4 | width: "100%",
5 | },
6 | };
7 |
8 | export const CardBodyComponent = {
9 | components: {
10 | CardBody,
11 | },
12 | };
13 |
--------------------------------------------------------------------------------
/src/theme/additions/card/CardHeader.js:
--------------------------------------------------------------------------------
1 | const CardHeader = {
2 | baseStyle: {
3 | display: "flex",
4 | width: "100%"
5 | },
6 | };
7 |
8 | export const CardHeaderComponent = {
9 | components: {
10 | CardHeader,
11 | },
12 | };
13 |
--------------------------------------------------------------------------------
/src/theme/additions/layout/MainPanel.js:
--------------------------------------------------------------------------------
1 | const MainPanel = {
2 | baseStyle: {
3 | float: "right",
4 | maxWidth: "100%",
5 | overflow: "auto",
6 | position: "relative",
7 | maxHeight: "100%",
8 | transition: "all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)",
9 | transitionDuration: ".2s, .2s, .35s",
10 | transitionProperty: "top, bottom, width",
11 | transitionTimingFunction: "linear, linear, ease",
12 | },
13 | variants: {
14 | main: (props) => ({
15 | float: "right",
16 | }),
17 | rtl: (props) => ({
18 | float: "left",
19 | }),
20 | },
21 | defaultProps: {
22 | variant: "main",
23 | },
24 | };
25 |
26 | export const MainPanelComponent = {
27 | components: {
28 | MainPanel,
29 | },
30 | };
31 |
--------------------------------------------------------------------------------
/src/theme/additions/layout/PanelContainer.js:
--------------------------------------------------------------------------------
1 | const PanelContainer = {
2 | baseStyle: {
3 | p: "30px 15px",
4 | minHeight: "calc(100vh - 123px)",
5 | },
6 | };
7 |
8 | export const PanelContainerComponent = {
9 | components: {
10 | PanelContainer,
11 | },
12 | };
13 |
--------------------------------------------------------------------------------
/src/theme/additions/layout/PanelContent.js:
--------------------------------------------------------------------------------
1 | const PanelContent = {
2 | baseStyle: {
3 | ms: "auto",
4 | me: "auto",
5 | ps: "15px",
6 | pe: "15px",
7 | },
8 | };
9 |
10 | export const PanelContentComponent = {
11 | components: {
12 | PanelContent,
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/src/theme/components/badge.js:
--------------------------------------------------------------------------------
1 | import { baseStyle } from "@chakra-ui/react";
2 |
3 | export const badgeStyles = {
4 | components: {
5 | Badge: {
6 | sizes: {
7 | md: {
8 | width: "65px",
9 | height: "25px"
10 | }
11 | },
12 | baseStyle: {
13 | textTransform: "capitalize"
14 | }
15 |
16 | }
17 | }
18 | }
--------------------------------------------------------------------------------
/src/theme/components/button.js:
--------------------------------------------------------------------------------
1 | export const buttonStyles = {
2 | components: {
3 | Button: {
4 | variants: {
5 | "no-hover": {
6 | _hover: {
7 | boxShadow: "none",
8 | },
9 | },
10 | "transparent-with-icon": {
11 | bg: "transparent",
12 | fontWeight: "bold",
13 | borderRadius: "inherit",
14 | cursor: "pointer",
15 | _hover: "none",
16 | _active: {
17 | bg: "transparent",
18 | transform: "none",
19 | borderColor: "transparent",
20 | },
21 | _focus: {
22 | boxShadow: "none",
23 | },
24 | _hover: {
25 | boxShadow: "none",
26 | },
27 | },
28 | },
29 | baseStyle: {
30 | borderRadius: "15px",
31 | _focus: {
32 | boxShadow: "none",
33 | },
34 | },
35 | },
36 | },
37 | };
38 |
--------------------------------------------------------------------------------
/src/theme/components/drawer.js:
--------------------------------------------------------------------------------
1 | export const drawerStyles = {
2 | components: {
3 | Drawer: {
4 | // 3. We can add a new visual variant
5 | variants: {
6 | "with-shadow": {
7 | placement: "right",
8 | boxShadow: "0 0 2px 2px #efdfde",
9 | bgColor: "red",
10 | },
11 | },
12 | },
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/src/theme/components/link.js:
--------------------------------------------------------------------------------
1 | export const linkStyles = {
2 | components: {
3 | Link: {
4 | // 3. We can add a new visual variant
5 | decoration: "none",
6 | baseStyle: {
7 | _hover: {
8 | textDecoration: "none",
9 | },
10 | _focus: {
11 | boxShadow: "none",
12 | },
13 | },
14 | },
15 | },
16 | };
17 |
--------------------------------------------------------------------------------
/src/theme/foundations/breakpoints.js:
--------------------------------------------------------------------------------
1 | // 1. Import the utilities
2 | import { createBreakpoints } from "@chakra-ui/theme-tools";
3 | // 2. Update the breakpoints as key-value pairs
4 | export const breakpoints = createBreakpoints({
5 | sm: "320px",
6 | md: "768px",
7 | lg: "960px",
8 | xl: "1200px",
9 | });
10 |
--------------------------------------------------------------------------------
/src/theme/foundations/text.js:
--------------------------------------------------------------------------------
1 | export const buttonStyles = {
2 | components: {
3 | Button: {
4 | // 3. We can add a new visual variant
5 | variants: {
6 | "with-shadow": {
7 | boxShadow: "0 0 2px 2px #efdfde",
8 | },
9 | },
10 | },
11 | },
12 | };
13 |
--------------------------------------------------------------------------------
/src/theme/styles.js:
--------------------------------------------------------------------------------
1 | import { mode } from '@chakra-ui/theme-tools';
2 |
3 | export const globalStyles = {
4 | colors: {
5 | gray: {
6 | 700: '#1f2733'
7 | }
8 | },
9 | styles: {
10 | global: (props) => ({
11 | body: {
12 | bg: mode('gray.50', 'gray.800')(props),
13 | fontFamily: "'Roboto', sans-serif"
14 | },
15 | html: {
16 | fontFamily: "'Roboto', sans-serif"
17 | }
18 | })
19 | }
20 | };
21 |
--------------------------------------------------------------------------------
/src/theme/theme.js:
--------------------------------------------------------------------------------
1 | import { extendTheme } from '@chakra-ui/react';
2 | import { globalStyles } from './styles';
3 | import { breakpoints } from './foundations/breakpoints';
4 | import { buttonStyles } from './components/button';
5 | import { badgeStyles } from './components/badge';
6 | import { linkStyles } from './components/link';
7 | import { drawerStyles } from './components/drawer';
8 | import { CardComponent } from './additions/card/Card';
9 | import { CardBodyComponent } from './additions/card/CardBody';
10 | import { CardHeaderComponent } from './additions/card/CardHeader';
11 | import { MainPanelComponent } from './additions/layout/MainPanel';
12 | import { PanelContentComponent } from './additions/layout/PanelContent';
13 | import { PanelContainerComponent } from './additions/layout/PanelContainer';
14 | // import { mode } from "@chakra-ui/theme-tools";
15 | export default extendTheme(
16 | { breakpoints }, // Breakpoints
17 | globalStyles,
18 | buttonStyles, // Button styles
19 | badgeStyles, // Badge styles
20 | linkStyles, // Link styles
21 | drawerStyles, // Sidebar variant for Chakra's drawer
22 | CardComponent, // Card component
23 | CardBodyComponent, // Card Body component
24 | CardHeaderComponent, // Card Header component
25 | MainPanelComponent, // Main Panel component
26 | PanelContentComponent, // Panel Content component
27 | PanelContainerComponent // Panel Container component
28 | );
29 |
--------------------------------------------------------------------------------
/src/variables/charts.js:
--------------------------------------------------------------------------------
1 | export const barChartData = [
2 | {
3 | name: "Sales",
4 | data: [330, 250, 110, 300, 490, 350, 270, 130, 425],
5 | },
6 | ];
7 |
8 | export const barChartOptions = {
9 | chart: {
10 | toolbar: {
11 | show: false,
12 | },
13 | },
14 | tooltip: {
15 | style: {
16 | backgroundColor: "red",
17 | fontSize: "12px",
18 | fontFamily: undefined,
19 | },
20 | onDatasetHover: {
21 | style: {
22 | backgroundColor: "red",
23 | fontSize: "12px",
24 | fontFamily: undefined,
25 | },
26 | },
27 | theme: "dark",
28 | },
29 | xaxis: {
30 | categories: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
31 | show: false,
32 | labels: {
33 | show: false,
34 | style: {
35 | colors: "#fff",
36 | fontSize: "12px",
37 | },
38 | },
39 | axisBorder: {
40 | show: false,
41 | },
42 | axisTicks: {
43 | show: false,
44 | },
45 | },
46 | yaxis: {
47 | show: true,
48 | color: "#fff",
49 | labels: {
50 | show: true,
51 | style: {
52 | colors: "#fff",
53 | fontSize: "14px",
54 | },
55 | },
56 | },
57 | grid: {
58 | show: false,
59 | },
60 | fill: {
61 | colors: "#fff",
62 | },
63 | dataLabels: {
64 | enabled: false,
65 | },
66 | plotOptions: {
67 | bar: {
68 | borderRadius: 8,
69 | columnWidth: "12px",
70 | },
71 | },
72 | responsive: [
73 | {
74 | breakpoint: 768,
75 | options: {
76 | plotOptions: {
77 | bar: {
78 | borderRadius: 0,
79 | },
80 | },
81 | },
82 | },
83 | ],
84 | };
85 |
86 | export const lineChartData = [
87 | {
88 | name: "Mobile apps",
89 | data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
90 | },
91 | {
92 | name: "Websites",
93 | data: [30, 90, 40, 140, 290, 290, 340, 230, 400],
94 | },
95 | ];
96 |
97 | export const lineChartOptions = {
98 | chart: {
99 | toolbar: {
100 | show: false,
101 | },
102 | },
103 | tooltip: {
104 | theme: "dark",
105 | },
106 | dataLabels: {
107 | enabled: false,
108 | },
109 | stroke: {
110 | curve: "smooth",
111 | },
112 | xaxis: {
113 | type: "datetime",
114 | categories: [
115 | "Jan",
116 | "Feb",
117 | "Mar",
118 | "Apr",
119 | "May",
120 | "Jun",
121 | "Jul",
122 | "Aug",
123 | "Sep",
124 | "Oct",
125 | "Nov",
126 | "Dec",
127 | ],
128 | labels: {
129 | style: {
130 | colors: "#c8cfca",
131 | fontSize: "12px",
132 | },
133 | },
134 | },
135 | yaxis: {
136 | labels: {
137 | style: {
138 | colors: "#c8cfca",
139 | fontSize: "12px",
140 | },
141 | },
142 | },
143 | legend: {
144 | show: false,
145 | },
146 | grid: {
147 | strokeDashArray: 5,
148 | },
149 | fill: {
150 | type: "gradient",
151 | gradient: {
152 | shade: "light",
153 | type: "vertical",
154 | shadeIntensity: 0.5,
155 | gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
156 | inverseColors: true,
157 | opacityFrom: 0.8,
158 | opacityTo: 0,
159 | stops: [],
160 | },
161 | colors: ["#4FD1C5", "#2D3748"],
162 | },
163 | colors: ["#4FD1C5", "#2D3748"],
164 | };
165 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Billing/components/BillingInformation.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import { Flex, Text, useColorModeValue } from "@chakra-ui/react";
3 | // Custom components
4 | import Card from "components/Card/Card.js";
5 | import CardBody from "components/Card/CardBody.js";
6 | import CardHeader from "components/Card/CardHeader.js";
7 | import BillingRow from "components/Tables/BillingRow";
8 | import React from "react";
9 |
10 | const BillingInformation = ({ title, data }) => {
11 | const textColor = useColorModeValue("gray.700", "white");
12 | return (
13 |
14 |
15 |
16 |
17 | {title}
18 |
19 |
20 |
21 |
22 | {data.map((row) => {
23 | return (
24 |
30 | );
31 | })}
32 |
33 |
34 |
35 |
36 | );
37 | };
38 |
39 | export default BillingInformation;
40 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Billing/components/CreditCard.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import { Box, Flex, Spacer, Text } from "@chakra-ui/react";
3 | // Custom components
4 | import Card from "components/Card/Card.js";
5 | import CardBody from "components/Card/CardBody.js";
6 | import React from "react";
7 |
8 | const CreditCard = ({
9 | backgroundImage,
10 | title,
11 | icon,
12 | number,
13 | validity,
14 | cvv,
15 | }) => {
16 | return (
17 |
25 |
26 |
32 |
33 |
34 | {title}
35 |
36 | {icon}
37 |
38 |
39 |
40 |
41 |
42 | {number}
43 |
44 |
45 |
46 |
47 | {validity.name}
48 |
49 | {validity.date}
50 |
51 |
52 |
53 | {cvv.name}
54 |
55 | {cvv.code}
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 | );
64 | };
65 |
66 | export default CreditCard;
67 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Billing/components/Invoices.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import { Button, Flex, Text, useColorModeValue } from "@chakra-ui/react";
3 | // Custom components
4 | import Card from "components/Card/Card.js";
5 | import CardBody from "components/Card/CardBody.js";
6 | import CardHeader from "components/Card/CardHeader.js";
7 | import InvoicesRow from "components/Tables/InvoicesRow";
8 | import React from "react";
9 |
10 | const Invoices = ({ title, data }) => {
11 | const textColor = useColorModeValue("gray.700", "white");
12 |
13 | return (
14 |
18 |
19 |
20 |
21 | {title}
22 |
23 |
32 |
33 |
34 |
35 |
36 | {data.map((row) => {
37 | return (
38 |
45 | );
46 | })}
47 |
48 |
49 |
50 | );
51 | };
52 |
53 | export default Invoices;
54 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Billing/components/PaymentMethod.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import {
3 | Button,
4 | Flex,
5 | Icon,
6 | Spacer,
7 | Text,
8 | useColorModeValue,
9 | } from "@chakra-ui/react";
10 | // Custom components
11 | import Card from "components/Card/Card.js";
12 | import CardBody from "components/Card/CardBody.js";
13 | import CardHeader from "components/Card/CardHeader.js";
14 | import IconBox from "components/Icons/IconBox";
15 | import React from "react";
16 | import { FaPencilAlt } from "react-icons/fa";
17 |
18 | const PaymentMethod = ({ title, mastercard, visa }) => {
19 | const iconTeal = useColorModeValue("teal.300", "teal.300");
20 | const textColor = useColorModeValue("gray.700", "white");
21 | const borderColor = useColorModeValue("#dee2e6", "gray.500");
22 | const bgButton = useColorModeValue(
23 | "linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)",
24 | "gray.800"
25 | );
26 |
27 | return (
28 |
29 |
30 |
31 |
32 | {title}
33 |
34 |
37 |
38 |
39 |
40 |
46 |
56 |
57 | {mastercard.icon}
58 |
59 |
60 | {mastercard.number}
61 |
62 |
63 |
71 |
72 |
80 |
81 | {visa.icon}
82 |
83 |
84 | {visa.number}
85 |
86 |
87 |
95 |
96 |
97 |
98 |
99 | );
100 | };
101 |
102 | export default PaymentMethod;
103 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Billing/components/PaymentStatistics.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import { Flex, Text, useColorModeValue } from "@chakra-ui/react";
3 | // Custom components
4 | import Card from "components/Card/Card.js";
5 | import CardBody from "components/Card/CardBody.js";
6 | import IconBox from "components/Icons/IconBox";
7 | import { Separator } from "components/Separator/Separator";
8 | import React from "react";
9 |
10 | const PaymentStatistics = ({ icon, title, description, amount }) => {
11 | const iconTeal = useColorModeValue("teal.300", "teal.300");
12 | const textColor = useColorModeValue("gray.700", "white");
13 |
14 | return (
15 |
16 |
17 |
18 |
19 | {icon}
20 |
21 |
28 |
29 | {title}
30 |
31 |
36 | {description}
37 |
38 |
39 |
40 |
41 | {`%${amount}`}
42 |
43 |
44 |
45 |
46 | );
47 | };
48 |
49 | export default PaymentStatistics;
50 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Billing/components/Transactions.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import { Flex, Icon, Text, useColorModeValue } from "@chakra-ui/react";
3 | // Custom components
4 | import Card from "components/Card/Card.js";
5 | import CardBody from "components/Card/CardBody.js";
6 | import CardHeader from "components/Card/CardHeader.js";
7 | import TransactionRow from "components/Tables/TransactionRow";
8 | import React from "react";
9 | import { FaRegCalendarAlt } from "react-icons/fa";
10 |
11 | const Transactions = ({
12 | title,
13 | date,
14 | newestTransactions,
15 | olderTransactions,
16 | }) => {
17 | // Chakra color mode
18 | const textColor = useColorModeValue("gray.700", "white");
19 |
20 | return (
21 |
22 |
23 |
24 |
30 |
34 | {title}
35 |
36 |
37 |
42 |
43 | {date}
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
56 | NEWEST
57 |
58 | {newestTransactions.map((row) => {
59 | return (
60 |
66 | );
67 | })}
68 |
73 | OLDER
74 |
75 | {olderTransactions.map((row) => {
76 | return (
77 |
83 | );
84 | })}
85 |
86 |
87 |
88 | );
89 | };
90 |
91 | export default Transactions;
92 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Billing/index.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import { Box, Flex, Grid, Icon } from "@chakra-ui/react";
3 | // Assets
4 | import BackgroundCard1 from "assets/img/BackgroundCard1.png";
5 | import { MastercardIcon, VisaIcon } from "components/Icons/Icons";
6 | import React from "react";
7 | import { FaPaypal, FaWallet } from "react-icons/fa";
8 | import { RiMastercardFill } from "react-icons/ri";
9 | import {
10 | billingData,
11 | invoicesData,
12 | newestTransactions,
13 | olderTransactions,
14 | } from "variables/general";
15 | import BillingInformation from "./components/BillingInformation";
16 | import CreditCard from "./components/CreditCard";
17 | import Invoices from "./components/Invoices";
18 | import PaymentMethod from "./components/PaymentMethod";
19 | import PaymentStatistics from "./components/PaymentStatistics";
20 | import Transactions from "./components/Transactions";
21 |
22 | function Billing() {
23 | return (
24 |
25 |
26 |
27 |
35 |
54 | }
55 | />
56 | }
58 | title={"Salary"}
59 | description={"Belong interactive"}
60 | amount={2000}
61 | />
62 | }
64 | title={"Paypal"}
65 | description={"Freelance Payment"}
66 | amount={4550}
67 | />
68 |
69 | ,
73 | number: "7812 2139 0823 XXXX",
74 | }}
75 | visa={{
76 | icon: ,
77 | number: "7812 2139 0823 XXXX",
78 | }}
79 | />
80 |
81 |
82 |
83 |
84 |
85 |
91 |
92 |
93 | );
94 | }
95 |
96 | export default Billing;
97 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Dashboard/components/ActiveUsers.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import { Flex, SimpleGrid, Text, useColorModeValue } from "@chakra-ui/react";
3 | // Custom components
4 | import Card from "components/Card/Card.js";
5 | import CardBody from "components/Card/CardBody.js";
6 | // Custom icons
7 | import {
8 | CartIcon,
9 | RocketIcon,
10 | StatsIcon,
11 | WalletIcon,
12 | } from "components/Icons/Icons.js";
13 | import React from "react";
14 | import ChartStatistics from "./ChartStatistics";
15 |
16 | const ActiveUsers = ({ title, percentage, chart }) => {
17 | const iconBoxInside = useColorModeValue("white", "white");
18 | const textColor = useColorModeValue("gray.700", "white");
19 | return (
20 |
21 |
22 |
23 | {chart}
24 |
25 |
26 | {title}
27 |
28 |
29 | 0 ? "green.400" : "red.400"}
32 | fontWeight='bold'>
33 | {percentage > 0 ? `+${percentage}%` : `-${percentage}%`}
34 | {" "}
35 | than last week
36 |
37 |
38 |
39 | }
44 | />
45 | }
50 | />
51 | }
56 | />
57 | }
62 | />
63 |
64 |
65 |
66 |
67 | );
68 | };
69 |
70 | export default ActiveUsers;
71 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Dashboard/components/BuiltByDevelopers.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import {
3 | Button,
4 | Flex,
5 | Icon,
6 | Spacer,
7 | Text,
8 | useColorModeValue,
9 | } from "@chakra-ui/react";
10 | // Custom components
11 | import Card from "components/Card/Card.js";
12 | import CardBody from "components/Card/CardBody.js";
13 | import React from "react";
14 | // react icons
15 | import { BsArrowRight } from "react-icons/bs";
16 |
17 | const BuiltByDevelopers = ({ title, name, description, image }) => {
18 | const textColor = useColorModeValue("gray.700", "white");
19 |
20 | return (
21 |
22 |
23 |
24 |
29 |
30 | {title}
31 |
32 |
33 | {name}
34 |
35 |
36 | {description}
37 |
38 |
39 |
40 |
67 |
68 |
69 |
70 |
77 | {image}
78 |
79 |
80 |
81 |
82 | );
83 | };
84 |
85 | export default BuiltByDevelopers;
86 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Dashboard/components/ChartStatistics.js:
--------------------------------------------------------------------------------
1 | import { Flex, Progress, Text, useColorModeValue } from "@chakra-ui/react";
2 | import IconBox from "components/Icons/IconBox";
3 | import React from "react";
4 |
5 | const ChartStatistics = ({ title, amount, icon, percentage }) => {
6 | const iconTeal = useColorModeValue("teal.300", "teal.300");
7 | const iconBoxInside = useColorModeValue("white", "white");
8 | const textColor = useColorModeValue("gray.700", "white");
9 | const overlayRef = React.useRef();
10 | return (
11 |
12 |
13 |
14 | {icon}
15 |
16 |
17 | {title}
18 |
19 |
20 |
21 | {amount}
22 |
23 |
29 |
30 | );
31 | };
32 |
33 | export default ChartStatistics;
34 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Dashboard/components/MiniStatistics.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import {
3 | Flex,
4 | Stat,
5 | StatHelpText,
6 | StatLabel,
7 | StatNumber,
8 | useColorModeValue,
9 | } from "@chakra-ui/react";
10 | // Custom components
11 | import Card from "components/Card/Card.js";
12 | import CardBody from "components/Card/CardBody.js";
13 | import IconBox from "components/Icons/IconBox";
14 | import React from "react";
15 |
16 | const MiniStatistics = ({ title, amount, percentage, icon }) => {
17 | const iconTeal = useColorModeValue("teal.300", "teal.300");
18 | const textColor = useColorModeValue("gray.700", "white");
19 |
20 | return (
21 |
22 |
23 |
24 |
25 |
30 | {title}
31 |
32 |
33 |
34 | {amount}
35 |
36 | 0 ? "green.400" : "red.400"}
41 | fontWeight='bold'
42 | ps='3px'
43 | fontSize='md'>
44 | {percentage > 0 ? `+${percentage}%` : `${percentage}%`}
45 |
46 |
47 |
48 |
49 | {icon}
50 |
51 |
52 |
53 |
54 | );
55 | };
56 |
57 | export default MiniStatistics;
58 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Dashboard/components/OrdersOverview.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import { Flex, Text, useColorModeValue } from "@chakra-ui/react";
3 | // Custom components
4 | import Card from "components/Card/Card.js";
5 | import CardBody from "components/Card/CardBody.js";
6 | import CardHeader from "components/Card/CardHeader.js";
7 | import TimelineRow from "components/Tables/TimelineRow";
8 | import React from "react";
9 |
10 | const OrdersOverview = ({ title, amount, data }) => {
11 | const textColor = useColorModeValue("gray.700", "white");
12 |
13 | return (
14 |
15 |
16 |
17 |
18 | {title}
19 |
20 |
21 |
22 | {`${amount}%`}
23 | {" "}
24 | this month.
25 |
26 |
27 |
28 |
29 |
30 | {data.map((row, index, arr) => {
31 | return (
32 |
41 | );
42 | })}
43 |
44 |
45 |
46 | );
47 | };
48 |
49 | export default OrdersOverview;
50 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Dashboard/components/Projects.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import {
3 | Flex,
4 | Icon,
5 | Table,
6 | Tbody,
7 | Text,
8 | Th,
9 | Thead,
10 | Tr,
11 | useColorModeValue,
12 | } from "@chakra-ui/react";
13 | // Custom components
14 | import Card from "components/Card/Card.js";
15 | import CardHeader from "components/Card/CardHeader.js";
16 | import DashboardTableRow from "components/Tables/DashboardTableRow";
17 | import React from "react";
18 | import { IoCheckmarkDoneCircleSharp } from "react-icons/io5";
19 |
20 | const Projects = ({ title, amount, captions, data }) => {
21 | const textColor = useColorModeValue("gray.700", "white");
22 |
23 | return (
24 |
25 |
26 |
27 |
28 | {title}
29 |
30 |
31 |
38 |
39 |
40 | {amount} done
41 | {" "}
42 | this month.
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | {captions.map((caption, idx) => {
51 | return (
52 |
53 | {caption}
54 | |
55 | );
56 | })}
57 |
58 |
59 |
60 | {data.map((row) => {
61 | return (
62 |
70 | );
71 | })}
72 |
73 |
74 |
75 | );
76 | };
77 |
78 | export default Projects;
79 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Dashboard/components/SalesOverview.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import { Box, Flex, Text, useColorModeValue } from "@chakra-ui/react";
3 | // Custom components
4 | import Card from "components/Card/Card.js";
5 | import CardHeader from "components/Card/CardHeader.js";
6 | import React from "react";
7 |
8 | const SalesOverview = ({ title, percentage, chart }) => {
9 | const textColor = useColorModeValue("gray.700", "white");
10 | return (
11 |
12 |
13 |
14 |
15 | {title}
16 |
17 |
18 | 0 ? "green.400" : "red.400"}
21 | fontWeight='bold'>
22 | {`${percentage}%`} more
23 | {" "}
24 | in 2021
25 |
26 |
27 |
28 |
29 | {chart}
30 |
31 |
32 | );
33 | };
34 |
35 | export default SalesOverview;
36 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Dashboard/components/WorkWithTheRockets.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import {
3 | Box,
4 | Button,
5 | Flex,
6 | Icon,
7 | Portal,
8 | Spacer,
9 | Text,
10 | } from "@chakra-ui/react";
11 | // Custom components
12 | import Card from "components/Card/Card.js";
13 | import CardBody from "components/Card/CardBody.js";
14 | import React from "react";
15 | // react icons
16 | import { BsArrowRight } from "react-icons/bs";
17 |
18 | const WorkWithTheRockets = ({ title, description, backgroundImage }) => {
19 | const overlayRef = React.useRef();
20 | return (
21 |
22 |
32 |
39 |
40 |
45 |
46 | {title}
47 |
48 |
49 | {description}
50 |
51 |
52 |
53 |
73 |
74 |
75 |
76 |
77 |
78 | );
79 | };
80 |
81 | export default WorkWithTheRockets;
82 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Dashboard/index.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import {
3 | Flex,
4 | Grid,
5 | Image,
6 | SimpleGrid,
7 | useColorModeValue,
8 | } from "@chakra-ui/react";
9 | // assets
10 | import peopleImage from "assets/img/people-image.png";
11 | import logoChakra from "assets/svg/logo-white.svg";
12 | import BarChart from "components/Charts/BarChart";
13 | import LineChart from "components/Charts/LineChart";
14 | // Custom icons
15 | import {
16 | CartIcon,
17 | DocumentIcon,
18 | GlobeIcon,
19 | WalletIcon,
20 | } from "components/Icons/Icons.js";
21 | import React from "react";
22 | import { dashboardTableData, timelineData } from "variables/general";
23 | import ActiveUsers from "./components/ActiveUsers";
24 | import BuiltByDevelopers from "./components/BuiltByDevelopers";
25 | import MiniStatistics from "./components/MiniStatistics";
26 | import OrdersOverview from "./components/OrdersOverview";
27 | import Projects from "./components/Projects";
28 | import SalesOverview from "./components/SalesOverview";
29 | import WorkWithTheRockets from "./components/WorkWithTheRockets";
30 |
31 | export default function Dashboard() {
32 | const iconBoxInside = useColorModeValue("white", "white");
33 |
34 | return (
35 |
36 |
37 | }
42 | />
43 | }
48 | />
49 | }
54 | />
55 | }
60 | />
61 |
62 |
67 |
79 | }
80 | />
81 |
88 |
89 |
94 | }
98 | />
99 | }
103 | />
104 |
105 |
109 |
115 |
120 |
121 |
122 | );
123 | }
124 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Profile/components/Conversations.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import {
3 | Avatar,
4 | Button,
5 | Flex,
6 | Text,
7 | useColorModeValue,
8 | } from "@chakra-ui/react";
9 | // Assets
10 | import avatar2 from "assets/img/avatars/avatar2.png";
11 | import avatar3 from "assets/img/avatars/avatar3.png";
12 | import avatar4 from "assets/img/avatars/avatar4.png";
13 | import avatar5 from "assets/img/avatars/avatar5.png";
14 | import avatar6 from "assets/img/avatars/avatar6.png";
15 | // Custom components
16 | import Card from "components/Card/Card";
17 | import CardBody from "components/Card/CardBody";
18 | import CardHeader from "components/Card/CardHeader";
19 | import React from "react";
20 |
21 | const Conversations = ({ title }) => {
22 | // Chakra color mode
23 | const textColor = useColorModeValue("gray.700", "white");
24 |
25 | return (
26 |
27 |
28 |
29 | {title}
30 |
31 |
32 |
33 |
34 |
35 |
36 |
43 |
44 |
45 | Sophie B.{" "}
46 |
47 |
48 | Hi! I need more information...
49 |
50 |
51 |
52 |
61 |
62 |
63 |
64 |
71 |
72 |
73 | Sophie B.{" "}
74 |
75 |
76 | Awesome work, can you change...
77 |
78 |
79 |
80 |
89 |
90 |
91 |
92 |
99 |
100 |
101 | Sophie B.{" "}
102 |
103 |
104 | Have a great afternoon...
105 |
106 |
107 |
108 |
117 |
118 |
119 |
120 |
127 |
128 |
129 | Sophie B.{" "}
130 |
131 |
132 | About files I can...
133 |
134 |
135 |
136 |
145 |
146 |
147 |
148 |
155 |
156 |
157 | Sophie B.{" "}
158 |
159 |
160 | About files I can...
161 |
162 |
163 |
164 |
173 |
174 |
175 |
176 |
177 | );
178 | };
179 |
180 | export default Conversations;
181 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Profile/components/Header.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import {
3 | Avatar,
4 | Box,
5 | Button,
6 | Flex,
7 | Text,
8 | useColorModeValue,
9 | } from "@chakra-ui/react";
10 | import React from "react";
11 |
12 | const Header = ({
13 | backgroundHeader,
14 | backgroundProfile,
15 | avatarImage,
16 | name,
17 | email,
18 | tabs,
19 | }) => {
20 | // Chakra color mode
21 | const textColor = useColorModeValue("gray.700", "white");
22 | const borderProfileColor = useColorModeValue(
23 | "white",
24 | "rgba(255, 255, 255, 0.31)"
25 | );
26 | const emailColor = useColorModeValue("gray.400", "gray.300");
27 | return (
28 |
36 |
46 |
66 |
72 |
79 |
80 |
85 | {name}
86 |
87 |
91 | {email}
92 |
93 |
94 |
95 |
98 |
119 |
138 |
156 |
157 |
158 |
159 |
160 | );
161 | };
162 |
163 | export default Header;
164 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Profile/components/PlatformSettings.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import { Flex, Switch, Text, useColorModeValue } from "@chakra-ui/react";
3 | // Custom components
4 | import Card from "components/Card/Card";
5 | import CardBody from "components/Card/CardBody";
6 | import CardHeader from "components/Card/CardHeader";
7 | import React from "react";
8 |
9 | const PlatformSettings = ({ title, subtitle1, subtitle2 }) => {
10 | // Chakra color mode
11 | const textColor = useColorModeValue("gray.700", "white");
12 | return (
13 |
14 |
15 |
16 | {title}
17 |
18 |
19 |
20 |
21 |
22 | {subtitle1}
23 |
24 |
25 |
26 |
27 | Email me when someone follows me
28 |
29 |
30 |
31 |
32 |
33 | Email me when someone answers on my post
34 |
35 |
36 |
37 |
38 |
39 | Email me when someone mentions me
40 |
41 |
42 |
47 | {subtitle2}
48 |
49 |
50 |
51 |
52 | New launches and projects
53 |
54 |
55 |
56 |
57 |
58 | Monthly product changes
59 |
60 |
61 |
62 |
63 |
64 | Subscribe to newsletter
65 |
66 |
67 |
68 |
69 |
70 | );
71 | };
72 |
73 | export default PlatformSettings;
74 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Profile/components/ProfileInformation.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import { Flex, Icon, Link, Text, useColorModeValue } from "@chakra-ui/react";
3 | // Custom components
4 | import Card from "components/Card/Card";
5 | import CardBody from "components/Card/CardBody";
6 | import CardHeader from "components/Card/CardHeader";
7 | import React from "react";
8 | import { FaFacebook, FaInstagram, FaTwitter } from "react-icons/fa";
9 |
10 | const ProfileInformation = ({
11 | title,
12 | description,
13 | name,
14 | mobile,
15 | email,
16 | location,
17 | }) => {
18 | // Chakra color mode
19 | const textColor = useColorModeValue("gray.700", "white");
20 |
21 | return (
22 |
23 |
24 |
25 | {title}
26 |
27 |
28 |
29 |
30 |
31 | {description}
32 |
33 |
34 |
35 | Full Name:{" "}
36 |
37 |
38 | {name}
39 |
40 |
41 |
42 |
43 | Mobile:{" "}
44 |
45 |
46 | {mobile}
47 |
48 |
49 |
50 |
51 | Email:{" "}
52 |
53 |
54 | {email}
55 |
56 |
57 |
58 |
59 | Location:{" "}
60 |
61 |
62 | {location}
63 |
64 |
65 |
66 |
67 | Social Media:{" "}
68 |
69 |
70 |
76 |
77 |
78 |
84 |
85 |
86 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 | );
100 | };
101 |
102 | export default ProfileInformation;
103 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Profile/components/ProjectCard.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import {
3 | Avatar,
4 | AvatarGroup,
5 | Box,
6 | Button,
7 | Flex,
8 | Image,
9 | Text,
10 | useColorModeValue,
11 | } from "@chakra-ui/react";
12 | import React from "react";
13 |
14 | const ProjectCard = ({ image, name, category, avatars, description }) => {
15 | // Chakra color mode
16 | const textColor = useColorModeValue("gray.700", "white");
17 |
18 | return (
19 |
20 |
21 |
22 |
29 |
30 |
31 |
32 | {name}
33 |
34 |
35 | {category}
36 |
37 |
38 | {description}
39 |
40 |
41 |
50 |
51 | {avatars.map((el, idx) => {
52 | return ;
53 | })}
54 |
55 |
56 |
57 |
58 | );
59 | };
60 |
61 | export default ProjectCard;
62 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Profile/components/Projects.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import {
3 | Button,
4 | Flex,
5 | Grid,
6 | Icon,
7 | Text,
8 | useColorModeValue,
9 | } from "@chakra-ui/react";
10 | // Assets
11 | import avatar2 from "assets/img/avatars/avatar2.png";
12 | import avatar4 from "assets/img/avatars/avatar4.png";
13 | import avatar6 from "assets/img/avatars/avatar6.png";
14 | import imageArchitect1 from "assets/img/ImageArchitect1.png";
15 | import imageArchitect2 from "assets/img/ImageArchitect2.png";
16 | import imageArchitect3 from "assets/img/ImageArchitect3.png";
17 | // Custom components
18 | import Card from "components/Card/Card";
19 | import CardBody from "components/Card/CardBody";
20 | import CardHeader from "components/Card/CardHeader";
21 | import React from "react";
22 | import { FaPlus } from "react-icons/fa";
23 | import ProjectCard from "./ProjectCard";
24 |
25 | const Projects = ({ title, description }) => {
26 | // Chakra color mode
27 | const textColor = useColorModeValue("gray.700", "white");
28 |
29 | return (
30 |
31 |
32 |
33 |
34 | {title}
35 |
36 |
37 | {description}
38 |
39 |
40 |
41 |
42 |
46 |
55 |
64 |
73 |
87 |
88 |
89 |
90 | );
91 | };
92 |
93 | export default Projects;
94 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Profile/index.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import { Flex, Grid, useColorModeValue } from "@chakra-ui/react";
3 | import avatar4 from "assets/img/avatars/avatar4.png";
4 | import ProfileBgImage from "assets/img/ProfileBackground.png";
5 | import React from "react";
6 | import { FaCube, FaPenFancy } from "react-icons/fa";
7 | import { IoDocumentsSharp } from "react-icons/io5";
8 | import Conversations from "./components/Conversations";
9 | import Header from "./components/Header";
10 | import PlatformSettings from "./components/PlatformSettings";
11 | import ProfileInformation from "./components/ProfileInformation";
12 | import Projects from "./components/Projects";
13 |
14 | function Profile() {
15 | // Chakra color mode
16 | const textColor = useColorModeValue("gray.700", "white");
17 | const bgProfile = useColorModeValue(
18 | "hsla(0,0%,100%,.8)",
19 | "linear-gradient(112.83deg, rgba(255, 255, 255, 0.21) 0%, rgba(255, 255, 255, 0) 110.84%)"
20 | );
21 |
22 | return (
23 |
24 | ,
34 | },
35 | {
36 | name: "TEAMS",
37 | icon: ,
38 | },
39 | {
40 | name: "PROJECTS",
41 | icon: ,
42 | },
43 | ]}
44 | />
45 |
46 |
51 |
61 |
62 |
63 |
64 |
65 | );
66 | }
67 |
68 | export default Profile;
69 |
--------------------------------------------------------------------------------
/src/views/Dashboard/RTL/index.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import {
3 | Flex,
4 | Grid,
5 | Image,
6 | SimpleGrid,
7 | useColorModeValue,
8 | } from "@chakra-ui/react";
9 | // assets
10 | import peopleImage from "assets/img/people-image.png";
11 | import logoChakra from "assets/svg/logo-white.svg";
12 | import BarChart from "components/Charts/BarChart";
13 | import LineChart from "components/Charts/LineChart";
14 | // Custom icons
15 | import {
16 | CartIcon,
17 | DocumentIcon,
18 | GlobeIcon,
19 | WalletIcon,
20 | } from "components/Icons/Icons.js";
21 | import React from "react";
22 | import { rtlDashboardTableData, rtlTimelineData } from "variables/general";
23 | import ActiveUsers from "../Dashboard/components/ActiveUsers";
24 | import BuiltByDevelopers from "../Dashboard/components/BuiltByDevelopers";
25 | import MiniStatistics from "../Dashboard/components/MiniStatistics";
26 | import OrdersOverview from "../Dashboard/components/OrdersOverview";
27 | import Projects from "../Dashboard/components/Projects";
28 | import SalesOverview from "../Dashboard/components/SalesOverview";
29 | import WorkWithTheRockets from "../Dashboard/components/WorkWithTheRockets";
30 |
31 | export default function Dashboard() {
32 | // Chakra Color Mode
33 |
34 | const iconBoxInside = useColorModeValue("white", "white");
35 |
36 | return (
37 |
38 |
39 | }
44 | />
45 | }
50 | />
51 | }
56 | />
57 | }
62 | />
63 |
64 |
69 |
81 | }
82 | />
83 |
90 |
91 |
96 | }
100 | />
101 | }
105 | />
106 |
107 |
111 |
117 |
122 |
123 |
124 | );
125 | }
126 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Tables/components/Authors.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import {
3 | Table,
4 | Tbody,
5 | Text,
6 | Th,
7 | Thead,
8 | Tr,
9 | useColorModeValue,
10 | } from "@chakra-ui/react";
11 | // Custom components
12 | import Card from "components/Card/Card.js";
13 | import CardBody from "components/Card/CardBody.js";
14 | import CardHeader from "components/Card/CardHeader.js";
15 | import TablesTableRow from "components/Tables/TablesTableRow";
16 | import React from "react";
17 |
18 | const Authors = ({ title, captions, data }) => {
19 | const textColor = useColorModeValue("gray.700", "white");
20 | return (
21 |
22 |
23 |
24 | {title}
25 |
26 |
27 |
28 |
29 |
30 |
31 | {captions.map((caption, idx) => {
32 | return (
33 |
34 | {caption}
35 | |
36 | );
37 | })}
38 |
39 |
40 |
41 | {data.map((row) => {
42 | return (
43 |
53 | );
54 | })}
55 |
56 |
57 |
58 |
59 | );
60 | };
61 |
62 | export default Authors;
63 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Tables/components/Projects.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import {
3 | Flex,
4 | Table,
5 | Tbody,
6 | Text,
7 | Th,
8 | Thead,
9 | Tr,
10 | useColorModeValue,
11 | } from "@chakra-ui/react";
12 | // Custom components
13 | import Card from "components/Card/Card.js";
14 | import CardBody from "components/Card/CardBody.js";
15 | import CardHeader from "components/Card/CardHeader.js";
16 | import TablesProjectRow from "components/Tables/TablesProjectRow";
17 | import React from "react";
18 |
19 | const Projects = ({ title, captions, data }) => {
20 | const textColor = useColorModeValue("gray.700", "white");
21 | return (
22 |
23 |
24 |
25 |
26 | {title}
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | {captions.map((caption, idx) => {
35 | return (
36 |
37 | {caption}
38 | |
39 | );
40 | })}
41 |
42 |
43 |
44 | {data.map((row) => {
45 | return (
46 |
54 | );
55 | })}
56 |
57 |
58 |
59 |
60 | );
61 | };
62 |
63 | export default Projects;
64 |
--------------------------------------------------------------------------------
/src/views/Dashboard/Tables/index.js:
--------------------------------------------------------------------------------
1 | // Chakra imports
2 | import { Flex } from "@chakra-ui/react";
3 | import React from "react";
4 | import Authors from "./components/Authors";
5 | import Projects from "./components/Projects";
6 | import { tablesTableData, dashboardTableData } from "variables/general";
7 |
8 | function Tables() {
9 | return (
10 |
11 |
16 |
21 |
22 | );
23 | }
24 |
25 | export default Tables;
26 |
--------------------------------------------------------------------------------