├── src ├── assets │ ├── styles │ │ ├── base │ │ │ ├── _new_variables.scss │ │ │ ├── _notifications.scss │ │ │ ├── mixins │ │ │ │ ├── _tabs.scss │ │ │ │ ├── _cards.scss │ │ │ │ ├── _navbars.scss │ │ │ │ ├── _icons.scss │ │ │ │ ├── _inputs.scss │ │ │ │ ├── _transparency.scss │ │ │ │ ├── _labels.scss │ │ │ │ ├── _social-buttons.scss │ │ │ │ ├── _morphing-buttons.scss │ │ │ │ ├── _buttons.scss │ │ │ │ ├── _chartist.scss │ │ │ │ └── _vendor-prefixes.scss │ │ │ ├── _mixins.scss │ │ │ ├── _icons.scss │ │ │ ├── _footer.scss │ │ │ ├── _social-buttons.scss │ │ │ ├── _panels.scss │ │ │ ├── _pagination.scss │ │ │ ├── _card.scss │ │ │ ├── _typography.scss │ │ │ ├── _navbar.scss │ │ │ ├── _form.scss │ │ │ ├── _buttons.scss │ │ │ ├── _sidebar.scss │ │ │ ├── _variables.scss │ │ │ └── _chartist.scss │ │ └── base.scss │ └── images │ │ ├── mask.png │ │ ├── Rajib.jpeg │ │ ├── radio-1.svg │ │ ├── checkbox-1.svg │ │ ├── checkbox-uncheck.svg │ │ ├── loading-bubbles.svg │ │ ├── checkbox-2.svg │ │ ├── radio-2.svg │ │ └── checkbox-check.svg ├── pages │ ├── Components │ │ ├── Panels │ │ │ ├── index.js │ │ │ └── PanelGroup.js │ │ ├── index.js │ │ ├── Buttons │ │ │ ├── index.js │ │ │ ├── Colors.js │ │ │ ├── ButtonSizes.js │ │ │ └── Pagination.js │ │ └── Notifications.js │ ├── Main │ │ ├── Footer.js │ │ ├── Header.js │ │ └── index.js │ ├── UserProfile │ │ ├── index.js │ │ └── ProfileForm.js │ ├── Tables │ │ ├── RegularTables │ │ │ ├── index.js │ │ │ └── PlainBackgroundTable.js │ │ ├── index.js │ │ ├── generateData.js │ │ └── ReactBootstrapTable │ │ │ └── index.js │ └── Dashboard │ │ ├── index.js │ │ ├── UserStatistic.js │ │ ├── SalesStatistics.js │ │ └── ServerStatus.js ├── reducers │ ├── Auth.js │ ├── index.js │ ├── Layout.js │ └── ThemeOptions.js ├── config │ └── configureStore.js ├── components │ ├── Switch.js │ ├── Tags.js │ ├── SideBar │ │ ├── UserInfo.js │ │ ├── index.js │ │ └── Nav.js │ ├── MobileMenu.js │ └── ThemeOptions.js ├── index.js └── registerServiceWorker.js ├── public ├── favicon.ico ├── manifest.json └── index.html ├── config ├── jest │ ├── fileTransform.js │ └── cssTransform.js ├── polyfills.js ├── paths.js ├── env.js ├── webpackDevServer.config.js ├── webpack.config.dev.js └── webpack.config.prod.js ├── .gitignore ├── README.md ├── scripts ├── test.js ├── start.js └── build.js └── package.json /src/assets/styles/base/_new_variables.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/styles/base/_notifications.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajibchandrakarmaker/react-admin/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/images/mask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajibchandrakarmaker/react-admin/HEAD/src/assets/images/mask.png -------------------------------------------------------------------------------- /src/assets/images/Rajib.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajibchandrakarmaker/react-admin/HEAD/src/assets/images/Rajib.jpeg -------------------------------------------------------------------------------- /src/assets/styles/base/mixins/_tabs.scss: -------------------------------------------------------------------------------- 1 | @mixin pill-style($color){ 2 | border: 1px solid $color; 3 | color: $color; 4 | } -------------------------------------------------------------------------------- /src/assets/styles/base/mixins/_cards.scss: -------------------------------------------------------------------------------- 1 | @mixin filter($color){ 2 | @if $color == #FFFFFF{ 3 | background-color: rgba($color,.91); 4 | } @else { 5 | background-color: rgba($color,.69); 6 | } 7 | } 8 | 9 | -------------------------------------------------------------------------------- /src/assets/styles/base/mixins/_navbars.scss: -------------------------------------------------------------------------------- 1 | @mixin navbar-color($color){ 2 | background-color: $color; 3 | } 4 | 5 | @mixin center-item(){ 6 | left: 0; 7 | right: 0; 8 | margin-right: auto; 9 | margin-left: auto; 10 | position: absolute; 11 | } -------------------------------------------------------------------------------- /src/pages/Components/Panels/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PanelGroup from './PanelGroup'; 3 | const Panels = () => ( 4 |
5 |
6 | 7 |
8 |
9 | ); 10 | 11 | export default Panels; 12 | -------------------------------------------------------------------------------- /src/reducers/Auth.js: -------------------------------------------------------------------------------- 1 | const defaultUserInfo = { 2 | name: 'Rajib', 3 | image: 'http://www.rajibkarmaker.me/wp-content/uploads/2018/09/Rajib.jpeg' 4 | }; 5 | 6 | export default function reducer( 7 | state = { 8 | user: defaultUserInfo 9 | }, 10 | action 11 | ) { 12 | return state; 13 | } 14 | -------------------------------------------------------------------------------- /src/assets/styles/base/mixins/_icons.scss: -------------------------------------------------------------------------------- 1 | @mixin icon-background ($icon-url){ 2 | background-image : url($icon-url); 3 | 4 | } 5 | 6 | @mixin icon-shape ($size, $padding, $border-radius) { 7 | height: $size; 8 | width: $size; 9 | padding: $padding; 10 | border-radius: $border-radius; 11 | display: inline-table; 12 | } -------------------------------------------------------------------------------- /src/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | import { reducer as formReducer } from 'redux-form' 3 | import ThemeOptions from './ThemeOptions'; 4 | import Layout from './Layout'; 5 | import Auth from './Auth'; 6 | 7 | export default { 8 | Auth, 9 | ThemeOptions, 10 | Layout, 11 | form: formReducer 12 | }; -------------------------------------------------------------------------------- /src/pages/Main/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Footer = () => ( 4 | 11 | ); 12 | 13 | export default Footer; 14 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /config/jest/fileTransform.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | // This is a custom Jest transformer turning file imports into filenames. 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html 7 | 8 | module.exports = { 9 | process(src, filename) { 10 | return `module.exports = ${JSON.stringify(path.basename(filename))};`; 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /config/jest/cssTransform.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // This is a custom Jest transformer turning style imports into empty objects. 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html 5 | 6 | module.exports = { 7 | process() { 8 | return 'module.exports = {};'; 9 | }, 10 | getCacheKey() { 11 | // The output is always the same. 12 | return 'cssTransform'; 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | #Editor 13 | .vscode 14 | 15 | # misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /src/pages/UserProfile/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ProfileForm from './ProfileForm'; 3 | 4 | const UserProfile = () => ( 5 |
6 |
7 |
8 |
9 | 10 |
11 |
12 |
13 |
14 | ); 15 | 16 | export default UserProfile; -------------------------------------------------------------------------------- /src/config/configureStore.js: -------------------------------------------------------------------------------- 1 | import { createStore, combineReducers, applyMiddleware } from 'redux'; 2 | import createLogger from 'redux-logger'; 3 | import thunk from 'redux-thunk'; 4 | import reducers from '../reducers'; 5 | 6 | export default function configureStore() { 7 | return createStore( 8 | combineReducers({ 9 | ...reducers 10 | }), 11 | {}, 12 | applyMiddleware(thunk, createLogger) 13 | ); 14 | } -------------------------------------------------------------------------------- /src/assets/styles/base/mixins/_inputs.scss: -------------------------------------------------------------------------------- 1 | @mixin input-size($padding-vertical, $padding-horizontal, $height){ 2 | padding: $padding-vertical $padding-horizontal; 3 | height: $height; 4 | } 5 | 6 | @mixin placeholder($color, $opacity){ 7 | color: $color; 8 | @include opacity(1); 9 | } 10 | 11 | @mixin light-form(){ 12 | border-radius: 0; 13 | border:0; 14 | padding: 0; 15 | background-color: transparent; 16 | 17 | } -------------------------------------------------------------------------------- /src/assets/styles/base/_mixins.scss: -------------------------------------------------------------------------------- 1 | //Utilities 2 | 3 | @import "mixins/transparency"; 4 | @import "mixins/vendor-prefixes"; 5 | 6 | 7 | //Components 8 | 9 | @import "mixins/buttons"; 10 | @import "mixins/inputs"; 11 | @import "mixins/labels"; 12 | @import "mixins/tabs"; 13 | 14 | @import "mixins/navbars"; 15 | @import "mixins/icons"; 16 | @import "mixins/social-buttons"; 17 | 18 | @import "mixins/morphing-buttons"; 19 | 20 | @import "mixins/cards"; 21 | 22 | @import "mixins/chartist"; -------------------------------------------------------------------------------- /src/assets/styles/base/mixins/_transparency.scss: -------------------------------------------------------------------------------- 1 | // Opacity 2 | 3 | @mixin opacity($opacity) { 4 | opacity: $opacity; 5 | // IE8 filter 6 | $opacity-ie: ($opacity * 100); 7 | filter: #{alpha(opacity=$opacity-ie)}; 8 | } 9 | 10 | @mixin black-filter($opacity){ 11 | top: 0; 12 | left: 0; 13 | height: 100%; 14 | width: 100%; 15 | position: absolute; 16 | background-color: rgba(17,17,17,$opacity); 17 | display: block; 18 | content: ""; 19 | z-index: 1; 20 | } -------------------------------------------------------------------------------- /src/pages/Tables/RegularTables/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import generateData from '../generateData'; 3 | import PlainBackgroundTable from './PlainBackgroundTable'; 4 | 5 | const data = generateData(5); 6 | 7 | const RegularTables = () => ( 8 |
9 |
10 |
11 | 12 |
13 |
14 |
15 | ); 16 | 17 | export default RegularTables; -------------------------------------------------------------------------------- /src/assets/styles/base/_icons.scss: -------------------------------------------------------------------------------- 1 | .all-icons { 2 | .font-icon-detail { 3 | text-align: center; 4 | padding: 45px 0px 30px; 5 | border: 1px solid $medium-dark-gray; 6 | border-radius: 6px; 7 | margin: 15px 0; 8 | } 9 | 10 | [class^="pe-"] { 11 | font-size: 40px; 12 | } 13 | 14 | .font-icon-detail input { 15 | margin: 25px auto 0; 16 | width: 100%; 17 | text-align: center; 18 | display: block; 19 | color: #aaa; 20 | font-size: 13px; 21 | border: 0; 22 | } 23 | } -------------------------------------------------------------------------------- /src/pages/Tables/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Route } from 'react-router-dom'; 3 | import RegularTables from './RegularTables'; 4 | import ReactBootstrapTable from './ReactBootstrapTable'; 5 | 6 | const Tables = ({ match }) => ( 7 |
8 | 9 | 13 |
14 | ); 15 | 16 | export default Tables; 17 | -------------------------------------------------------------------------------- /src/assets/styles/base/_footer.scss: -------------------------------------------------------------------------------- 1 | .main-panel > .footer { 2 | height: 50px; 3 | padding: 0 10px; 4 | ul { 5 | list-style: none; 6 | margin: 0; 7 | padding: 0; 8 | } 9 | li { 10 | display: inline; 11 | margin-right: 30px; 12 | a { 13 | font-size: 12px; 14 | font-weight: 600; 15 | line-height: 17px; 16 | } 17 | } 18 | .copyright { 19 | color: #9b9b9b; 20 | font-family: 'Open Sans'; 21 | font-size: 11px; 22 | line-height: 15px; 23 | text-align: center; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/pages/Components/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Route } from 'react-router-dom'; 3 | import Buttons from './Buttons'; 4 | import Notifications from './Notifications'; 5 | import Panels from './Panels'; 6 | 7 | const Components = ({ match }) => ( 8 |
9 | 10 | 11 | 12 |
13 | ); 14 | 15 | export default Components; 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React admin 2 | 3 | React admin Dashboard is a beautiful, multi-purpose admin dashboard which is with React, Redux & Bootstrap and SCSS. 4 | 5 | This package includes: 6 | 7 | - Charts 8 | - Buttons 9 | - Notifications 10 | - Redux Form 11 | - React Bootstrap Table 12 | 13 | ## Get started 14 | 15 | _Development_ 16 | 17 | ``` 18 | git clone https://github.com/rajibchandrakarmaker/react-admin.git 19 | cd react-admin 20 | npm install 21 | npm start 22 | ``` 23 | 24 | _Build_ 25 | 26 | ``` 27 | npm run build 28 | ``` 29 | 30 | ## License 31 | 32 | Licensed under MIT 33 | -------------------------------------------------------------------------------- /src/assets/styles/base/mixins/_labels.scss: -------------------------------------------------------------------------------- 1 | @mixin label-style(){ 2 | padding: $padding-label-vertical $padding-label-horizontal; 3 | border: 1px solid $default-color; 4 | border-radius: $border-radius-small; 5 | color: $default-color; 6 | font-weight: $font-weight-semi; 7 | font-size: $font-size-small; 8 | text-transform: uppercase; 9 | display: inline-block; 10 | vertical-align: middle; 11 | } 12 | 13 | @mixin label-color($color){ 14 | border-color: $color; 15 | color: $color; 16 | } 17 | @mixin label-color-fill($color){ 18 | border-color: $color; 19 | color: $white-color; 20 | background-color: $color; 21 | } -------------------------------------------------------------------------------- /src/assets/images/radio-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Oval 7 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/pages/Components/Buttons/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Colors from './Colors'; 3 | import ButtonSizes from './ButtonSizes'; 4 | const ButtonsPage = () => ( 5 |
6 |
7 |
8 |
9 |
10 |
11 | 12 |
13 |
14 | 15 |
16 |
17 |
18 |
19 |
20 |
21 | ); 22 | 23 | export default ButtonsPage; 24 | -------------------------------------------------------------------------------- /config/polyfills.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | if (typeof Promise === 'undefined') { 4 | // Rejection tracking prevents a common issue where React gets into an 5 | // inconsistent state due to an error, but it gets swallowed by a Promise, 6 | // and the user has no idea what causes React's erratic future behavior. 7 | require('promise/lib/rejection-tracking').enable(); 8 | window.Promise = require('promise/lib/es6-extensions.js'); 9 | } 10 | 11 | // fetch() polyfill for making API calls. 12 | require('whatwg-fetch'); 13 | 14 | // Object.assign() is commonly used with React. 15 | // It will use the native implementation if it's present and isn't buggy. 16 | Object.assign = require('object-assign'); 17 | -------------------------------------------------------------------------------- /src/pages/Components/Buttons/Colors.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Colors = () => ( 4 |
5 |
6 |

Colors

7 |
8 |
9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | ); 17 | 18 | export default Colors; 19 | -------------------------------------------------------------------------------- /src/assets/images/checkbox-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tag Copy 15 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/Switch.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import cx from 'classnames'; 3 | 4 | const SwitchControl = ({ 5 | value, 6 | onChange, 7 | onText, 8 | offText 9 | }) => ( 10 |
11 |
onChange(!value)}> 16 | {onText} 17 | 18 | {offText} 19 |
20 |
21 | ); 22 | 23 | SwitchControl.defaultProps = { 24 | onText: 'ON', 25 | offText: 'OFF', 26 | onChange: () => {} 27 | }; 28 | 29 | export default SwitchControl; -------------------------------------------------------------------------------- /src/reducers/Layout.js: -------------------------------------------------------------------------------- 1 | const SET_MOBILE_NAV_VISIBILITY = 'LAYOUT/SET_MOBILE_NAV_VISIBILITY'; 2 | 3 | export const setMobileNavVisibility = (visibility) => ({ 4 | type: SET_MOBILE_NAV_VISIBILITY, 5 | visibility 6 | }); 7 | 8 | export const toggleMobileNavVisibility = () => (dispatch, getState) => { 9 | let visibility = getState().Layout.mobileNavVisibility; 10 | dispatch(setMobileNavVisibility(!visibility)); 11 | } 12 | 13 | export default function reducer(state = { 14 | mobileNavVisibility: false 15 | }, action) { 16 | switch (action.type) { 17 | case SET_MOBILE_NAV_VISIBILITY: 18 | return { 19 | ...state, 20 | mobileNavVisibility: action.visibility 21 | }; 22 | } 23 | return state; 24 | } -------------------------------------------------------------------------------- /src/pages/Dashboard/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import UserStatistic from './UserStatistic'; 3 | import ServerStatus from './ServerStatus'; 4 | import SalesStatistics from './SalesStatistics'; 5 | 6 | const Dashboard = () => ( 7 |
8 |
9 |
10 |
11 | 12 |
13 |
14 |
15 |
16 | 17 |
18 |
19 | 20 |
21 |
22 |
23 |
24 | ); 25 | 26 | export default Dashboard; 27 | -------------------------------------------------------------------------------- /src/assets/images/checkbox-uncheck.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Oval 7 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /scripts/test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Do this as the first thing so that any code reading it knows the right env. 4 | process.env.BABEL_ENV = 'test'; 5 | process.env.NODE_ENV = 'test'; 6 | process.env.PUBLIC_URL = ''; 7 | 8 | // Makes the script crash on unhandled rejections instead of silently 9 | // ignoring them. In the future, promise rejections that are not handled will 10 | // terminate the Node.js process with a non-zero exit code. 11 | process.on('unhandledRejection', err => { 12 | throw err; 13 | }); 14 | 15 | // Ensure environment variables are read. 16 | require('../config/env'); 17 | 18 | const jest = require('jest'); 19 | const argv = process.argv.slice(2); 20 | 21 | // Watch unless on CI or in coverage mode 22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) { 23 | argv.push('--watch'); 24 | } 25 | 26 | 27 | jest.run(argv); 28 | -------------------------------------------------------------------------------- /src/assets/styles/base/mixins/_social-buttons.scss: -------------------------------------------------------------------------------- 1 | @mixin social-buttons-color ($color){ 2 | 3 | border-color: $color; 4 | color: $color; 5 | 6 | &:hover, 7 | &:focus, 8 | &:active, 9 | &.active, 10 | .open > &.dropdown-toggle { 11 | background-color: $transparent-bg; 12 | color: $color; 13 | border-color: $color; 14 | opacity: 1; 15 | } 16 | 17 | &:disabled, 18 | &[disabled], 19 | &.disabled { 20 | background-color: $transparent-bg; 21 | border-color: $color; 22 | } 23 | 24 | &.btn-fill { 25 | color: $white-color; 26 | background-color: $color; 27 | opacity: 0.9; 28 | 29 | &:hover, 30 | &:focus, 31 | &:active, 32 | &.active, 33 | .open > &.dropdown-toggle{ 34 | background-color: $color; 35 | color: $white-color; 36 | opacity: 1; 37 | } 38 | 39 | } 40 | 41 | 42 | } 43 | -------------------------------------------------------------------------------- /src/pages/Components/Buttons/ButtonSizes.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const ButtonSizes = () => ( 4 |
5 |
6 |

