├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── api-server-nodejs ├── .env ├── .eslintrc.js ├── .gitattributes ├── .gitignore ├── .nvmrc ├── CHANGELOG.md ├── LICENSE.md ├── jest.config.js ├── ormconfig.json ├── package.json ├── production.config.json ├── src │ ├── config │ │ ├── config.ts │ │ ├── passport.ts │ │ └── safeRoutes.ts │ ├── index.ts │ ├── migrations │ │ └── 1626737786922-init.ts │ ├── models │ │ ├── activeSession.ts │ │ └── user.ts │ ├── routes │ │ └── users.ts │ └── server │ │ ├── database.ts │ │ └── index.ts ├── tests │ └── basic.test.ts ├── tsconfig.build.json └── tsconfig.json └── react-ui ├── .env ├── .eslintcache ├── .gitignore ├── .prettierrc ├── CHANGELOG.md ├── Dockerfile ├── docker-compose.yml ├── env.sample ├── package.json ├── public ├── favicon.ico ├── index.html └── robots.txt ├── src ├── App.js ├── assets │ ├── images │ │ ├── complete.png │ │ ├── logo-dark.png │ │ ├── logo.png │ │ ├── nav-bg │ │ │ ├── navbar-img-1.jpg │ │ │ ├── navbar-img-2.jpg │ │ │ ├── navbar-img-3.jpg │ │ │ ├── navbar-img-4.jpg │ │ │ └── navbar-img-5.jpg │ │ └── user │ │ │ ├── avatar-1.jpg │ │ │ ├── avatar-2.jpg │ │ │ ├── avatar-3.jpg │ │ │ └── avatar-4.jpg │ └── scss │ │ ├── partials │ │ ├── _general.scss │ │ ├── _generic.scss │ │ ├── _mixins.scss │ │ ├── _variables.scss │ │ ├── font │ │ │ ├── _cryptofont.scss │ │ │ ├── _datta-icon.scss │ │ │ ├── _feather.scss │ │ │ ├── _flaticon.scss │ │ │ ├── _fontawesome.scss │ │ │ ├── _next-icon.scss │ │ │ ├── _theme-font.scss │ │ │ └── fonts │ │ │ │ ├── Flaticon.eot │ │ │ │ ├── Flaticon.svg │ │ │ │ ├── Flaticon.ttf │ │ │ │ ├── Flaticon.woff │ │ │ │ ├── Flaticon.woff2 │ │ │ │ ├── cryptocoins.ttf │ │ │ │ ├── cryptocoins.woff │ │ │ │ ├── cryptocoins.woff2 │ │ │ │ ├── fa-brands-400.eot │ │ │ │ ├── fa-brands-400.svg │ │ │ │ ├── fa-brands-400.ttf │ │ │ │ ├── fa-brands-400.woff │ │ │ │ ├── fa-brands-400.woff2 │ │ │ │ ├── fa-regular-400.eot │ │ │ │ ├── fa-regular-400.svg │ │ │ │ ├── fa-regular-400.ttf │ │ │ │ ├── fa-regular-400.woff │ │ │ │ ├── fa-regular-400.woff2 │ │ │ │ ├── fa-solid-900.eot │ │ │ │ ├── fa-solid-900.svg │ │ │ │ ├── fa-solid-900.ttf │ │ │ │ ├── fa-solid-900.woff │ │ │ │ ├── fa-solid-900.woff2 │ │ │ │ ├── feather.eot │ │ │ │ ├── feather.svg │ │ │ │ ├── feather.ttf │ │ │ │ ├── feather.woff │ │ │ │ ├── pct.eot │ │ │ │ ├── pct.svg │ │ │ │ ├── pct.ttf │ │ │ │ ├── pct.woff │ │ │ │ └── poppins │ │ │ │ ├── pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2 │ │ │ │ ├── pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2 │ │ │ │ ├── pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2 │ │ │ │ ├── pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2 │ │ │ │ ├── pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2 │ │ │ │ ├── pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2 │ │ │ │ ├── pxiEyp8kv8JHgFVrJJfecg.woff2 │ │ │ │ └── pxiEyp8kv8JHgFVrJJnecmNE.woff2 │ │ ├── menu │ │ │ └── _menu-lite.scss │ │ ├── mixins │ │ │ ├── _alert.scss │ │ │ ├── _buttons.scss │ │ │ ├── _function.scss │ │ │ └── _pagination.scss │ │ ├── other │ │ │ └── _chat.scss │ │ ├── pages │ │ │ └── gallery.scss │ │ ├── theme-elements │ │ │ ├── _authentication.scss │ │ │ ├── _breadcrumb-pagination.scss │ │ │ ├── _button.scss │ │ │ ├── _data-tables.scss │ │ │ ├── _form.scss │ │ │ ├── _labels-badges.scss │ │ │ └── _tooltip.scss │ │ ├── third-party │ │ │ ├── _css-animator.scss │ │ │ ├── _datatables.scss │ │ │ ├── _google-map.scss │ │ │ ├── _ngx-perfect-scrollbar.scss │ │ │ ├── _react-full-screen.scss │ │ │ ├── _third-party.scss │ │ │ └── react-bootstrap │ │ │ │ ├── _header.scss │ │ │ │ └── react-bootstrap.scss │ │ └── widget │ │ │ └── _widget.scss │ │ └── style.scss ├── components │ ├── Auth │ │ ├── AuthGuard.js │ │ └── GuestGuard.js │ ├── Card │ │ └── MainCard.js │ ├── Loader │ │ ├── Bar.js │ │ ├── Container.js │ │ ├── Loader.js │ │ ├── Progress.js │ │ └── Spinner.js │ └── Widgets │ │ └── Statistic │ │ └── Notification.js ├── config │ └── constant.js ├── contexts │ └── ConfigContext.js ├── hooks │ ├── useOutsideClick.js │ ├── useScriptRef.js │ └── useWindowSize.js ├── index.js ├── index.scss ├── layouts │ └── AdminLayout │ │ ├── Breadcrumb │ │ └── index.js │ │ ├── NavBar │ │ ├── NavLeft │ │ │ ├── NavSearch │ │ │ │ └── index.js │ │ │ └── index.js │ │ ├── NavRight │ │ │ ├── ChatList │ │ │ │ ├── Friends │ │ │ │ │ ├── Chat │ │ │ │ │ │ ├── Messages │ │ │ │ │ │ │ └── index.js │ │ │ │ │ │ ├── chat.js │ │ │ │ │ │ └── index.js │ │ │ │ │ ├── Friend │ │ │ │ │ │ └── index.js │ │ │ │ │ ├── friends.js │ │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ │ └── index.js │ │ └── index.js │ │ ├── Navigation │ │ ├── NavContent │ │ │ ├── NavBadge │ │ │ │ └── index.js │ │ │ ├── NavCollapse │ │ │ │ └── index.js │ │ │ ├── NavGroup │ │ │ │ └── index.js │ │ │ ├── NavIcon │ │ │ │ └── index.js │ │ │ ├── NavItem │ │ │ │ └── index.js │ │ │ └── index.js │ │ ├── NavLogo │ │ │ └── index.js │ │ └── index.js │ │ └── index.js ├── menu-items.js ├── reportWebVitals.js ├── routes.js ├── store │ ├── accountReducer.js │ ├── actions.js │ ├── index.js │ └── reducers.js ├── utils │ ├── axios.js │ └── services.js └── views │ ├── auth │ ├── signin │ │ ├── RestLogin.js │ │ ├── SignIn1.js │ │ └── SignIn2.js │ └── signup │ │ ├── RestRegister.js │ │ ├── SignUp1.js │ │ └── SignUp2.js │ ├── charts │ └── nvd3-chart │ │ ├── chart │ │ ├── BarDiscreteChart.js │ │ ├── LineChart.js │ │ ├── MultiBarChart.js │ │ ├── PieBasicChart.js │ │ └── PieDonutChart.js │ │ └── index.js │ ├── dashboard │ └── DashDefault │ │ ├── chart │ │ ├── AmChartEarnings.js │ │ └── AmChartStatistics6.js │ │ └── index.js │ ├── extra │ └── SamplePage.js │ ├── forms │ └── FormsElements.js │ ├── maps │ ├── GoogleMaps.js │ └── google-maps │ │ ├── InfoBox.js │ │ ├── Marker.js │ │ ├── MarkerClusterer.js │ │ ├── StreetViewPanorma.js │ │ └── fancy-map-styles.json │ ├── tables │ └── BootstrapTable.js │ └── ui-elements │ └── basic │ ├── BasicBadges.js │ ├── BasicBreadcrumb.js │ ├── BasicButton.js │ ├── BasicCollapse.js │ ├── BasicTabsPills.js │ └── BasicTypography.js └── yarn.lock /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [1.0.3] 2023-06-25 4 | ### Changes 5 | 6 | - STABLE Version 7 | - Regenerate Codebase 8 | - [React App Generator](https://appseed.us/generator/react/) - free tool 9 | 10 | ## [v1.0.2] 2022-11-13 11 | ### Improvements 12 | 13 | - Added `deployer` file 14 | - Used by AppSeed [Go-LIVE](https://appseed.us/go-live/) service 15 | 16 | ## [v1.0.1] 2022-11-08 17 | ### Improvements 18 | 19 | - Save Compat matrix in `package.json` 20 | - `build` node 21 | - Yarn, NPM 22 | - NodeJS versions 23 | 24 | ## [1.0.0] 2022-11-05 25 | ### Improvements 26 | 27 | - Added `env.sample` 28 | - `API_URL` can be specified in `env` (optional) 29 | - data used in `src/config.js` 30 | - Added `compatibility matrix` for Node, yarn & NPM 31 | - Testing tool: [Render API Wrapper](https://github.com/app-generator/deploy-automation-render) 32 | 33 | ## [0.0.2] 2021-11-16 34 | ### Improvements 35 | 36 | - Added Docker Support 37 | - Fixes: 38 | - `Environment key "jest/globals" is unknown` 39 | - Impacted file: `package.json` 40 | 41 | ## [0.0.1] 2021-07-15 42 | ### Initial Release 43 | 44 | - Integrate with Node JS Backend 45 | - UI: Datta Able v0.1.0 (free version) 46 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /api-server-nodejs/.env: -------------------------------------------------------------------------------- 1 | NODE_ENV=DEV 2 | PORT=5000 3 | SQLITE_PATH=./database.db 4 | SECRET="SuperS3cret_4277m" -------------------------------------------------------------------------------- /api-server-nodejs/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | es2021: true, 4 | node: true, 5 | }, 6 | extends: ['airbnb-typescript/base', 'plugin:@typescript-eslint/recommended'], 7 | parser: '@typescript-eslint/parser', 8 | parserOptions: { 9 | ecmaVersion: 2018, 10 | sourceType: 'module', 11 | project: './tsconfig.json', 12 | }, 13 | rules: { 14 | '@typescript-eslint/explicit-module-boundary-types': 'off', 15 | 'no-param-reassign': 'off', 16 | 'no-underscore-dangle': 'off', 17 | 'consistent-return': 'off', 18 | 'no-console': 'off', 19 | 'import/prefer-default-export': 'off', 20 | '@typescript-eslint/no-non-null-assertion': 'off', 21 | 'class-methods-use-this': 'off', 22 | '@typescript-eslint/naming-convention': 'off' 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /api-server-nodejs/.gitattributes: -------------------------------------------------------------------------------- 1 | # Declare files that will always have LF line endings on checkout. 2 | 3 | *.html text eol=lf 4 | *.scss text eol=lf 5 | *.sass text eol=lf 6 | *.css text eol=lf 7 | *.js text eol=lf 8 | *.json text eol=lf 9 | *.svg text eol=lf 10 | *.yml text eol=lf 11 | *.yaml text eol=lf 12 | *.md text eol=lf 13 | 14 | .babelrc text eol=lf 15 | .gitignore text eol=lf 16 | .gitattributes text eol=lf 17 | 18 | LICENSE text eol=lf 19 | 20 | # Denote all files that are truly binary and should not be modified. 21 | 22 | *.png binary 23 | *.jpg binary 24 | *.jpeg binary 25 | *.gif binary 26 | *.bmp binary 27 | *.ai binary 28 | *.psd binary 29 | *.pdf binary 30 | 31 | *.otf binary 32 | *.eot binary 33 | *.ttf binary 34 | *.woff binary 35 | *.woff2 binary 36 | *.zip binary 37 | *.rar binary 38 | -------------------------------------------------------------------------------- /api-server-nodejs/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build 3 | 4 | # Logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | *.db -------------------------------------------------------------------------------- /api-server-nodejs/.nvmrc: -------------------------------------------------------------------------------- 1 | v14 -------------------------------------------------------------------------------- /api-server-nodejs/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [v1.0.3] 2022-11-08 4 | ### Improvements 5 | 6 | - Save Compat matrix in `package.json` 7 | - `build` node 8 | - Yarn, NPM 9 | - NodeJS versions 10 | 11 | ## [v1.0.2] 2022-11-06 12 | ### Improvements 13 | 14 | - Updated for Deploy on RENDER using [Python Deployer](https://github.com/app-generator/deploy-automation-render) 15 | - `python.exe .\deployer.py nodejs https://github.com/app-generator/api-server-nodejs` 16 | - The new API is usable via `https://api-server-nodejs-.onrender.com/api/` 17 | 18 | ## [v1.0.1] 2022-06-02 19 | ### Improvements 20 | 21 | - Dependencies Update for 22 | - NodeJS `v17.0.0` 23 | - NodeJS `v16.15.1` 24 | 25 | ## [v1.0.0] 2021-07-20 26 | ### Stable release 27 | 28 | - Persistance migrated to SQLite3 / TypeORM 29 | - Stack: Node JS/ Express / TypeORM / SQLite3 30 | - API: 31 | - Sign UP: `/api/users/register` 32 | - Sign IN: `/api/users/login` 33 | - Logout: `/api/users/logout` 34 | - Check Session: `/api/users/checkSession` 35 | - Edit User: `/api/users/edit` 36 | - Data persistence 37 | - TypeORM / SQLite3 38 | - Db migrations are in `src/migrations` folder 39 | - Added new config `ormconfig.json` 40 | 41 | ## [0.0.9] 2021-07-19 42 | ### Production Update 43 | 44 | - Use `pm2` in production - new targets added to `package.json` 45 | - `start` uses `pm2` to start 46 | - `start-node` - load typescript build with Node JS 47 | 48 | ## [0.0.8] 2021-07-09 49 | ### Improvements & Fixes 50 | 51 | - Patch #8: Typescript Migration - Tests are failing 52 | - Code refactoring: 53 | - `src/config/keys.ts` - removed 54 | - `keys.ts` variables moved to `.env` 55 | 56 | ## [0.0.7] 2021-07-09 57 | ### Improvements 58 | 59 | - Added typescript support 60 | 61 | ## [0.0.6] 2021-07-07 62 | ### Improvements 63 | 64 | - Deprecate `src/app.js` - now the app is constructed by: 65 | - `src/server/index.js` 66 | - `src/index.js` 67 | - Integrate JTest: `yarn test` 68 | 69 | ## [0.0.5] 2021-07-05 70 | ### Improvements 71 | 72 | - Move sources to `src` folder 73 | - Dockerize project (unstable) - See issue [#6](https://github.com/app-generator/api-server-nodejs/issues/6) 74 | 75 | ## [0.0.4] 2021-07-04 76 | ### Improvements 77 | 78 | - Use `Joy` as input validator for `login` & `register` 79 | - Remove `bodyParser` dependency (flagged as deprecated) 80 | 81 | ## [0.0.3] 2021-07-04 82 | ### Complete rewrite 83 | 84 | - Update Passport strategy to `JwtStrategy` 85 | - Persistance via MongoDB 86 | - API: 87 | - Sign UP: `/api/users/register` 88 | - Sign IN: `/api/users/login` 89 | - Logout: `/api/users/logout` 90 | - Check Session: `/api/users/checkSession` 91 | - Edit User: `/api/users/edit` 92 | - Merge PR #5 - Added `nodemon` to `devDependencies` 93 | 94 | ## [0.0.2] 2021-07-03 95 | ### Improvements & Fixes 96 | 97 | - Patch #3 - Error when installing modules 98 | - Patch #2 - Passport Authentication always returns missing credentials 99 | - Remove `body-parser` dependency 100 | 101 | ## [0.0.1] 2021-07-03 102 | ### Improvements 103 | 104 | - Update Dependencies 105 | - Update License file 106 | - Add CHANGELOG.md to track all changes 107 | -------------------------------------------------------------------------------- /api-server-nodejs/LICENSE.md: -------------------------------------------------------------------------------- 1 | # MIT License 2 | 3 | Copyright (c) 2019 - present [AppSeed](http://appseed.us/) 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 | 23 |
24 | 25 | --- 26 | For more information regarding licensing, please contact AppSeed < *support @ appseed.us* > -------------------------------------------------------------------------------- /api-server-nodejs/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | transform: { 3 | '^.+\\.ts?$': 'ts-jest', 4 | }, 5 | setupFiles: ['dotenv/config'], 6 | testEnvironment: 'node', 7 | coveragePathIgnorePatterns: ['node_modules'], 8 | coverageReporters: ['text', 'lcov', 'clover', 'html'], 9 | }; -------------------------------------------------------------------------------- /api-server-nodejs/ormconfig.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "default", 4 | "type": "sqlite", 5 | "database": "./database.db", 6 | "autoSchemaSync": true, 7 | "entities": [ 8 | "src/models/**/*{.js,.ts}" 9 | ], 10 | "migrations": ["src/migrations/**/*{.js,.ts}"], 11 | "cli": { 12 | "migrationsDir": "src/migrations/" 13 | } 14 | } 15 | ] -------------------------------------------------------------------------------- /api-server-nodejs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "api-server-nodejs", 3 | "version": "1.0.0", 4 | "description": "RESTful back-end for Node.js and Express.js", 5 | "license": "Commercial", 6 | "author": "AppSeed.us", 7 | "main": "src/index", 8 | "build": { 9 | "yarn": "v16.13.0,v17.0.0,v18.0.0" 10 | }, 11 | "scripts": { 12 | "start": "pm2 start production.config.json", 13 | "start-no-daemon": "pm2 start production.config.json --no-daemon", 14 | "start-node": "node build/index.js", 15 | "dev": "ts-node-dev src/index.ts", 16 | "test": "jest -i --colors --verbose --detectOpenHandles", 17 | "lint": "eslint src --ext .ts", 18 | "build": "tsc -p tsconfig.build.json", 19 | "typecheck": "tsc --noEmit", 20 | "typeorm": "node --require ts-node/register ./node_modules/typeorm/cli.js" 21 | }, 22 | "dependencies": { 23 | "bcrypt": "5.0.1", 24 | "compression": "^1.7.4", 25 | "cors": "^2.8.5", 26 | "cross-env": "^7.0.3", 27 | "dotenv": "^10.0.0", 28 | "express": "^4.17.1", 29 | "express-passport-logout": "^0.1.0", 30 | "joi": "^17.4.1", 31 | "jsonwebtoken": "^8.5.1", 32 | "passport": "^0.4.1", 33 | "passport-jwt": "^4.0.0", 34 | "sqlite3": "5.0.2", 35 | "pm2": "^5.1.0", 36 | "typeorm": "0.2.34" 37 | }, 38 | "devDependencies": { 39 | "@types/bcrypt": "5.0.0", 40 | "@types/compression": "^1.7.1", 41 | "@types/cors": "^2.8.11", 42 | "@types/express": "^4.17.13", 43 | "@types/jest": "^26.0.24", 44 | "@types/node": "^16.3.3", 45 | "@types/passport-jwt": "^3.0.6", 46 | "@types/sqlite3": "3.1.7", 47 | "@types/supertest": "^2.0.11", 48 | "@typescript-eslint/eslint-plugin": "^4.28.3", 49 | "@typescript-eslint/parser": "^4.28.3", 50 | "eslint": "^7.31.0", 51 | "eslint-config-airbnb-typescript": "^12.3.1", 52 | "eslint-plugin-import": "^2.23.4", 53 | "jest": "^27.0.6", 54 | "supertest": "^6.1.3", 55 | "ts-jest": "^28.0.3", 56 | "ts-node": "10.8.0", 57 | "ts-node-dev": "2.0.0", 58 | "typescript": "^4.3.5" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /api-server-nodejs/production.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "apps": [{ 3 | "name": "nodejs_api", 4 | "script": "build/index.js", 5 | "instances": 1, 6 | "autorestart": true, 7 | "watch": false, 8 | "time": true, 9 | "env": { 10 | "NODE_ENV": "production" 11 | } 12 | }] 13 | } -------------------------------------------------------------------------------- /api-server-nodejs/src/config/config.ts: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Copyright (c) 2019 - present AppSeed.us 4 | 5 | */ 6 | export default { 7 | webURL: 'https://localhost:5000/', 8 | }; 9 | -------------------------------------------------------------------------------- /api-server-nodejs/src/config/passport.ts: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Copyright (c) 2019 - present AppSeed.us 4 | 5 | */ 6 | 7 | import passport from 'passport'; 8 | import { ExtractJwt, Strategy as JwtStrategy } from 'passport-jwt'; 9 | 10 | import User from '../models/user'; 11 | import { connection } from '../server/database'; 12 | 13 | export default (pass: passport.PassportStatic) => { 14 | const opts = { 15 | jwtFromRequest: ExtractJwt.fromAuthHeaderWithScheme('jwt'), 16 | secretOrKey: process.env.SECRET, 17 | }; 18 | 19 | pass.use( 20 | new JwtStrategy(opts, async (jwtPayload, done) => { 21 | try { 22 | const userRepository = connection?.getRepository(User); 23 | const user = await userRepository?.findOne(jwtPayload._doc._id); 24 | 25 | if (user) { 26 | return done(null, user); 27 | } 28 | return done(null, false); 29 | } catch (err) { 30 | return done(err, false); 31 | } 32 | }), 33 | ); 34 | }; 35 | -------------------------------------------------------------------------------- /api-server-nodejs/src/config/safeRoutes.ts: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Copyright (c) 2019 - present AppSeed.us 4 | 5 | */ 6 | import { NextFunction, Request, Response } from 'express'; 7 | 8 | import ActiveSession from '../models/activeSession'; 9 | import { connection } from '../server/database'; 10 | 11 | // eslint-disable-next-line import/prefer-default-export 12 | export const checkToken = (req: Request, res: Response, next: NextFunction) => { 13 | const token = String(req.headers.authorization || req.body.token); 14 | const activeSessionRepository = connection!.getRepository(ActiveSession); 15 | activeSessionRepository.find({ token }).then((session) => { 16 | console.log(token); 17 | console.log(session); 18 | if (session.length === 1) { 19 | return next(); 20 | } 21 | return res.json({ success: false, msg: 'User is not logged on' }); 22 | }); 23 | }; 24 | -------------------------------------------------------------------------------- /api-server-nodejs/src/index.ts: -------------------------------------------------------------------------------- 1 | import 'dotenv/config'; 2 | 3 | import http from 'http'; 4 | 5 | import server from './server'; 6 | 7 | const { PORT } = process.env; 8 | 9 | http.createServer({ 10 | }, server) 11 | .listen(PORT, () => { 12 | console.log(`Server is listening on port ${PORT}`); 13 | }); 14 | -------------------------------------------------------------------------------- /api-server-nodejs/src/migrations/1626737786922-init.ts: -------------------------------------------------------------------------------- 1 | import {MigrationInterface, QueryRunner} from "typeorm"; 2 | 3 | export class init1626737786922 implements MigrationInterface { 4 | name = 'init1626737786922' 5 | 6 | public async up(queryRunner: QueryRunner): Promise { 7 | await queryRunner.query(`CREATE TABLE "active_session" ("id" varchar PRIMARY KEY NOT NULL, "token" text NOT NULL, "userId" text NOT NULL, "date" datetime NOT NULL DEFAULT (CURRENT_TIMESTAMP))`); 8 | await queryRunner.query(`CREATE TABLE "user" ("id" varchar PRIMARY KEY NOT NULL, "username" text NOT NULL, "email" text NOT NULL, "password" text NOT NULL, "date" datetime NOT NULL DEFAULT (CURRENT_TIMESTAMP))`); 9 | } 10 | 11 | public async down(queryRunner: QueryRunner): Promise { 12 | await queryRunner.query(`DROP TABLE "user"`); 13 | await queryRunner.query(`DROP TABLE "active_session"`); 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /api-server-nodejs/src/models/activeSession.ts: -------------------------------------------------------------------------------- 1 | import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm'; 2 | 3 | @Entity() 4 | export default class ActiveSession { 5 | @PrimaryGeneratedColumn('uuid') 6 | id!: string; 7 | 8 | @Column({ type: 'text', nullable: false }) 9 | token!: string; 10 | 11 | @Column({ type: 'text', nullable: false }) 12 | userId!: string; 13 | 14 | @Column({ type: 'datetime', default: () => 'CURRENT_TIMESTAMP' }) 15 | date?: string; 16 | } 17 | -------------------------------------------------------------------------------- /api-server-nodejs/src/models/user.ts: -------------------------------------------------------------------------------- 1 | import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm'; 2 | 3 | @Entity() 4 | export default class User { 5 | @PrimaryGeneratedColumn('uuid') 6 | id!: string; 7 | 8 | @Column({ type: 'text', nullable: false }) 9 | username!: string; 10 | 11 | @Column({ type: 'text', nullable: false }) 12 | email!: string; 13 | 14 | @Column({ type: 'text', nullable: false }) 15 | password!: string; 16 | 17 | @Column({ type: 'datetime', default: () => 'CURRENT_TIMESTAMP' }) 18 | date?: string; 19 | } 20 | -------------------------------------------------------------------------------- /api-server-nodejs/src/routes/users.ts: -------------------------------------------------------------------------------- 1 | import bcrypt from 'bcrypt'; 2 | /* 3 | 4 | Copyright (c) 2019 - present AppSeed.us 5 | 6 | */ 7 | import express from 'express'; 8 | import Joi from 'joi'; 9 | import jwt from 'jsonwebtoken'; 10 | 11 | import { checkToken } from '../config/safeRoutes'; 12 | import ActiveSession from '../models/activeSession'; 13 | import User from '../models/user'; 14 | import { connection } from '../server/database'; 15 | 16 | // eslint-disable-next-line new-cap 17 | const router = express.Router(); 18 | // Route: :PORT/api/users/ 19 | 20 | const userSchema = Joi.object().keys({ 21 | email: Joi.string().email().required(), 22 | username: Joi.string().alphanum().min(4).max(15) 23 | .optional(), 24 | password: Joi.string().required(), 25 | }); 26 | 27 | router.post('/register', (req, res) => { 28 | // Joy Validation 29 | const result = userSchema.validate(req.body); 30 | if (result.error) { 31 | res.status(422).json({ 32 | success: false, 33 | msg: `Validation err: ${result.error.details[0].message}`, 34 | }); 35 | return; 36 | } 37 | 38 | const { username, email, password } = req.body; 39 | 40 | const userRepository = connection!.getRepository(User); 41 | 42 | userRepository.findOne({ email }).then((user) => { 43 | if (user) { 44 | res.json({ success: false, msg: 'Email already exists' }); 45 | } else { 46 | bcrypt.genSalt(10, (_err, salt) => { 47 | bcrypt.hash(password, salt).then((hash) => { 48 | const query = { 49 | username, 50 | email, 51 | password: hash, 52 | }; 53 | 54 | userRepository.save(query).then((u) => { 55 | res.json({ success: true, userID: u.id, msg: 'The user was successfully registered' }); 56 | }); 57 | }); 58 | }); 59 | } 60 | }); 61 | }); 62 | 63 | router.post('/login', (req, res) => { 64 | // Joy Validation 65 | const result = userSchema.validate(req.body); 66 | if (result.error) { 67 | res.status(422).json({ 68 | success: false, 69 | msg: `Validation err: ${result.error.details[0].message}`, 70 | }); 71 | return; 72 | } 73 | 74 | const { email } = req.body; 75 | const { password } = req.body; 76 | 77 | const userRepository = connection!.getRepository(User); 78 | const activeSessionRepository = connection!.getRepository(ActiveSession); 79 | userRepository.findOne({ email }).then((user) => { 80 | if (!user) { 81 | return res.json({ success: false, msg: 'Wrong credentials' }); 82 | } 83 | 84 | if (!user.password) { 85 | return res.json({ success: false, msg: 'No password' }); 86 | } 87 | 88 | bcrypt.compare(password, user.password, (_err2, isMatch) => { 89 | if (isMatch) { 90 | if (!process.env.SECRET) { 91 | throw new Error('SECRET not provided'); 92 | } 93 | 94 | const token = jwt.sign({ 95 | id: user.id, 96 | username: user.username, 97 | email: user.email, 98 | }, process.env.SECRET, { 99 | expiresIn: 86400, // 1 week 100 | }); 101 | 102 | const query = { userId: user.id, token }; 103 | 104 | activeSessionRepository.save(query); 105 | // Delete the password (hash) 106 | (user as { password: string | undefined }).password = undefined; 107 | return res.json({ 108 | success: true, 109 | token, 110 | user, 111 | }); 112 | } 113 | return res.json({ success: false, msg: 'Wrong credentials' }); 114 | }); 115 | }); 116 | }); 117 | 118 | router.post('/logout', checkToken, (req, res) => { 119 | const { token } = req.body; 120 | const activeSessionRepository = connection!.getRepository(ActiveSession); 121 | 122 | activeSessionRepository.delete({ token }) 123 | .then(() => res.json({ success: true })) 124 | .catch(() => { 125 | res.json({ success: false, msg: 'Token revoked' }); 126 | }); 127 | }); 128 | 129 | router.post('/checkSession', checkToken, (_req, res) => { 130 | res.json({ success: true }); 131 | }); 132 | 133 | router.post('/all', checkToken, (_req, res) => { 134 | const userRepository = connection!.getRepository(User); 135 | 136 | userRepository.find({}).then((users) => { 137 | users = users.map((item) => { 138 | const x = item; 139 | (x as { password: string | undefined }).password = undefined; 140 | return x; 141 | }); 142 | res.json({ success: true, users }); 143 | }).catch(() => res.json({ success: false })); 144 | }); 145 | 146 | router.post('/edit', checkToken, (req, res) => { 147 | const { userID, username, email } = req.body; 148 | 149 | const userRepository = connection!.getRepository(User); 150 | 151 | userRepository.find({ id: userID }).then((user) => { 152 | if (user.length === 1) { 153 | const query = { id: user[0].id }; 154 | const newvalues = { username, email }; 155 | userRepository.update(query, newvalues).then( 156 | () => { 157 | res.json({ success: true }); 158 | }, 159 | ).catch(() => { 160 | res.json({ success: false, msg: 'There was an error. Please contract the administrator' }); 161 | }); 162 | } else { 163 | res.json({ success: false, msg: 'Error updating user' }); 164 | } 165 | }); 166 | }); 167 | 168 | // Used for tests (nothing functional) 169 | router.get('/testme', (_req, res) => { 170 | res.status(200).json({ success: true, msg: 'all good' }); 171 | }); 172 | 173 | export default router; 174 | -------------------------------------------------------------------------------- /api-server-nodejs/src/server/database.ts: -------------------------------------------------------------------------------- 1 | import sqlite3 from 'sqlite3'; 2 | /* eslint-disable import/no-mutable-exports */ 3 | import { Connection, ConnectionOptions, createConnection } from 'typeorm'; 4 | 5 | import ActiveSession from '../models/activeSession'; 6 | import User from '../models/user'; 7 | 8 | if (!process.env.SQLITE_PATH) { 9 | throw new Error('SQLITE_PATH environment variable is not set.'); 10 | } 11 | 12 | const options: ConnectionOptions = { 13 | type: 'sqlite', 14 | database: process.env.SQLITE_PATH, 15 | entities: [User, ActiveSession], 16 | logging: true, 17 | }; 18 | 19 | export let connection : Connection | undefined; 20 | 21 | export const connect = async (): Promise => { 22 | try { 23 | const conn = await createConnection(options); 24 | connection = conn; 25 | console.log(`Database connection success. Connection name: '${conn.name}' Database: '${conn.options.database}'`); 26 | } catch (err) { 27 | console.log(err); 28 | } 29 | return undefined; 30 | }; 31 | 32 | export const PrepareDB = () => new sqlite3.Database(':memory:'); 33 | -------------------------------------------------------------------------------- /api-server-nodejs/src/server/index.ts: -------------------------------------------------------------------------------- 1 | import 'dotenv/config'; 2 | 3 | import compression from 'compression'; 4 | import cors from 'cors'; 5 | /* 6 | 7 | Copyright (c) 2019 - present AppSeed.us 8 | 9 | */ 10 | import express from 'express'; 11 | import passport from 'passport'; 12 | 13 | import initPassport from '../config/passport'; 14 | import routes from '../routes/users'; 15 | import { connect } from './database'; 16 | 17 | // Instantiate express 18 | const server = express(); 19 | server.use(compression()); 20 | 21 | // Passport Config 22 | initPassport(passport); 23 | server.use(passport.initialize()); 24 | 25 | // Connect to sqlite 26 | if (process.env.NODE_ENV !== 'test') { 27 | connect(); 28 | } 29 | 30 | server.use(cors()); 31 | server.use(express.json()); 32 | 33 | // Initialize routes middleware 34 | server.use('/api/users', routes); 35 | 36 | export default server; 37 | -------------------------------------------------------------------------------- /api-server-nodejs/tests/basic.test.ts: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Copyright (c) 2019 - present AppSeed.us 4 | 5 | */ 6 | 7 | import request from 'supertest'; 8 | 9 | import app from '../src/server'; 10 | import { connect, connection, PrepareDB } from '../src/server/database'; 11 | 12 | beforeAll(async () => { 13 | PrepareDB(); 14 | await connect(); 15 | }); 16 | afterAll(async () => connection?.close()); 17 | 18 | describe('API tests', () => { 19 | // The most basic test 20 | test('API should return a 200 status', (done) => { 21 | request(app) 22 | .get('/api/users/testme') 23 | .then((response) => { 24 | expect(response.statusCode).toBe(200); 25 | expect(response.body.success).toBe(true); 26 | done(); 27 | }); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /api-server-nodejs/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "exclude": ["node_modules", "**/*.test.ts", "tests"] 4 | } 5 | -------------------------------------------------------------------------------- /api-server-nodejs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2018", 4 | "declaration": false, 5 | "resolveJsonModule": true, 6 | "baseUrl": ".", 7 | "outDir": "./build", 8 | "strict": true, 9 | "allowSyntheticDefaultImports": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "isolatedModules": true, 12 | "esModuleInterop": true, 13 | "preserveConstEnums": true, 14 | "experimentalDecorators": true, 15 | "jsx": "preserve", 16 | "lib": ["esnext"], 17 | "module": "commonjs", 18 | "moduleResolution": "node", 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "skipLibCheck": true, 22 | "sourceMap": true, 23 | "importHelpers": false, 24 | "preserveSymlinks": true 25 | }, 26 | "lib": ["esnext"], 27 | "include": ["src", "tests"], 28 | "exclude": ["node_modules"] 29 | } 30 | -------------------------------------------------------------------------------- /react-ui/.env: -------------------------------------------------------------------------------- 1 | GENERATE_SOURCEMAP=false 2 | REACT_APP_BACKEND_SERVER='http://127.0.0.1:5000/api/' 3 | -------------------------------------------------------------------------------- /react-ui/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | -------------------------------------------------------------------------------- /react-ui/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "bracketSpacing": true, 3 | "printWidth": 140, 4 | "singleQuote": true, 5 | "trailingComma": "none", 6 | "tabWidth": 4, 7 | "useTabs": false 8 | } 9 | -------------------------------------------------------------------------------- /react-ui/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [v1.0.1] 2022-11-08 4 | ### Improvements 5 | 6 | - Save Compat matrix in `package.json` 7 | - `build` node 8 | - Yarn, NPM 9 | - NodeJS versions 10 | 11 | ## [1.0.0] 2022-11-05 12 | ### Improvements 13 | 14 | - Added `env.sample` 15 | - `API_URL` can be specified in `env` (optional) 16 | - data used in `src/config.js` 17 | - Added `compatibility matrix` for Node, yarn & NPM 18 | - Testing tool: [Render API Wrapper](https://github.com/app-generator/deploy-automation-render) 19 | 20 | ## [0.0.2] 2021-11-16 21 | ### Improvements 22 | 23 | - Added Docker Support 24 | - Fixes: 25 | - `Environment key "jest/globals" is unknown` 26 | - Impacted file: `package.json` 27 | 28 | ## [0.0.1] 2021-07-15 29 | ### Initial Release 30 | 31 | - Integrate with Node JS Backend 32 | - UI: Datta Able v0.1.0 (free version) 33 | -------------------------------------------------------------------------------- /react-ui/Dockerfile: -------------------------------------------------------------------------------- 1 | # pull official base image 2 | FROM node:14-alpine 3 | 4 | # set working directory 5 | WORKDIR /app 6 | 7 | # add `/app/node_modules/.bin` to $PATH 8 | ENV PATH /app/node_modules/.bin:$PATH 9 | 10 | # install app dependencies 11 | COPY package.json ./ 12 | RUN npm install --silent 13 | RUN npm install react-scripts@4.0.0 -g --silent 14 | 15 | # add app 16 | COPY . ./ 17 | 18 | # Expose port 19 | EXPOSE 3000 20 | 21 | # start app 22 | CMD ["npm", "start"] 23 | -------------------------------------------------------------------------------- /react-ui/docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3.7' 2 | 3 | services: 4 | 5 | sample: 6 | container_name: react-datta 7 | build: 8 | context: . 9 | dockerfile: Dockerfile 10 | volumes: 11 | - '.:/app' 12 | - '/app/node_modules' 13 | ports: 14 | - 3000:3000 15 | environment: 16 | - CHOKIDAR_USEPOLLING=true 17 | -------------------------------------------------------------------------------- /react-ui/env.sample: -------------------------------------------------------------------------------- 1 | GENERATE_SOURCEMAP=false 2 | REACT_APP_BACKEND_SERVER='http://127.0.0.1:5000/api/' 3 | -------------------------------------------------------------------------------- /react-ui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-datta-able-dashboard", 3 | "version": "0.0.2", 4 | "private": true, 5 | "build": { 6 | "yarn": "v14.0.0,v16.0.0", 7 | "npm": "v16.0.0" 8 | }, 9 | "dependencies": { 10 | "@amcharts/amcharts3-react": "^3.1.0", 11 | "@reduxjs/toolkit": "^1.5.0", 12 | "@tanem/react-nprogress": "^3.0.57", 13 | "@testing-library/jest-dom": "^5.11.9", 14 | "@testing-library/react": "^11.2.5", 15 | "@testing-library/user-event": "^12.8.3", 16 | "amcharts3": "^3.21.15", 17 | "axios": "^0.21.1", 18 | "axios-mock-adapter": "^1.19.0", 19 | "bootstrap": "^4.6.0", 20 | "formik": "^2.2.6", 21 | "history": "^5.0.0", 22 | "install": "^0.13.0", 23 | "jquery": "^3.6.0", 24 | "npm": "^7.6.3", 25 | "react": "^17.0.1", 26 | "react-app-polyfill": "^2.0.0", 27 | "react-bootstrap": "^1.5.2", 28 | "react-bootstrap4-form-validation": "^1.0.10", 29 | "react-copy-to-clipboard": "^5.0.3", 30 | "react-dom": "^17.0.1", 31 | "react-google-maps": "^9.4.5", 32 | "react-nvd3": "^0.5.7", 33 | "react-perfect-scrollbar": "^1.5.8", 34 | "react-redux": "^7.2.2", 35 | "react-router-dom": "^5.2.0", 36 | "react-scripts": "4.0.3", 37 | "redux": "^4.0.5", 38 | "redux-form": "^8.3.7", 39 | "redux-persist": "^6.0.0", 40 | "sass": "1.32.8", 41 | "styled-components": "^5.2.1", 42 | "web-vitals": "^1.1.0", 43 | "yup": "^0.32.9" 44 | }, 45 | "scripts": { 46 | "start": "react-scripts start", 47 | "build": "react-scripts build", 48 | "test": "react-scripts test", 49 | "eject": "react-scripts eject" 50 | }, 51 | "eslintConfig": { 52 | "extends": [ 53 | "react-app" 54 | ] 55 | }, 56 | "browserslist": { 57 | "production": [ 58 | ">0.2%", 59 | "not dead", 60 | "not op_mini all" 61 | ], 62 | "development": [ 63 | "last 1 chrome version", 64 | "last 1 firefox version", 65 | "last 1 safari version" 66 | ] 67 | }, 68 | "devDependencies": {} 69 | } 70 | -------------------------------------------------------------------------------- /react-ui/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/public/favicon.ico -------------------------------------------------------------------------------- /react-ui/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Welcome | Datta Able Premium React Hooks + Redux Admin Template 6 | 7 | 8 | 9 | 10 | 11 | 15 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /react-ui/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react-ui/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BrowserRouter as Router } from 'react-router-dom'; 3 | 4 | import routes, { renderRoutes } from './routes'; 5 | import { BASENAME } from './config/constant'; 6 | 7 | const App = () => { 8 | return ( 9 | 10 | {renderRoutes(routes)} 11 | 12 | ); 13 | }; 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /react-ui/src/assets/images/complete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/images/complete.png -------------------------------------------------------------------------------- /react-ui/src/assets/images/logo-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/images/logo-dark.png -------------------------------------------------------------------------------- /react-ui/src/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/images/logo.png -------------------------------------------------------------------------------- /react-ui/src/assets/images/nav-bg/navbar-img-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/images/nav-bg/navbar-img-1.jpg -------------------------------------------------------------------------------- /react-ui/src/assets/images/nav-bg/navbar-img-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/images/nav-bg/navbar-img-2.jpg -------------------------------------------------------------------------------- /react-ui/src/assets/images/nav-bg/navbar-img-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/images/nav-bg/navbar-img-3.jpg -------------------------------------------------------------------------------- /react-ui/src/assets/images/nav-bg/navbar-img-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/images/nav-bg/navbar-img-4.jpg -------------------------------------------------------------------------------- /react-ui/src/assets/images/nav-bg/navbar-img-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/images/nav-bg/navbar-img-5.jpg -------------------------------------------------------------------------------- /react-ui/src/assets/images/user/avatar-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/images/user/avatar-1.jpg -------------------------------------------------------------------------------- /react-ui/src/assets/images/user/avatar-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/images/user/avatar-2.jpg -------------------------------------------------------------------------------- /react-ui/src/assets/images/user/avatar-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/images/user/avatar-3.jpg -------------------------------------------------------------------------------- /react-ui/src/assets/images/user/avatar-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/images/user/avatar-4.jpg -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/_generic.scss: -------------------------------------------------------------------------------- 1 | /** ===================== 2 | Generic-class css start 3 | ========================== **/ 4 | /*====== Padding , Margin css starts ======*/ 5 | $i: 0; 6 | @while $i<=50 { 7 | .p { 8 | &-#{$i} { 9 | padding: #{$i}px; 10 | } 11 | 12 | &-t-#{$i} { 13 | padding-top: #{$i}px; 14 | } 15 | 16 | &-b-#{$i} { 17 | padding-bottom: #{$i}px; 18 | } 19 | 20 | &-l-#{$i} { 21 | padding-left: #{$i}px; 22 | } 23 | 24 | &-r-#{$i} { 25 | padding-right: #{$i}px; 26 | } 27 | } 28 | .m { 29 | &-#{$i} { 30 | margin: #{$i}px; 31 | } 32 | 33 | &-t-#{$i} { 34 | margin-top: #{$i}px; 35 | } 36 | 37 | &-b-#{$i} { 38 | margin-bottom: #{$i}px; 39 | } 40 | 41 | &-l-#{$i} { 42 | margin-left: #{$i}px; 43 | } 44 | 45 | &-r-#{$i} { 46 | margin-right: #{$i}px; 47 | } 48 | } 49 | $i: $i + 5; 50 | } 51 | /*====== Padding , Margin css ends ======*/ 52 | 53 | /*====== text-color, background color css starts ======*/ 54 | @each $value in $color-name { 55 | $i: index($color-name, $value); 56 | .bg-#{$value} { 57 | background: nth($color-color, $i); 58 | } 59 | .text-#{$value} { 60 | color: nth($color-color, $i); 61 | } 62 | } 63 | /*====== text-color css ends ======*/ 64 | /*====== Card top border css starts ======*/ 65 | @each $value in $color-name { 66 | $i: index($color-name, $value); 67 | .card-border-#{$value} { 68 | border-top: 4px solid nth($color-color, $i); 69 | } 70 | } 71 | /*====== Card top border ends ======*/ 72 | /*====== Font-size css starts ======*/ 73 | $i: 10; 74 | @while $i<=80 { 75 | .f-#{$i} { 76 | font-size: #{$i}px; 77 | } 78 | $i: $i + 2; 79 | } 80 | /*====== Font-size css ends ======*/ 81 | /*====== Font-weight css starts ======*/ 82 | $i: 100; 83 | @while $i<=900 { 84 | .f-w-#{$i} { 85 | font-weight: #{$i}; 86 | } 87 | $i: $i + 100; 88 | } 89 | /*====== Font-weight css ends ======*/ 90 | /*====== width, Height css starts ======*/ 91 | $i: 20; 92 | @while $i<=150 { 93 | .wid-#{$i} { 94 | width: #{$i}px; 95 | } 96 | .hei-#{$i} { 97 | height: #{$i}px; 98 | } 99 | $i: $i + 5; 100 | } 101 | /*====== width, Height css ends ======*/ 102 | -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/_mixins.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/_mixins.scss -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/_variables.scss: -------------------------------------------------------------------------------- 1 | // ======================================= 2 | // List of variables for layout 3 | // ======================================= 4 | /* 5 | description Of variables for build for theme layouts 6 | 1) menu-caption-color 7 | List of color for sidebar menu caption 8 | 9 | 2) brand-background 10 | List of color for logo background 11 | 12 | 3) header-dark-background 13 | List of color for Dark Header 14 | 15 | 4) header-light-background 16 | List of color for light Header 17 | 18 | 5) menu-dark-background 19 | List of color for Dark sidebar menu 20 | 21 | 6) menu-light-background 22 | List of color for light sidebar menu 23 | 24 | 7) menu-active-color 25 | List of color for Active item highliter 26 | 27 | 8) menu-icon-color 28 | List of color for sidebar menu items icon colors 29 | */ 30 | $header-height: 70px; 31 | $Menu-width: 264px; 32 | $Menu-collapsed-width: 80px; 33 | 34 | // color list for build layouts 35 | // temp variables 36 | $theme-color: linear-gradient(-135deg, #1de9b6 0%, #1dc4e9 100%); 37 | $theme-color2: linear-gradient(-135deg, #899fd4 0%, #a389d4 100%); 38 | $primary-color: #04a9f5; 39 | $warning-color: #f4c22b; 40 | $danger-color: #f44236; 41 | $success-color: #1de9b6; 42 | $purple-color: #a389d4; 43 | $info-color: #3ebfea; 44 | $secondary-color: #748892; 45 | $default-color: #d6d6d6; 46 | $light-color: #f2f2f2; 47 | $dark-color: #37474f; 48 | $inverse-color: $dark-color; 49 | $theme-border: #eaeaea; 50 | 51 | // header 52 | $brand-background: #3f4d67; 53 | $header-dark-background: #3f4d67; 54 | $header-dark-text-color: #fff; 55 | $header-light-background: #fff; 56 | $header-light-text-color: #3f4d67; 57 | 58 | // Menu 59 | $menu-caption-color: #14171d; 60 | $menu-dark-background: #3f4d67; 61 | $menu-dark-text-color: #a9b7d0; 62 | $menu-light-background: #fff; 63 | $menu-light-text-color: #3f4d67; 64 | $menu-active-color: #04a9f5; 65 | 66 | // dark layout colors 67 | $dark-layout: #212224; 68 | $dark-layout-font: #adb7be; 69 | 70 | // Menu icon 71 | $menu-icon-color: $primary-color, #ff5252, #01a9ac, #9575cd, #23b7e5, $warning-color; 72 | // Header background 73 | $color-header-name: blue, red, purple, lightblue, dark; 74 | $color-header-color: $primary-color, #ff5252, #9575cd, #23b7e5, lighten($dark-layout, 7%); 75 | // Menu background 76 | $color-menu-name: blue, red, purple, lightblue, dark; 77 | $color-menu-color: $primary-color, #ff5252, #9575cd, #23b7e5, lighten($dark-layout, 7%); 78 | // Active background color 79 | $color-active-name: blue, red, purple, lightblue, dark; 80 | $color-active-color: $primary-color, #ff5252, #9575cd, #23b7e5, lighten($dark-layout, 7%); 81 | // Menu title color 82 | $color-title-name: blue, red, purple, lightblue, dark; 83 | $color-title-color: $primary-color, #ff5252, #9575cd, #23b7e5, lighten($dark-layout, 7%); 84 | 85 | // layout-6 background color 86 | $layout-6-bg-color: #23b7e5; 87 | 88 | $theme-font-family: 'Open Sans', sans-serif; 89 | $theme-font-size: 14px; 90 | $theme-background: #f4f7fa; 91 | $theme-font-color: #888; 92 | $theme-heading-color: #111; 93 | 94 | $color-name: c-blue, c-red, c-green, c-yellow, c-purple; 95 | $color-color: $primary-color, $danger-color, $success-color, $warning-color, $purple-color; 96 | $color-bt-name: primary, danger, success, warning, info; 97 | $color-bt-color: $primary-color, $danger-color, $success-color, $warning-color, $info-color; 98 | 99 | // form-control variables 100 | $form-bg: #f0f3f6; 101 | 102 | $theme-colors: () !default; 103 | $theme-colors: map-merge( 104 | ( 105 | 'primary': $primary-color, 106 | 'secondary': $secondary-color, 107 | 'success': $success-color, 108 | 'info': $info-color, 109 | 'warning': $warning-color, 110 | 'danger': $danger-color, 111 | 'light': $light-color, 112 | 'dark': $dark-color 113 | ), 114 | $theme-colors 115 | ); // Color contrast 116 | $yiq-contrasted-threshold: 200 !default; 117 | $yiq-dark-color: #37474f; 118 | $yiq-light-color: #fff; 119 | $theme-color-interval: 8% !default; 120 | $alert-bg-level: -10 !default; 121 | $alert-border-level: -9 !default; 122 | $alert-color-level: 6 !default; 123 | -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/_datta-icon.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @font-face { 4 | font-family: 'pct'; 5 | src: url('./fonts/pct.eot'); 6 | src: url('./fonts/pct.eot?#iefix') format('embedded-opentype'), url('./fonts/pct.woff') format('woff'), 7 | url('./fonts/pct.ttf') format('truetype'), url('./fonts/pct.svg#pct') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [data-icon]:before { 13 | font-family: 'pct' !important; 14 | content: attr(data-icon); 15 | font-style: normal !important; 16 | font-weight: normal !important; 17 | font-variant: normal !important; 18 | text-transform: none !important; 19 | speak: none; 20 | line-height: 1; 21 | -webkit-font-smoothing: antialiased; 22 | -moz-osx-font-smoothing: grayscale; 23 | } 24 | 25 | [class^='pct-']:before, 26 | [class*=' pct-']:before { 27 | font-family: 'pct' !important; 28 | font-style: normal !important; 29 | font-weight: normal !important; 30 | font-variant: normal !important; 31 | text-transform: none !important; 32 | speak: none; 33 | line-height: 1; 34 | -webkit-font-smoothing: antialiased; 35 | -moz-osx-font-smoothing: grayscale; 36 | } 37 | 38 | .pct-arrow1:before { 39 | content: '\61'; 40 | } 41 | 42 | .pct-arrow2:before { 43 | content: '\62'; 44 | } 45 | 46 | .pct-arrow3:before { 47 | content: '\63'; 48 | } 49 | 50 | .pct-arrow4:before { 51 | content: '\64'; 52 | } 53 | 54 | .pct-chat1:before { 55 | content: '\65'; 56 | } 57 | 58 | .pct-chat2:before { 59 | content: '\66'; 60 | } 61 | 62 | .pct-chat3:before { 63 | content: '\67'; 64 | } 65 | 66 | .pct-chat4:before { 67 | content: '\68'; 68 | } 69 | 70 | .pct-loader1:before { 71 | content: '\69'; 72 | } 73 | 74 | .pct-arrow-sharp1:before { 75 | content: '\6a'; 76 | } 77 | 78 | .pct-arrow-sharp2:before { 79 | content: '\6b'; 80 | } 81 | 82 | .pct-arrow-sharp3:before { 83 | content: '\6c'; 84 | } 85 | 86 | .pct-arrow-sharp4:before { 87 | content: '\6d'; 88 | } 89 | -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/_next-icon.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @font-face { 4 | font-family: 'pct'; 5 | src: url('./fonts/pct.eot'); 6 | src: url('./fonts/pct.eot?#iefix') format('embedded-opentype'), url('./fonts/pct.woff') format('woff'), 7 | url('./fonts/pct.ttf') format('truetype'), url('./fonts/pct.svg#pct') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [data-icon]:before { 13 | font-family: 'pct' !important; 14 | content: attr(data-icon); 15 | font-style: normal !important; 16 | font-weight: normal !important; 17 | font-variant: normal !important; 18 | text-transform: none !important; 19 | speak: none; 20 | line-height: 1; 21 | -webkit-font-smoothing: antialiased; 22 | -moz-osx-font-smoothing: grayscale; 23 | } 24 | 25 | [class^='pct-']:before, 26 | [class*=' pct-']:before { 27 | font-family: 'pct' !important; 28 | font-style: normal !important; 29 | font-weight: normal !important; 30 | font-variant: normal !important; 31 | text-transform: none !important; 32 | speak: none; 33 | line-height: 1; 34 | -webkit-font-smoothing: antialiased; 35 | -moz-osx-font-smoothing: grayscale; 36 | } 37 | 38 | .pct-arrow1:before { 39 | content: '\61'; 40 | } 41 | 42 | .pct-arrow2:before { 43 | content: '\62'; 44 | } 45 | 46 | .pct-arrow3:before { 47 | content: '\63'; 48 | } 49 | 50 | .pct-arrow4:before { 51 | content: '\64'; 52 | } 53 | 54 | .pct-chat1:before { 55 | content: '\65'; 56 | } 57 | 58 | .pct-chat2:before { 59 | content: '\66'; 60 | } 61 | 62 | .pct-chat3:before { 63 | content: '\67'; 64 | } 65 | 66 | .pct-chat4:before { 67 | content: '\68'; 68 | } 69 | 70 | .pct-loader1:before { 71 | content: '\69'; 72 | } 73 | 74 | .pct-arrow-sharp1:before { 75 | content: '\6a'; 76 | } 77 | 78 | .pct-arrow-sharp2:before { 79 | content: '\6b'; 80 | } 81 | 82 | .pct-arrow-sharp3:before { 83 | content: '\6c'; 84 | } 85 | 86 | .pct-arrow-sharp4:before { 87 | content: '\6d'; 88 | } 89 | -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/_theme-font.scss: -------------------------------------------------------------------------------- 1 | /* devanagari */ 2 | /*@font-face { 3 | font-family: 'Poppins'; 4 | font-style: normal; 5 | font-weight: 400; 6 | src: local('Poppins Regular'), local('Poppins-Regular'), url(./fonts/poppins/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2'); 7 | unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; 8 | }*/ 9 | /* latin-ext */ 10 | @font-face { 11 | font-family: 'Poppins'; 12 | font-style: normal; 13 | font-weight: 400; 14 | src: local('Poppins Regular'), local('Poppins-Regular'), url(./fonts/poppins/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2'); 15 | unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; 16 | } 17 | /* latin */ 18 | @font-face { 19 | font-family: 'Poppins'; 20 | font-style: normal; 21 | font-weight: 400; 22 | src: local('Poppins Regular'), local('Poppins-Regular'), url(./fonts/poppins/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2'); 23 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, 24 | U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 25 | } 26 | /* devanagari */ 27 | @font-face { 28 | font-family: 'Poppins'; 29 | font-style: normal; 30 | font-weight: 500; 31 | src: local('Poppins Medium'), local('Poppins-Medium'), url(./fonts/poppins/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2) format('woff2'); 32 | unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; 33 | } 34 | /* latin-ext */ 35 | @font-face { 36 | font-family: 'Poppins'; 37 | font-style: normal; 38 | font-weight: 500; 39 | src: local('Poppins Medium'), local('Poppins-Medium'), url(./fonts/poppins/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2'); 40 | unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; 41 | } 42 | /* latin */ 43 | @font-face { 44 | font-family: 'Poppins'; 45 | font-style: normal; 46 | font-weight: 500; 47 | src: local('Poppins Medium'), local('Poppins-Medium'), url(./fonts/poppins/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2'); 48 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, 49 | U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 50 | } 51 | /* devanagari */ 52 | @font-face { 53 | font-family: 'Poppins'; 54 | font-style: normal; 55 | font-weight: 600; 56 | src: local('Poppins SemiBold'), local('Poppins-SemiBold'), url(./fonts/poppins/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2) format('woff2'); 57 | unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; 58 | } 59 | /* latin-ext */ 60 | @font-face { 61 | font-family: 'Poppins'; 62 | font-style: normal; 63 | font-weight: 600; 64 | src: local('Poppins SemiBold'), local('Poppins-SemiBold'), url(./fonts/poppins/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2'); 65 | unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; 66 | } 67 | /* latin */ 68 | @font-face { 69 | font-family: 'Poppins'; 70 | font-style: normal; 71 | font-weight: 600; 72 | src: local('Poppins SemiBold'), local('Poppins-SemiBold'), url(./fonts/poppins/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2'); 73 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, 74 | U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 75 | } 76 | -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/Flaticon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/Flaticon.eot -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/Flaticon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/Flaticon.ttf -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/Flaticon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/Flaticon.woff -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/Flaticon.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/Flaticon.woff2 -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/cryptocoins.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/cryptocoins.ttf -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/cryptocoins.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/cryptocoins.woff -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/cryptocoins.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/cryptocoins.woff2 -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/fa-brands-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/fa-brands-400.eot -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/fa-brands-400.ttf -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/fa-brands-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/fa-brands-400.woff -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/fa-brands-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/fa-brands-400.woff2 -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/fa-regular-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/fa-regular-400.eot -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/fa-regular-400.ttf -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/fa-regular-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/fa-regular-400.woff -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/fa-regular-400.woff2 -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/fa-solid-900.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/fa-solid-900.eot -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/fa-solid-900.ttf -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/fa-solid-900.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/fa-solid-900.woff -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/fa-solid-900.woff2 -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/feather.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/feather.eot -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/feather.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/feather.ttf -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/feather.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/feather.woff -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/pct.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/pct.eot -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/pct.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by Fontastic.me 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/pct.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/pct.ttf -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/pct.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/pct.woff -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/poppins/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/poppins/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2 -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/poppins/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/poppins/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2 -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/poppins/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/poppins/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2 -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/poppins/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/poppins/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2 -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/poppins/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/poppins/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2 -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/poppins/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/poppins/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2 -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/poppins/pxiEyp8kv8JHgFVrJJfecg.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/poppins/pxiEyp8kv8JHgFVrJJfecg.woff2 -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/font/fonts/poppins/pxiEyp8kv8JHgFVrJJnecmNE.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/f8470bfe49d0ef4fb332c81275643a802c03a9e0/react-ui/src/assets/scss/partials/font/fonts/poppins/pxiEyp8kv8JHgFVrJJnecmNE.woff2 -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/mixins/_alert.scss: -------------------------------------------------------------------------------- 1 | @mixin alert-variant-pc($background, $border, $color) { 2 | color: $color; 3 | border-color: $border; 4 | hr { 5 | border-top-color: darken($border, 5%); 6 | } 7 | 8 | .alert-link { 9 | color: darken($color, 10%); 10 | } 11 | } 12 | .swal-footer { 13 | text-align: center; 14 | } 15 | -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | /* Button variants 2 | Easily pump out default styles, as well as :hover, :focus, :active, 3 | and disabled options for all buttons */ 4 | @mixin button-variant-pc( 5 | $background, 6 | $border, 7 | $hover-background: darken($background, 7.5%), 8 | $hover-border: darken($border, 10%), 9 | $active-background: darken($background, 10%), 10 | $active-border: darken($border, 12.5%) 11 | ) { 12 | color: color-yiq($background); 13 | background-color: $border; 14 | border-color: $border; 15 | 16 | &:hover { 17 | color: color-yiq($hover-background); 18 | background-color: $hover-background; 19 | border-color: $hover-border; 20 | } 21 | 22 | &.focus, 23 | &:focus { 24 | } 25 | 26 | &.disabled, 27 | &:disabled { 28 | color: color-yiq($background); 29 | background-color: $background; 30 | border-color: $border; 31 | } 32 | 33 | &:not(:disabled):not(.disabled).active, 34 | &:not(:disabled):not(.disabled):active, 35 | .show > &.dropdown-toggle { 36 | color: color-yiq($active-background); 37 | background-color: $active-background; 38 | border-color: $active-border; 39 | 40 | &:focus { 41 | } 42 | } 43 | } 44 | @mixin button-outline-variant-pc($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { 45 | color: $color; 46 | background-color: transparent; 47 | background-image: none; 48 | border-color: $color; 49 | 50 | &:hover { 51 | color: color-yiq($color); 52 | background-color: $active-background; 53 | border-color: $active-border; 54 | } 55 | 56 | &.focus, 57 | &:focus { 58 | } 59 | 60 | &.disabled, 61 | &:disabled { 62 | color: $color; 63 | background-color: transparent; 64 | } 65 | 66 | &:not(:disabled):not(.disabled).active, 67 | &:not(:disabled):not(.disabled):active, 68 | .show > &.dropdown-toggle { 69 | color: color-yiq($active-background); 70 | background-color: $active-background; 71 | border-color: $active-border; 72 | 73 | &:focus { 74 | } 75 | } 76 | } 77 | @mixin button-glow-variant-pc($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { 78 | box-shadow: 0 1px 6px 2px transparentize($color, 0.44), 0 6px 11px 2px transparentize($color, 0.8); 79 | &:hover { 80 | box-shadow: 0 1px 4px 2px transparentize($color, 0.44), 0 4px 9px 2px transparentize($color, 0.9); 81 | } 82 | &:not(:disabled):not(.disabled).active, 83 | &:not(:disabled):not(.disabled):active:focus, 84 | .show > &.dropdown-toggle, 85 | &.active, 86 | &:focus { 87 | box-shadow: none; 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/mixins/_function.scss: -------------------------------------------------------------------------------- 1 | @function color-yiq($color) { 2 | $r: red($color); 3 | $g: green($color); 4 | $b: blue($color); 5 | $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000; 6 | @if ($yiq >= $yiq-contrasted-threshold) { 7 | @return $yiq-dark-color; 8 | } @else { 9 | @return $yiq-light-color; 10 | } 11 | } 12 | @function theme-color($key: 'primary') { 13 | @return map-get($theme-colors, $key); 14 | } 15 | @function theme-color-level($color-name: 'primary', $level: 0) { 16 | $color: theme-color($color-name); 17 | $color-base: if($level > 0, $yiq-dark-color, $yiq-light-color); 18 | $level: abs($level); 19 | @return mix($color-base, $color, $level * $theme-color-interval); 20 | } 21 | -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/mixins/_pagination.scss: -------------------------------------------------------------------------------- 1 | /* Pagination */ 2 | 3 | @mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { 4 | .page-link { 5 | padding: $padding-y $padding-x; 6 | font-size: $font-size; 7 | line-height: $line-height; 8 | } 9 | 10 | .page-item { 11 | &:first-child { 12 | .page-link { 13 | @include border-left-radius($border-radius); 14 | } 15 | } 16 | &:last-child { 17 | .page-link { 18 | @include border-right-radius($border-radius); 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/theme-elements/_authentication.scss: -------------------------------------------------------------------------------- 1 | /** ===================== 2 | Authentication css start 3 | ========================== **/ 4 | .auth-wrapper { 5 | position: relative; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | overflow: hidden; 10 | min-width: 100%; 11 | min-height: 100vh; 12 | a, 13 | p > a { 14 | color: $theme-heading-color; 15 | font-weight: 600; 16 | } 17 | .btn-auth-gen { 18 | .btn-icon { 19 | width: 140px; 20 | height: 140px; 21 | display: flex; 22 | align-items: center; 23 | justify-content: center; 24 | font-size: 45px; 25 | 26 | small { 27 | font-size: 15px; 28 | } 29 | } 30 | } 31 | .input-group { 32 | background: transparent; 33 | } 34 | .card { 35 | margin-bottom: 0; 36 | } 37 | 38 | > div { 39 | z-index: 5; 40 | } 41 | 42 | .auth-content { 43 | position: relative; 44 | width: 390px; 45 | padding: 15px; 46 | z-index: 5; 47 | &.multyform, 48 | &.subscribe { 49 | width: 750px; 50 | } 51 | } 52 | @media only screen and (max-width: 768px) { 53 | max-width: 360px; 54 | } 55 | @media only screen and (max-width: 575px) { 56 | .card { 57 | .card-body { 58 | padding: 30px 15px; 59 | } 60 | } 61 | } 62 | 63 | .auth-icon { 64 | font-size: 30px; 65 | &:before { 66 | background: $theme-color; 67 | background-clip: inherit; 68 | -webkit-background-clip: text; 69 | -webkit-text-fill-color: transparent; 70 | } 71 | } 72 | 73 | &.offline { 74 | background-image: none; 75 | 76 | &:before { 77 | display: none; 78 | } 79 | } 80 | 81 | .auth-bg { 82 | .r { 83 | position: absolute; 84 | width: 300px; 85 | height: 300px; 86 | border-radius: 50%; 87 | 88 | &:first-child { 89 | top: -100px; 90 | right: -100px; 91 | background: $theme-color; 92 | } 93 | 94 | &:last-child { 95 | left: -100px; 96 | bottom: -100px; 97 | background: $theme-color2; 98 | } 99 | 100 | &.s { 101 | width: 20px; 102 | height: 20px; 103 | &:nth-child(2) { 104 | top: 150px; 105 | right: -150px; 106 | background: $primary-color; 107 | } 108 | 109 | &:nth-child(3) { 110 | left: -150px; 111 | bottom: 150px; 112 | background: $success-color; 113 | } 114 | } 115 | 116 | &:nth-child(odd) { 117 | animation: floating 7s infinite; 118 | } 119 | 120 | &:nth-child(even) { 121 | animation: floating 9s infinite; 122 | } 123 | } 124 | } 125 | } 126 | /* image variant start */ 127 | .aut-bg-img { 128 | background-size: cover; 129 | /*background-image: url('../../../images/bg-images/bg4.jpg');*/ // amit images 130 | background-repeat: no-repeat; 131 | background-position: center; 132 | } 133 | .aut-bg-img-side { 134 | p { 135 | line-height: 2; 136 | } 137 | } 138 | .aut-bg-img, 139 | .aut-bg-img-side { 140 | .custom-select, 141 | .form-control { 142 | background: transparent; 143 | } 144 | } 145 | .auth-tabs { 146 | .card { 147 | // border-right: 10px; 148 | } 149 | .nav-pills { 150 | // margin-top: -80px; 151 | } 152 | .tab-content { 153 | overflow: hidden; 154 | position: relative; 155 | .tab-pane > * { 156 | position: relative; 157 | z-index: 5; 158 | } 159 | .auth-icon { 160 | position: absolute; 161 | bottom: 0; 162 | right: 0; 163 | font-size: 180px; 164 | transform: rotate(-30deg); 165 | z-index: 1; 166 | opacity: 0.2; 167 | } 168 | } 169 | } 170 | /* image varient start */ 171 | @keyframes floating { 172 | from { 173 | transform: rotate(0deg) translate(-10px) rotate(0deg); 174 | } 175 | 176 | to { 177 | transform: rotate(360deg) translate(-10px) rotate(-360deg); 178 | } 179 | } 180 | /**====== Authentication css end ======**/ 181 | -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/theme-elements/_breadcrumb-pagination.scss: -------------------------------------------------------------------------------- 1 | /** ===================== 2 | Breadcrumbs & Pagination css start 3 | ========================== **/ 4 | /* Breadcrumbs */ 5 | 6 | .breadcrumb { 7 | background-color: $theme-background; 8 | border-radius: 0; 9 | } 10 | 11 | .breadcrumb-item { 12 | + .breadcrumb-item { 13 | color: $primary-color; 14 | &::before { 15 | /* content: $breadcrumb-divider; */ 16 | } 17 | } 18 | 19 | &.active { 20 | color: $theme-heading-color; 21 | } 22 | } 23 | 24 | /* pagination */ 25 | 26 | .page-item { 27 | &.active .page-link { 28 | color: #fff; 29 | background-color: $primary-color; 30 | border-color: $primary-color; 31 | } 32 | } 33 | /**====== Breadcrumbs & Pagination css end ======**/ 34 | -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/theme-elements/_data-tables.scss: -------------------------------------------------------------------------------- 1 | /** ===================== 2 | Data Tables css start 3 | ========================== **/ 4 | .table { 5 | color: #888; 6 | td, 7 | th { 8 | border-top: 1px solid $theme-border; 9 | white-space: nowrap; 10 | padding: 1.05rem 0.75rem; 11 | } 12 | 13 | thead th { 14 | border-bottom: 1px solid $theme-border; 15 | } 16 | 17 | tbody + tbody { 18 | border-top: 2px solid $theme-border; 19 | } 20 | 21 | &.table-sm { 22 | th, 23 | td { 24 | padding: 0.35rem; 25 | } 26 | } 27 | } 28 | /* Border versions */ 29 | 30 | .table-bordered { 31 | border: 1px solid $theme-border; 32 | 33 | td, 34 | th { 35 | border: 1px solid $theme-border; 36 | } 37 | } 38 | /* Zebra-striping */ 39 | 40 | .table-striped { 41 | tbody tr:nth-of-type(2n + 1) { 42 | background-color: transparentize($primary-color, 0.95); 43 | } 44 | } 45 | /* Hover effect */ 46 | 47 | .table-hover { 48 | tbody tr { 49 | &:hover { 50 | background-color: transparentize($primary-color, 0.95); 51 | } 52 | } 53 | } 54 | /* Table backgrounds */ 55 | 56 | .table { 57 | .thead-dark { 58 | th { 59 | color: #fff; 60 | background-color: $dark-color; 61 | border-color: darken($dark-color, 10%); 62 | } 63 | } 64 | } 65 | 66 | .table-dark { 67 | color: #fff; 68 | background-color: $dark-color; 69 | 70 | td, 71 | th, 72 | thead th { 73 | border-color: darken($dark-color, 10%); 74 | } 75 | 76 | &.table-striped { 77 | tbody tr:nth-of-type(odd) { 78 | background-color: darken($dark-color, 2%); 79 | } 80 | } 81 | 82 | &.table-hover { 83 | tbody tr { 84 | &:hover { 85 | background-color: darken($dark-color, 5%); 86 | } 87 | } 88 | } 89 | } 90 | /* fixed header position */ 91 | 92 | table.dataTable.fixedHeader-floating { 93 | top: 0 !important; 94 | @media screen and (max-width: 992px) { 95 | display: none !important; 96 | } 97 | } 98 | 99 | @media screen and (max-width: 992px) { 100 | .fixedHeader-locked { 101 | display: none !important; 102 | } 103 | } 104 | 105 | /** ===================== 106 | Foo-table css start 107 | ========================== **/ 108 | 109 | .footable .pagination > { 110 | .active > { 111 | a, 112 | span { 113 | background-color: $primary-color; 114 | border-color: $primary-color; 115 | 116 | &:focus, 117 | &:hover { 118 | background-color: $primary-color; 119 | border-color: $primary-color; 120 | } 121 | } 122 | } 123 | 124 | li > { 125 | a, 126 | span { 127 | color: #222; 128 | } 129 | } 130 | } 131 | 132 | .footable-details.table, 133 | .footable.table { 134 | margin-bottom: 0; 135 | } 136 | 137 | table { 138 | &.footable > tfoot > tr.footable-paging > td > span.label { 139 | margin-bottom: 0; 140 | } 141 | 142 | &.footable-paging-center > tfoot > tr.footable-paging > td { 143 | padding-bottom: 0; 144 | } 145 | } 146 | 147 | .table-columned > { 148 | tbody > { 149 | tr > { 150 | td { 151 | border: 0; 152 | border-left: 1px solid $theme-border; 153 | } 154 | 155 | th { 156 | border: 0; 157 | } 158 | } 159 | } 160 | } 161 | /**====== Foo-table css end ======**/ 162 | /**====== Data Tables css end ======**/ 163 | -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/theme-elements/_form.scss: -------------------------------------------------------------------------------- 1 | /** ===================== 2 | Form Componant css start 3 | ========================== **/ 4 | 5 | .custom-select, 6 | .form-control { 7 | background: $theme-background; 8 | padding: 10px 20px; 9 | font-size: 14px; 10 | height: auto; 11 | 12 | &.form-control-lg { 13 | font-size: 1.25rem; 14 | } 15 | 16 | &.form-control-sm { 17 | height: calc(1.8125rem + 2px); 18 | font-size: 0.875rem; 19 | } 20 | 21 | &.form-control-range { 22 | box-shadow: none; 23 | } 24 | 25 | &:focus { 26 | background: $theme-background; 27 | } 28 | 29 | &::-moz-placeholder { 30 | color: #aaaeb3; 31 | opacity: 1; 32 | } 33 | 34 | &:-ms-input-placeholder { 35 | color: #aaaeb3; 36 | } 37 | 38 | &::-webkit-input-placeholder { 39 | color: #aaaeb3; 40 | } 41 | } 42 | /* input group start */ 43 | 44 | .input-group { 45 | background: $theme-background; 46 | 47 | .input-group-text { 48 | padding-left: 15px; 49 | padding-right: 15px; 50 | background: transparent; 51 | i { 52 | font-size: 20px; 53 | } 54 | } 55 | 56 | .custom-file-label { 57 | margin-bottom: 0; 58 | } 59 | 60 | .btn { 61 | margin-bottom: 0; 62 | margin-right: 0; 63 | } 64 | } 65 | 66 | .cust-file-button { 67 | .custom-file-label { 68 | height: calc(2.25rem + 8px); 69 | line-height: 2.5; 70 | 71 | &::after { 72 | padding: 0.775rem 0.75rem; 73 | height: 2.65rem; 74 | } 75 | } 76 | } 77 | 78 | .custom-select { 79 | height: calc(2.25rem + 9px); 80 | } 81 | /* input group End */ 82 | /**====== Form Componant css end ======**/ 83 | select.form-control:not([size]):not([multiple]) { 84 | height: calc(2.55rem + 2px); 85 | } 86 | .input-group-lg > .input-group-append > select.btn:not([size]):not([multiple]), 87 | .input-group-lg > .input-group-append > select.input-group-text:not([size]):not([multiple]), 88 | .input-group-lg > .input-group-prepend > select.btn:not([size]):not([multiple]), 89 | .input-group-lg > .input-group-prepend > select.input-group-text:not([size]):not([multiple]), 90 | .input-group-lg > select.form-control:not([size]):not([multiple]), 91 | select.form-control-lg:not([size]):not([multiple]) { 92 | height: calc(3.375rem + 2px); 93 | } 94 | 95 | .minicolors { 96 | .form-control { 97 | padding: 6px 12px 5px 44px; 98 | } 99 | } 100 | /* form-select */ 101 | 102 | .select2-container { 103 | width: 100% !important; 104 | } 105 | .tt-menu { 106 | position: absolute; 107 | top: 100%; 108 | left: 0; 109 | z-index: 1000; 110 | display: none; 111 | float: left; 112 | min-width: 160px; 113 | padding: 5px 0; 114 | margin: 2px 0 0; 115 | list-style: none; 116 | font-size: 14px; 117 | background-color: #ffffff; 118 | border: 1px solid #cccccc; 119 | border-radius: 4px; 120 | box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); 121 | background-clip: padding-box; 122 | cursor: pointer; 123 | } 124 | .bootstrap-tagsinput { 125 | width: 100%; 126 | } 127 | .custom-file-label { 128 | height: auto; 129 | &:after { 130 | height: auto; 131 | padding: 0.55rem 0.75rem; 132 | } 133 | } 134 | .form-control.is-invalid, 135 | .was-validated .form-control:invalid, 136 | .was-validated .form-control:valid, 137 | .form-control.is-valid { 138 | background-position: calc(100% - 10px) calc(0.375em + 0.4875rem); 139 | } 140 | 141 | .was-validated .form-control:invalid ~ .invalid-feedback { 142 | background: #fff; 143 | margin-top: 0; 144 | padding-top: 0.25em; 145 | } 146 | -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/theme-elements/_labels-badges.scss: -------------------------------------------------------------------------------- 1 | /** ===================== 2 | Label & Badges css start 3 | ========================== **/ 4 | 5 | .label { 6 | padding: 4px 10px; 7 | min-height: auto; 8 | position: relative; 9 | margin-right: 5px; 10 | margin-bottom: 5px; 11 | @each $value in $color-bt-name { 12 | $i: index($color-bt-name, $value); 13 | 14 | &.label-#{$value} { 15 | background: nth($color-bt-color, $i); 16 | color: #ffffff; 17 | } 18 | } 19 | } 20 | /**====== Label & Badges css end ======**/ 21 | -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/theme-elements/_tooltip.scss: -------------------------------------------------------------------------------- 1 | /** ===================== 2 | tooltip css start 3 | ========================== **/ 4 | .tooltip { 5 | &.show { 6 | opacity: 1; 7 | } 8 | 9 | .arrow { 10 | position: absolute; 11 | display: block; 12 | 13 | &::before { 14 | content: '\6d'; 15 | left: 0; 16 | font-family: 'pct'; 17 | font-size: 20px; 18 | line-height: 0.3; 19 | color: #000; 20 | border: none; 21 | text-shadow: 0 2px 3px rgba(220, 220, 220, 0.46); 22 | } 23 | } 24 | } 25 | .bs-tooltip-right { 26 | .arrow { 27 | &::before { 28 | content: '\6a'; 29 | left: -7px; 30 | top: 2.6px; 31 | border: none; 32 | text-shadow: -2px 0 3px rgba(220, 220, 220, 0.46); 33 | } 34 | } 35 | 36 | .tooltip-inner { 37 | border-radius: 15px 20px 20px 15px; 38 | } 39 | } 40 | 41 | .bs-tooltip-bottom { 42 | .arrow { 43 | &::before { 44 | content: '\6c'; 45 | border: none; 46 | text-shadow: 0 -2px 3px rgba(220, 220, 220, 0.46); 47 | } 48 | } 49 | } 50 | 51 | .bs-tooltip-left { 52 | .arrow { 53 | &::before { 54 | content: '\6b'; 55 | left: -8px; 56 | top: 3.6px; 57 | border: none; 58 | text-shadow: 2px 0 3px rgba(220, 220, 220, 0.46); 59 | } 60 | } 61 | .tooltip-inner { 62 | border-radius: 20px 15px 15px 20px; 63 | } 64 | } 65 | 66 | .tooltip-inner { 67 | border-radius: 20px; 68 | padding: 6px 15px; 69 | box-shadow: 0 0 15px #dcdcdc; 70 | } 71 | /**====== tooltip css end ======**/ 72 | -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/third-party/_datatables.scss: -------------------------------------------------------------------------------- 1 | .dataTables_wrapper { 2 | .row { 3 | margin: auto 0; 4 | } 5 | 6 | .dataTables_length, 7 | .dataTables_filter { 8 | label { 9 | margin-bottom: 10px; 10 | color: #888; 11 | select { 12 | margin: auto 5px; 13 | } 14 | } 15 | } 16 | 17 | &.form-inline { 18 | display: block; 19 | } 20 | 21 | table { 22 | &.dataTable { 23 | width: 100% !important; 24 | td, 25 | th { 26 | padding: 1.05rem 0.75rem; 27 | } 28 | 29 | thead { 30 | th { 31 | border-bottom: 1px solid #eaeaea; 32 | } 33 | } 34 | 35 | tfoot { 36 | th { 37 | border-top: 1px solid #eaeaea; 38 | } 39 | } 40 | 41 | &.dtr-inline.collapsed > tbody > tr[role='row'] > td:first-child:before, 42 | .dtr-inline.collapsed > tbody > tr[role='row'] > th:first-child:before { 43 | top: 18px; 44 | } 45 | } 46 | } 47 | 48 | .dataTables_paginate { 49 | .paginate_button { 50 | border: 1px solid #dee2e6; 51 | border-radius: 0; 52 | margin-left: 0; 53 | min-width: auto; 54 | 55 | &.disabled { 56 | border-color: #dee2e6; 57 | &:hover { 58 | border-color: #dee2e6; 59 | background-color: #fff; 60 | } 61 | a { 62 | color: #6c757d; 63 | cursor: auto; 64 | } 65 | } 66 | 67 | &:first-child { 68 | border-top-left-radius: 0.25rem; 69 | border-bottom-left-radius: 0.25rem; 70 | } 71 | &:last-child { 72 | border-top-right-radius: 0.25rem; 73 | border-bottom-right-radius: 0.25rem; 74 | } 75 | &:hover { 76 | border-color: #dee2e6; 77 | background: #e9ecef; 78 | } 79 | 80 | &.active { 81 | background: #04a9f5; 82 | border-color: #04a9f5; 83 | a { 84 | color: #fff; 85 | } 86 | &:hover { 87 | background: #04a9f5; 88 | border-color: #04a9f5; 89 | } 90 | } 91 | } 92 | } 93 | 94 | .DTFC_ScrollWrapper { 95 | .DTFC_RightHeadWrapper, 96 | .DTFC_RightBodyWrapper, 97 | .DTFC_RightFootWrapper, 98 | .DTFC_LeftHeadWrapper, 99 | .DTFC_LeftBodyWrapper, 100 | .DTFC_LeftFootWrapper { 101 | background-color: #ffffff; 102 | } 103 | } 104 | } 105 | table.dataTable thead .sorting { 106 | width: auto !important; 107 | min-width: auto !important; 108 | } 109 | -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/third-party/_google-map.scss: -------------------------------------------------------------------------------- 1 | .map { 2 | position: relative !important; 3 | } 4 | -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/third-party/_ngx-perfect-scrollbar.scss: -------------------------------------------------------------------------------- 1 | .datta-scroll, 2 | .scroll-widget, 3 | .main-chat-cont, 4 | .config-scroll, 5 | .main-friend-list { 6 | .ps__rail-y { 7 | &:hover > .ps__thumb-y, 8 | &:focus > .ps__thumb-y, 9 | &.ps--clicking .ps__thumb-y { 10 | background-color: #a7a7a7; 11 | width: 5px; 12 | } 13 | } 14 | .ps__thumb-y { 15 | background-color: #aaa; 16 | border-radius: 6px; 17 | width: 5px; 18 | right: 0; 19 | } 20 | } 21 | 22 | perfect-scrollbar.datta-scroll > .ps, 23 | perfect-scrollbar.scroll-widget > .ps, 24 | perfect-scrollbar.main-chat-cont > .ps, 25 | perfect-scrollbar.config-scroll > .ps, 26 | perfect-scrollbar.main-friend-list > .ps { 27 | &.ps--active-y > .ps__rail-y { 28 | width: 5px; 29 | &:hover, 30 | &.ps--clicking { 31 | width: 5px; 32 | } 33 | } 34 | &.ps--scrolling-y > .ps__rail-y, 35 | &.ps--scrolling-x > .ps__rail-x { 36 | opacity: 0.4; 37 | background-color: transparent; 38 | } 39 | &.ps--active-y > .ps__rail-y { 40 | &:hover, 41 | &.ps--clicking { 42 | width: 5px; 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/third-party/_react-full-screen.scss: -------------------------------------------------------------------------------- 1 | :not(:root):-webkit-full-screen::backdrop { 2 | background: transparent !important; 3 | } 4 | -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/third-party/_third-party.scss: -------------------------------------------------------------------------------- 1 | @import '~react-perfect-scrollbar/dist/css/styles.css'; 2 | @import '~nvd3/build/nv.d3.css'; 3 | 4 | @import 'ngx-perfect-scrollbar'; 5 | @import 'react-full-screen'; 6 | @import 'css-animator'; 7 | @import 'datatables'; 8 | @import 'google-map'; 9 | @import 'react-bootstrap/react-bootstrap'; 10 | 11 | .dropzone { 12 | .dz-progress { 13 | display: none; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/third-party/react-bootstrap/_header.scss: -------------------------------------------------------------------------------- 1 | .pcoded-header { 2 | .dropdown { 3 | height: 70px; 4 | .dropdown-toggle { 5 | margin: -2px 0 0 4px; 6 | } 7 | } 8 | .btn { 9 | padding: 0; 10 | margin-bottom: 0; 11 | margin-right: 0; 12 | border: none; 13 | &:after { 14 | right: -12px !important; 15 | } 16 | &:focus, 17 | &:active, 18 | &:hover { 19 | text-decoration: none; 20 | } 21 | } 22 | .main-search { 23 | margin-left: 5px; 24 | .input-group-text { 25 | line-height: 1; 26 | } 27 | } 28 | 29 | .btn > i { 30 | margin-right: -12px; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /react-ui/src/assets/scss/partials/third-party/react-bootstrap/react-bootstrap.scss: -------------------------------------------------------------------------------- 1 | @import 'header'; 2 | -------------------------------------------------------------------------------- /react-ui/src/assets/scss/style.scss: -------------------------------------------------------------------------------- 1 | /**====================================================================== 2 | ========================================================================= 3 | Template Name: Datta Able Admin Template 4 | Author: Codedthemes 5 | supports: https://codedthemes.support-hub.io/ 6 | File: style.css 7 | ========================================================================= 8 | ========================================================================= 9 | == Table of Contents== 10 | - Generic classes 11 | - Margin, Padding, Font class, text align, position, floating, overflow, background class, text color, display class, boarder class 12 | - Theme Elements 13 | - Accordion, Button, tabs, typography, buttons, box shadow, Lable & Badges, Alert, Pagination, Breadcumb, Cards, Collapse, 14 | - Carousel, Grid, Progress, Model, tooltip, popover, Datepicker, Gridstack, lightbox, notification, Nestable, pnotify, rating, 15 | - Rangeslider, Slider, Syntax Highlighter, Tour, Treeview, Toolbar, Session Timeout, Session idle Timeout, offline, Animation 16 | - Forms 17 | - Forms Elements, Advance Form Control, Validation, Masking, Wizard, Picker, Select 18 | - Pages 19 | - Chat, authentication, Maintenance, Maps, Landingpage messages, task, Todo, Notes, Charts, Icons, Gallery, Editors, 20 | - Invoice, Full Calender, File Upload, 21 | ================================================================================= 22 | =================================================================================== */ 23 | @import '~bootstrap/dist/css/bootstrap'; 24 | // General theme contents 25 | @import 'partials/variables'; 26 | @import 'partials/general'; 27 | @import 'partials/generic'; 28 | @import 'partials/mixins/function'; 29 | 30 | // icon 31 | @import 'partials/font/next-icon'; 32 | @import 'partials/font/feather'; 33 | @import 'partials/font/fontawesome'; 34 | @import 'partials/font/flaticon'; 35 | @import 'partials/font/cryptofont'; 36 | 37 | // important Element 38 | @import 'partials/menu/menu-lite'; 39 | @import 'partials/widget/widget'; 40 | 41 | // Theme Element 42 | @import 'partials/theme-elements/form'; 43 | @import 'partials/theme-elements/labels-badges'; 44 | @import 'partials/theme-elements/data-tables'; 45 | @import 'partials/theme-elements/authentication'; 46 | @import 'partials/theme-elements/button'; 47 | @import 'partials/theme-elements/breadcrumb-pagination'; 48 | 49 | // Other 50 | @import 'partials/other/chat'; 51 | @import 'partials/third-party/third-party'; 52 | -------------------------------------------------------------------------------- /react-ui/src/components/Auth/AuthGuard.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Redirect } from 'react-router-dom'; 3 | import { useSelector } from 'react-redux'; 4 | 5 | const AuthGuard = ({ children }) => { 6 | const account = useSelector((state) => state.account); 7 | const { isLoggedIn } = account; 8 | 9 | if (!isLoggedIn) { 10 | return ; 11 | } 12 | 13 | return children; 14 | }; 15 | 16 | export default AuthGuard; 17 | -------------------------------------------------------------------------------- /react-ui/src/components/Auth/GuestGuard.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Redirect } from 'react-router-dom'; 3 | import { useSelector } from 'react-redux'; 4 | import { BASE_URL } from '../../config/constant'; 5 | 6 | const GuestGuard = ({ children }) => { 7 | const account = useSelector((state) => state.account); 8 | const { isLoggedIn } = account; 9 | 10 | if (isLoggedIn) { 11 | return ; 12 | } 13 | 14 | return {children}; 15 | }; 16 | 17 | export default GuestGuard; 18 | -------------------------------------------------------------------------------- /react-ui/src/components/Card/MainCard.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Dropdown, Card, Collapse } from 'react-bootstrap'; 3 | import { Link } from 'react-router-dom'; 4 | 5 | import useWindowSize from '../../hooks/useWindowSize'; 6 | 7 | const MainCard = (props) => { 8 | const { isOption, title, children, cardClass, optionClass } = props; 9 | 10 | const [fullCard, setFullCard] = useState(false); 11 | const [collapseCard, setCollapseCard] = useState(false); 12 | const [loadCard, setloadCard] = useState(false); 13 | const [cardRemove, setCardRemove] = useState(false); 14 | 15 | const windowSize = useWindowSize(); 16 | 17 | const cardReloadHandler = () => { 18 | setloadCard(true); 19 | setInterval(() => { 20 | setloadCard(false); 21 | }, 3000); 22 | }; 23 | 24 | const cardRemoveHandler = () => { 25 | setCardRemove(true); 26 | }; 27 | 28 | let fullScreenStyle, loader, cardHeaderRight, cardHeader; 29 | let card = ''; 30 | let mainCardClass = []; 31 | 32 | if (isOption) { 33 | cardHeaderRight = ( 34 |
35 | 36 | 37 | 38 | 39 | 40 | setFullCard(!fullCard)}> 41 | 42 | {fullCard ? 'Restore' : 'Maximize'} 43 | 44 | setCollapseCard(!collapseCard)}> 45 | 46 | {collapseCard ? 'Expand' : 'Collapse'} 47 | 48 | 49 | 50 | Reload 51 | 52 | 53 | 54 | Remove 55 | 56 | 57 | 58 |
59 | ); 60 | } 61 | 62 | cardHeader = ( 63 | 64 | {title} 65 | {cardHeaderRight} 66 | 67 | ); 68 | 69 | if (fullCard) { 70 | mainCardClass = [...mainCardClass, 'full-card']; 71 | fullScreenStyle = { position: 'fixed', top: 0, left: 0, right: 0, width: windowSize.width, height: windowSize.height }; 72 | } 73 | 74 | if (loadCard) { 75 | mainCardClass = [...mainCardClass, 'card-load']; 76 | loader = ( 77 |
78 | 79 |
80 | ); 81 | } 82 | 83 | if (cardRemove) { 84 | mainCardClass = [...mainCardClass, 'd-none']; 85 | } 86 | 87 | if (cardClass) { 88 | mainCardClass = [...mainCardClass, cardClass]; 89 | } 90 | 91 | card = ( 92 | 93 | {cardHeader} 94 | 95 |
96 | {children} 97 |
98 | 99 | {loader} 100 | 101 | ); 102 | 103 | return {card}; 104 | }; 105 | 106 | export default MainCard; 107 | -------------------------------------------------------------------------------- /react-ui/src/components/Loader/Bar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Bar = ({ animationDuration, progress }) => { 4 | return ( 5 |
18 |
30 |
31 | ); 32 | }; 33 | 34 | export default Bar; 35 | -------------------------------------------------------------------------------- /react-ui/src/components/Loader/Container.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Container = ({ animationDuration, children, isFinished }) => { 4 | return ( 5 |
12 | {children} 13 |
14 | ); 15 | }; 16 | 17 | export default Container; 18 | -------------------------------------------------------------------------------- /react-ui/src/components/Loader/Loader.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Progress from './Progress'; 3 | 4 | const Loader = () => { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | }; 11 | 12 | export default Loader; 13 | -------------------------------------------------------------------------------- /react-ui/src/components/Loader/Progress.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { withNProgress } from '@tanem/react-nprogress'; 3 | 4 | import Bar from './Bar'; 5 | import Container from './Container'; 6 | import Spinner from './Spinner'; 7 | 8 | const Progress = ({ isFinished, progress, animationDuration }) => { 9 | return ( 10 | 11 | 12 | 13 | 14 | ); 15 | }; 16 | 17 | export default withNProgress(Progress); 18 | -------------------------------------------------------------------------------- /react-ui/src/components/Loader/Spinner.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Spinner = () => { 4 | return ( 5 |
14 |
27 |
28 | ); 29 | }; 30 | 31 | export default Spinner; 32 | -------------------------------------------------------------------------------- /react-ui/src/components/Widgets/Statistic/Notification.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Alert } from 'react-bootstrap'; 3 | 4 | const Notification = (props) => { 5 | return ( 6 | 7 | 8 | {props.message} 9 | 10 | Demo & Documentation 11 | 12 | 13 | 14 | ); 15 | }; 16 | 17 | export default Notification; 18 | -------------------------------------------------------------------------------- /react-ui/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 BASENAME = ''; // don't add '/' at end off BASENAME 9 | export const BASE_URL = '/app/dashboard/default'; 10 | export const BASE_TITLE = ' | React Datta Able '; 11 | export const API_SERVER = BACKEND_SERVER; 12 | 13 | export const CONFIG = { 14 | layout: 'vertical', // disable on free version 15 | subLayout: '', // disable on free version 16 | collapseMenu: false, // mini-menu 17 | layoutType: 'menu-dark', // disable on free version 18 | navIconColor: false, // disable on free version 19 | headerBackColor: 'header-default', // disable on free version 20 | navBackColor: 'navbar-default', // disable on free version 21 | navBrandColor: 'brand-default', // disable on free version 22 | navBackImage: false, // disable on free version 23 | rtlLayout: false, // disable on free version 24 | navFixedLayout: true, // disable on free version 25 | headerFixedLayout: false, // disable on free version 26 | boxLayout: false, // disable on free version 27 | navDropdownIcon: 'style1', // disable on free version 28 | navListIcon: 'style1', // disable on free version 29 | navActiveListColor: 'active-default', // disable on free version 30 | navListTitleColor: 'title-default', // disable on free version 31 | navListTitleHide: false, // disable on free version 32 | configBlock: true, // disable on free version 33 | layout6Background: 'linear-gradient(to right, #A445B2 0%, #D41872 52%, #FF0066 100%)', // disable on free version 34 | layout6BackSize: '' // disable on free version 35 | }; 36 | -------------------------------------------------------------------------------- /react-ui/src/contexts/ConfigContext.js: -------------------------------------------------------------------------------- 1 | import React, { createContext, useReducer } from 'react'; 2 | import * as actionType from '../store/actions'; 3 | import { CONFIG } from '../config/constant'; 4 | 5 | const initialState = { 6 | ...CONFIG, 7 | isOpen: [], //for active default menu 8 | isTrigger: [] //for active default menu, set blank for horizontal 9 | }; 10 | const ConfigContext = createContext(initialState); 11 | const { Provider } = ConfigContext; 12 | 13 | const ConfigProvider = ({ children }) => { 14 | let trigger = []; 15 | let open = []; 16 | 17 | const [state, dispatch] = useReducer((state, action) => { 18 | switch (action.type) { 19 | case actionType.COLLAPSE_MENU: 20 | return { 21 | ...state, 22 | collapseMenu: !state.collapseMenu 23 | }; 24 | case actionType.COLLAPSE_TOGGLE: 25 | if (action.menu.type === 'sub') { 26 | open = state.isOpen; 27 | trigger = state.isTrigger; 28 | 29 | const triggerIndex = trigger.indexOf(action.menu.id); 30 | if (triggerIndex > -1) { 31 | open = open.filter((item) => item !== action.menu.id); 32 | trigger = trigger.filter((item) => item !== action.menu.id); 33 | } 34 | 35 | if (triggerIndex === -1) { 36 | open = [...open, action.menu.id]; 37 | trigger = [...trigger, action.menu.id]; 38 | } 39 | } else { 40 | open = state.isOpen; 41 | const triggerIndex = state.isTrigger.indexOf(action.menu.id); 42 | trigger = triggerIndex === -1 ? [action.menu.id] : []; 43 | open = triggerIndex === -1 ? [action.menu.id] : []; 44 | } 45 | 46 | return { 47 | ...state, 48 | isOpen: open, 49 | isTrigger: trigger 50 | }; 51 | 52 | case actionType.NAV_COLLAPSE_LEAVE: 53 | if (action.menu.type === 'sub') { 54 | open = state.isOpen; 55 | trigger = state.isTrigger; 56 | 57 | const triggerIndex = trigger.indexOf(action.menu.id); 58 | if (triggerIndex > -1) { 59 | open = open.filter((item) => item !== action.menu.id); 60 | trigger = trigger.filter((item) => item !== action.menu.id); 61 | } 62 | return { 63 | ...state, 64 | isOpen: open, 65 | isTrigger: trigger 66 | }; 67 | } 68 | return { ...state }; 69 | case actionType.NAV_CONTENT_LEAVE: 70 | return { 71 | ...state, 72 | isOpen: open, 73 | isTrigger: trigger 74 | }; 75 | 76 | default: 77 | throw new Error(); 78 | } 79 | }, initialState); 80 | 81 | return {children}; 82 | }; 83 | 84 | export { ConfigContext, ConfigProvider }; 85 | -------------------------------------------------------------------------------- /react-ui/src/hooks/useOutsideClick.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | 3 | const useOutsideClick = (ref, callback) => { 4 | const handleClick = (e) => { 5 | if (ref.current && !ref.current.contains(e.target)) { 6 | callback(); 7 | } 8 | }; 9 | 10 | useEffect(() => { 11 | document.addEventListener('click', handleClick); 12 | return () => { 13 | document.removeEventListener('click', handleClick); 14 | }; 15 | }); 16 | }; 17 | 18 | export default useOutsideClick; 19 | -------------------------------------------------------------------------------- /react-ui/src/hooks/useScriptRef.js: -------------------------------------------------------------------------------- 1 | import { useRef, useEffect } from 'react'; 2 | 3 | const useScriptRef = () => { 4 | const scripted = useRef(true); 5 | 6 | useEffect( 7 | () => () => { 8 | scripted.current = false; 9 | }, 10 | [] 11 | ); 12 | 13 | return scripted; 14 | }; 15 | 16 | export default useScriptRef; 17 | -------------------------------------------------------------------------------- /react-ui/src/hooks/useWindowSize.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | 3 | const useWindowSize = () => { 4 | const [windowSize, setWindowSize] = useState({ 5 | width: undefined, 6 | height: undefined 7 | }); 8 | 9 | useEffect(() => { 10 | function handleResize() { 11 | setWindowSize({ 12 | width: window.innerWidth, 13 | height: window.innerHeight 14 | }); 15 | } 16 | window.addEventListener('resize', handleResize); 17 | handleResize(); 18 | 19 | return () => window.removeEventListener('resize', handleResize); 20 | }, []); 21 | 22 | return windowSize; 23 | }; 24 | 25 | export default useWindowSize; 26 | -------------------------------------------------------------------------------- /react-ui/src/index.js: -------------------------------------------------------------------------------- 1 | import 'react-app-polyfill/ie11'; 2 | import 'react-app-polyfill/stable'; 3 | 4 | import React from 'react'; 5 | import ReactDOM from 'react-dom'; 6 | 7 | import { Provider } from 'react-redux'; 8 | import { ConfigProvider } from './contexts/ConfigContext'; 9 | import { PersistGate } from 'redux-persist/integration/react'; 10 | 11 | import './index.scss'; 12 | import App from './App'; 13 | import reportWebVitals from './reportWebVitals'; 14 | import { store, persister } from './store'; 15 | 16 | ReactDOM.render( 17 | 18 | 19 | 20 | 21 | 22 | 23 | , 24 | document.getElementById('root') 25 | ); 26 | 27 | reportWebVitals(); 28 | -------------------------------------------------------------------------------- /react-ui/src/layouts/AdminLayout/Breadcrumb/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { ListGroup } from 'react-bootstrap'; 3 | import { Link } from 'react-router-dom'; 4 | 5 | import navigation from '../../../menu-items'; 6 | import { BASE_TITLE, BASENAME } from '../../../config/constant'; 7 | 8 | const Breadcrumb = () => { 9 | const [main, setMain] = useState([]); 10 | const [item, setItem] = useState([]); 11 | 12 | useEffect(() => { 13 | navigation.items.map((item, index) => { 14 | if (item.type && item.type === 'group') { 15 | getCollapse(item, index); 16 | } 17 | return false; 18 | }); 19 | }); 20 | 21 | const getCollapse = (item, index) => { 22 | if (item.children) { 23 | item.children.filter((collapse) => { 24 | if (collapse.type && collapse.type === 'collapse') { 25 | getCollapse(collapse, index); 26 | } else if (collapse.type && collapse.type === 'item') { 27 | if (document.location.pathname === BASENAME + collapse.url) { 28 | setMain(item); 29 | setItem(collapse); 30 | } 31 | } 32 | return false; 33 | }); 34 | } 35 | }; 36 | 37 | let mainContent, itemContent; 38 | let breadcrumbContent = ''; 39 | let title = ''; 40 | 41 | if (main && main.type === 'collapse') { 42 | mainContent = ( 43 | 44 | {main.title} 45 | 46 | ); 47 | } 48 | 49 | if (item && item.type === 'item') { 50 | title = item.title; 51 | itemContent = ( 52 | 53 | {title} 54 | 55 | ); 56 | 57 | if (item.breadcrumbs !== false) { 58 | breadcrumbContent = ( 59 |
60 |
61 |
62 |
63 |
64 |
{title}
65 |
66 | 67 | 68 | 69 | 70 | 71 | 72 | {mainContent} 73 | {itemContent} 74 | 75 |
76 |
77 |
78 |
79 | ); 80 | } 81 | 82 | document.title = title + BASE_TITLE; 83 | } 84 | 85 | return {breadcrumbContent}; 86 | }; 87 | 88 | export default Breadcrumb; 89 | -------------------------------------------------------------------------------- /react-ui/src/layouts/AdminLayout/NavBar/NavLeft/NavSearch/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | const NavSearch = (props) => { 5 | const { windowWidth } = props; 6 | const [isOpen, setIsOpen] = useState(windowWidth < 600); 7 | const [searchString, setSearchString] = useState(windowWidth < 600 ? '100px' : ''); 8 | 9 | const searchOnHandler = () => { 10 | if (windowWidth < 600) { 11 | document.querySelector('#navbar-right').classList.add('d-none'); 12 | } 13 | setIsOpen(true); 14 | setSearchString('100px'); 15 | }; 16 | 17 | const searchOffHandler = () => { 18 | setIsOpen(false); 19 | setSearchString(0); 20 | setTimeout(() => { 21 | if (windowWidth < 600) { 22 | document.querySelector('#navbar-right').classList.remove('d-none'); 23 | } 24 | }, 500); 25 | }; 26 | 27 | let searchClass = ['main-search']; 28 | if (isOpen) { 29 | searchClass = [...searchClass, 'open']; 30 | } 31 | 32 | return ( 33 | 34 | 45 | 46 | ); 47 | }; 48 | 49 | export default NavSearch; 50 | -------------------------------------------------------------------------------- /react-ui/src/layouts/AdminLayout/NavBar/NavLeft/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ListGroup, Dropdown } from 'react-bootstrap'; 3 | import { Link } from 'react-router-dom'; 4 | 5 | import useWindowSize from '../../../../hooks/useWindowSize'; 6 | import NavSearch from './NavSearch'; 7 | 8 | const NavLeft = () => { 9 | const windowSize = useWindowSize(); 10 | 11 | let dropdownRightAlign = false; 12 | 13 | let navItemClass = ['nav-item']; 14 | if (windowSize.width <= 575) { 15 | navItemClass = [...navItemClass, 'd-none']; 16 | } 17 | 18 | return ( 19 | 20 | 21 | 22 | 23 | 24 | Dropdown 25 | 26 |
    27 | 28 |
  • 29 | 30 | Action 31 | 32 |
    • 33 |
  • 34 | 35 | Another action 36 | 37 |
    • 38 |
  • 39 | 40 | Something else here 41 | 42 |
    • 43 |     44 |
45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | ); 53 | }; 54 | 55 | export default NavLeft; 56 | -------------------------------------------------------------------------------- /react-ui/src/layouts/AdminLayout/NavBar/NavRight/ChatList/Friends/Chat/Messages/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import { Media } from 'react-bootstrap'; 4 | 5 | const images = require.context('../../../../../../../../assets/images/user', true); 6 | 7 | const Messages = ({ message, photo, name }) => { 8 | let image = ''; 9 | if (message.type) { 10 | image = ( 11 | 12 | {name} 13 | 14 | ); 15 | } 16 | 17 | let msgClass = []; 18 | if (message.type) { 19 | msgClass = [...msgClass, 'chat-menu-content']; 20 | } else { 21 | msgClass = [...msgClass, 'chat-menu-reply text-muted']; 22 | } 23 | 24 | return ( 25 | 26 | 27 | {image} 28 | 29 |
30 |

{message.msg}

31 |
32 |

{message.time}

33 | 34 | 35 | 36 | ); 37 | }; 38 | 39 | export default Messages; 40 | -------------------------------------------------------------------------------- /react-ui/src/layouts/AdminLayout/NavBar/NavRight/ChatList/Friends/Chat/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Media, FormControl, Button, InputGroup } from 'react-bootstrap'; 3 | import { Link } from 'react-router-dom'; 4 | import PerfectScrollbar from 'react-perfect-scrollbar'; 5 | 6 | import chatMsg from './chat'; 7 | import Messages from './Messages'; 8 | 9 | const Chat = ({ user, chatOpen, listOpen, closed }) => { 10 | let chatClass = ['header-chat']; 11 | if (chatOpen && listOpen) { 12 | chatClass = [...chatClass, 'open']; 13 | } 14 | 15 | let message = ( 16 | 17 | 18 |
19 |

CHAT NOT FOUND

20 |
21 | 22 | 23 | ); 24 | 25 | chatMsg.filter((chats) => { 26 | if (chats.friend_id === user.id) { 27 | message = chats.messages.map((msg, index) => { 28 | return ; 29 | }); 30 | } 31 | return false; 32 | }); 33 | 34 | return ( 35 | 36 |
37 |
38 |
{user.name}
39 | 40 | 41 | 42 |
43 |
44 |
45 | 46 |
{message}
47 | 48 |
49 |
50 |
51 | 52 | 53 | 56 | 57 | 58 | 61 | 62 |
63 |
64 | 65 | ); 66 | }; 67 | 68 | export default Chat; 69 | -------------------------------------------------------------------------------- /react-ui/src/layouts/AdminLayout/NavBar/NavRight/ChatList/Friends/Friend/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Media } from 'react-bootstrap'; 3 | import { Link } from 'react-router-dom'; 4 | 5 | const images = require.context('../../../../../../../assets/images/user', true); 6 | 7 | const Friend = ({ data, activeId, clicked }) => { 8 | let photo = images(`./${data.photo}`); 9 | let timeClass = ['d-block']; 10 | if (data.status) { 11 | timeClass = [...timeClass, 'text-c-green']; 12 | } else { 13 | timeClass = [...timeClass, 'text-muted']; 14 | } 15 | 16 | let time = ''; 17 | if (data.time) { 18 | time = {data.time}; 19 | } 20 | 21 | let newFriend = ''; 22 | if (data.new) { 23 | newFriend =
{data.new}
; 24 | } 25 | 26 | return ( 27 | 28 | 29 | 30 | {' '} 31 | {data.name} 32 | {newFriend} 33 | 34 | 35 |
36 | {data.name} 37 | {time} 38 |
39 | 40 | 41 | 42 | ); 43 | }; 44 | 45 | export default Friend; 46 | -------------------------------------------------------------------------------- /react-ui/src/layouts/AdminLayout/NavBar/NavRight/ChatList/Friends/friends.js: -------------------------------------------------------------------------------- 1 | const friends = [ 2 | { 3 | id: 1, 4 | photo: 'avatar-1.jpg', 5 | name: 'Josephin Doe', 6 | new: 3, 7 | status: 1, 8 | time: 'typing' 9 | }, 10 | { 11 | id: 2, 12 | photo: 'avatar-2.jpg', 13 | name: 'Lary Doe', 14 | new: 1, 15 | status: 1, 16 | time: 'online' 17 | }, 18 | { 19 | id: 3, 20 | photo: 'avatar-3.jpg', 21 | name: 'Alice', 22 | status: 1, 23 | time: 'online' 24 | }, 25 | { 26 | id: 4, 27 | photo: 'avatar-1.jpg', 28 | name: 'Alia', 29 | status: 0, 30 | new: 1, 31 | time: '10 min ago' 32 | }, 33 | { 34 | id: 5, 35 | photo: 'avatar-4.jpg', 36 | name: 'Suzen', 37 | status: 0, 38 | time: '15 min ago' 39 | }, 40 | { 41 | id: 6, 42 | photo: 'avatar-1.jpg', 43 | name: 'Josephin Doe', 44 | new: 3, 45 | status: 1, 46 | time: 'typing' 47 | }, 48 | { 49 | id: 7, 50 | photo: 'avatar-2.jpg', 51 | name: 'Lary Doe', 52 | new: 1, 53 | status: 1, 54 | time: 'online' 55 | }, 56 | { 57 | id: 8, 58 | photo: 'avatar-3.jpg', 59 | name: 'Alice', 60 | status: 1, 61 | time: 'online' 62 | }, 63 | { 64 | id: 9, 65 | photo: 'avatar-1.jpg', 66 | name: 'Alia', 67 | status: 0, 68 | new: 1, 69 | time: '10 min ago' 70 | }, 71 | { 72 | id: 10, 73 | photo: 'avatar-4.jpg', 74 | name: 'Suzen', 75 | status: 0, 76 | time: '15 min ago' 77 | }, 78 | { 79 | id: 11, 80 | photo: 'avatar-1.jpg', 81 | name: 'Josephin Doe', 82 | new: 3, 83 | status: 1, 84 | time: 'typing' 85 | }, 86 | { 87 | id: 12, 88 | photo: 'avatar-2.jpg', 89 | name: 'Lary Doe', 90 | new: 1, 91 | status: 1, 92 | time: 'online' 93 | }, 94 | { 95 | id: 13, 96 | photo: 'avatar-3.jpg', 97 | name: 'Alice', 98 | status: 1, 99 | time: 'online' 100 | }, 101 | { 102 | id: 14, 103 | photo: 'avatar-1.jpg', 104 | name: 'Alia', 105 | status: 0, 106 | new: 1, 107 | time: '10 min ago' 108 | }, 109 | { 110 | id: 15, 111 | photo: 'avatar-4.jpg', 112 | name: 'Suzen', 113 | status: 0, 114 | time: '15 min ago' 115 | }, 116 | { 117 | id: 16, 118 | photo: 'avatar-1.jpg', 119 | name: 'Josephin Doe', 120 | new: 3, 121 | status: 1, 122 | time: 'typing' 123 | }, 124 | { 125 | id: 17, 126 | photo: 'avatar-2.jpg', 127 | name: 'Lary Doe', 128 | new: 1, 129 | status: 1, 130 | time: 'online' 131 | }, 132 | { 133 | id: 18, 134 | photo: 'avatar-3.jpg', 135 | name: 'Alice', 136 | status: 1, 137 | time: 'online' 138 | }, 139 | { 140 | id: 19, 141 | photo: 'avatar-1.jpg', 142 | name: 'Alia', 143 | status: 0, 144 | new: 1, 145 | time: '10 min ago' 146 | }, 147 | { 148 | id: 20, 149 | photo: 'avatar-4.jpg', 150 | name: 'Suzen', 151 | status: 0, 152 | time: '15 min ago' 153 | }, 154 | { 155 | id: 21, 156 | photo: 'avatar-1.jpg', 157 | name: 'Josephin Doe', 158 | new: 3, 159 | status: 1, 160 | time: 'typing' 161 | }, 162 | { 163 | id: 22, 164 | photo: 'avatar-2.jpg', 165 | name: 'Lary Doe', 166 | new: 1, 167 | status: 1, 168 | time: 'online' 169 | }, 170 | { 171 | id: 23, 172 | photo: 'avatar-3.jpg', 173 | name: 'Alice', 174 | status: 1, 175 | time: 'online' 176 | }, 177 | { 178 | id: 24, 179 | photo: 'avatar-1.jpg', 180 | name: 'Alia', 181 | status: 0, 182 | new: 1, 183 | time: '10 min ago' 184 | }, 185 | { 186 | id: 25, 187 | photo: 'avatar-4.jpg', 188 | name: 'Suzen', 189 | status: 0, 190 | time: '15 min ago' 191 | } 192 | ]; 193 | 194 | export default friends; 195 | -------------------------------------------------------------------------------- /react-ui/src/layouts/AdminLayout/NavBar/NavRight/ChatList/Friends/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | 3 | import friend from './friends'; 4 | import Friend from './Friend'; 5 | import Chat from './Chat'; 6 | 7 | const Friends = ({ listOpen }) => { 8 | const [chatOpen, setChatOpen] = useState(listOpen); 9 | const [user, setUser] = useState([]); 10 | 11 | useEffect(() => { 12 | setChatOpen(false); 13 | }, [listOpen]); 14 | 15 | const friendList = friend.map((f) => { 16 | return ( 17 | { 22 | setChatOpen(true); 23 | setUser(f); 24 | }} 25 | /> 26 | ); 27 | }); 28 | 29 | return ( 30 | 31 | {friendList} 32 | { 37 | setChatOpen(false); 38 | setUser([]); 39 | }} 40 | /> 41 | 42 | ); 43 | }; 44 | 45 | export default Friends; 46 | -------------------------------------------------------------------------------- /react-ui/src/layouts/AdminLayout/NavBar/NavRight/ChatList/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { FormControl } from 'react-bootstrap'; 3 | import { Link } from 'react-router-dom'; 4 | import PerfectScrollbar from 'react-perfect-scrollbar'; 5 | 6 | import Friends from './Friends'; 7 | 8 | const ChatList = ({ listOpen, closed }) => { 9 | let listClass = ['header-user-list']; 10 | if (listOpen) { 11 | listClass = [...listClass, 'open']; 12 | } 13 | 14 | return ( 15 | 16 |
17 |
18 |
19 | 20 |
21 |
22 |
23 | 24 | 25 | 26 |
27 |
28 | 29 | 30 | 31 |
32 |
33 |
34 |
35 | 36 | ); 37 | }; 38 | 39 | export default ChatList; 40 | -------------------------------------------------------------------------------- /react-ui/src/layouts/AdminLayout/NavBar/index.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | import NavLeft from './NavLeft'; 5 | import NavRight from './NavRight'; 6 | 7 | import { ConfigContext } from '../../../contexts/ConfigContext'; 8 | import * as actionType from '../../../store/actions'; 9 | 10 | const NavBar = () => { 11 | const configContext = useContext(ConfigContext); 12 | const { collapseMenu } = configContext.state; 13 | const { dispatch } = configContext; 14 | 15 | let headerClass = ['navbar', 'pcoded-header', 'navbar-expand-lg', 'navbar-default']; 16 | 17 | let toggleClass = ['mobile-menu']; 18 | if (collapseMenu) { 19 | toggleClass = [...toggleClass, 'on']; 20 | } 21 | 22 | const navToggleHandler = () => { 23 | dispatch({ type: actionType.COLLAPSE_MENU }); 24 | }; 25 | 26 | let collapseClass = ['collapse navbar-collapse']; 27 | 28 | let navBar = ( 29 | 30 |
31 | 32 | 33 | 34 | 35 |
36 | 37 |
38 | Datta Able 39 | 40 | {/* setMoreToggle(!moreToggle)}> 41 | 42 | */} 43 |
44 |
45 | 46 | 47 |
48 | 49 | ); 50 | 51 | return ( 52 | 53 |
{navBar}
54 | 55 | ); 56 | }; 57 | 58 | export default NavBar; 59 | -------------------------------------------------------------------------------- /react-ui/src/layouts/AdminLayout/Navigation/NavContent/NavBadge/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const NavBadge = ({ items }) => { 4 | let navBadges = false; 5 | if (items.badge) { 6 | const badgeClass = ['label', 'pcoded-badge', items.badge.type]; 7 | 8 | navBadges = {items.badge.title}; 9 | } 10 | 11 | return {navBadges}; 12 | }; 13 | 14 | export default NavBadge; 15 | -------------------------------------------------------------------------------- /react-ui/src/layouts/AdminLayout/Navigation/NavContent/NavCollapse/index.js: -------------------------------------------------------------------------------- 1 | import React, { useContext, useEffect } from 'react'; 2 | import { ListGroup } from 'react-bootstrap'; 3 | import { Link } from 'react-router-dom'; 4 | 5 | import NavItem from '../NavItem'; 6 | import LoopNavCollapse from './index'; 7 | import NavIcon from '../NavIcon'; 8 | import NavBadge from '../NavBadge'; 9 | 10 | import { ConfigContext } from '../../../../../contexts/ConfigContext'; 11 | import * as actionType from '../../../../../store/actions'; 12 | 13 | const NavCollapse = ({ collapse, type }) => { 14 | const configContext = useContext(ConfigContext); 15 | const { dispatch } = configContext; 16 | 17 | const { isOpen, isTrigger } = configContext.state; 18 | 19 | useEffect(() => { 20 | const currentIndex = document.location.pathname 21 | .toString() 22 | .split('/') 23 | .findIndex((id) => id === collapse.id); 24 | if (currentIndex > -1) { 25 | dispatch({ type: actionType.COLLAPSE_TOGGLE, menu: { id: collapse.id, type: type } }); 26 | } 27 | }, [collapse, dispatch, type]); 28 | 29 | let navItems = ''; 30 | if (collapse.children) { 31 | const collapses = collapse.children; 32 | navItems = Object.keys(collapses).map((item) => { 33 | item = collapses[item]; 34 | switch (item.type) { 35 | case 'collapse': 36 | return ; 37 | case 'item': 38 | return ; 39 | default: 40 | return false; 41 | } 42 | }); 43 | } 44 | 45 | let itemTitle = collapse.title; 46 | if (collapse.icon) { 47 | itemTitle = {collapse.title}; 48 | } 49 | 50 | let navLinkClass = ['nav-link']; 51 | 52 | let navItemClass = ['nav-item', 'pcoded-hasmenu']; 53 | const openIndex = isOpen.findIndex((id) => id === collapse.id); 54 | if (openIndex > -1) { 55 | navItemClass = [...navItemClass, 'active']; 56 | navLinkClass = [...navLinkClass, 'active']; 57 | } 58 | 59 | const triggerIndex = isTrigger.findIndex((id) => id === collapse.id); 60 | if (triggerIndex > -1) { 61 | navItemClass = [...navItemClass, 'pcoded-trigger']; 62 | } 63 | 64 | const currentIndex = document.location.pathname 65 | .toString() 66 | .split('/') 67 | .findIndex((id) => id === collapse.id); 68 | if (currentIndex > -1) { 69 | navItemClass = [...navItemClass, 'active']; 70 | navLinkClass = [...navLinkClass, 'active']; 71 | } 72 | 73 | const subContent = ( 74 | 75 | dispatch({ type: actionType.COLLAPSE_TOGGLE, menu: { id: collapse.id, type: type } })} 79 | > 80 | 81 | {itemTitle} 82 | 83 | 84 | 85 | {navItems} 86 | 87 | 88 | ); 89 | 90 | let mainContent = ''; 91 | mainContent = ( 92 | 93 | {subContent} 94 | 95 | ); 96 | 97 | return {mainContent}; 98 | }; 99 | 100 | export default NavCollapse; 101 | -------------------------------------------------------------------------------- /react-ui/src/layouts/AdminLayout/Navigation/NavContent/NavGroup/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ListGroup } from 'react-bootstrap'; 3 | import NavCollapse from '../NavCollapse'; 4 | import NavItem from '../NavItem'; 5 | 6 | const NavGroup = ({ layout, group }) => { 7 | let navItems = ''; 8 | 9 | if (group.children) { 10 | const groups = group.children; 11 | navItems = Object.keys(groups).map((item) => { 12 | item = groups[item]; 13 | switch (item.type) { 14 | case 'collapse': 15 | return ; 16 | case 'item': 17 | return ; 18 | default: 19 | return false; 20 | } 21 | }); 22 | } 23 | 24 | return ( 25 | 26 | 27 | 28 | 29 | {navItems} 30 | 31 | ); 32 | }; 33 | 34 | export default NavGroup; 35 | -------------------------------------------------------------------------------- /react-ui/src/layouts/AdminLayout/Navigation/NavContent/NavIcon/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const NavIcon = ({ items }) => { 4 | let navIcons = false; 5 | if (items.icon) { 6 | navIcons = ( 7 | 8 | 9 | 10 | ); 11 | } 12 | 13 | return {navIcons}; 14 | }; 15 | 16 | export default NavIcon; 17 | -------------------------------------------------------------------------------- /react-ui/src/layouts/AdminLayout/Navigation/NavContent/NavItem/index.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | import { ListGroup } from 'react-bootstrap'; 3 | import { NavLink } from 'react-router-dom'; 4 | 5 | import NavIcon from '../NavIcon'; 6 | import NavBadge from '../NavBadge'; 7 | 8 | import { ConfigContext } from '../../../../../contexts/ConfigContext'; 9 | import * as actionType from '../../../../../store/actions'; 10 | import useWindowSize from '../../../../../hooks/useWindowSize'; 11 | 12 | const NavItem = ({ layout, item }) => { 13 | const windowSize = useWindowSize(); 14 | const configContext = useContext(ConfigContext); 15 | const { dispatch } = configContext; 16 | 17 | let itemTitle = item.title; 18 | if (item.icon) { 19 | itemTitle = {item.title}; 20 | } 21 | 22 | let itemTarget = ''; 23 | if (item.target) { 24 | itemTarget = '_blank'; 25 | } 26 | 27 | let subContent; 28 | if (item.external) { 29 | subContent = ( 30 | 31 | 32 | {itemTitle} 33 | 34 | 35 | ); 36 | } else { 37 | subContent = ( 38 | 39 | 40 | {itemTitle} 41 | 42 | 43 | ); 44 | } 45 | let mainContent = ''; 46 | if (layout === 'horizontal') { 47 | mainContent = ( 48 | dispatch({ type: actionType.NAV_CONTENT_LEAVE })}> 49 | {subContent} 50 | 51 | ); 52 | } else { 53 | if (windowSize.width < 992) { 54 | mainContent = ( 55 | dispatch({ type: actionType.COLLAPSE_MENU })}> 56 | {subContent} 57 | 58 | ); 59 | } else { 60 | mainContent = ( 61 | 62 | {subContent} 63 | 64 | ); 65 | } 66 | } 67 | 68 | return {mainContent}; 69 | }; 70 | 71 | export default NavItem; 72 | -------------------------------------------------------------------------------- /react-ui/src/layouts/AdminLayout/Navigation/NavContent/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ListGroup } from 'react-bootstrap'; 3 | import PerfectScrollbar from 'react-perfect-scrollbar'; 4 | 5 | import NavGroup from './NavGroup'; 6 | 7 | const NavContent = ({ navigation }) => { 8 | const navItems = navigation.map((item) => { 9 | switch (item.type) { 10 | case 'group': 11 | return ; 12 | default: 13 | return false; 14 | } 15 | }); 16 | 17 | let mainContent = ''; 18 | mainContent = ( 19 |
20 | 21 | 22 | {navItems} 23 | 24 | 25 |
26 | ); 27 | 28 | return {mainContent}; 29 | }; 30 | 31 | export default NavContent; 32 | -------------------------------------------------------------------------------- /react-ui/src/layouts/AdminLayout/Navigation/NavLogo/index.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | import { ConfigContext } from '../../../../contexts/ConfigContext'; 5 | import * as actionType from '../../../../store/actions'; 6 | 7 | const NavLogo = () => { 8 | const configContext = useContext(ConfigContext); 9 | const { collapseMenu } = configContext.state; 10 | const { dispatch } = configContext; 11 | 12 | let toggleClass = ['mobile-menu']; 13 | if (collapseMenu) { 14 | toggleClass = [...toggleClass, 'on']; 15 | } 16 | 17 | return ( 18 | 19 |
20 | 21 |
22 | 23 |
24 | Datta Able 25 | 26 | dispatch({ type: actionType.COLLAPSE_MENU })} 31 | > 32 | 33 | 34 |
35 | 36 | ); 37 | }; 38 | 39 | export default NavLogo; 40 | -------------------------------------------------------------------------------- /react-ui/src/layouts/AdminLayout/Navigation/index.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from 'react'; 2 | 3 | import { ConfigContext } from '../../../contexts/ConfigContext'; 4 | import useWindowSize from '../../../hooks/useWindowSize'; 5 | 6 | import NavLogo from './NavLogo'; 7 | import NavContent from './NavContent'; 8 | import navigation from '../../../menu-items'; 9 | 10 | const Navigation = () => { 11 | const configContext = useContext(ConfigContext); 12 | const { collapseMenu } = configContext.state; 13 | const windowSize = useWindowSize(); 14 | 15 | let navClass = [ 16 | 'pcoded-navbar', 17 | 'menupos-static', 18 | 'menu-dark', 19 | 'navbar-default', 20 | 'brand-default', 21 | 'drp-icon-style1', 22 | 'menu-item-icon-style1', 23 | 'active-default', 24 | 'title-default' 25 | ]; 26 | 27 | if (windowSize.width < 992 && collapseMenu) { 28 | navClass = [...navClass, 'mob-open']; 29 | } else if (collapseMenu) { 30 | navClass = [...navClass, 'navbar-collapsed']; 31 | } 32 | 33 | let navStyle; 34 | 35 | let navBarClass = ['navbar-wrapper']; 36 | 37 | let navContent = ( 38 |
39 | 40 | 41 |
42 | ); 43 | if (windowSize.width < 992) { 44 | navContent = ( 45 |
46 | 47 | 48 |
49 | ); 50 | } 51 | return ( 52 | 53 | 56 | 57 | ); 58 | }; 59 | 60 | export default Navigation; 61 | -------------------------------------------------------------------------------- /react-ui/src/layouts/AdminLayout/index.js: -------------------------------------------------------------------------------- 1 | import React, { useContext, useEffect, useRef } from 'react'; 2 | 3 | import Navigation from './Navigation'; 4 | import NavBar from './NavBar'; 5 | import Breadcrumb from './Breadcrumb'; 6 | 7 | import useWindowSize from '../../hooks/useWindowSize'; 8 | import useOutsideClick from '../../hooks/useOutsideClick'; 9 | import { ConfigContext } from '../../contexts/ConfigContext'; 10 | import * as actionType from '../../store/actions'; 11 | 12 | const AdminLayout = ({ children }) => { 13 | const windowSize = useWindowSize(); 14 | const ref = useRef(); 15 | const configContext = useContext(ConfigContext); 16 | 17 | const { collapseMenu } = configContext.state; 18 | const { dispatch } = configContext; 19 | 20 | useOutsideClick(ref, () => { 21 | if (collapseMenu) { 22 | dispatch({ type: actionType.COLLAPSE_MENU }); 23 | } 24 | }); 25 | 26 | useEffect(() => { 27 | if (windowSize.width > 992 && windowSize.width <= 1024) { 28 | dispatch({ type: actionType.COLLAPSE_MENU }); 29 | } 30 | }, [dispatch, windowSize]); 31 | 32 | const mobileOutClickHandler = () => { 33 | if (windowSize.width < 992 && collapseMenu) { 34 | dispatch({ type: actionType.COLLAPSE_MENU }); 35 | } 36 | }; 37 | 38 | let mainClass = ['pcoded-wrapper']; 39 | 40 | let common = ( 41 | 42 | 43 | 44 | ); 45 | 46 | let mainContainer = ( 47 | 48 | 49 |
50 |
51 |
52 |
53 | 54 | {children} 55 |
56 |
57 |
58 |
59 | 60 | ); 61 | 62 | if (windowSize.width < 992) { 63 | let outSideClass = ['nav-outside']; 64 | if (collapseMenu) { 65 | outSideClass = [...outSideClass, 'mob-backdrop']; 66 | } 67 | 68 | common = ( 69 |
70 | {common} 71 |
72 | ); 73 | 74 | mainContainer = ( 75 |
mobileOutClickHandler}> 76 | {mainContainer} 77 |
78 | ); 79 | } 80 | 81 | return ( 82 | 83 | {common} 84 | {mainContainer} 85 | 86 | ); 87 | }; 88 | 89 | export default AdminLayout; 90 | -------------------------------------------------------------------------------- /react-ui/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = (onPerfEntry) => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /react-ui/src/routes.js: -------------------------------------------------------------------------------- 1 | import React, { Suspense, Fragment, lazy } from 'react'; 2 | import { Switch, Redirect, Route } from 'react-router-dom'; 3 | 4 | import Loader from './components/Loader/Loader'; 5 | import AdminLayout from './layouts/AdminLayout'; 6 | 7 | import GuestGuard from './components/Auth/GuestGuard'; 8 | import AuthGuard from './components/Auth/AuthGuard'; 9 | 10 | import { BASE_URL } from './config/constant'; 11 | 12 | export const renderRoutes = (routes = []) => ( 13 | }> 14 | 15 | {routes.map((route, i) => { 16 | const Guard = route.guard || Fragment; 17 | const Layout = route.layout || Fragment; 18 | const Component = route.component; 19 | 20 | return ( 21 | ( 26 | 27 | {route.routes ? renderRoutes(route.routes) : } 28 | 29 | )} 30 | /> 31 | ); 32 | })} 33 | 34 | 35 | ); 36 | 37 | const routes = [ 38 | { 39 | exact: true, 40 | guard: GuestGuard, 41 | path: '/auth/signin', 42 | component: lazy(() => import('./views/auth/signin/SignIn1')) 43 | }, 44 | { 45 | exact: true, 46 | guard: GuestGuard, 47 | path: '/auth/signup', 48 | component: lazy(() => import('./views/auth/signup/SignUp1')) 49 | }, 50 | { 51 | exact: true, 52 | path: '/auth/signin-2', 53 | component: lazy(() => import('./views/auth/signin/SignIn2')) 54 | }, 55 | { 56 | exact: true, 57 | path: '/auth/signup-2', 58 | component: lazy(() => import('./views/auth/signup/SignUp2')) 59 | }, 60 | { 61 | path: '*', 62 | layout: AdminLayout, 63 | guard: AuthGuard, 64 | routes: [ 65 | { 66 | exact: true, 67 | path: '/app/dashboard/default', 68 | component: lazy(() => import('./views/dashboard/DashDefault')) 69 | }, 70 | 71 | { 72 | exact: true, 73 | path: '/basic/button', 74 | component: lazy(() => import('./views/ui-elements/basic/BasicButton')) 75 | }, 76 | { 77 | exact: true, 78 | path: '/basic/badges', 79 | component: lazy(() => import('./views/ui-elements/basic/BasicBadges')) 80 | }, 81 | { 82 | exact: true, 83 | path: '/basic/breadcrumb', 84 | component: lazy(() => import('./views/ui-elements/basic/BasicBreadcrumb')) 85 | }, 86 | { 87 | exact: true, 88 | path: '/basic/collapse', 89 | component: lazy(() => import('./views/ui-elements/basic/BasicCollapse')) 90 | }, 91 | { 92 | exact: true, 93 | path: '/basic/tabs-pills', 94 | component: lazy(() => import('./views/ui-elements/basic/BasicTabsPills')) 95 | }, 96 | { 97 | exact: true, 98 | path: '/basic/typography', 99 | component: lazy(() => import('./views/ui-elements/basic/BasicTypography')) 100 | }, 101 | 102 | { 103 | exact: true, 104 | path: '/forms/form-basic', 105 | component: lazy(() => import('./views/forms/FormsElements')) 106 | }, 107 | { 108 | exact: true, 109 | path: '/tables/bootstrap', 110 | component: lazy(() => import('./views/tables/BootstrapTable')) 111 | }, 112 | 113 | { 114 | exact: true, 115 | path: '/charts/nvd3', 116 | component: lazy(() => import('./views/charts/nvd3-chart')) 117 | }, 118 | { 119 | exact: true, 120 | path: '/maps/google-map', 121 | component: lazy(() => import('./views/maps/GoogleMaps')) 122 | }, 123 | 124 | { 125 | exact: true, 126 | path: '/sample-page', 127 | component: lazy(() => import('./views/extra/SamplePage')) 128 | }, 129 | { 130 | path: '*', 131 | exact: true, 132 | component: () => 133 | } 134 | ] 135 | } 136 | ]; 137 | 138 | export default routes; 139 | -------------------------------------------------------------------------------- /react-ui/src/store/accountReducer.js: -------------------------------------------------------------------------------- 1 | // action - state management 2 | import { ACCOUNT_INITIALIZE, LOGIN, LOGOUT } from './actions'; 3 | 4 | export const initialState = { 5 | token: '', 6 | isLoggedIn: false, 7 | isInitialized: false, 8 | user: null 9 | }; 10 | 11 | //-----------------------|| ACCOUNT REDUCER ||-----------------------// 12 | 13 | const accountReducer = (state = initialState, action) => { 14 | switch (action.type) { 15 | case ACCOUNT_INITIALIZE: { 16 | const { isLoggedIn, user, token } = action.payload; 17 | return { 18 | ...state, 19 | isLoggedIn, 20 | isInitialized: true, 21 | token, 22 | user 23 | }; 24 | } 25 | case LOGIN: { 26 | const { user } = action.payload; 27 | return { 28 | ...state, 29 | isLoggedIn: true, 30 | user 31 | }; 32 | } 33 | case LOGOUT: { 34 | return { 35 | ...state, 36 | isLoggedIn: false, 37 | token: '', 38 | user: null 39 | }; 40 | } 41 | default: { 42 | return { ...state }; 43 | } 44 | } 45 | }; 46 | 47 | export default accountReducer; 48 | -------------------------------------------------------------------------------- /react-ui/src/store/actions.js: -------------------------------------------------------------------------------- 1 | export const COLLAPSE_MENU = 'COLLAPSE_MENU'; 2 | export const COLLAPSE_TOGGLE = 'COLLAPSE_TOGGLE'; 3 | 4 | export const NAV_COLLAPSE_LEAVE = 'NAV_COLLAPSE_LEAVE'; 5 | export const NAV_CONTENT_LEAVE = 'NAV_CONTENT_LEAVE'; 6 | 7 | export const LOGIN = 'LOGIN'; 8 | export const LOGOUT = 'LOGOUT'; 9 | export const ACCOUNT_INITIALIZE = 'ACCOUNT_INITIALIZE'; 10 | -------------------------------------------------------------------------------- /react-ui/src/store/index.js: -------------------------------------------------------------------------------- 1 | import { useDispatch as useReduxDispatch, useSelector as useReduxSelector } from 'react-redux'; 2 | import { persistStore } from 'redux-persist'; 3 | import { configureStore } from '@reduxjs/toolkit'; 4 | 5 | import reducers from './reducers'; 6 | 7 | const store = configureStore({ 8 | reducer: reducers, 9 | devTools: true 10 | }); 11 | 12 | export const useSelector = useReduxSelector; 13 | 14 | export const useDispatch = () => useReduxDispatch(); 15 | 16 | const persister = persistStore(store); 17 | 18 | export { store, persister }; 19 | -------------------------------------------------------------------------------- /react-ui/src/store/reducers.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from '@reduxjs/toolkit'; 2 | import { reducer as formReducer } from 'redux-form'; 3 | import accountReducer from './accountReducer'; 4 | 5 | import { persistReducer } from 'redux-persist'; 6 | import storage from 'redux-persist/lib/storage'; 7 | 8 | const reducers = combineReducers({ 9 | account: persistReducer( 10 | { 11 | key: 'account', 12 | storage, 13 | keyPrefix: 'datta-' 14 | }, 15 | accountReducer 16 | ), 17 | form: formReducer 18 | }); 19 | 20 | export default reducers; 21 | -------------------------------------------------------------------------------- /react-ui/src/utils/axios.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | const axiosServices = axios.create(); 3 | 4 | axiosServices.interceptors.response.use( 5 | (response) => response, 6 | (error) => Promise.reject((error.response && error.response.data) || 'Wrong Services') 7 | ); 8 | 9 | export default axiosServices; 10 | -------------------------------------------------------------------------------- /react-ui/src/utils/services.js: -------------------------------------------------------------------------------- 1 | import AxiosMockAdapter from 'axios-mock-adapter'; 2 | import axios from './axios'; 3 | 4 | const services = new AxiosMockAdapter(axios, { delayResponse: 0 }); 5 | export default services; 6 | -------------------------------------------------------------------------------- /react-ui/src/views/auth/signin/SignIn1.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card } from 'react-bootstrap'; 3 | import { NavLink } from 'react-router-dom'; 4 | 5 | import Breadcrumb from '../../../layouts/AdminLayout/Breadcrumb'; 6 | 7 | import RestLogin from './RestLogin'; 8 | 9 | const Signin1 = () => { 10 | return ( 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 |

