├── api-server-nodejs
├── .nvmrc
├── .env
├── tsconfig.build.json
├── .gitignore
├── src
│ ├── config
│ │ ├── config.ts
│ │ ├── safeRoutes.ts
│ │ └── passport.ts
│ ├── index.ts
│ ├── models
│ │ ├── activeSession.ts
│ │ └── user.ts
│ ├── server
│ │ ├── index.ts
│ │ └── database.ts
│ ├── migrations
│ │ └── 1626737786922-init.ts
│ └── routes
│ │ └── users.ts
├── jest.config.js
├── production.config.json
├── ormconfig.json
├── tests
│ └── basic.test.ts
├── .gitattributes
├── .eslintrc.js
├── tsconfig.json
├── LICENSE.md
├── package.json
└── CHANGELOG.md
├── react-ui
├── src
│ ├── assets
│ │ ├── scss
│ │ │ ├── partials
│ │ │ │ ├── _mixins.scss
│ │ │ │ ├── third-party
│ │ │ │ │ ├── react-bootstrap
│ │ │ │ │ │ ├── react-bootstrap.scss
│ │ │ │ │ │ └── _header.scss
│ │ │ │ │ ├── _google-map.scss
│ │ │ │ │ ├── _react-full-screen.scss
│ │ │ │ │ ├── _third-party.scss
│ │ │ │ │ ├── _ngx-perfect-scrollbar.scss
│ │ │ │ │ └── _datatables.scss
│ │ │ │ ├── font
│ │ │ │ │ ├── fonts
│ │ │ │ │ │ ├── pct.eot
│ │ │ │ │ │ ├── pct.ttf
│ │ │ │ │ │ ├── pct.woff
│ │ │ │ │ │ ├── Flaticon.eot
│ │ │ │ │ │ ├── Flaticon.ttf
│ │ │ │ │ │ ├── Flaticon.woff
│ │ │ │ │ │ ├── feather.eot
│ │ │ │ │ │ ├── feather.ttf
│ │ │ │ │ │ ├── feather.woff
│ │ │ │ │ │ ├── Flaticon.woff2
│ │ │ │ │ │ ├── cryptocoins.ttf
│ │ │ │ │ │ ├── cryptocoins.woff
│ │ │ │ │ │ ├── cryptocoins.woff2
│ │ │ │ │ │ ├── fa-brands-400.eot
│ │ │ │ │ │ ├── fa-brands-400.ttf
│ │ │ │ │ │ ├── fa-brands-400.woff
│ │ │ │ │ │ ├── fa-regular-400.eot
│ │ │ │ │ │ ├── fa-regular-400.ttf
│ │ │ │ │ │ ├── fa-solid-900.eot
│ │ │ │ │ │ ├── fa-solid-900.ttf
│ │ │ │ │ │ ├── fa-solid-900.woff
│ │ │ │ │ │ ├── fa-solid-900.woff2
│ │ │ │ │ │ ├── fa-brands-400.woff2
│ │ │ │ │ │ ├── fa-regular-400.woff
│ │ │ │ │ │ ├── fa-regular-400.woff2
│ │ │ │ │ │ ├── poppins
│ │ │ │ │ │ │ ├── pxiEyp8kv8JHgFVrJJfecg.woff2
│ │ │ │ │ │ │ ├── pxiEyp8kv8JHgFVrJJnecmNE.woff2
│ │ │ │ │ │ │ ├── pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2
│ │ │ │ │ │ │ ├── pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2
│ │ │ │ │ │ │ ├── pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2
│ │ │ │ │ │ │ ├── pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2
│ │ │ │ │ │ │ ├── pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2
│ │ │ │ │ │ │ └── pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2
│ │ │ │ │ │ └── pct.svg
│ │ │ │ │ ├── _datta-icon.scss
│ │ │ │ │ ├── _next-icon.scss
│ │ │ │ │ └── _theme-font.scss
│ │ │ │ ├── mixins
│ │ │ │ │ ├── _alert.scss
│ │ │ │ │ ├── _pagination.scss
│ │ │ │ │ ├── _function.scss
│ │ │ │ │ └── _buttons.scss
│ │ │ │ ├── theme-elements
│ │ │ │ │ ├── _labels-badges.scss
│ │ │ │ │ ├── _breadcrumb-pagination.scss
│ │ │ │ │ ├── _tooltip.scss
│ │ │ │ │ ├── _data-tables.scss
│ │ │ │ │ ├── _form.scss
│ │ │ │ │ ├── _authentication.scss
│ │ │ │ │ └── _button.scss
│ │ │ │ ├── _generic.scss
│ │ │ │ └── _variables.scss
│ │ │ └── style.scss
│ │ └── images
│ │ │ ├── logo.png
│ │ │ ├── complete.png
│ │ │ ├── logo-dark.png
│ │ │ ├── user
│ │ │ ├── avatar-1.jpg
│ │ │ ├── avatar-2.jpg
│ │ │ ├── avatar-3.jpg
│ │ │ └── avatar-4.jpg
│ │ │ └── nav-bg
│ │ │ ├── navbar-img-1.jpg
│ │ │ ├── navbar-img-2.jpg
│ │ │ ├── navbar-img-3.jpg
│ │ │ ├── navbar-img-4.jpg
│ │ │ └── navbar-img-5.jpg
│ ├── utils
│ │ ├── services.js
│ │ └── axios.js
│ ├── components
│ │ ├── Loader
│ │ │ ├── Loader.js
│ │ │ ├── Container.js
│ │ │ ├── Progress.js
│ │ │ ├── Spinner.js
│ │ │ └── Bar.js
│ │ ├── Auth
│ │ │ ├── AuthGuard.js
│ │ │ └── GuestGuard.js
│ │ ├── Widgets
│ │ │ └── Statistic
│ │ │ │ └── Notification.js
│ │ └── Card
│ │ │ └── MainCard.js
│ ├── hooks
│ │ ├── useScriptRef.js
│ │ ├── useOutsideClick.js
│ │ └── useWindowSize.js
│ ├── store
│ │ ├── actions.js
│ │ ├── index.js
│ │ ├── reducers.js
│ │ └── accountReducer.js
│ ├── App.js
│ ├── layouts
│ │ └── AdminLayout
│ │ │ ├── Navigation
│ │ │ ├── NavContent
│ │ │ │ ├── NavIcon
│ │ │ │ │ └── index.js
│ │ │ │ ├── NavBadge
│ │ │ │ │ └── index.js
│ │ │ │ ├── index.js
│ │ │ │ ├── NavGroup
│ │ │ │ │ └── index.js
│ │ │ │ ├── NavItem
│ │ │ │ │ └── index.js
│ │ │ │ └── NavCollapse
│ │ │ │ │ └── index.js
│ │ │ ├── NavLogo
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ │ ├── NavBar
│ │ │ ├── NavRight
│ │ │ │ └── ChatList
│ │ │ │ │ ├── Friends
│ │ │ │ │ ├── index.js
│ │ │ │ │ ├── Chat
│ │ │ │ │ │ ├── Messages
│ │ │ │ │ │ │ └── index.js
│ │ │ │ │ │ └── index.js
│ │ │ │ │ ├── Friend
│ │ │ │ │ │ └── index.js
│ │ │ │ │ └── friends.js
│ │ │ │ │ └── index.js
│ │ │ ├── NavLeft
│ │ │ │ ├── NavSearch
│ │ │ │ │ └── index.js
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ │ ├── index.js
│ │ │ └── Breadcrumb
│ │ │ └── index.js
│ ├── reportWebVitals.js
│ ├── views
│ │ ├── maps
│ │ │ ├── google-maps
│ │ │ │ ├── Marker.js
│ │ │ │ ├── StreetViewPanorma.js
│ │ │ │ ├── MarkerClusterer.js
│ │ │ │ ├── InfoBox.js
│ │ │ │ └── fancy-map-styles.json
│ │ │ └── GoogleMaps.js
│ │ ├── charts
│ │ │ └── nvd3-chart
│ │ │ │ ├── chart
│ │ │ │ ├── PieBasicChart.js
│ │ │ │ ├── PieDonutChart.js
│ │ │ │ ├── MultiBarChart.js
│ │ │ │ ├── BarDiscreteChart.js
│ │ │ │ └── LineChart.js
│ │ │ │ └── index.js
│ │ ├── extra
│ │ │ └── SamplePage.js
│ │ ├── auth
│ │ │ ├── signin
│ │ │ │ ├── SignIn2.js
│ │ │ │ └── SignIn1.js
│ │ │ └── signup
│ │ │ │ ├── SignUp1.js
│ │ │ │ └── SignUp2.js
│ │ ├── ui-elements
│ │ │ └── basic
│ │ │ │ ├── BasicBadges.js
│ │ │ │ └── BasicBreadcrumb.js
│ │ └── dashboard
│ │ │ └── DashDefault
│ │ │ └── chart
│ │ │ ├── AmChartStatistics6.js
│ │ │ └── AmChartEarnings.js
│ ├── index.js
│ ├── config
│ │ └── constant.js
│ ├── contexts
│ │ └── ConfigContext.js
│ └── routes.js
├── .env
├── env.sample
├── public
│ ├── robots.txt
│ ├── favicon.ico
│ └── index.html
├── .prettierrc
├── docker-compose.yml
├── .gitignore
├── Dockerfile
├── CHANGELOG.md
└── package.json
├── LICENSE.md
└── CHANGELOG.md
/api-server-nodejs/.nvmrc:
--------------------------------------------------------------------------------
1 | v14
--------------------------------------------------------------------------------
/react-ui/src/assets/scss/partials/_mixins.scss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/react-ui/.env:
--------------------------------------------------------------------------------
1 | GENERATE_SOURCEMAP=false
2 | REACT_APP_BACKEND_SERVER='http://127.0.0.1:5000/api/'
3 |
--------------------------------------------------------------------------------
/react-ui/env.sample:
--------------------------------------------------------------------------------
1 | GENERATE_SOURCEMAP=false
2 | REACT_APP_BACKEND_SERVER='http://127.0.0.1:5000/api/'
3 |
--------------------------------------------------------------------------------
/react-ui/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/react-ui/src/assets/scss/partials/third-party/react-bootstrap/react-bootstrap.scss:
--------------------------------------------------------------------------------
1 | @import 'header';
2 |
--------------------------------------------------------------------------------
/api-server-nodejs/.env:
--------------------------------------------------------------------------------
1 | NODE_ENV=DEV
2 | PORT=5000
3 | SQLITE_PATH=./database.db
4 | SECRET="SuperS3cret_4277m"
--------------------------------------------------------------------------------
/react-ui/src/assets/scss/partials/third-party/_google-map.scss:
--------------------------------------------------------------------------------
1 | .map {
2 | position: relative !important;
3 | }
4 |
--------------------------------------------------------------------------------
/react-ui/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/HEAD/react-ui/public/favicon.ico
--------------------------------------------------------------------------------
/react-ui/src/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/HEAD/react-ui/src/assets/images/logo.png
--------------------------------------------------------------------------------
/api-server-nodejs/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "exclude": ["node_modules", "**/*.test.ts", "tests"]
4 | }
5 |
--------------------------------------------------------------------------------
/react-ui/src/assets/images/complete.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/HEAD/react-ui/src/assets/images/complete.png
--------------------------------------------------------------------------------
/react-ui/src/assets/images/logo-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/HEAD/react-ui/src/assets/images/logo-dark.png
--------------------------------------------------------------------------------
/react-ui/src/assets/images/user/avatar-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/HEAD/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/HEAD/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/HEAD/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/HEAD/react-ui/src/assets/images/user/avatar-4.jpg
--------------------------------------------------------------------------------
/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
--------------------------------------------------------------------------------
/react-ui/src/assets/images/nav-bg/navbar-img-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/react-ui/src/assets/images/nav-bg/navbar-img-5.jpg
--------------------------------------------------------------------------------
/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/font/fonts/pct.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/HEAD/react-ui/src/assets/scss/partials/font/fonts/pct.eot
--------------------------------------------------------------------------------
/react-ui/src/assets/scss/partials/font/fonts/pct.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/HEAD/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/HEAD/react-ui/src/assets/scss/partials/font/fonts/pct.woff
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/react-ui/src/assets/scss/partials/font/fonts/Flaticon.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/HEAD/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/HEAD/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/HEAD/react-ui/src/assets/scss/partials/font/fonts/Flaticon.woff
--------------------------------------------------------------------------------
/react-ui/src/assets/scss/partials/font/fonts/feather.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/HEAD/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/HEAD/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/HEAD/react-ui/src/assets/scss/partials/font/fonts/feather.woff
--------------------------------------------------------------------------------
/react-ui/src/assets/scss/partials/font/fonts/Flaticon.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/react-ui/src/assets/scss/partials/font/fonts/fa-brands-400.woff
--------------------------------------------------------------------------------
/react-ui/src/assets/scss/partials/font/fonts/fa-regular-400.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/HEAD/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/HEAD/react-ui/src/assets/scss/partials/font/fonts/fa-regular-400.ttf
--------------------------------------------------------------------------------
/react-ui/src/assets/scss/partials/font/fonts/fa-solid-900.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/HEAD/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/HEAD/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/HEAD/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/HEAD/react-ui/src/assets/scss/partials/font/fonts/fa-solid-900.woff2
--------------------------------------------------------------------------------
/react-ui/src/assets/scss/partials/font/fonts/fa-brands-400.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/HEAD/react-ui/src/assets/scss/partials/font/fonts/fa-brands-400.woff2
--------------------------------------------------------------------------------
/react-ui/src/assets/scss/partials/font/fonts/fa-regular-400.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/HEAD/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/HEAD/react-ui/src/assets/scss/partials/font/fonts/fa-regular-400.woff2
--------------------------------------------------------------------------------
/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/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/assets/scss/partials/font/fonts/poppins/pxiEyp8kv8JHgFVrJJfecg.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/HEAD/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/HEAD/react-ui/src/assets/scss/partials/font/fonts/poppins/pxiEyp8kv8JHgFVrJJnecmNE.woff2
--------------------------------------------------------------------------------
/react-ui/src/assets/scss/partials/font/fonts/poppins/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/HEAD/react-ui/src/assets/scss/partials/font/fonts/poppins/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2
--------------------------------------------------------------------------------
/react-ui/src/assets/scss/partials/font/fonts/poppins/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/HEAD/react-ui/src/assets/scss/partials/font/fonts/poppins/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2
--------------------------------------------------------------------------------
/react-ui/src/assets/scss/partials/font/fonts/poppins/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/HEAD/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/HEAD/react-ui/src/assets/scss/partials/font/fonts/poppins/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2
--------------------------------------------------------------------------------
/react-ui/src/assets/scss/partials/font/fonts/poppins/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Phoenix-Genius/react-datta-able/HEAD/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/HEAD/react-ui/src/assets/scss/partials/font/fonts/poppins/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2
--------------------------------------------------------------------------------
/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 | };
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------
/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/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/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/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 |
--------------------------------------------------------------------------------
/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 | ]
--------------------------------------------------------------------------------
/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/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/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/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/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/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/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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/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/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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/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/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/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/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/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/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/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/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/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/.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 |
--------------------------------------------------------------------------------
/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/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/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 |
--------------------------------------------------------------------------------
/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/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/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/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/react-ui/src/components/Loader/Spinner.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Spinner = () => {
4 | return (
5 |
28 | );
29 | };
30 |
31 | export default Spinner;
32 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/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/components/Loader/Bar.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Bar = ({ animationDuration, progress }) => {
4 | return (
5 |
31 | );
32 | };
33 |
34 | export default Bar;
35 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 | {group.title}
28 |
29 | {navItems}
30 |
31 | );
32 | };
33 |
34 | export default NavGroup;
35 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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* >
--------------------------------------------------------------------------------
/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/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/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 |
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 |
32 | {message.time}
33 |
34 |
35 |
36 | );
37 | };
38 |
39 | export default Messages;
40 |
--------------------------------------------------------------------------------
/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/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/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/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/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 |
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/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 |
35 |
36 | );
37 | };
38 |
39 | export default ChatList;
40 |
--------------------------------------------------------------------------------
/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/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 | You need to enable JavaScript to run this app.
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/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/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/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 |
54 | {navContent}
55 |
56 |
57 | );
58 | };
59 |
60 | export default Navigation;
61 |
--------------------------------------------------------------------------------
/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 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | );
47 | };
48 |
49 | export default NavSearch;
50 |
--------------------------------------------------------------------------------
/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/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/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/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 |
54 |
55 | );
56 | };
57 |
58 | export default NavBar;
59 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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 |
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/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/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/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/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/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/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/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/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/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/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/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 |
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 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 | );
66 | };
67 |
68 | export default Chat;
69 |
--------------------------------------------------------------------------------
/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/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 |
55 |
56 | );
57 | };
58 |
59 | export default SignUp1;
60 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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 |
13 | {variant}
14 |
15 | 4
16 |
17 |
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/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/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/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/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/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/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/_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/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/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 |
--------------------------------------------------------------------------------
/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/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/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/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/assets/scss/partials/theme-elements/_button.scss:
--------------------------------------------------------------------------------
1 | @import '../mixins/buttons';
2 | /** =====================
3 | Button css start
4 | ========================== **/
5 | .btn-theme,
6 | a.btn-theme {
7 | background: $theme-color;
8 | color: #fff;
9 | box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
10 | border-color: #1de1c2;
11 | border-radius: 0.25rem;
12 | padding: 11px 25px;
13 |
14 | &:active,
15 | &:focus,
16 | &:not(:disabled):not(.disabled):active {
17 | background-image: $theme-color;
18 | color: #fff;
19 | box-shadow: none;
20 | }
21 |
22 | &.active {
23 | background-image: #fff !important;
24 | color: $default-color;
25 | border: 1px solid $theme-border;
26 | box-shadow: none;
27 | }
28 | }
29 |
30 | .btn-outline-theme {
31 | background-image: #fff !important;
32 | color: $default-color;
33 | border: 1px solid $theme-border;
34 | box-shadow: none;
35 |
36 | &:active,
37 | &:focus,
38 | &:not(:disabled):not(.disabled):active {
39 | background-image: #fff;
40 | color: $default-color;
41 | border: 1px solid $theme-border;
42 | }
43 |
44 | &.active {
45 | background: $theme-color !important;
46 | color: #fff;
47 | box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
48 | border: 1px solid transparent;
49 | }
50 | }
51 |
52 | .btn-theme2 {
53 | background: $theme-color2;
54 | color: #fff;
55 | box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
56 | border: 1px solid transparent;
57 | border-radius: 10px;
58 | padding: 14px 25px;
59 |
60 | &:active,
61 | &:focus,
62 | &:not(:disabled):not(.disabled):active {
63 | background-image: $theme-color2;
64 | color: #fff;
65 | box-shadow: none;
66 | }
67 |
68 | &.active {
69 | background-image: #fff !important;
70 | color: $default-color;
71 | border: 1px solid $theme-border;
72 | box-shadow: none;
73 | }
74 | }
75 |
76 | .btn-outline-theme2 {
77 | background-image: #fff !important;
78 | color: $default-color;
79 | border: 1px solid $theme-border;
80 | box-shadow: none;
81 |
82 | &:active,
83 | &:focus,
84 | &:not(:disabled):not(.disabled):active {
85 | background-image: #fff;
86 | color: $default-color;
87 | border: 1px solid $theme-border;
88 | }
89 |
90 | &.active {
91 | background: $theme-color2 !important;
92 | color: #fff;
93 | box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
94 | border: 1px solid transparent;
95 | }
96 | }
97 |
98 | .btn {
99 | padding: 10px 20px;
100 | border-radius: 0.25rem;
101 | font-size: 14px;
102 | margin-bottom: 5px;
103 | margin-right: 10px;
104 | transition: all 0.3s ease-in-out;
105 |
106 | > i {
107 | margin-right: 12px;
108 | }
109 |
110 | &.btn-icon,
111 | &.drp-icon {
112 | width: 45px;
113 | height: 45px;
114 | padding: 10px 12px;
115 |
116 | > i {
117 | margin-right: 0;
118 | }
119 | }
120 |
121 | &.drp-icon {
122 | &.dropdown-toggle:after {
123 | display: none;
124 | }
125 |
126 | + .dropdown-menu {
127 | margin-left: -10px;
128 | }
129 | }
130 |
131 | &:active,
132 | &:focus {
133 | box-shadow: none;
134 | }
135 |
136 | &-square {
137 | border-radius: 0;
138 | }
139 |
140 | &.disabled {
141 | cursor: not-allowed;
142 | opacity: 0.55;
143 | }
144 |
145 | &-rounded {
146 | border-radius: 30px;
147 | }
148 | }
149 |
150 | .btn-group {
151 | .btn {
152 | margin-bottom: 0;
153 | margin-right: 0;
154 | }
155 | }
156 |
157 | .btn-group-sm > .btn,
158 | .btn-sm {
159 | padding: 6px 14px;
160 | font-size: 13px;
161 | }
162 |
163 | .btn-group-lg > .btn,
164 | .btn-lg {
165 | padding: 13px 23px;
166 | font-size: 16px;
167 | }
168 |
169 | .shadow-1 {
170 | box-shadow: 0 7px 12px 0 rgba(62, 57, 107, 0.16);
171 | }
172 |
173 | .shadow-2 {
174 | box-shadow: 0 10px 18px 0 rgba(62, 57, 107, 0.2);
175 | }
176 |
177 | .shadow-3 {
178 | box-shadow: 0 14px 24px 0 rgba(62, 57, 107, 0.26);
179 | }
180 |
181 | .shadow-4 {
182 | box-shadow: 0 16px 28px 0 rgba(62, 57, 107, 0.3);
183 | }
184 |
185 | .shadow-5 {
186 | box-shadow: 0 20px 24px 0 rgba(62, 57, 107, 0.36);
187 | }
188 | /* Alternate buttons */
189 | @each $color, $value in $theme-colors {
190 | .btn-#{$color} {
191 | @include button-variant-pc($value, $value);
192 | }
193 | }
194 | /* outline buttons */
195 | @each $color, $value in $theme-colors {
196 | .btn-outline-#{$color} {
197 | @include button-outline-variant-pc($value);
198 | }
199 | }
200 | /* glow buttons */
201 | @each $color, $value in $theme-colors {
202 | .btn-glow-#{$color} {
203 | @include button-glow-variant-pc($value);
204 | }
205 | }
206 | /**====== Button css end ======**/
207 |
208 | .drp-icon {
209 | .btn {
210 | width: 45px;
211 | height: 45px;
212 | padding: 10px 12px;
213 |
214 | > i {
215 | margin-right: 0;
216 | }
217 | &.dropdown-toggle:after {
218 | display: none;
219 | }
220 | }
221 |
222 | + .dropdown-menu {
223 | margin-left: -10px;
224 | }
225 | &.btn-rounded {
226 | .btn {
227 | &.dropdown-toggle {
228 | border-radius: 30px;
229 | }
230 | }
231 | }
232 | }
233 |
234 | .btn:not(:disabled):not(.disabled) {
235 | cursor: pointer;
236 | }
237 |
--------------------------------------------------------------------------------