Sizes

7 |
8 |
9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 |
19 |
20 | ); 21 | 22 | export default ButtonSizes; -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import registerServiceWorker from './registerServiceWorker'; 4 | import { HashRouter } from 'react-router-dom'; 5 | import './assets/styles/base.scss'; 6 | import Main from './pages/Main'; 7 | import configureStore from './config/configureStore'; 8 | import { Provider } from 'react-redux'; 9 | 10 | const store = configureStore(); 11 | const rootElement = document.getElementById('root'); 12 | 13 | const renderApp = Component => { 14 | ReactDOM.render( 15 | 16 | 17 | 18 | 19 | , 20 | rootElement 21 | ); 22 | }; 23 | 24 | renderApp(Main); 25 | 26 | if (module.hot) { 27 | module.hot.accept('./pages/Main', () => { 28 | const NextApp = require('./pages/Main').default; 29 | renderApp(NextApp); 30 | }); 31 | } 32 | 33 | registerServiceWorker(); 34 | -------------------------------------------------------------------------------- /src/assets/images/loading-bubbles.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 9 | 10 | 11 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/assets/styles/base/mixins/_morphing-buttons.scss: -------------------------------------------------------------------------------- 1 | $prefixes: ('', '-moz-', '-webkit-', '-ms-') !default; 2 | 3 | @mixin circle-animation(){ 4 | @for $i from 0 to length($prefixes) { 5 | @include circle-animation-details(nth($prefixes, $i + 1)); 6 | } 7 | } 8 | 9 | @mixin circle-animation-details($name){ 10 | #{$name}animation-name: spin; 11 | #{$name}animation-duration: 1250ms; 12 | #{$name}animation-iteration-count: infinite; 13 | #{$name}animation-timing-function: linear; 14 | 15 | } 16 | @keyframes spin { 17 | from { transform:rotate(0deg); } 18 | to { transform:rotate(360deg); } 19 | } 20 | 21 | @-webkit-keyframes spin { 22 | from { -webkit-transform: rotate(0deg); } 23 | to { -webkit-transform: rotate(360deg); } 24 | } 25 | 26 | @-moz-keyframes spin { 27 | from { -moz-transform: rotate(0deg); } 28 | to { -moz-transform: rotate(360deg); } 29 | } 30 | 31 | @-ms-keyframes spin { 32 | from { -ms-transform: rotate(0deg); } 33 | to { -ms-transform: rotate(360deg); } 34 | } -------------------------------------------------------------------------------- /src/pages/Tables/generateData.js: -------------------------------------------------------------------------------- 1 | import faker from 'faker'; 2 | 3 | export default (limit = 5, arrayData = false) => { 4 | const data = []; 5 | for (let i = 1; i <= limit; i++) { 6 | let row = null; 7 | if (arrayData) { 8 | row = [ 9 | i, 10 | faker.name.findName(), 11 | faker.finance.amount(), 12 | faker.address.country(), 13 | faker.image.avatar(), 14 | faker.address.city(), 15 | faker.name.jobTitle(), 16 | faker.lorem.sentence(), 17 | faker.random.boolean(), 18 | faker.date.past() 19 | ]; 20 | } else { 21 | row = { 22 | id: i, 23 | name: faker.name.findName(), 24 | salary: faker.finance.amount(), 25 | country: faker.address.country(), 26 | avatar: faker.image.avatar(), 27 | city: faker.address.city(), 28 | job: faker.name.jobTitle(), 29 | description: faker.lorem.sentence(), 30 | active: faker.random.boolean(), 31 | birthday: faker.date.past() 32 | }; 33 | } 34 | data.push(row); 35 | } 36 | return data; 37 | } -------------------------------------------------------------------------------- /src/pages/Tables/RegularTables/PlainBackgroundTable.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const PlainBackgroundTable = ({data}) => ( 4 |
5 |
6 |

Table on Plain Background

7 |

Here is a subtitle for this table

8 |
9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | {data.map(item => ( 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | ))} 30 | 31 |
IDNameSalaryCountryCity
{item.id}{item.name}$ {item.salary}{item.country}{item.city}
32 |
33 |
34 | ); 35 | 36 | export default PlainBackgroundTable; -------------------------------------------------------------------------------- /src/assets/styles/base/_social-buttons.scss: -------------------------------------------------------------------------------- 1 | .btn-social { 2 | &.btn-round { 3 | padding: 8px 9px; 4 | } 5 | 6 | .fa { 7 | font-size: 18px; 8 | vertical-align: middle; 9 | display: inline-block; 10 | width: 20px; 11 | vertical-align: middle; 12 | display: inline-block; 13 | } 14 | } 15 | 16 | .btn-twitter { @include social-buttons-color($social-twitter) } 17 | .btn-facebook { @include social-buttons-color($social-facebook) } 18 | .btn-google { @include social-buttons-color($social-google) } 19 | .btn-linkedin { @include social-buttons-color($social-linkedin) } 20 | .btn-dribbble { @include social-buttons-color($social-dribbble) } 21 | .btn-github { @include social-buttons-color($social-github) } 22 | .btn-youtube { @include social-buttons-color($social-youtube) } 23 | .btn-stumbleupon { @include social-buttons-color($social-stumbleupon) } 24 | .btn-reddit { @include social-buttons-color($social-reddit) } 25 | .btn-tumblr { @include social-buttons-color($social-tumblr) } 26 | .btn-behance { @include social-buttons-color($social-behance) } 27 | .btn-pinterest { @include social-buttons-color($social-pinterest) } 28 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | React Admin 17 | 18 | 19 | 20 | 21 | 24 | 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/assets/styles/base/_panels.scss: -------------------------------------------------------------------------------- 1 | .panel-group { 2 | margin-bottom: 20px; 3 | 4 | .panel { 5 | border-radius: 0; 6 | border: 0; 7 | border-bottom: 0; 8 | box-shadow: none; 9 | background: $transparent-bg; 10 | margin-bottom: 10px; 11 | 12 | .panel-heading { 13 | border-bottom: 0; 14 | padding: 0; 15 | background: $transparent-bg; 16 | 17 | .caret { 18 | float: right; 19 | margin-top: 12px; 20 | margin-right: 15px; 21 | transition: all 150ms ease-in; 22 | } 23 | } 24 | 25 | .panel-title { 26 | font-size: 1rem; 27 | color: #25265F; 28 | letter-spacing: 0; 29 | line-height: 18px; 30 | } 31 | } 32 | 33 | .panel-heading + .panel-collapse > .panel-body { 34 | border-top: 0; 35 | padding: 10px 0; 36 | /* Anim pariatur cliche: */ 37 | font-size: 1rem; 38 | color: #24292C; 39 | letter-spacing: 0; 40 | line-height: 18px; 41 | } 42 | } 43 | 44 | .tab-pane { 45 | padding: 15px 0; 46 | } 47 | 48 | a[aria-expanded="true"] .caret, 49 | .btn[aria-expanded="true"] .caret, 50 | a.dropdown-toggle[aria-expanded="true"] .caret { 51 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 52 | -webkit-transform: rotate(180deg); 53 | -ms-transform: rotate(180deg); 54 | transform: rotate(180deg); 55 | } -------------------------------------------------------------------------------- /src/components/Tags.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import cx from 'classnames'; 3 | class Tags extends Component { 4 | 5 | render() { 6 | let { tags, onAdd, onRemove, theme, fill } = this.props; 7 | return ( 8 |
13 | { tags && tags.map(tag => ( 14 | 15 | {tag.text}  onRemove(tag.id)}> 16 | 17 | ))} 18 | 19 |
20 |
21 | { 25 | if (e.keyCode === 13 && e.target.value) { 26 | onAdd(e.target.value); 27 | e.target.value = ''; 28 | } 29 | return false; 30 | }} /> 31 |
32 |
33 | ) 34 | } 35 | } 36 | 37 | Tags.defaultProps = { 38 | theme: 'azure', 39 | fill: false 40 | } 41 | 42 | export default Tags; -------------------------------------------------------------------------------- /src/reducers/ThemeOptions.js: -------------------------------------------------------------------------------- 1 | export const SET_ENABLE_BACKGROUND_IMAGE = 2 | 'THEME_OPTIONS/SET_ENABLE_BACKGROUND_IMAGE'; 3 | export const SET_BACKGROUND_COLOR = 'THEME_OPTIONS/SET_BACKGROUND_COLOR'; 4 | export const SET_BACKGROUND_IMAGE = 'THEME_OPTIONS/SET_BACKGROUND_IMAGE'; 5 | 6 | export const setEnableBackgroundImage = enableBackgroundImage => ({ 7 | type: SET_ENABLE_BACKGROUND_IMAGE, 8 | enableBackgroundImage 9 | }); 10 | 11 | export const setBackgroundColor = backgroundColor => ({ 12 | type: SET_BACKGROUND_COLOR, 13 | backgroundColor 14 | }); 15 | 16 | export const setBackgroundImage = backgroundImage => ({ 17 | type: SET_BACKGROUND_IMAGE, 18 | backgroundImage 19 | }); 20 | 21 | export default function reducer( 22 | state = { 23 | backgroundColor: 'azure', 24 | enableBackgroundImage: true 25 | }, 26 | action 27 | ) { 28 | switch (action.type) { 29 | case SET_ENABLE_BACKGROUND_IMAGE: 30 | return { 31 | ...state, 32 | enableBackgroundImage: action.enableBackgroundImage 33 | }; 34 | 35 | case SET_BACKGROUND_COLOR: 36 | return { 37 | ...state, 38 | backgroundColor: action.backgroundColor 39 | }; 40 | 41 | case SET_BACKGROUND_IMAGE: 42 | return { 43 | ...state, 44 | backgroundImage: action.backgroundImage 45 | }; 46 | } 47 | return state; 48 | } 49 | -------------------------------------------------------------------------------- /src/components/SideBar/UserInfo.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Collapse } from 'react-bootstrap'; 3 | import { connect } from 'react-redux'; 4 | import { Link, withRouter } from 'react-router-dom'; 5 | import cx from 'classnames'; 6 | 7 | class UserInfo extends Component { 8 | state = { 9 | isShowingUserMenu: false 10 | }; 11 | 12 | render() { 13 | let { user } = this.props; 14 | let { isShowingUserMenu } = this.state; 15 | return ( 16 |
17 |
18 | {user.name} 19 |
20 |
{user.name}
21 |
Admin
22 |
23 | 25 | this.setState({ 26 | isShowingUserMenu: !this.state.isShowingUserMenu 27 | }) 28 | } 29 | className={cx('pe-7s-angle-down collapse-arrow', { 30 | active: isShowingUserMenu 31 | })} 32 | /> 33 |
34 | 35 | 40 | 41 |
42 | ); 43 | } 44 | } 45 | 46 | const mapStateToProps = state => ({ 47 | user: state.Auth.user 48 | }); 49 | 50 | export default connect(mapStateToProps)(UserInfo); 51 | -------------------------------------------------------------------------------- /src/assets/styles/base/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Mixin for generating new styles 2 | @mixin btn-styles($btn-color, $btn-states-color) { 3 | border-color: $btn-color; 4 | color: $btn-color; 5 | 6 | &:hover, 7 | &:focus, 8 | &:active, 9 | &.active, 10 | .open > &.dropdown-toggle { 11 | background-color: $transparent-bg; 12 | color: $btn-states-color; 13 | border-color: $btn-states-color; 14 | } 15 | 16 | &.disabled, 17 | &:disabled, 18 | &[disabled], 19 | fieldset[disabled] & { 20 | &, 21 | &:hover, 22 | &:focus, 23 | &.focus, 24 | &:active, 25 | &.active { 26 | background-color: $transparent-bg; 27 | border-color: $btn-color; 28 | } 29 | } 30 | 31 | 32 | &.btn-fill { 33 | color: $white-color; 34 | background-color: $btn-color; 35 | @include opacity(1); 36 | 37 | &:hover, 38 | &:focus, 39 | &:active, 40 | &.active, 41 | .open > &.dropdown-toggle{ 42 | background-color: $btn-states-color; 43 | color: $white-color; 44 | } 45 | 46 | .caret{ 47 | border-top-color: $white-color; 48 | } 49 | } 50 | 51 | .caret{ 52 | border-top-color: $btn-color; 53 | } 54 | } 55 | 56 | 57 | @mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){ 58 | font-size: $font-size; 59 | border-radius: $border; 60 | padding: $padding-vertical $padding-horizontal; 61 | 62 | &.btn-round{ 63 | padding: $padding-vertical + 1 $padding-horizontal; 64 | } 65 | 66 | &.btn-simple{ 67 | padding: $padding-vertical + 2 $padding-horizontal; 68 | } 69 | 70 | } -------------------------------------------------------------------------------- /src/components/SideBar/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Link, withRouter } from 'react-router-dom'; 3 | import { connect } from 'react-redux'; 4 | import { Collapse } from 'react-bootstrap'; 5 | import UserInfo from './UserInfo'; 6 | import Nav from './Nav'; 7 | 8 | class SideBar extends Component { 9 | state = {}; 10 | 11 | render() { 12 | let { 13 | location, 14 | backgroundColor, 15 | enableBackgroundImage, 16 | backgroundImage 17 | } = this.props; 18 | 19 | return ( 20 |
25 |
26 | 27 | [ 28 | React Admin 29 | ] 30 | 31 |
32 | 33 |
34 | 35 |
36 |
38 |
46 |
47 | ); 48 | } 49 | } 50 | 51 | const mapStateToProps = state => ({ 52 | enableBackgroundImage: state.ThemeOptions.enableBackgroundImage, 53 | backgroundColor: state.ThemeOptions.backgroundColor, 54 | backgroundImage: state.ThemeOptions.backgroundImage 55 | }); 56 | 57 | export default withRouter(connect(mapStateToProps)(SideBar)); 58 | -------------------------------------------------------------------------------- /src/assets/styles/base/_pagination.scss: -------------------------------------------------------------------------------- 1 | @mixin paginationStyle($background-color, $text-color) { 2 | display: inline-block; 3 | padding-left: 0; 4 | margin: 20px 0; 5 | border-radius: 4px; 6 | 7 | > li { 8 | display: inline; 9 | 10 | > a, 11 | > span { 12 | position: relative; 13 | float: left; 14 | padding: 6px 12px; 15 | line-height: 1.4; 16 | color: $text-color; 17 | text-decoration: none; 18 | background: white; 19 | border: $border-thin solid $medium-dark-gray; 20 | border-radius: 38px; 21 | } 22 | 23 | > a, 24 | > span, 25 | &:first-child > a, 26 | &:first-child > span, 27 | &:last-child > a, 28 | &:last-child > span { 29 | margin: 0 2px; 30 | border-radius: 38px; 31 | } 32 | 33 | &.active > a, 34 | &.active > span, 35 | &.active > a:hover, 36 | &.active > span:hover, 37 | &.active > a:focus, 38 | &.active > span:focus { 39 | background-color: $background-color; 40 | color: $white-color; 41 | padding: 7px 13px; 42 | } 43 | } 44 | 45 | &.pagination-no-border { 46 | > li { 47 | > a, 48 | > span { 49 | border: 0; 50 | } 51 | } 52 | } 53 | } 54 | 55 | .pagination { @include paginationStyle($primary-bg, $primary-color); } 56 | .pagination-primary { @include paginationStyle($primary-bg, $primary-color); } 57 | .pagination-success { @include paginationStyle($success-bg, $success-color); } 58 | .pagination-info { @include paginationStyle($info-bg, $info-color); } 59 | .pagination-warning { @include paginationStyle($warning-bg, $warning-color); } 60 | .pagination-danger { @include paginationStyle($danger-bg, $danger-color); } 61 | -------------------------------------------------------------------------------- /src/pages/Dashboard/UserStatistic.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ChartistGraph from 'react-chartist'; 3 | 4 | const UserStatistic = () => { 5 | let dataPreferences = { 6 | labels: ['62%', '32%', '6%'], 7 | series: [62, 32, 6] 8 | }; 9 | 10 | let optionsPreferences = { 11 | donut: false, 12 | donutWidth: 40, 13 | startAngle: 0, 14 | total: 100, 15 | showLabel: true, 16 | axisX: { 17 | showGrid: false, 18 | offset: 0 19 | }, 20 | axisY: { 21 | offset: 0 22 | } 23 | }; 24 | 25 | let chartType = 'Pie'; 26 | 27 | return ( 28 |
29 |
30 |

User Statistics

31 |

User Daily Report

32 |
33 |
34 | 40 |
41 |
42 |
43 |
44 | Current User 45 |
46 |
47 | New User 48 |
49 |
50 | Old User 51 |
52 |
53 |
54 |
55 | Upadted 10 minutes ago 56 |
57 |
58 |
59 | ); 60 | }; 61 | 62 | export default UserStatistic; 63 | -------------------------------------------------------------------------------- /src/pages/Components/Buttons/Pagination.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Pagination = () => ( 4 |
5 |
6 |

Pagination

7 |
8 | 9 |
10 |

11 | Color-classes: 12 |

13 |
    14 |
  • pagination
    • 15 |
  • pagination-primary
    • 16 |
  • pagination-success
    • 17 |
  • pagination-info
    • 18 |
  • pagination-warning
    • 19 |
  • pagination-danger
    • 20 |
21 |   22 |
    23 |
  • «
    • 24 |
  • 1
    • 25 |
  • 2
    • 26 |
  • 3
    • 27 |
  • 4
    • 28 |
  • 5
    • 29 |
  • »
    • 30 |
31 |   32 |
    33 |
  • «
    • 34 |
  • 1
    • 35 |
  • 2
    • 36 |
  • 3
    • 37 |
  • 4
    • 38 |
  • 5
    • 39 |
  • »
    • 40 |
41 |   42 |
    43 |
  • «
    • 44 |
  • 1
    • 45 |
  • 2
    • 46 |
  • 3
    • 47 |
  • 4
    • 48 |
  • 5
    • 49 |
  • »
    • 50 |
51 | 52 |
53 |
54 | ); 55 | 56 | export default Pagination; -------------------------------------------------------------------------------- /src/pages/Main/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { connect } from 'react-redux'; 3 | import { toggleMobileNavVisibility } from '../../reducers/Layout'; 4 | import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap'; 5 | 6 | const Header = ({ showMobileMenu, toggleMobileNavVisibility }) => ( 7 | 8 | 9 | 20 | 21 | 22 | 23 | 40 | 41 | 42 | ); 43 | 44 | const mapDispatchToProp = dispatch => ({ 45 | toggleMobileNavVisibility: () => dispatch(toggleMobileNavVisibility()) 46 | }); 47 | 48 | export default connect( 49 | null, 50 | mapDispatchToProp 51 | )(Header); 52 | -------------------------------------------------------------------------------- /src/assets/images/checkbox-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 2 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/assets/styles/base.scss: -------------------------------------------------------------------------------- 1 | $pe-7s-font-path: '~pe7-icon/dist/fonts' !default; 2 | @import 'base/new_variables'; 3 | @import 'base/variables'; 4 | @import 'base/mixins'; 5 | 6 | @import '~pe7-icon/dist/scss/pe-icon-7-stroke.scss'; 7 | @import 'base/chartist'; 8 | @import '~chartist/dist/scss/chartist.scss'; 9 | @import 'base/sidebar'; 10 | @import 'base/navbar'; 11 | @import 'base/card'; 12 | @import 'base/footer'; 13 | @import 'base/buttons'; 14 | @import 'base/pagination'; 15 | @import 'base/social-buttons'; 16 | @import 'base/icons'; 17 | @import 'base/panels'; 18 | @import 'base/typography'; 19 | @import 'base/form'; 20 | 21 | html, 22 | body { 23 | font-size: 14px; 24 | } 25 | 26 | .places-buttons .btn { 27 | margin-bottom: 30px; 28 | } 29 | 30 | .rbc-calendar { 31 | .rbc-toolbar .rbc-toolbar-label { 32 | font-size: 22px; 33 | } 34 | .rbc-toolbar { 35 | margin-bottom: 25px; 36 | } 37 | .rbc-toolbar button { 38 | @include btn-styles($primary-bg, $primary-states-color); 39 | &.rbc-active, 40 | &.rbc-active:hover, 41 | &:active, 42 | &:focus, 43 | &:hover, 44 | &:active:hover { 45 | background-color: lighten($primary-bg, 25%); 46 | border-color: $primary-bg; 47 | } 48 | } 49 | .rbc-month-row { 50 | min-height: 100px; 51 | } 52 | .rbc-row-segment { 53 | padding: 2px; 54 | .rbc-event { 55 | background: $primary-bg; 56 | } 57 | .rbc-event.rbc-selected { 58 | background: darken($primary-bg, 5); 59 | } 60 | .rbc-event-content { 61 | font-size: 12px; 62 | } 63 | } 64 | .rbc-time-view, 65 | .rbc-month-view, 66 | .rbc-agenda-view { 67 | border-radius: 3px; 68 | } 69 | } 70 | 71 | .ct-chart-line .ct-label, 72 | .ct-chart-bar .ct-label { 73 | font-size: 1rem; 74 | } 75 | 76 | .react-bs-table { 77 | .table { 78 | margin-bottom: 0; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/pages/Main/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Route, Router } from 'react-router-dom'; 3 | import { connect } from 'react-redux'; 4 | import cx from 'classnames'; 5 | import { setMobileNavVisibility } from '../../reducers/Layout'; 6 | import { withRouter } from 'react-router-dom'; 7 | 8 | import Header from './Header'; 9 | import Footer from './Footer'; 10 | import SideBar from '../../components/SideBar'; 11 | /** 12 | * Pages 13 | */ 14 | import Dashboard from '../Dashboard'; 15 | import Components from '../Components'; 16 | import UserProfile from '../UserProfile'; 17 | import Tables from '../Tables'; 18 | 19 | const Main = ({ mobileNavVisibility, hideMobileMenu, history }) => { 20 | history.listen(() => { 21 | if (mobileNavVisibility === true) { 22 | hideMobileMenu(); 23 | } 24 | }); 25 | return ( 26 |
31 |
32 |
33 | 34 | 35 |
36 |
37 | 38 | 39 | 40 | 41 |
42 |
43 |
44 |
45 | ); 46 | }; 47 | 48 | const mapStateToProp = state => ({ 49 | mobileNavVisibility: state.Layout.mobileNavVisibility 50 | }); 51 | 52 | const mapDispatchToProps = (dispatch, ownProps) => ({ 53 | hideMobileMenu: () => dispatch(setMobileNavVisibility(false)) 54 | }); 55 | 56 | export default withRouter( 57 | connect( 58 | mapStateToProp, 59 | mapDispatchToProps 60 | )(Main) 61 | ); 62 | -------------------------------------------------------------------------------- /src/assets/styles/base/_card.scss: -------------------------------------------------------------------------------- 1 | .card { 2 | border: 1px solid $light-gray; 3 | border-radius: 4px; 4 | margin-bottom: 30px; 5 | background: white; 6 | .title { 7 | margin: 0; 8 | color: $primary-color; 9 | font-weight: 300; 10 | margin-bottom: 10px; 11 | } 12 | .header { 13 | padding: 15px 30px 0px; 14 | font-weight: 600; 15 | font-size: 22px; 16 | h1, 17 | h2, 18 | h3, 19 | h4, 20 | h5, 21 | h6 { 22 | margin: 15px 0; 23 | color: #68ad96; 24 | letter-spacing: 1px; 25 | line-height: 17px; 26 | font-weight: 400; 27 | } 28 | p { 29 | color: $black-color; 30 | font-size: 12px; 31 | line-height: 17px; 32 | font-weight: 300; 33 | } 34 | } 35 | .content { 36 | padding: 10px 30px 20px 30px; 37 | } 38 | .footer { 39 | padding: 0 30px 5px; 40 | background-color: transparent; 41 | line-height: 30px; 42 | .legend { 43 | padding: 5px 0; 44 | display: flex; 45 | align-items: center; 46 | .item { 47 | margin-right: 10px; 48 | } 49 | } 50 | .stats { 51 | color: $medium-dark-gray; 52 | } 53 | hr { 54 | margin-top: 5px; 55 | margin-bottom: 5px; 56 | border-color: $medium-gray; 57 | } 58 | } 59 | .form-group label, 60 | fieldset label { 61 | font-size: 12px; 62 | line-height: 18px; 63 | font-weight: 300; 64 | &.control-label { 65 | color: #25265f; 66 | text-transform: uppercase; 67 | } 68 | &.error { 69 | text-transform: none; 70 | color: #fb404b; 71 | margin-top: 5px; 72 | } 73 | } 74 | .footer { 75 | .item { 76 | .text-info { 77 | color: #68ad96 !important; 78 | } 79 | .text-danger { 80 | color: #5e7a6e !important; 81 | } 82 | .text-warning { 83 | color: #afd436 !important; 84 | } 85 | } 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /src/pages/Dashboard/SalesStatistics.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Chart from 'react-chartist'; 3 | 4 | let data = { 5 | labels: [ 6 | 'Jan', 7 | 'Feb', 8 | 'Mar', 9 | 'Apr', 10 | 'May', 11 | 'Jun', 12 | 'Jul', 13 | 'Aug', 14 | 'Sep', 15 | 'Oct', 16 | 'Nov', 17 | 'Dec' 18 | ], 19 | series: [ 20 | [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895], 21 | [412, 243, 280, 580, 453, 353, 300, 364, 368, 410, 636, 695] 22 | ] 23 | }; 24 | 25 | let options = { 26 | seriesBarDistance: 10, 27 | axisX: { 28 | showGrid: false 29 | }, 30 | height: '245px' 31 | }; 32 | 33 | let responsiveOptions = [ 34 | [ 35 | 'screen and (max-width: 640px)', 36 | { 37 | seriesBarDistance: 5, 38 | axisX: { 39 | labelInterpolationFnc: function(value) { 40 | return value[0]; 41 | } 42 | } 43 | } 44 | ] 45 | ]; 46 | 47 | const SalesStatistics = () => ( 48 |
49 |
50 |

2018 Glass Sales

51 |

Glass Sales Statistics

52 |
53 |
54 | 61 |
62 |
63 |
64 |
65 | Google Glass 66 |
67 |
68 | Sony smart Glass 69 |
70 |
71 |
72 |
73 | Upadted 1 month ago 74 |
75 |
76 |
77 | ); 78 | 79 | export default SalesStatistics; 80 | -------------------------------------------------------------------------------- /src/assets/images/radio-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | checkmark 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/assets/images/checkbox-check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | checkmark 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /config/paths.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | const fs = require('fs'); 5 | const url = require('url'); 6 | 7 | // Make sure any symlinks in the project folder are resolved: 8 | // https://github.com/facebookincubator/create-react-app/issues/637 9 | const appDirectory = fs.realpathSync(process.cwd()); 10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath); 11 | 12 | const envPublicUrl = process.env.PUBLIC_URL; 13 | 14 | function ensureSlash(path, needsSlash) { 15 | const hasSlash = path.endsWith('/'); 16 | if (hasSlash && !needsSlash) { 17 | return path.substr(path, path.length - 1); 18 | } else if (!hasSlash && needsSlash) { 19 | return `${path}/`; 20 | } else { 21 | return path; 22 | } 23 | } 24 | 25 | const getPublicUrl = appPackageJson => 26 | envPublicUrl || require(appPackageJson).homepage; 27 | 28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer 29 | // "public path" at which the app is served. 30 | // Webpack needs to know it to put the right