React Datta Able

24 | 25 |
26 | 27 |
28 | 29 | 30 | 31 |

32 | Don’t have an account?{' '} 33 | 34 | Sign UP 35 | 36 |

37 | 38 |
39 | 40 |

41 | ©{' '} 42 | 43 | CodedThemes 44 | 45 | -{' '} 46 | 47 | AppSeed 48 | 49 | . 50 |

51 | 52 | 53 |
54 |
55 | 56 | ); 57 | }; 58 | 59 | export default Signin1; 60 | -------------------------------------------------------------------------------- /react-ui/src/views/auth/signin/SignIn2.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card } from 'react-bootstrap'; 3 | import { NavLink } from 'react-router-dom'; 4 | 5 | import Breadcrumb from '../../../layouts/AdminLayout/Breadcrumb'; 6 | 7 | import RestLogin from './RestLogin'; 8 | 9 | const Signin1 = () => { 10 | return ( 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 |
24 | 25 |
26 | 27 |

28 | Forgot password? 29 | 30 | Reset 31 | 32 |

33 |

34 | Don’t have an account? 35 | 36 | Signup 37 | 38 |

39 | 40 | 41 |
42 |
43 | 44 | ); 45 | }; 46 | 47 | export default Signin1; 48 | -------------------------------------------------------------------------------- /react-ui/src/views/auth/signup/SignUp1.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card, Row, Col } from 'react-bootstrap'; 3 | import { NavLink } from 'react-router-dom'; 4 | 5 | import RestRegister from './RestRegister'; 6 | import Breadcrumb from '../../../layouts/AdminLayout/Breadcrumb'; 7 | 8 | const SignUp1 = () => { 9 | return ( 10 | 11 | 12 |
13 |
14 |
15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 |

React Datta Able

25 | 26 |
27 | 28 |
29 | 30 | 31 | 32 |

33 | Already have an account?{' '} 34 | 35 | Login 36 | 37 |

38 | 39 |
40 | 41 |

42 | ©{' '} 43 | 44 | CodedThemes 45 | 46 | -{' '} 47 | 48 | AppSeed 49 | 50 | . 51 |

52 | 53 | 54 | 55 | 56 |
57 |
58 | 59 | ); 60 | }; 61 | 62 | export default SignUp1; 63 | -------------------------------------------------------------------------------- /react-ui/src/views/auth/signup/SignUp2.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card, Row, Col } from 'react-bootstrap'; 3 | import { NavLink, Link } from 'react-router-dom'; 4 | 5 | import Breadcrumb from '../../../layouts/AdminLayout/Breadcrumb'; 6 | 7 | const SignUp1 = () => { 8 | return ( 9 | 10 | 11 |
12 |
13 |
14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 |
24 | 25 |
26 |

Sign up

27 |
28 | 29 |
30 |
31 | 32 |
33 |
34 | 35 |
36 |
37 | 38 | 41 |
42 | 43 |

44 | Already have an account?{' '} 45 | 46 | Login 47 | 48 |

49 | 50 | 51 | 52 | 53 |
54 |
55 | 56 | ); 57 | }; 58 | 59 | export default SignUp1; 60 | -------------------------------------------------------------------------------- /react-ui/src/views/charts/nvd3-chart/chart/BarDiscreteChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import NVD3Chart from 'react-nvd3'; 3 | 4 | const datum = [ 5 | { 6 | key: 'Cumulative Return', 7 | values: [ 8 | { 9 | label: 'A', 10 | value: -29.765957771107, 11 | color: '#3ebfea' 12 | }, 13 | { 14 | label: 'B', 15 | value: 10, 16 | color: '#04a9f5' 17 | }, 18 | { 19 | label: 'C', 20 | value: 32.807804682612, 21 | color: '#ff8a65' 22 | }, 23 | { 24 | label: 'D', 25 | value: 196.45946739256, 26 | color: '#1de9b6' 27 | }, 28 | { 29 | label: 'E', 30 | value: 0.25434030906893, 31 | color: '#4C5667' 32 | }, 33 | { 34 | label: 'F', 35 | value: -98.079782601442, 36 | color: '#69CEC6' 37 | }, 38 | { 39 | label: 'G', 40 | value: -13.925743130903, 41 | color: '#a389d4' 42 | }, 43 | { 44 | label: 'H', 45 | value: -5.1387322875705, 46 | color: '#FE8A7D' 47 | } 48 | ] 49 | } 50 | ]; 51 | 52 | const BarDiscreteChart = () => { 53 | return ; 54 | }; 55 | 56 | export default BarDiscreteChart; 57 | -------------------------------------------------------------------------------- /react-ui/src/views/charts/nvd3-chart/chart/LineChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import NVD3Chart from 'react-nvd3'; 3 | 4 | function getDatum() { 5 | var sin = [], 6 | sin2 = [], 7 | cos = []; 8 | for (var i = 0; i < 100; i++) { 9 | sin.push({ 10 | x: i, 11 | y: Math.sin(i / 10) 12 | }); 13 | sin2.push({ 14 | x: i, 15 | y: Math.sin(i / 10) * 0.25 + 0.5 16 | }); 17 | cos.push({ 18 | x: i, 19 | y: 0.5 * Math.cos(i / 10) 20 | }); 21 | } 22 | return [ 23 | { 24 | values: sin, 25 | key: 'Sine Wave', 26 | color: '#A389D4' 27 | }, 28 | { 29 | values: cos, 30 | key: 'Cosine Wave', 31 | color: '#04a9f5' 32 | }, 33 | { 34 | values: sin2, 35 | key: 'Another sine wave', 36 | color: '#1de9b6', 37 | area: true 38 | } 39 | ]; 40 | } 41 | 42 | const LineChart = () => { 43 | const data = getDatum(); 44 | return ( 45 | 46 | {React.createElement(NVD3Chart, { 47 | xAxis: { 48 | tickFormat: function (d) { 49 | return d; 50 | }, 51 | axisLabel: 'Time (ms)' 52 | }, 53 | yAxis: { 54 | axisLabel: 'Voltage (v)', 55 | tickFormat: function (d) { 56 | return parseFloat(d).toFixed(2); 57 | } 58 | }, 59 | type: 'lineChart', 60 | datum: data, 61 | x: 'x', 62 | y: 'y', 63 | height: 300, 64 | renderEnd: function () { 65 | console.log('renderEnd'); 66 | } 67 | })} 68 | 69 | ); 70 | }; 71 | 72 | export default LineChart; 73 | -------------------------------------------------------------------------------- /react-ui/src/views/charts/nvd3-chart/chart/MultiBarChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import NVD3Chart from 'react-nvd3'; 3 | 4 | function generateNumber(min, max) { 5 | return Math.floor(Math.random() * (max - min + 1) + min); 6 | } 7 | 8 | function getDatum() { 9 | let sin = [], 10 | sin2 = [], 11 | sin3 = []; 12 | 13 | const len = 35 + Math.random() * (70 - 35); 14 | for (let i = 0; i < len; i++) { 15 | sin.push({ 16 | x: i, 17 | y: generateNumber(0, 60) 18 | }); 19 | sin2.push({ 20 | x: i, 21 | y: generateNumber(0, 100) 22 | }); 23 | sin3.push({ 24 | x: i, 25 | y: generateNumber(0, 30) 26 | }); 27 | } 28 | return [ 29 | { 30 | values: sin, 31 | key: 'Stream #0', 32 | color: '#A389D4' 33 | }, 34 | { 35 | values: sin3, 36 | key: 'Stream #1', 37 | color: '#04a9f5' 38 | }, 39 | { 40 | values: sin2, 41 | key: 'Stream #3', 42 | color: '#1de9b6', 43 | area: true 44 | } 45 | ]; 46 | } 47 | 48 | const MultiBarChart = () => { 49 | const data = getDatum(); 50 | return ; 51 | }; 52 | 53 | export default MultiBarChart; 54 | -------------------------------------------------------------------------------- /react-ui/src/views/charts/nvd3-chart/chart/PieBasicChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import NVD3Chart from 'react-nvd3'; 3 | 4 | const datum = [ 5 | { key: 'One', y: 29, color: '#ff8a65' }, 6 | { key: 'Two', y: 0, color: '#f4c22b' }, 7 | { key: 'Three', y: 32, color: '#04a9f5' }, 8 | { key: 'Four', y: 196, color: '#3ebfea' }, 9 | { key: 'Five', y: 2, color: '#4F5467' }, 10 | { key: 'Six', y: 98, color: '#1de9b6' }, 11 | { key: 'Seven', y: 13, color: '#a389d4' }, 12 | { key: 'Eight', y: 5, color: '#FE8A7D' } 13 | ]; 14 | 15 | const PieBasicChart = () => { 16 | return ; 17 | }; 18 | 19 | export default PieBasicChart; 20 | -------------------------------------------------------------------------------- /react-ui/src/views/charts/nvd3-chart/chart/PieDonutChart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import NVD3Chart from 'react-nvd3'; 3 | 4 | const datum = [ 5 | { key: 'One', y: 29, color: '#ff8a65' }, 6 | { key: 'Two', y: 0, color: '#f4c22b' }, 7 | { key: 'Three', y: 32, color: '#04a9f5' }, 8 | { key: 'Four', y: 196, color: '#3ebfea' }, 9 | { key: 'Five', y: 2, color: '#4F5467' }, 10 | { key: 'Six', y: 98, color: '#1de9b6' }, 11 | { key: 'Seven', y: 13, color: '#a389d4' }, 12 | { key: 'Eight', y: 5, color: '#FE8A7D' } 13 | ]; 14 | 15 | const PieDonutChart = () => { 16 | return ; 17 | }; 18 | 19 | export default PieDonutChart; 20 | -------------------------------------------------------------------------------- /react-ui/src/views/charts/nvd3-chart/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Row, Col, Card } from 'react-bootstrap'; 3 | 4 | import LineChart from './chart/LineChart'; 5 | import BarDiscreteChart from './chart/BarDiscreteChart'; 6 | import PieDonutChart from './chart/PieDonutChart'; 7 | import PieBasicChart from './chart/PieBasicChart'; 8 | import MultiBarChart from './chart/MultiBarChart'; 9 | 10 | const Nvd3Chart = () => { 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 | Line Chart 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | Discrete Bar Chart 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | Stacked/Grouped Multi-Bar Chart 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | Pie Basic Chart 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | Donut Chart 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | ); 67 | }; 68 | 69 | export default Nvd3Chart; 70 | -------------------------------------------------------------------------------- /react-ui/src/views/dashboard/DashDefault/chart/AmChartEarnings.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import 'amcharts3/amcharts/amcharts'; 3 | import 'amcharts3/amcharts/serial'; 4 | import 'amcharts3/amcharts/themes/light'; 5 | import AmCharts from '@amcharts/amcharts3-react'; 6 | 7 | const AmChartEarnings = (props) => { 8 | useEffect(() => { 9 | AmCharts.makeChart('widget-line-chart', { 10 | type: 'serial', 11 | addClassNames: true, 12 | defs: { 13 | filter: [ 14 | { 15 | x: '-50%', 16 | y: '-50%', 17 | width: '200%', 18 | height: '200%', 19 | id: 'blur', 20 | feGaussianBlur: { 21 | in: 'SourceGraphic', 22 | stdDeviation: '30' 23 | } 24 | }, 25 | { 26 | id: 'shadow', 27 | x: '-10%', 28 | y: '-10%', 29 | width: '120%', 30 | height: '120%', 31 | feOffset: { 32 | result: 'offOut', 33 | in: 'SourceAlpha', 34 | dx: '0', 35 | dy: '20' 36 | }, 37 | feGaussianBlur: { 38 | result: 'blurOut', 39 | in: 'offOut', 40 | stdDeviation: '10' 41 | }, 42 | feColorMatrix: { 43 | result: 'blurOut', 44 | type: 'matrix', 45 | values: '0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .2 0' 46 | }, 47 | feBlend: { 48 | in: 'SourceGraphic', 49 | in2: 'blurOut', 50 | mode: 'normal' 51 | } 52 | } 53 | ] 54 | }, 55 | fontSize: 15, 56 | dataProvider: [ 57 | { 58 | day: 'Mon', 59 | value: 60 60 | }, 61 | { 62 | day: 'Tue', 63 | value: 45 64 | }, 65 | { 66 | day: 'Wed', 67 | value: 70 68 | }, 69 | { 70 | day: 'Thu', 71 | value: 55 72 | }, 73 | { 74 | day: 'Fri', 75 | value: 70 76 | }, 77 | { 78 | day: 'Sat', 79 | value: 55 80 | }, 81 | { 82 | day: 'Sun', 83 | value: 70 84 | } 85 | ], 86 | autoMarginOffset: 0, 87 | marginRight: 0, 88 | categoryField: 'day', 89 | categoryAxis: { 90 | color: '#fff', 91 | gridAlpha: 0, 92 | axisAlpha: 0, 93 | lineAlpha: 0, 94 | offset: -20, 95 | inside: true 96 | }, 97 | valueAxes: [ 98 | { 99 | fontSize: 0, 100 | inside: true, 101 | gridAlpha: 0, 102 | axisAlpha: 0, 103 | lineAlpha: 0, 104 | minimum: 0, 105 | maximum: 100 106 | } 107 | ], 108 | chartCursor: { 109 | valueLineEnabled: false, 110 | valueLineBalloonEnabled: false, 111 | cursorAlpha: 0, 112 | zoomable: false, 113 | valueZoomable: false, 114 | cursorColor: '#fff', 115 | categoryBalloonColor: '#51b4e6', 116 | valueLineAlpha: 0 117 | }, 118 | graphs: [ 119 | { 120 | id: 'g1', 121 | type: 'line', 122 | valueField: 'value', 123 | lineColor: '#ffffff', 124 | lineAlpha: 1, 125 | lineThickness: 3, 126 | fillAlphas: 0, 127 | showBalloon: true, 128 | balloon: { 129 | drop: true, 130 | adjustBorderColor: false, 131 | color: '#ffffff', 132 | fillAlphas: 0.2, 133 | bullet: 'round', 134 | bulletBorderAlpha: 1, 135 | bulletSize: 5, 136 | hideBulletsCount: 50, 137 | lineThickness: 2, 138 | useLineColorForBulletBorder: true, 139 | valueField: 'value', 140 | balloonText: "[[value]]" 141 | } 142 | } 143 | ] 144 | }); 145 | }); 146 | 147 | return
; 148 | }; 149 | 150 | export default AmChartEarnings; 151 | -------------------------------------------------------------------------------- /react-ui/src/views/dashboard/DashDefault/chart/AmChartStatistics6.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import 'amcharts3/amcharts/amcharts'; 3 | import 'amcharts3/amcharts/serial'; 4 | import 'amcharts3/amcharts/themes/light'; 5 | import AmCharts from '@amcharts/amcharts3-react'; 6 | 7 | const AmChartStatistics6 = (props) => { 8 | useEffect(() => { 9 | AmCharts.makeChart('bar-chart2', { 10 | type: 'serial', 11 | theme: 'light', 12 | marginTop: 10, 13 | marginRight: 0, 14 | valueAxes: [ 15 | { 16 | id: 'v1', 17 | position: 'left', 18 | axisAlpha: 0, 19 | lineAlpha: 0, 20 | autoGridCount: false, 21 | labelFunction: function (value) { 22 | return +Math.round(value) + '00'; 23 | } 24 | } 25 | ], 26 | graphs: [ 27 | { 28 | id: 'g1', 29 | valueAxis: 'v1', 30 | lineColor: ['#1de9b6', '#1dc4e9'], 31 | fillColors: ['#1de9b6', '#1dc4e9'], 32 | fillAlphas: 1, 33 | type: 'column', 34 | title: 'SALES', 35 | valueField: 'sales', 36 | columnWidth: 0.3, 37 | legendValueText: '$[[value]]M', 38 | balloonText: "[[title]]
$[[value]]M" 39 | }, 40 | { 41 | id: 'g2', 42 | valueAxis: 'v1', 43 | lineColor: ['#a389d4', '#899ed4'], 44 | fillColors: ['#a389d4', '#899ed4'], 45 | fillAlphas: 1, 46 | type: 'column', 47 | title: 'VISITS ', 48 | valueField: 'visits', 49 | columnWidth: 0.3, 50 | legendValueText: '$[[value]]M', 51 | balloonText: "[[title]]
$[[value]]M" 52 | }, 53 | { 54 | id: 'g3', 55 | valueAxis: 'v1', 56 | lineColor: ['#04a9f5', '#049df5'], 57 | fillColors: ['#04a9f5', '#049df5'], 58 | fillAlphas: 1, 59 | type: 'column', 60 | title: 'CLICKS', 61 | valueField: 'clicks', 62 | columnWidth: 0.3, 63 | legendValueText: '$[[value]]M', 64 | balloonText: "[[title]]
$[[value]]M" 65 | } 66 | ], 67 | chartCursor: { 68 | pan: true, 69 | valueLineEnabled: true, 70 | valueLineBalloonEnabled: true, 71 | cursorAlpha: 0, 72 | valueLineAlpha: 0.2 73 | }, 74 | categoryField: 'Year', 75 | categoryAxis: { 76 | dashLength: 1, 77 | gridAlpha: 0, 78 | axisAlpha: 0, 79 | lineAlpha: 0, 80 | minorGridEnabled: true 81 | }, 82 | legend: { 83 | useGraphSettings: true, 84 | position: 'top' 85 | }, 86 | balloon: { 87 | borderThickness: 1, 88 | shadowAlpha: 0 89 | }, 90 | dataProvider: [ 91 | { 92 | Year: '2014', 93 | sales: 2, 94 | visits: 4, 95 | clicks: 3 96 | }, 97 | { 98 | Year: '2015', 99 | sales: 4, 100 | visits: 7, 101 | clicks: 5 102 | }, 103 | { 104 | Year: '2016', 105 | sales: 2, 106 | visits: 3, 107 | clicks: 4 108 | }, 109 | { 110 | Year: '2017', 111 | sales: 4.5, 112 | visits: 6, 113 | clicks: 4 114 | } 115 | ] 116 | }); 117 | }); 118 | 119 | return
; 120 | }; 121 | 122 | export default AmChartStatistics6; 123 | -------------------------------------------------------------------------------- /react-ui/src/views/extra/SamplePage.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Row, Col } from 'react-bootstrap'; 3 | 4 | import Card from '../../components/Card/MainCard'; 5 | 6 | const SamplePage = () => { 7 | return ( 8 | 9 | 10 | 11 | 12 |

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

19 | 20 | 21 | 22 | 23 | ); 24 | }; 25 | 26 | export default SamplePage; 27 | -------------------------------------------------------------------------------- /react-ui/src/views/maps/GoogleMaps.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import { Row, Col, Card } from 'react-bootstrap'; 3 | import InfoBox from './google-maps/InfoBox'; 4 | import MarkerClusterer from './google-maps/MarkerClusterer'; 5 | import Marker from './google-maps/Marker'; 6 | import StreetViewPanorma from './google-maps/StreetViewPanorma'; 7 | import ModuleNotification from '../../components/Widgets/Statistic/Notification'; 8 | 9 | import fetch from 'isomorphic-fetch'; 10 | 11 | const GoogleMaps = () => { 12 | const [markers, setMarkers] = useState([]); 13 | 14 | useEffect(() => { 15 | const url = [ 16 | // Length issue 17 | `https://gist.githubusercontent.com`, 18 | `/farrrr/dfda7dd7fccfec5474d3`, 19 | `/raw/758852bbc1979f6c4522ab4e92d1c92cba8fb0dc/data.json` 20 | ].join(''); 21 | 22 | fetch(url) 23 | .then((res) => res.json()) 24 | .then((data) => { 25 | setMarkers(data.photos); 26 | }); 27 | 28 | return () => { 29 | setMarkers([]); 30 | }; 31 | }, []); 32 | 33 | return ( 34 | 35 | 36 | 37 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | Default Marker 48 | 49 | 50 | } 53 | containerElement={
} 54 | mapElement={
} 55 | /> 56 | 57 | 58 | 59 | 60 | 61 | 62 | Infobox 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | Marker Clusterer 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | Street View Panorma 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | ); 92 | }; 93 | 94 | export default GoogleMaps; 95 | -------------------------------------------------------------------------------- /react-ui/src/views/maps/google-maps/InfoBox.js: -------------------------------------------------------------------------------- 1 | /*global google*/ 2 | 3 | import InfoBox from 'react-google-maps/lib/components/addons/InfoBox'; 4 | import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps'; 5 | import { compose, withProps, withStateHandlers } from 'recompose'; 6 | import fancyMapStyles from './fancy-map-styles.json'; 7 | 8 | const StyledMapWithAnInfoBox = compose( 9 | withProps({ 10 | googleMapURL: 11 | 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAChufWiMfwsmyX3Se1dRaN4t31z0xmIMo&v=3.exp&libraries=geometry,drawing,places', 12 | loadingElement:
, 13 | containerElement:
, 14 | mapElement:
, 15 | center: { lat: 28.5274851, lng: 77.1389452 } 16 | }), 17 | withStateHandlers( 18 | () => ({ 19 | isOpen: false 20 | }), 21 | { 22 | onToggleOpen: ({ isOpen }) => () => ({ 23 | isOpen: !isOpen 24 | }) 25 | } 26 | ), 27 | withScriptjs, 28 | withGoogleMap 29 | )((props) => ( 30 | 31 | 35 |
36 |
Hello, India!
37 |
38 | 39 | 40 | {props.isOpen && ( 41 | 42 |
43 |
Hello, Gujarat!
44 |
45 | 46 | )} 47 | 48 | 49 | )); 50 | 51 | export default StyledMapWithAnInfoBox; 52 | -------------------------------------------------------------------------------- /react-ui/src/views/maps/google-maps/Marker.js: -------------------------------------------------------------------------------- 1 | import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps'; 2 | import { compose } from 'recompose'; 3 | 4 | const MapWithAMarker = compose( 5 | withScriptjs, 6 | withGoogleMap 7 | )((props) => ( 8 | 9 | 10 | 11 | )); 12 | 13 | export default MapWithAMarker; 14 | -------------------------------------------------------------------------------- /react-ui/src/views/maps/google-maps/MarkerClusterer.js: -------------------------------------------------------------------------------- 1 | import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps'; 2 | import { compose, withProps, withHandlers } from 'recompose'; 3 | 4 | const { MarkerClusterer } = require('react-google-maps/lib/components/addons/MarkerClusterer'); 5 | 6 | const MapWithAMarkerClusterer = compose( 7 | withProps({ 8 | googleMapURL: 9 | 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAChufWiMfwsmyX3Se1dRaN4t31z0xmIMo&v=3.exp&libraries=geometry,drawing,places', 10 | loadingElement:
, 11 | containerElement:
, 12 | mapElement:
13 | }), 14 | withHandlers({ 15 | onMarkerClustererClick: () => (markerClusterer) => { 16 | const clickedMarkers = markerClusterer.getMarkers(); 17 | console.log(`Current clicked markers length: ${clickedMarkers.length}`); 18 | console.log(clickedMarkers); 19 | } 20 | }), 21 | withScriptjs, 22 | withGoogleMap 23 | )((props) => ( 24 | 25 | 26 | {props.markers.map((marker) => ( 27 | 28 | ))} 29 | 30 | 31 | )); 32 | 33 | export default MapWithAMarkerClusterer; 34 | -------------------------------------------------------------------------------- /react-ui/src/views/maps/google-maps/StreetViewPanorma.js: -------------------------------------------------------------------------------- 1 | const { compose, withProps } = require('recompose'); 2 | 3 | const { withScriptjs, withGoogleMap, GoogleMap, StreetViewPanorama, OverlayView } = require('react-google-maps'); 4 | 5 | const getPixelPositionOffset = (width, height) => ({ 6 | x: -(width / 2), 7 | y: -(height / 2) 8 | }); 9 | 10 | const StreetViewPanormaWithAnOverlayView = compose( 11 | withProps({ 12 | googleMapURL: 13 | 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAChufWiMfwsmyX3Se1dRaN4t31z0xmIMo&v=3.exp&libraries=geometry,drawing,places', 14 | loadingElement:
, 15 | containerElement:
, 16 | mapElement:
, 17 | center: { lat: 49.2853171, lng: -123.1119202 } 18 | }), 19 | withScriptjs, 20 | withGoogleMap 21 | )((props) => ( 22 | 23 | 24 | 29 |
OverlayView
30 | 31 | 32 | 33 | )); 34 | 35 | export default StreetViewPanormaWithAnOverlayView; 36 | -------------------------------------------------------------------------------- /react-ui/src/views/maps/google-maps/fancy-map-styles.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "featureType": "all", 4 | "elementType": "labels.text.fill", 5 | "stylers": [ 6 | { 7 | "color": "#ffffff" 8 | } 9 | ] 10 | }, 11 | { 12 | "featureType": "all", 13 | "elementType": "labels.text.stroke", 14 | "stylers": [ 15 | { 16 | "color": "#000000" 17 | }, 18 | { 19 | "lightness": 13 20 | } 21 | ] 22 | }, 23 | { 24 | "featureType": "administrative", 25 | "elementType": "geometry.fill", 26 | "stylers": [ 27 | { 28 | "color": "#000000" 29 | } 30 | ] 31 | }, 32 | { 33 | "featureType": "administrative", 34 | "elementType": "geometry.stroke", 35 | "stylers": [ 36 | { 37 | "color": "#144b53" 38 | }, 39 | { 40 | "lightness": 14 41 | }, 42 | { 43 | "weight": 1.4 44 | } 45 | ] 46 | }, 47 | { 48 | "featureType": "landscape", 49 | "elementType": "all", 50 | "stylers": [ 51 | { 52 | "color": "#08304b" 53 | } 54 | ] 55 | }, 56 | { 57 | "featureType": "poi", 58 | "elementType": "geometry", 59 | "stylers": [ 60 | { 61 | "color": "#0c4152" 62 | }, 63 | { 64 | "lightness": 5 65 | } 66 | ] 67 | }, 68 | { 69 | "featureType": "road.highway", 70 | "elementType": "geometry.fill", 71 | "stylers": [ 72 | { 73 | "color": "#000000" 74 | } 75 | ] 76 | }, 77 | { 78 | "featureType": "road.highway", 79 | "elementType": "geometry.stroke", 80 | "stylers": [ 81 | { 82 | "color": "#0b434f" 83 | }, 84 | { 85 | "lightness": 25 86 | } 87 | ] 88 | }, 89 | { 90 | "featureType": "road.arterial", 91 | "elementType": "geometry.fill", 92 | "stylers": [ 93 | { 94 | "color": "#000000" 95 | } 96 | ] 97 | }, 98 | { 99 | "featureType": "road.arterial", 100 | "elementType": "geometry.stroke", 101 | "stylers": [ 102 | { 103 | "color": "#0b3d51" 104 | }, 105 | { 106 | "lightness": 16 107 | } 108 | ] 109 | }, 110 | { 111 | "featureType": "road.local", 112 | "elementType": "geometry", 113 | "stylers": [ 114 | { 115 | "color": "#000000" 116 | } 117 | ] 118 | }, 119 | { 120 | "featureType": "transit", 121 | "elementType": "all", 122 | "stylers": [ 123 | { 124 | "color": "#146474" 125 | } 126 | ] 127 | }, 128 | { 129 | "featureType": "water", 130 | "elementType": "all", 131 | "stylers": [ 132 | { 133 | "color": "#021019" 134 | } 135 | ] 136 | } 137 | ] 138 | -------------------------------------------------------------------------------- /react-ui/src/views/ui-elements/basic/BasicBadges.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Row, Col, Badge, Button } from 'react-bootstrap'; 3 | import { Link } from 'react-router-dom'; 4 | import ModuleNotification from '../../../components/Widgets/Statistic/Notification'; 5 | 6 | import Card from '../../../components/Card/MainCard'; 7 | 8 | const BasicBadges = () => { 9 | const buttonVariants = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']; 10 | 11 | const buttonBadges = buttonVariants.map((variant, idx) => ( 12 | 18 | )); 19 | 20 | const contextualBadges = buttonVariants.map((variant, idx) => ( 21 | 22 | {variant} 23 | 24 | )); 25 | 26 | const pillBadges = buttonVariants.map((variant, idx) => ( 27 | 28 | {variant} 29 | 30 | )); 31 | 32 | const linkBadges = buttonVariants.map((variant, idx) => ( 33 | 34 | 35 | {variant} 36 | 37 | 38 | )); 39 | 40 | return ( 41 | 42 | 43 | 44 | 48 | 49 | 50 | 51 | 52 | 53 |

54 | Example heading New 55 |

56 |

57 | Example heading New 58 |

59 |

60 | Example heading New 61 |

62 |

63 | Example heading New 64 |

65 |
66 | Example heading New 67 |
68 |
69 | Example heading New 70 |
71 | 72 | {buttonBadges} 73 | {contextualBadges} 74 | {pillBadges} 75 | {linkBadges} 76 | 77 | 78 | 79 | ); 80 | }; 81 | 82 | export default BasicBadges; 83 | -------------------------------------------------------------------------------- /react-ui/src/views/ui-elements/basic/BasicBreadcrumb.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Row, Col, Breadcrumb, Pagination } from 'react-bootstrap'; 3 | import { Link } from 'react-router-dom'; 4 | import ModuleNotification from '../../../components/Widgets/Statistic/Notification'; 5 | 6 | import Card from '../../../components/Card/MainCard'; 7 | 8 | const BasicBreadcrumbPagination = () => { 9 | let active = 3; 10 | let disabled = 4; 11 | let items = []; 12 | let activeItems = []; 13 | let disabledItems = []; 14 | 15 | for (let number = 1; number <= 5; number++) { 16 | items.push({number}); 17 | } 18 | 19 | for (let number = 1; number <= 5; number++) { 20 | activeItems.push( 21 | 22 | {number} 23 | 24 | ); 25 | } 26 | 27 | for (let number = 1; number <= 5; number++) { 28 | disabledItems.push( 29 | 30 | {number} 31 | 32 | ); 33 | } 34 | 35 | return ( 36 | 37 | 38 | 39 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | Home 51 | 52 | 53 | 54 | 55 | Home 56 | 57 | 58 | Library 59 | 60 | 61 | 62 | 63 | Home 64 | 65 | 66 | Library 67 | 68 | Data 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | Library 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | Library 93 | 94 | Data 95 | 96 | 97 | 98 | 99 | 100 | ); 101 | }; 102 | 103 | export default BasicBreadcrumbPagination; 104 | --------------------------------------------------------------------------------