├── .gitattributes ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── deployer.json ├── env.local ├── env.sample ├── jsconfig.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── manifest.json └── robots.txt └── src ├── api ├── auth.js └── index.js ├── assets ├── css │ ├── App.css │ ├── Contact.css │ └── MiniCalendar.css └── img │ ├── auth │ ├── auth.png │ └── banner.png │ ├── avatars │ ├── avatar1.png │ ├── avatar10.png │ ├── avatar2.png │ ├── avatar3.png │ ├── avatar4.png │ ├── avatar5.png │ ├── avatar6.png │ ├── avatar7.png │ ├── avatar8.png │ ├── avatar9.png │ └── avatarSimmmple.png │ ├── dashboards │ ├── Debit.png │ ├── balanceImg.png │ ├── elipse-light.png │ ├── fakeGraph.png │ └── usa.png │ ├── layout │ ├── Navbar.png │ └── logoWhite.png │ ├── nfts │ ├── Nft1.png │ ├── Nft2.png │ ├── Nft3.png │ ├── Nft4.png │ ├── Nft5.png │ ├── Nft6.png │ └── NftBanner1.png │ └── profile │ ├── Project1.png │ ├── Project2.png │ └── Project3.png ├── auth-context ├── SidebarContext.js └── auth.context.js ├── components ├── calendar │ └── MiniCalendar.js ├── card │ ├── Card.js │ ├── Mastercard.js │ ├── Member.js │ ├── MiniStatistics.js │ └── NFT.js ├── charts │ ├── BarChart.js │ ├── LineAreaChart.js │ ├── LineChart.js │ └── PieChart.js ├── fields │ ├── InputField.js │ └── SwitchField.js ├── fixedPlugin │ └── FixedPlugin.js ├── footer │ ├── FooterAdmin.js │ └── FooterAuth.js ├── icons │ ├── IconBox.js │ └── Icons.js ├── menu │ ├── ItemContent.js │ ├── MainMenu.js │ └── TransparentMenu.js ├── navbar │ ├── NavbarAdmin.js │ ├── NavbarAuth.js │ ├── NavbarExample.js │ ├── NavbarLinksAdmin.js │ ├── NavbarRTL.js │ └── searchBar │ │ └── SearchBar.js ├── rtlProvider │ └── RtlProvider.js ├── scroll │ └── ScrollToTop.js ├── scrollbar │ └── Scrollbar.js ├── separator │ └── Separator.jsx └── sidebar │ ├── Sidebar.js │ └── components │ ├── Brand.js │ ├── Content.js │ ├── Links.js │ └── SidebarCard.js ├── config └── constant.js ├── contexts └── SidebarContext.js ├── index.js ├── layouts ├── admin │ └── index.js ├── auth │ ├── Default.js │ └── index.js ├── protected.route.js └── rtl │ └── index.js ├── routes.js ├── theme ├── additions │ └── card │ │ └── card.js ├── components │ ├── badge.js │ ├── button.js │ ├── input.js │ ├── link.js │ ├── progress.js │ ├── slider.js │ ├── switch.js │ └── textarea.js ├── foundations │ └── breakpoints.js ├── styles.js └── theme.js ├── variables └── charts.js └── views ├── admin ├── dataTables │ ├── components │ │ ├── CheckTable.js │ │ ├── ColumnsTable.js │ │ ├── ComplexTable.js │ │ └── DevelopmentTable.js │ ├── index.jsx │ └── variables │ │ ├── columnsData.js │ │ ├── tableDataCheck.json │ │ ├── tableDataColumns.json │ │ ├── tableDataComplex.json │ │ └── tableDataDevelopment.json ├── default │ ├── components │ │ ├── CheckTable.js │ │ ├── ComplexTable.js │ │ ├── DailyTraffic.js │ │ ├── PieCard.js │ │ ├── Tasks.js │ │ ├── TotalSpent.js │ │ ├── UserActivity.js │ │ └── WeeklyRevenue.js │ ├── index.jsx │ └── variables │ │ ├── columnsData.js │ │ ├── tableDataCheck.json │ │ └── tableDataComplex.json ├── marketplace │ ├── components │ │ ├── Banner.js │ │ ├── HistoryItem.js │ │ └── TableTopCreators.js │ ├── index.jsx │ └── variables │ │ ├── tableColumnsTopCreators.js │ │ └── tableDataTopCreators.json ├── profile │ ├── components │ │ ├── Banner.js │ │ ├── Dropzone.js │ │ ├── General.js │ │ ├── Information.js │ │ ├── Notifications.js │ │ ├── Project.js │ │ ├── Projects.js │ │ ├── Storage.js │ │ └── Upload.js │ └── index.jsx └── rtl │ ├── components │ ├── CheckTable.js │ ├── ComplexTable.js │ ├── DailyTraffic.js │ ├── PieCard.js │ ├── Tasks.js │ ├── TotalSpent.js │ ├── UserActivity.js │ └── WeeklyRevenue.js │ ├── index.jsx │ └── variables │ ├── columnsData.js │ ├── tableDataCheck.json │ └── tableDataComplex.json └── auth ├── signIn └── index.jsx └── signUp └── index.jsx /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json 3 | yarn.lock 4 | build 5 | 6 | # dependencies 7 | /node_modules 8 | /.pnp 9 | .pnp.js 10 | 11 | # testing 12 | /coverage 13 | 14 | # production 15 | /build 16 | 17 | # misc 18 | .DS_Store 19 | .env.local 20 | .env.development.local 21 | .env.test.local 22 | .env.production.local 23 | 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | .env 29 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [v1.1.0-enh4] 2022-11-13 4 | ### Improvements 5 | 6 | - Added `deployer` file 7 | - Used by AppSeed [Go-LIVE](https://appseed.us/go-live/) service 8 | 9 | ## [v1.1.0-enh3] 2022-11-08 10 | ### Improvements 11 | 12 | - Save Compat matrix in `package.json` 13 | - `build` node 14 | - Yarn, NPM 15 | - NodeJS versions 16 | 17 | ## [1.1.0-enh2] 2022-11-05 18 | ### Improvements 19 | 20 | - Added `env.sample` 21 | - `API_URL` can be specified in `env` (optional) 22 | - data used in `src/config.js` 23 | - Added `compatibility matrix` for Node, yarn & NPM 24 | - Testing tool: [Render API Wrapper](https://github.com/app-generator/deploy-automation-render) 25 | 26 | ## [1.1.0-enh1] 2022-06-17 27 | ### Improvements 28 | 29 | - Added `JWT Authentication` 30 | - Tested with [Node JS API](https://github.com/app-generator/api-server-nodejs) (free version) 31 | 32 | ## [1.1.0] 2022-06-08 33 | 34 | 🐛 Bugs solved: 35 | 36 | - Calendar card - Card border bug on dark mode 37 | - Development Table - Missing content bug 38 | - Solved the warnings regarding stylis-plugin-rtl 39 | - Fixed console warnings 40 | 41 | ## [1.0.1] 2022-04-25 42 | 43 | ### Multiple design bugs on mobile solved 44 | 45 | - Default - "Daily traffic" card - text align problem on mobile - solved. 46 | - Navbar - Icons - align problem with all icons on mobile - solved. 47 | - Profile - "Your storage" card - "More" icon align problem on mobile - solved. 48 | - Profile - "Complete your profile" card - text align problem on mobile - solved. 49 | 50 | ## [1.0.0] 2022-04-18 51 | 52 | ### Original Release 53 | 54 | - Added Chakra UI as base framework 55 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Horizon UI 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /deployer.json: -------------------------------------------------------------------------------- 1 | { 2 | "api-server":"https://api-server-nodejs.appseed.us/api/", 3 | "name":"react-horizon-ui", 4 | "framework": "react", 5 | "type": "static" 6 | 7 | } -------------------------------------------------------------------------------- /env.local: -------------------------------------------------------------------------------- 1 | REACT_APP_BACKEND_SERVER=http://localhost:5000/api/ -------------------------------------------------------------------------------- /env.sample: -------------------------------------------------------------------------------- 1 | REACT_APP_BACKEND_SERVER='https://YOUR_API_URL/'; 2 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src", 4 | "paths": { 5 | "*": ["src/*"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "horizon-ui-chakra", 3 | "version": "1.0.1", 4 | "private": true, 5 | "build": { 6 | "yarn": "v14.0.0,v16.0.0,v18.0.0", 7 | "npm": "v14.0.0,v16.0.0,v18.0.0" 8 | }, 9 | "dependencies": { 10 | "@chakra-ui/icons": "^1.1.5", 11 | "@chakra-ui/react": "1.8.8", 12 | "@chakra-ui/system": "^1.12.1", 13 | "@chakra-ui/theme-tools": "^1.3.6", 14 | "@emotion/cache": "^11.7.1", 15 | "@emotion/react": "^11.4.1", 16 | "@emotion/styled": "^11.3.0", 17 | "@testing-library/jest-dom": "^5.14.1", 18 | "@testing-library/react": "^11.2.7", 19 | "@testing-library/user-event": "^12.8.3", 20 | "apexcharts": "^3.35.2", 21 | "axios": "^0.27.2", 22 | "axois": "^0.0.1-security", 23 | "babel-cli": "^6.26.0", 24 | "babel-preset-es2015": "^6.24.1", 25 | "babel-preset-react": "^6.24.1", 26 | "babel-register": "^6.26.0", 27 | "framer-motion": "^4.1.17", 28 | "react": "17.0.2", 29 | "react-apexcharts": "^1.4.0", 30 | "react-bootstrap-sweetalert": "^5.2.0", 31 | "react-calendar": "^3.7.0", 32 | "react-custom-scrollbars-2": "^4.2.1", 33 | "react-dom": "17.0.2", 34 | "react-dropzone": "^12.0.4", 35 | "react-icons": "^4.3.1", 36 | "react-is": "^18.0.0", 37 | "react-router-dom": "^5.3.0", 38 | "react-scripts": "5.0.0", 39 | "react-table": "^7.7.0", 40 | "stylis": "^4.1.1", 41 | "stylis-plugin-rtl": "2.0.2", 42 | "web-vitals": "^1.1.2" 43 | }, 44 | "scripts": { 45 | "start": "react-scripts start", 46 | "build": "react-scripts build", 47 | "test": "react-scripts test --passWithNoTests", 48 | "eject": "react-scripts eject", 49 | "predeploy": "npm run build", 50 | "deploy": "gh-pages -d build", 51 | "sitemap": "babel-node ./sitemap-builder.js" 52 | }, 53 | "resolutions": { 54 | "react-error-overlay": "6.0.9" 55 | }, 56 | "eslintConfig": { 57 | "extends": [ 58 | "react-app", 59 | "react-app/jest" 60 | ] 61 | }, 62 | "browserslist": { 63 | "production": [ 64 | ">0.2%", 65 | "not dead", 66 | "not op_mini all" 67 | ], 68 | "development": [ 69 | "last 1 chrome version", 70 | "last 1 firefox version", 71 | "last 1 safari version" 72 | ] 73 | }, 74 | "devDependencies": { 75 | "gh-pages": "^3.2.3" 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | Horizon UI Dashboard 31 | 32 | 33 | 34 | 35 | 36 | 37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-Agent: * 2 | Disallow: 3 | Sitemap: https://simmmple.com -------------------------------------------------------------------------------- /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/css/App.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"); 2 | body { 3 | font-family: "DM Sans", sans-serif; 4 | } 5 | 6 | option { 7 | color: black; 8 | } 9 | -------------------------------------------------------------------------------- /src/assets/css/Contact.css: -------------------------------------------------------------------------------- 1 | form { 2 | width: 100%; 3 | } -------------------------------------------------------------------------------- /src/assets/css/MiniCalendar.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"); 2 | /* LIGHT MODE + GENERAL */ 3 | 4 | .react-calendar { 5 | border: unset; 6 | background-color: transparent; 7 | font-family: "DM Sans", sans-serif; 8 | } 9 | .react-calendar__navigation__prev2-button { 10 | display: none; 11 | } 12 | .react-calendar__navigation__next2-button { 13 | display: none; 14 | } 15 | .react-calendar__navigation { 16 | align-items: center; 17 | } 18 | abbr[title] { 19 | border-bottom: none; 20 | -webkit-text-decoration: unset; 21 | text-decoration: unset; 22 | -webkit-text-decoration: unset; 23 | -webkit-text-decoration: unset; 24 | text-decoration: unset !important; 25 | } 26 | .react-calendar__navigation__prev-button { 27 | background-color: #4318ff !important; 28 | border-radius: 10px; 29 | min-width: 34px !important; 30 | height: 34px !important; 31 | color: white; 32 | } 33 | .react-calendar__navigation__next-button { 34 | background-color: #4318ff !important; 35 | border-radius: 10px; 36 | min-width: 34px !important; 37 | width: 34px !important; 38 | height: 34px !important; 39 | color: white; 40 | } 41 | .react-calendar__navigation__label { 42 | font-weight: 700 !important; 43 | font-size: 18px; 44 | } 45 | .react-calendar__navigation__label:hover, 46 | .react-calendar__navigation__label:focus { 47 | background-color: unset !important; 48 | border-radius: 10px; 49 | } 50 | .react-calendar__tile { 51 | font-size: 12px; 52 | display: flex; 53 | align-items: center; 54 | justify-content: center; 55 | padding: 0px !important; 56 | height: 34px !important; 57 | color: #1b2559; 58 | } 59 | .react-calendar__month-view__weekdays { 60 | background-color: #f4f7fe; 61 | border-radius: 10px; 62 | margin-bottom: 6px; 63 | } 64 | .react-calendar__tile--now, 65 | .react-calendar__tile--now:enabled:hover, 66 | .react-calendar__tile--now:enabled:focus { 67 | background-color: #f4f7fe; 68 | border-radius: 10px; 69 | } 70 | .react-calendar__month-view__days__day--neighboringMonth { 71 | color: #b0bbd5; 72 | } 73 | .react-calendar__tile--active, 74 | .react-calendar__tile--active:enabled:hover, 75 | .react-calendar__tile--active:enabled:focus { 76 | background: #4318ff; 77 | border-radius: 10px; 78 | color: white; 79 | } 80 | .react-calendar__tile--range, 81 | .react-calendar__tile--range:enabled:hover, 82 | .react-calendar__tile--range:enabled:focus { 83 | background: #f4f7fe; 84 | color: #4318ff; 85 | border-radius: 0px; 86 | } 87 | .react-calendar__tile--rangeStart, 88 | .react-calendar__tile--rangeStart:enabled:hover, 89 | .react-calendar__tile--rangeStart:enabled:focus { 90 | background: #4318ff; 91 | border-top-left-radius: 10px; 92 | border-bottom-left-radius: 10px; 93 | color: white; 94 | } 95 | .react-calendar__tile--rangeEnd, 96 | .react-calendar__tile--rangeEnd:enabled:hover, 97 | .react-calendar__tile--rangeEnd:enabled:focus { 98 | background: #4318ff; 99 | border-top-right-radius: 10px; 100 | border-bottom-right-radius: 10px; 101 | color: white; 102 | } 103 | 104 | /* DARK MODE */ 105 | 106 | body.chakra-ui-dark .react-calendar { 107 | border-radius: 30px; 108 | } 109 | body.chakra-ui-dark .react-calendar__navigation__prev-button { 110 | background-color: #7551ff !important; 111 | } 112 | body.chakra-ui-dark .react-calendar__navigation__next-button { 113 | background-color: #7551ff !important; 114 | color: white; 115 | } 116 | body.chakra-ui-dark .react-calendar__tile { 117 | color: white; 118 | } 119 | body.chakra-ui-dark .react-calendar__tile:enabled:hover, 120 | body.chakra-ui-dark .react-calendar__tile:enabled:focus { 121 | background-color: rgba(255, 255, 255, 0.1); 122 | } 123 | body.chakra-ui-dark .react-calendar__month-view__weekdays { 124 | background-color: rgba(255, 255, 255, 0.1); 125 | } 126 | body.chakra-ui-dark .react-calendar__tile--now, 127 | body.chakra-ui-dark .react-calendar__tile--now:enabled:hover, 128 | body.chakra-ui-dark .react-calendar__tile--now:enabled:focus { 129 | background-color: rgba(255, 255, 255, 0.1); 130 | } 131 | body.chakra-ui-dark .react-calendar__month-view__days__day--neighboringMonth { 132 | color: #b0bbd5; 133 | } 134 | body.chakra-ui-dark .react-calendar__tile--active, 135 | body.chakra-ui-dark .react-calendar__tile--active:enabled:hover, 136 | body.chakra-ui-dark .react-calendar__tile--active:enabled:focus { 137 | background: #7551ff; 138 | color: white; 139 | } 140 | body.chakra-ui-dark .react-calendar__tile--range, 141 | body.chakra-ui-dark .react-calendar__tile--range:enabled:hover, 142 | body.chakra-ui-dark .react-calendar__tile--range:enabled:focus { 143 | background: rgba(255, 255, 255, 0.1); 144 | color: #7551ff; 145 | } 146 | body.chakra-ui-dark .react-calendar__tile--rangeStart, 147 | body.chakra-ui-dark .react-calendar__tile--rangeStart:enabled:hover, 148 | body.chakra-ui-dark .react-calendar__tile--rangeStart:enabled:focus { 149 | background: #7551ff; 150 | color: white; 151 | } 152 | body.chakra-ui-dark .react-calendar__tile--rangeEnd, 153 | body.chakra-ui-dark .react-calendar__tile--rangeEnd:enabled:hover, 154 | body.chakra-ui-dark .react-calendar__tile--rangeEnd:enabled:focus { 155 | background: #7551ff; 156 | color: white; 157 | } 158 | -------------------------------------------------------------------------------- /src/assets/img/auth/auth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/auth/auth.png -------------------------------------------------------------------------------- /src/assets/img/auth/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/auth/banner.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/avatars/avatar1.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/avatars/avatar10.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/avatars/avatar2.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/avatars/avatar3.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/avatars/avatar4.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/avatars/avatar5.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/avatars/avatar6.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/avatars/avatar7.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/avatars/avatar8.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatar9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/avatars/avatar9.png -------------------------------------------------------------------------------- /src/assets/img/avatars/avatarSimmmple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/avatars/avatarSimmmple.png -------------------------------------------------------------------------------- /src/assets/img/dashboards/Debit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/dashboards/Debit.png -------------------------------------------------------------------------------- /src/assets/img/dashboards/balanceImg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/dashboards/balanceImg.png -------------------------------------------------------------------------------- /src/assets/img/dashboards/elipse-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/dashboards/elipse-light.png -------------------------------------------------------------------------------- /src/assets/img/dashboards/fakeGraph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/dashboards/fakeGraph.png -------------------------------------------------------------------------------- /src/assets/img/dashboards/usa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/dashboards/usa.png -------------------------------------------------------------------------------- /src/assets/img/layout/Navbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/layout/Navbar.png -------------------------------------------------------------------------------- /src/assets/img/layout/logoWhite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/layout/logoWhite.png -------------------------------------------------------------------------------- /src/assets/img/nfts/Nft1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/nfts/Nft1.png -------------------------------------------------------------------------------- /src/assets/img/nfts/Nft2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/nfts/Nft2.png -------------------------------------------------------------------------------- /src/assets/img/nfts/Nft3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/nfts/Nft3.png -------------------------------------------------------------------------------- /src/assets/img/nfts/Nft4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/nfts/Nft4.png -------------------------------------------------------------------------------- /src/assets/img/nfts/Nft5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/nfts/Nft5.png -------------------------------------------------------------------------------- /src/assets/img/nfts/Nft6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/nfts/Nft6.png -------------------------------------------------------------------------------- /src/assets/img/nfts/NftBanner1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/nfts/NftBanner1.png -------------------------------------------------------------------------------- /src/assets/img/profile/Project1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/profile/Project1.png -------------------------------------------------------------------------------- /src/assets/img/profile/Project2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/profile/Project2.png -------------------------------------------------------------------------------- /src/assets/img/profile/Project3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/react-horizon-nodejs/c0726c4f4054a6041d3945290de46841bf9227c1/src/assets/img/profile/Project3.png -------------------------------------------------------------------------------- /src/auth-context/SidebarContext.js: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | export const SidebarContext = createContext(); 4 | -------------------------------------------------------------------------------- /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/calendar/MiniCalendar.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Calendar from "react-calendar"; 3 | import "react-calendar/dist/Calendar.css"; 4 | import "assets/css/MiniCalendar.css"; 5 | import { Text, Icon } from "@chakra-ui/react"; 6 | // Chakra imports 7 | import { MdChevronLeft, MdChevronRight } from "react-icons/md"; 8 | // Custom components 9 | import Card from "components/card/Card.js"; 10 | 11 | export default function MiniCalendar(props) { 12 | const { selectRange, ...rest } = props; 13 | const [value, onChange] = useState(new Date()); 14 | return ( 15 | 23 | } 29 | prevLabel={} 30 | nextLabel={} 31 | /> 32 | 33 | ); 34 | } 35 | -------------------------------------------------------------------------------- /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 | 6 | return ( 7 | 8 | {children} 9 | 10 | ); 11 | } 12 | 13 | export default Card; 14 | -------------------------------------------------------------------------------- /src/components/card/Mastercard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // Chakra imports 4 | import { Flex, Box, Icon, Text, Spacer } from "@chakra-ui/react"; 5 | // Custom components 6 | import Card from "components/card/Card.js"; 7 | 8 | // Assets 9 | import bgMastercard from "assets/img/dashboards/Debit.png"; 10 | import { RiMastercardFill } from "react-icons/ri"; 11 | 12 | export default function Banner(props) { 13 | const { exp, cvv, number, ...rest } = props; 14 | 15 | // Chakra Color Mode 16 | return ( 17 | 27 | 28 | 29 | 30 | Glassy. 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | {number} 39 | 40 | 41 | 42 | 43 | VALID THRU 44 | 45 | {exp} 46 | 47 | 48 | 49 | CVV 50 | 51 | {cvv} 52 | 53 | 54 | 55 | 56 | 57 | 58 | ); 59 | } 60 | -------------------------------------------------------------------------------- /src/components/card/Member.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import React from "react"; 3 | import { Avatar, Flex, useColorModeValue, Icon, Text } from "@chakra-ui/react"; 4 | // Custom components 5 | import Card from "components/card/Card.js"; 6 | import TransparentMenu from "components/menu/TransparentMenu"; 7 | // Custom icons 8 | import { IoEllipsisVertical } from "react-icons/io5"; 9 | 10 | export default function Default(props) { 11 | const { avatar, name, job, ...rest } = props; 12 | const textColor = useColorModeValue("secondaryGray.900", "white"); 13 | const bg = useColorModeValue("white", "#1B254B"); 14 | const shadow = useColorModeValue( 15 | "0px 18px 40px rgba(112, 144, 176, 0.12)", 16 | "none" 17 | ); 18 | 19 | return ( 20 | 21 | 22 | 23 | 29 | 30 | 34 | {name} 35 | 36 | 41 | {job} 42 | 43 | 44 | 45 | 46 | 51 | } 52 | /> 53 | 54 | 55 | ); 56 | } 57 | -------------------------------------------------------------------------------- /src/components/card/MiniStatistics.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | // Chakra imports 3 | import { 4 | Flex, 5 | Stat, 6 | StatLabel, 7 | StatNumber, 8 | useColorModeValue, 9 | Text, 10 | } from "@chakra-ui/react"; 11 | // Custom components 12 | import Card from "components/card/Card.js"; 13 | // Custom icons 14 | import React from "react"; 15 | 16 | export default function Default(props) { 17 | const { startContent, endContent, name, growth, value } = props; 18 | const textColor = useColorModeValue("secondaryGray.900", "white"); 19 | const textColorSecondary = "secondaryGray.600"; 20 | 21 | return ( 22 | 23 | 28 | {startContent} 29 | 30 | 31 | 37 | {name} 38 | 39 | 44 | {value} 45 | 46 | {growth ? ( 47 | 48 | 49 | {growth} 50 | 51 | 52 | since last month 53 | 54 | 55 | ) : null} 56 | 57 | 58 | {endContent} 59 | 60 | 61 | 62 | ); 63 | } 64 | -------------------------------------------------------------------------------- /src/components/card/NFT.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { 3 | AvatarGroup, 4 | Avatar, 5 | Box, 6 | Button, 7 | Flex, 8 | Icon, 9 | Image, 10 | Link, 11 | Text, 12 | useColorModeValue, 13 | } from "@chakra-ui/react"; 14 | // Custom components 15 | import Card from "components/card/Card.js"; 16 | // Assets 17 | import React, { useState } from "react"; 18 | import { IoHeart, IoHeartOutline } from "react-icons/io5"; 19 | 20 | export default function NFT(props) { 21 | const { image, name, author, bidders, download, currentbid } = props; 22 | const [like, setLike] = useState(false); 23 | const textColor = useColorModeValue("navy.700", "white"); 24 | const textColorBid = useColorModeValue("brand.500", "white"); 25 | return ( 26 | 27 | 28 | 29 | 35 | 58 | 59 | 60 | 70 | 71 | 84 | {name} 85 | 86 | 93 | {author} 94 | 95 | 96 | 108 | {bidders.map((avt, key) => ( 109 | 110 | ))} 111 | 112 | 113 | 124 | 125 | Current Bid: {currentbid} 126 | 127 | 136 | 146 | 147 | 148 | 149 | 150 | 151 | ); 152 | } 153 | -------------------------------------------------------------------------------- /src/components/charts/BarChart.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Chart from "react-apexcharts"; 3 | 4 | class ColumnChart extends Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { 8 | chartData: [], 9 | chartOptions: {}, 10 | }; 11 | } 12 | 13 | componentDidMount() { 14 | this.setState({ 15 | chartData: this.props.chartData, 16 | chartOptions: this.props.chartOptions, 17 | }); 18 | } 19 | 20 | render() { 21 | return ( 22 | 29 | ); 30 | } 31 | } 32 | 33 | export default ColumnChart; 34 | -------------------------------------------------------------------------------- /src/components/charts/LineAreaChart.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactApexChart from "react-apexcharts"; 3 | 4 | class LineChart extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | 8 | this.state = { 9 | chartData: [], 10 | chartOptions: {}, 11 | }; 12 | } 13 | 14 | componentDidMount() { 15 | this.setState({ 16 | chartData: this.props.chartData, 17 | chartOptions: this.props.chartOptions, 18 | }); 19 | } 20 | 21 | render() { 22 | return ( 23 | 30 | ); 31 | } 32 | } 33 | 34 | export default LineChart; 35 | -------------------------------------------------------------------------------- /src/components/charts/LineChart.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactApexChart from "react-apexcharts"; 3 | 4 | class LineChart extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | 8 | this.state = { 9 | chartData: [], 10 | chartOptions: {}, 11 | }; 12 | } 13 | 14 | componentDidMount() { 15 | this.setState({ 16 | chartData: this.props.chartData, 17 | chartOptions: this.props.chartOptions, 18 | }); 19 | } 20 | 21 | render() { 22 | return ( 23 | 30 | ); 31 | } 32 | } 33 | 34 | export default LineChart; 35 | -------------------------------------------------------------------------------- /src/components/charts/PieChart.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactApexChart from "react-apexcharts"; 3 | 4 | class PieChart extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | 8 | this.state = { 9 | chartData: [], 10 | chartOptions: {}, 11 | }; 12 | } 13 | 14 | componentDidMount() { 15 | this.setState({ 16 | chartData: this.props.chartData, 17 | chartOptions: this.props.chartOptions, 18 | }); 19 | } 20 | 21 | render() { 22 | return ( 23 | 30 | ); 31 | } 32 | } 33 | 34 | export default PieChart; 35 | -------------------------------------------------------------------------------- /src/components/fields/InputField.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { 3 | Flex, 4 | FormLabel, 5 | Input, 6 | Text, 7 | useColorModeValue, 8 | } from "@chakra-ui/react"; 9 | // Custom components 10 | import React from "react"; 11 | 12 | export default function Default(props) { 13 | const { id, label, extra, placeholder, type, mb, ...rest } = props; 14 | // Chakra Color Mode 15 | const textColorPrimary = useColorModeValue("secondaryGray.900", "white"); 16 | 17 | return ( 18 | 19 | 27 | {label} 28 | 29 | {extra} 30 | 31 | 32 | 43 | 44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /src/components/fields/SwitchField.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { 3 | Box, 4 | Flex, 5 | FormLabel, 6 | Switch, 7 | Text, 8 | useColorModeValue, 9 | } from "@chakra-ui/react"; 10 | // Custom components 11 | import React from "react"; 12 | 13 | export default function Default(props) { 14 | const { 15 | id, 16 | label, 17 | isChecked, 18 | onChange, 19 | desc, 20 | textWidth, 21 | reversed, 22 | fontSize, 23 | ...rest 24 | } = props; 25 | const textColorPrimary = useColorModeValue("secondaryGray.900", "white"); 26 | return ( 27 | 28 | {reversed ? ( 29 | 30 | {isChecked && onChange ? ( 31 | 39 | ) : ( 40 | 46 | )} 47 | 54 | 58 | {label} 59 | 60 | 63 | {desc} 64 | 65 | 66 | 67 | ) : ( 68 | 69 | 74 | 78 | {label} 79 | 80 | 83 | {desc} 84 | 85 | 86 | {isChecked && onChange ? ( 87 | 95 | ) : ( 96 | 102 | )} 103 | 104 | )} 105 | 106 | ); 107 | } 108 | -------------------------------------------------------------------------------- /src/components/fixedPlugin/FixedPlugin.js: -------------------------------------------------------------------------------- 1 | // Chakra Imports 2 | import { Button, Icon, useColorMode } from "@chakra-ui/react"; 3 | // Custom Icons 4 | import { IoMdMoon, IoMdSunny } from "react-icons/io"; 5 | import React from "react"; 6 | 7 | export default function FixedPlugin(props) { 8 | const { ...rest } = props; 9 | const { colorMode, toggleColorMode } = useColorMode(); 10 | let bgButton = "linear-gradient(135deg, #868CFF 0%, #4318FF 100%)"; 11 | 12 | return ( 13 | 39 | ); 40 | } 41 | -------------------------------------------------------------------------------- /src/components/footer/FooterAdmin.js: -------------------------------------------------------------------------------- 1 | /*eslint-disable*/ 2 | import React from "react"; 3 | import { 4 | Flex, 5 | Link, 6 | List, 7 | ListItem, 8 | Text, 9 | Button, 10 | useColorMode, 11 | useColorModeValue, 12 | } from "@chakra-ui/react"; 13 | 14 | export default function Footer() { 15 | const textColor = useColorModeValue("gray.400", "white"); 16 | const { toggleColorMode } = useColorMode(); 17 | return ( 18 | 31 | 38 | {" "} 39 | © {1900 + new Date().getYear()} 40 | 41 | 46 | Simmmple 47 | 48 | - Coded by 49 | 54 | AppSeed 55 | 56 | 57 | 58 | 59 | 64 | 69 | Source Code 70 | 71 | 72 | 77 | 82 | Support 83 | 84 | 85 | 86 | 87 | ); 88 | } 89 | -------------------------------------------------------------------------------- /src/components/footer/FooterAuth.js: -------------------------------------------------------------------------------- 1 | /*eslint-disable*/ 2 | import React from "react"; 3 | import { 4 | Flex, 5 | Link, 6 | List, 7 | ListItem, 8 | Text, 9 | useColorModeValue, 10 | } from "@chakra-ui/react"; 11 | 12 | export default function Footer() { 13 | let textColor = useColorModeValue("gray.400", "white"); 14 | let linkColor = useColorModeValue({ base: "gray.400", lg: "white" }, "white"); 15 | return ( 16 | 29 | 36 | {" "} 37 | © {1900 + new Date().getYear()} 38 | 39 | 45 | Simmmple! 46 | 47 | - Coded by 48 | 53 | AppSeed 54 | 55 | 56 | 57 | 58 | 63 | 68 | Source Code 69 | 70 | 71 | 76 | 80 | Support 81 | 82 | 83 | 88 | 92 | Simmmple 93 | 94 | 95 | 96 | 100 | AppSeed 101 | 102 | 103 | 104 | 105 | ); 106 | } 107 | -------------------------------------------------------------------------------- /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 { icon, ...rest } = props; 6 | 7 | return ( 8 | 13 | {icon} 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /src/components/menu/ItemContent.js: -------------------------------------------------------------------------------- 1 | // chakra imports 2 | import { Icon, Flex, Text, useColorModeValue } from "@chakra-ui/react"; 3 | import { MdUpgrade } from "react-icons/md"; 4 | import React from "react"; 5 | 6 | export function ItemContent(props) { 7 | const textColor = useColorModeValue("navy.700", "white"); 8 | return ( 9 | <> 10 | 20 | 21 | 22 | 23 | 28 | New Update: {props.info} 29 | 30 | 31 | 35 | A new update for your downloaded item is available! 36 | 37 | 38 | 39 | 40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /src/components/menu/MainMenu.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // Chakra imports 4 | import { 5 | Icon, 6 | Flex, 7 | Text, 8 | Menu, 9 | MenuButton, 10 | MenuItem, 11 | MenuList, 12 | useDisclosure, 13 | useColorModeValue, 14 | } from "@chakra-ui/react"; 15 | // Assets 16 | import { 17 | MdOutlineMoreHoriz, 18 | MdOutlinePerson, 19 | MdOutlineCardTravel, 20 | MdOutlineLightbulb, 21 | MdOutlineSettings, 22 | } from "react-icons/md"; 23 | 24 | export default function Banner(props) { 25 | const { ...rest } = props; 26 | 27 | const textColor = useColorModeValue("secondaryGray.500", "white"); 28 | const textHover = useColorModeValue( 29 | { color: "secondaryGray.900", bg: "unset" }, 30 | { color: "secondaryGray.500", bg: "unset" } 31 | ); 32 | const iconColor = useColorModeValue("brand.500", "white"); 33 | const bgList = useColorModeValue("white", "whiteAlpha.100"); 34 | const bgShadow = useColorModeValue( 35 | "14px 17px 40px 4px rgba(112, 144, 176, 0.08)", 36 | "unset" 37 | ); 38 | const bgButton = useColorModeValue("secondaryGray.300", "whiteAlpha.100"); 39 | const bgHover = useColorModeValue( 40 | { bg: "secondaryGray.400" }, 41 | { bg: "whiteAlpha.50" } 42 | ); 43 | const bgFocus = useColorModeValue( 44 | { bg: "secondaryGray.300" }, 45 | { bg: "whiteAlpha.100" } 46 | ); 47 | 48 | // Ellipsis modals 49 | const { 50 | isOpen: isOpen1, 51 | onOpen: onOpen1, 52 | onClose: onClose1, 53 | } = useDisclosure(); 54 | 55 | return ( 56 | 57 | 70 | 71 | 72 | 82 | 95 | 96 | 97 | 98 | Panel 1 99 | 100 | 101 | 102 | 115 | 116 | 117 | 118 | Panel 2 119 | 120 | 121 | 122 | 135 | 136 | 137 | 138 | Panel 3 139 | 140 | 141 | 142 | 154 | 155 | 156 | 157 | Panel 4 158 | 159 | 160 | 161 | 162 | 163 | ); 164 | } 165 | -------------------------------------------------------------------------------- /src/components/menu/TransparentMenu.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // Chakra imports 4 | import { 5 | Menu, 6 | MenuButton, 7 | MenuItem, 8 | MenuList, 9 | useDisclosure, 10 | useColorModeValue, 11 | Flex, 12 | Icon, 13 | Text, 14 | } from "@chakra-ui/react"; 15 | // Assets 16 | import { 17 | MdOutlinePerson, 18 | MdOutlineCardTravel, 19 | MdOutlineLightbulb, 20 | MdOutlineSettings, 21 | } from "react-icons/md"; 22 | export default function Banner(props) { 23 | const { icon, ...rest } = props; 24 | 25 | // Ellipsis modals 26 | const { 27 | isOpen: isOpen1, 28 | onOpen: onOpen1, 29 | onClose: onClose1, 30 | } = useDisclosure(); 31 | 32 | // Chakra color mode 33 | 34 | const textColor = useColorModeValue("secondaryGray.500", "white"); 35 | const textHover = useColorModeValue( 36 | { color: "secondaryGray.900", bg: "unset" }, 37 | { color: "secondaryGray.500", bg: "unset" } 38 | ); 39 | const bgList = useColorModeValue("white", "whiteAlpha.100"); 40 | const bgShadow = useColorModeValue( 41 | "14px 17px 40px 4px rgba(112, 144, 176, 0.08)", 42 | "unset" 43 | ); 44 | 45 | return ( 46 | 47 | 48 | {icon} 49 | 50 | 60 | 73 | 74 | 75 | 76 | Panel 1 77 | 78 | 79 | 80 | 93 | 94 | 95 | 96 | Panel 2 97 | 98 | 99 | 100 | 113 | 114 | 115 | 116 | Panel 3 117 | 118 | 119 | 120 | 132 | 133 | 134 | 135 | Panel 4 136 | 137 | 138 | 139 | 140 | 141 | ); 142 | } 143 | -------------------------------------------------------------------------------- /src/components/navbar/NavbarAdmin.js: -------------------------------------------------------------------------------- 1 | // Chakra Imports 2 | import { 3 | Box, 4 | Breadcrumb, 5 | BreadcrumbItem, 6 | BreadcrumbLink, 7 | Flex, 8 | Link, 9 | Text, 10 | useColorModeValue, 11 | } from "@chakra-ui/react"; 12 | import PropTypes from "prop-types"; 13 | import React, { useState, useEffect } from "react"; 14 | import AdminNavbarLinks from "components/navbar/NavbarLinksAdmin"; 15 | 16 | export default function AdminNavbar(props) { 17 | const [scrolled, setScrolled] = useState(false); 18 | 19 | useEffect(() => { 20 | window.addEventListener("scroll", changeNavbar); 21 | 22 | return () => { 23 | window.removeEventListener("scroll", changeNavbar); 24 | }; 25 | }); 26 | 27 | const { secondary, message, brandText } = props; 28 | 29 | // Here are all the props that may change depending on navbar's type or state.(secondary, variant, scrolled) 30 | let mainText = useColorModeValue("navy.700", "white"); 31 | let secondaryText = useColorModeValue("gray.700", "white"); 32 | let navbarPosition = "fixed"; 33 | let navbarFilter = "none"; 34 | let navbarBackdrop = "blur(20px)"; 35 | let navbarShadow = "none"; 36 | let navbarBg = useColorModeValue( 37 | "rgba(244, 247, 254, 0.2)", 38 | "rgba(11,20,55,0.5)" 39 | ); 40 | let navbarBorder = "transparent"; 41 | let secondaryMargin = "0px"; 42 | let paddingX = "15px"; 43 | let gap = "0px"; 44 | const changeNavbar = () => { 45 | if (window.scrollY > 1) { 46 | setScrolled(true); 47 | } else { 48 | setScrolled(false); 49 | } 50 | }; 51 | 52 | return ( 53 | 94 | 102 | 103 | 104 | 105 | 106 | Pages 107 | 108 | 109 | 110 | 111 | 112 | {brandText} 113 | 114 | 115 | 116 | {/* Here we create navbar brand, based on route name */} 117 | 133 | {brandText} 134 | 135 | 136 | 137 | 144 | 145 | 146 | {secondary ? {message} : null} 147 | 148 | ); 149 | } 150 | 151 | AdminNavbar.propTypes = { 152 | brandText: PropTypes.string, 153 | variant: PropTypes.string, 154 | secondary: PropTypes.bool, 155 | fixed: PropTypes.bool, 156 | onOpen: PropTypes.func, 157 | }; 158 | -------------------------------------------------------------------------------- /src/components/navbar/NavbarRTL.js: -------------------------------------------------------------------------------- 1 | // Chakra Imports 2 | import { 3 | Box, 4 | Breadcrumb, 5 | BreadcrumbItem, 6 | BreadcrumbLink, 7 | Flex, 8 | Link, 9 | Text, 10 | useColorModeValue, 11 | } from "@chakra-ui/react"; 12 | import PropTypes from "prop-types"; 13 | import React, { useState, useEffect } from "react"; 14 | import AdminNavbarLinks from "components/navbar/NavbarLinksAdmin"; 15 | 16 | export default function AdminNavbar(props) { 17 | const [scrolled, setScrolled] = useState(false); 18 | 19 | useEffect(() => { 20 | window.addEventListener("scroll", changeNavbar); 21 | 22 | return () => { 23 | window.removeEventListener("scroll", changeNavbar); 24 | }; 25 | }); 26 | 27 | const { secondary, message, brandText } = props; 28 | 29 | // Here are all the props that may change depending on navbar's type or state.(secondary, variant, scrolled) 30 | let mainText = useColorModeValue("navy.700", "white"); 31 | let secondaryText = useColorModeValue("gray.700", "white"); 32 | let navbarPosition = "fixed"; 33 | let navbarFilter = "none"; 34 | let navbarBackdrop = "blur(20px)"; 35 | let navbarShadow = "none"; 36 | let navbarBg = useColorModeValue( 37 | "rgba(244, 247, 254, 0.2)", 38 | "rgba(11,20,55,0.5)" 39 | ); 40 | let navbarBorder = "transparent"; 41 | let secondaryMargin = "0px"; 42 | let paddingX = "15px"; 43 | let gap = "0px"; 44 | const changeNavbar = () => { 45 | if (window.scrollY > 1) { 46 | setScrolled(true); 47 | } else { 48 | setScrolled(false); 49 | } 50 | }; 51 | 52 | return ( 53 | 94 | 102 | 103 | 104 | 105 | 106 | Pages 107 | 108 | 109 | 110 | 111 | 112 | {brandText} 113 | 114 | 115 | 116 | {/* Here we create navbar brand, based on route name */} 117 | 133 | {brandText} 134 | 135 | 136 | 137 | 144 | 145 | 146 | {secondary ? {message} : null} 147 | 148 | ); 149 | } 150 | 151 | AdminNavbar.propTypes = { 152 | brandText: PropTypes.string, 153 | variant: PropTypes.string, 154 | secondary: PropTypes.bool, 155 | fixed: PropTypes.bool, 156 | onOpen: PropTypes.func, 157 | }; 158 | -------------------------------------------------------------------------------- /src/components/navbar/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, background, children, placeholder, borderRadius, ...rest } = 13 | props; 14 | // Chakra Color Mode 15 | const searchIconColor = useColorModeValue("gray.700", "white"); 16 | const inputBg = useColorModeValue("secondaryGray.300", "navy.900"); 17 | const inputText = useColorModeValue("gray.700", "gray.100"); 18 | return ( 19 | 20 | 36 | }> 37 | } 38 | /> 39 | 49 | 50 | ); 51 | } 52 | -------------------------------------------------------------------------------- /src/components/rtlProvider/RtlProvider.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import { CacheProvider } from "@emotion/react"; 3 | import createCache from "@emotion/cache"; 4 | import rtl from "stylis-plugin-rtl"; 5 | // NB: A unique `key` is important for it to work! 6 | const options = { 7 | rtl: { key: "css-ar", stylisPlugins: [rtl] }, 8 | ltr: { key: "css-en" }, 9 | }; 10 | export function RtlProvider({ children }) { 11 | const dir = document.documentElement.dir == "ar" ? "rtl" : "ltr"; 12 | const cache = createCache(options[dir]); 13 | return ; 14 | } 15 | -------------------------------------------------------------------------------- /src/components/scroll/ScrollToTop.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, Fragment } from 'react'; 2 | import { withRouter } from 'react-router-dom'; 3 | 4 | function ScrollToTop({ history, children }) { 5 | useEffect(() => { 6 | if (!window.location.href.includes('/templates')) { 7 | 8 | const unlisten = history.listen(() => { 9 | window.scrollTo(0, 0); 10 | }); 11 | return () => { 12 | unlisten(); 13 | } 14 | } 15 | }); 16 | 17 | 18 | return {children}; 19 | } 20 | 21 | export default withRouter(ScrollToTop); -------------------------------------------------------------------------------- /src/components/scrollbar/Scrollbar.js: -------------------------------------------------------------------------------- 1 | import { Box } from "@chakra-ui/react"; 2 | 3 | import React from "react"; 4 | 5 | export const renderTrack = ({ style, ...props }) => { 6 | const trackStyle = { 7 | position: "absolute", 8 | maxWidth: "100%", 9 | width: 6, 10 | transition: "opacity 200ms ease 0s", 11 | opacity: 0, 12 | background: "transparent", 13 | bottom: 2, 14 | top: 2, 15 | borderRadius: 3, 16 | right: 0, 17 | }; 18 | return
; 19 | }; 20 | export const renderThumb = ({ style, ...props }) => { 21 | const thumbStyle = { 22 | borderRadius: 15, 23 | background: "rgba(222, 222, 222, .1)", 24 | }; 25 | return
; 26 | }; 27 | export const renderView = ({ style, ...props }) => { 28 | const viewStyle = { 29 | marginBottom: -22, 30 | }; 31 | return ( 32 | 37 | ); 38 | }; -------------------------------------------------------------------------------- /src/components/separator/Separator.jsx: -------------------------------------------------------------------------------- 1 | import { Flex } from "@chakra-ui/react"; 2 | import React from "react"; 3 | 4 | const HSeparator = (props) => { 5 | const { variant, children, ...rest } = props; 6 | return ; 7 | }; 8 | 9 | const VSeparator = (props) => { 10 | const { variant, children, ...rest } = props; 11 | return ; 12 | }; 13 | 14 | export { HSeparator, VSeparator }; 15 | -------------------------------------------------------------------------------- /src/components/sidebar/Sidebar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // chakra imports 4 | import { 5 | Box, 6 | Flex, 7 | Drawer, 8 | DrawerBody, 9 | Icon, 10 | useColorModeValue, 11 | DrawerOverlay, 12 | useDisclosure, 13 | DrawerContent, 14 | DrawerCloseButton, 15 | } from "@chakra-ui/react"; 16 | import Content from "components/sidebar/components/Content"; 17 | import { 18 | renderThumb, 19 | renderTrack, 20 | renderView, 21 | } from "components/scrollbar/Scrollbar"; 22 | import { Scrollbars } from "react-custom-scrollbars-2"; 23 | import PropTypes from "prop-types"; 24 | 25 | // Assets 26 | import { IoMenuOutline } from "react-icons/io5"; 27 | 28 | function Sidebar(props) { 29 | const { routes } = props; 30 | 31 | let variantChange = "0.2s linear"; 32 | let shadow = useColorModeValue( 33 | "14px 17px 40px 4px rgba(112, 144, 176, 0.08)", 34 | "unset" 35 | ); 36 | // Chakra Color Mode 37 | let sidebarBg = useColorModeValue("white", "navy.800"); 38 | let sidebarMargins = "0px"; 39 | 40 | // SIDEBAR 41 | return ( 42 | 43 | 52 | 57 | 58 | 59 | 60 | 61 | ); 62 | } 63 | 64 | // FUNCTIONS 65 | export function SidebarResponsive(props) { 66 | let sidebarBackgroundColor = useColorModeValue("white", "navy.800"); 67 | let menuColor = useColorModeValue("gray.400", "white"); 68 | // // SIDEBAR 69 | const { isOpen, onOpen, onClose } = useDisclosure(); 70 | const btnRef = React.useRef(); 71 | 72 | const { routes } = props; 73 | // let isWindows = navigator.platform.startsWith("Win"); 74 | // BRAND 75 | 76 | return ( 77 | 78 | 79 | 88 | 89 | 94 | 95 | 96 | 102 | 103 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | ); 115 | } 116 | // PROPS 117 | 118 | Sidebar.propTypes = { 119 | logoText: PropTypes.string, 120 | routes: PropTypes.arrayOf(PropTypes.object), 121 | variant: PropTypes.string, 122 | }; 123 | 124 | export default Sidebar; 125 | -------------------------------------------------------------------------------- /src/components/sidebar/components/Brand.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // Chakra imports 4 | import { Flex, useColorModeValue } from "@chakra-ui/react"; 5 | 6 | // Custom components 7 | import { HorizonLogo } from "components/icons/Icons"; 8 | import { HSeparator } from "components/separator/Separator"; 9 | 10 | export function SidebarBrand() { 11 | // Chakra color mode 12 | let logoColor = useColorModeValue("navy.700", "white"); 13 | 14 | return ( 15 | 16 | 17 | 18 | 19 | ); 20 | } 21 | 22 | export default SidebarBrand; 23 | -------------------------------------------------------------------------------- /src/components/sidebar/components/Content.js: -------------------------------------------------------------------------------- 1 | // chakra imports 2 | import { Box, Flex, Stack } from "@chakra-ui/react"; 3 | // Custom components 4 | import Brand from "components/sidebar/components/Brand"; 5 | import Links from "components/sidebar/components/Links"; 6 | import SidebarCard from "components/sidebar/components/SidebarCard"; 7 | import React from "react"; 8 | 9 | // FUNCTIONS 10 | 11 | function SidebarContent(props) { 12 | const { routes } = props; 13 | // SIDEBAR 14 | return ( 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 29 | 30 | 31 | 32 | ); 33 | } 34 | 35 | export default SidebarContent; 36 | -------------------------------------------------------------------------------- /src/components/sidebar/components/SidebarCard.js: -------------------------------------------------------------------------------- 1 | import { 2 | Button, 3 | Flex, 4 | Image, 5 | Link, 6 | Text, 7 | useColorModeValue, 8 | } from "@chakra-ui/react"; 9 | import logoWhite from "assets/img/layout/logoWhite.png"; 10 | import React from "react"; 11 | 12 | export default function SidebarDocs() { 13 | const bgColor = "linear-gradient(135deg, #868CFF 0%, #4318FF 100%)"; 14 | const borderColor = useColorModeValue("white", "navy.800"); 15 | 16 | return ( 17 | 25 | 39 | 40 | 41 | 48 | 56 | Horizon React 57 | 58 | 64 | Open-Source React App styled with Chakra UI. 65 | 66 | 67 | 68 | 80 | 81 | 82 | ); 83 | } 84 | -------------------------------------------------------------------------------- /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/api/"; 6 | } 7 | 8 | export const API_SERVER = BACKEND_SERVER; -------------------------------------------------------------------------------- /src/contexts/SidebarContext.js: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | export const SidebarContext = createContext(); 4 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "assets/css/App.css"; 4 | import { HashRouter, Route, Switch, Redirect } from "react-router-dom"; 5 | import AuthLayout from "layouts/auth"; 6 | import AdminLayout from "layouts/admin"; 7 | import RTLLayout from "layouts/rtl"; 8 | import { ChakraProvider } from "@chakra-ui/react"; 9 | import theme from "theme/theme"; 10 | import { AuthProvider } from "./auth-context/auth.context"; 11 | import { ProtectedRoute } from "./layouts/protected.route.js"; 12 | 13 | let user = localStorage.getItem("user"); 14 | user = JSON.parse(user); 15 | ReactDOM.render( 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | , 30 | document.getElementById("root") 31 | ); 32 | -------------------------------------------------------------------------------- /src/layouts/admin/index.js: -------------------------------------------------------------------------------- 1 | // Chakra imports 2 | import { Portal, Box, useDisclosure } from "@chakra-ui/react"; 3 | import Footer from "components/footer/FooterAdmin.js"; 4 | // Layout components 5 | import Navbar from "components/navbar/NavbarAdmin.js"; 6 | import Sidebar from "components/sidebar/Sidebar.js"; 7 | import { SidebarContext } from "contexts/SidebarContext"; 8 | import React, { useState } from "react"; 9 | import { Redirect, Route, Switch } from "react-router-dom"; 10 | import routes from "routes.js"; 11 | 12 | // Custom Chakra theme 13 | export default function Dashboard(props) { 14 | const { ...rest } = props; 15 | // states and functions 16 | const [fixed] = useState(false); 17 | const [toggleSidebar, setToggleSidebar] = useState(false); 18 | // functions for changing the states from components 19 | const getRoute = () => { 20 | return window.location.pathname !== "/admin/full-screen-maps"; 21 | }; 22 | const getActiveRoute = (routes) => { 23 | let activeRoute = "Default Brand Text"; 24 | for (let i = 0; i < routes.length; i++) { 25 | if (routes[i].collapse) { 26 | let collapseActiveRoute = getActiveRoute(routes[i].items); 27 | if (collapseActiveRoute !== activeRoute) { 28 | return collapseActiveRoute; 29 | } 30 | } else if (routes[i].category) { 31 | let categoryActiveRoute = getActiveRoute(routes[i].items); 32 | if (categoryActiveRoute !== activeRoute) { 33 | return categoryActiveRoute; 34 | } 35 | } else { 36 | if ( 37 | window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1 38 | ) { 39 | return routes[i].name; 40 | } 41 | } 42 | } 43 | return activeRoute; 44 | }; 45 | const getActiveNavbar = (routes) => { 46 | let activeNavbar = false; 47 | for (let i = 0; i < routes.length; i++) { 48 | if (routes[i].collapse) { 49 | let collapseActiveNavbar = getActiveNavbar(routes[i].items); 50 | if (collapseActiveNavbar !== activeNavbar) { 51 | return collapseActiveNavbar; 52 | } 53 | } else if (routes[i].category) { 54 | let categoryActiveNavbar = getActiveNavbar(routes[i].items); 55 | if (categoryActiveNavbar !== activeNavbar) { 56 | return categoryActiveNavbar; 57 | } 58 | } else { 59 | if ( 60 | window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1 61 | ) { 62 | return routes[i].secondary; 63 | } 64 | } 65 | } 66 | return activeNavbar; 67 | }; 68 | const getActiveNavbarText = (routes) => { 69 | let activeNavbar = false; 70 | for (let i = 0; i < routes.length; i++) { 71 | if (routes[i].collapse) { 72 | let collapseActiveNavbar = getActiveNavbarText(routes[i].items); 73 | if (collapseActiveNavbar !== activeNavbar) { 74 | return collapseActiveNavbar; 75 | } 76 | } else if (routes[i].category) { 77 | let categoryActiveNavbar = getActiveNavbarText(routes[i].items); 78 | if (categoryActiveNavbar !== activeNavbar) { 79 | return categoryActiveNavbar; 80 | } 81 | } else { 82 | if ( 83 | window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1 84 | ) { 85 | return routes[i].messageNavbar; 86 | } 87 | } 88 | } 89 | return activeNavbar; 90 | }; 91 | const getRoutes = (routes) => { 92 | return routes.map((prop, key) => { 93 | if (prop.layout === "/admin") { 94 | return ( 95 | 100 | ); 101 | } 102 | if (prop.collapse) { 103 | return getRoutes(prop.items); 104 | } 105 | if (prop.category) { 106 | return getRoutes(prop.items); 107 | } else { 108 | return null; 109 | } 110 | }); 111 | }; 112 | document.documentElement.dir = "ltr"; 113 | const { onOpen } = useDisclosure(); 114 | return ( 115 | 116 | 121 | 122 | 135 | 136 | 137 | 146 | 147 | 148 | 149 | {getRoute() ? ( 150 | 156 | 157 | {getRoutes(routes)} 158 | 159 | 160 | 161 | ) : null} 162 | 163 |