├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── manifest.json └── index.html ├── src ├── assets │ ├── img │ │ └── kadoo.png │ └── fonts │ │ └── Product Sans Regular.ttf ├── components │ ├── Row │ │ └── index.js │ ├── Alert │ │ ├── index.js │ │ └── styles.js │ ├── Badge │ │ └── index.js │ ├── Table │ │ └── index.js │ ├── Dropzone │ │ ├── index.js │ │ └── styles.js │ ├── Button │ │ └── index.js │ ├── ButtonGroup │ │ └── index.js │ ├── Pagination │ │ └── index.js │ ├── Card │ │ └── index.js │ └── Form │ │ └── index.js ├── services │ ├── api.js │ └── auth.js ├── store │ ├── index.js │ └── modules │ │ ├── rootReducer.js │ │ └── sidebarMenu │ │ └── reducer.js ├── index.js ├── routes.js ├── pages │ ├── Sis │ │ ├── styles.js │ │ ├── Sidebar │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── index.js │ │ ├── Alerts │ │ │ └── index.js │ │ ├── Modals │ │ │ ├── index.js │ │ │ ├── modalError.js │ │ │ ├── modalSuccess.js │ │ │ └── modalForm.js │ │ ├── Tables │ │ │ └── index.js │ │ ├── Cards │ │ │ └── index.js │ │ ├── Dashboard │ │ │ └── index.js │ │ ├── Buttons │ │ │ └── index.js │ │ └── Forms │ │ │ └── index.js │ └── SignIn │ │ ├── styles.js │ │ └── index.js └── global.css ├── config-overrides.js ├── .editorconfig ├── jsconfig.json ├── .gitignore ├── LICENSE ├── package.json └── README.md /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luisotavio756/dashboard-reactjs/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luisotavio756/dashboard-reactjs/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luisotavio756/dashboard-reactjs/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/assets/img/kadoo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luisotavio756/dashboard-reactjs/HEAD/src/assets/img/kadoo.png -------------------------------------------------------------------------------- /src/assets/fonts/Product Sans Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luisotavio756/dashboard-reactjs/HEAD/src/assets/fonts/Product Sans Regular.ttf -------------------------------------------------------------------------------- /src/components/Row/index.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Row = styled.div` 4 | display: flex; 5 | flex-wrap: wrap; 6 | `; -------------------------------------------------------------------------------- /src/services/api.js: -------------------------------------------------------------------------------- 1 | // import axios from 'axios'; 2 | 3 | // const api = axios.create({ 4 | // baseURL: 'YourAPIHost' 5 | // }); 6 | const api = null; 7 | 8 | export default api; 9 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'redux'; 2 | import rootReducer from './modules/rootReducer'; 3 | 4 | const store = createStore(rootReducer); 5 | 6 | export default store; 7 | -------------------------------------------------------------------------------- /src/store/modules/rootReducer.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | 3 | import menu from './sidebarMenu/reducer'; 4 | 5 | export default combineReducers({ 6 | menu 7 | }); 8 | -------------------------------------------------------------------------------- /config-overrides.js: -------------------------------------------------------------------------------- 1 | const { override, addWebpackAlias } = require("customize-cra") 2 | const path = require('path') 3 | 4 | const rootImport = { 5 | ['~']: path.resolve(__dirname, 'src') 6 | }; 7 | 8 | module.exports = override(addWebpackAlias(rootImport)) -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | insert_final_newline = true 7 | indent_style = space 8 | indent_size = 4 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | 14 | [*.{yml,yaml}] 15 | indent_size = 2 16 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "commonJS", 5 | "allowSyntheticDefaultImports": true, 6 | "baseUrl": "./", 7 | "paths": { 8 | "~/*": ["./src/*"] 9 | } 10 | }, 11 | "exclude": [ 12 | "build", 13 | "node_modules" 14 | ] 15 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Routes from './routes'; 4 | import ReactNotification from 'react-notifications-component'; 5 | import 'react-notifications-component/dist/theme.css'; 6 | 7 | const App = () => ; 8 | 9 | ReactDOM.render( 10 | <> 11 | 12 | 13 | , 14 | document.getElementById('root') 15 | ); 16 | -------------------------------------------------------------------------------- /.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 | ./package.json 8 | 9 | # testing 10 | /coverage 11 | 12 | # production 13 | /build 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/services/auth.js: -------------------------------------------------------------------------------- 1 | export const TOKEN_KEY = "@JWT-Token"; 2 | 3 | export const isAuthenticated = () => true; 4 | 5 | // // export const isAuthenticated = () => { 6 | // // if(localStorage.getItem(TOKEN_KEY) !== null) { 7 | // // return true; 8 | // // } 9 | // // }; 10 | 11 | export const getToken = localStorage.getItem(TOKEN_KEY); 12 | 13 | export const login = token => { 14 | localStorage.setItem(TOKEN_KEY, token); 15 | }; 16 | 17 | export const logout = () => { 18 | localStorage.removeItem(TOKEN_KEY); 19 | } 20 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "../src/assets/img/kadoo.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "../src/assets/img/kadoo.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/components/Alert/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | import { Alert as AlertDiv } from './styles'; 4 | 5 | const Alert = (props) => { 6 | const [ show, setShow ] = useState(true); 7 | 8 | function toggle() { 9 | setShow(!show); 10 | 11 | if(props.toggle) { 12 | props.toggle(props.valueToggle); 13 | } 14 | } 15 | 16 | return show ? ( 17 | // {props} 18 | 19 |

{ props.text }

20 | 21 | 22 | ) : null; 23 | } 24 | 25 | export default Alert; 26 | -------------------------------------------------------------------------------- /src/components/Badge/index.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Badge = styled.span` 4 | padding: 5px 10px; 5 | font-size: 11px; 6 | font-weight: bold; 7 | border-radius: 5px; 8 | 9 | &.primary { 10 | color: #fff; 11 | background-color: #3699ff; 12 | } 13 | 14 | &.danger { 15 | color: #fff; 16 | background-color: #f64e60; 17 | } 18 | 19 | &.warning { 20 | background-color: orange; 21 | color: #fff; 22 | } 23 | 24 | &.success { 25 | background-color: #1bc5bd; 26 | color: #fff; 27 | } 28 | 29 | &.info { 30 | background-color: #8950fc; 31 | color: #fff; 32 | } 33 | 34 | &.light { 35 | color: #80808f; 36 | background-color: #f3f6f9; 37 | } 38 | 39 | &.dark { 40 | color: #fff; 41 | background-color: #212121; 42 | } 43 | 44 | 45 | 46 | `; 47 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Luis Otávio 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 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 | 17 | Dashboard ReactJS 18 | 19 | 20 | 21 |
22 | 23 | 24 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "kadoo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.12.0", 10 | "react-dom": "^16.12.0", 11 | "react-icons": "^3.10.0", 12 | "react-notifications-component": "^2.4.0", 13 | "react-redux": "^7.2.0", 14 | "react-router-dom": "^5.1.2", 15 | "react-scripts": "^3.4.0", 16 | "redux": "^4.0.5", 17 | "styled-components": "^5.0.1", 18 | "styled-react-modal": "^2.0.0" 19 | }, 20 | "scripts": { 21 | "start": "react-app-rewired start", 22 | "build": "react-app-rewired build", 23 | "test": "react-app-rewired test", 24 | "eject": "react-scripts eject" 25 | }, 26 | "eslintConfig": { 27 | "extends": "react-app" 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | }, 41 | "devDependencies": { 42 | "customize-cra": "^0.9.1", 43 | "react-app-rewired": "^2.1.5" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/routes.js: -------------------------------------------------------------------------------- 1 | import React, { Suspense, lazy } from 'react'; 2 | import { Provider } from 'react-redux'; 3 | import store from '~/store'; 4 | 5 | import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'; 6 | 7 | import './global.css'; 8 | import { isAuthenticated } from './services/auth.js'; 9 | 10 | const SignIn = lazy(() => import('./pages/SignIn')); 11 | 12 | const Sis = lazy(() => import('./pages/Sis')); 13 | 14 | const PrivateRoute = ({ component: Component, ...rest}) => ( 15 | ( 16 | isAuthenticated() ? ( 17 | 18 | ) : ( 19 | 20 | ) 21 | )} /> 22 | ); 23 | 24 | 25 | 26 | export default function Routes(){ 27 | 28 | return ( 29 | 30 | 32 |
33 | 34 | }> 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | ); 44 | } 45 | 46 | 47 | -------------------------------------------------------------------------------- /src/store/modules/sidebarMenu/reducer.js: -------------------------------------------------------------------------------- 1 | // Icons 2 | import React from 'react'; 3 | import { FiHome, FiGrid, FiBookmark, FiAperture, FiPhoneForwarded, FiBookOpen, FiInfo } from 'react-icons/fi'; 4 | 5 | const INITIAL_STATE = { 6 | activeMenu: { 7 | name: 'Dashboard', 8 | icon: , 9 | path: '/' 10 | }, 11 | itens: [ 12 | { 13 | name: 'Dashboard', 14 | icon: , 15 | path: '/' 16 | }, 17 | { 18 | name: 'Tables', 19 | icon: , 20 | path: '/tables' 21 | }, 22 | { 23 | name: 'Buttons', 24 | icon: , 25 | path: '/buttons' 26 | }, 27 | { 28 | name: 'Cards', 29 | icon: , 30 | path: '/cards' 31 | }, 32 | { 33 | name: 'Forms', 34 | icon: , 35 | path: '/forms' 36 | }, 37 | { 38 | name: 'Alerts', 39 | icon: , 40 | path: '/alerts' 41 | }, 42 | { 43 | name: 'Modals', 44 | icon: , 45 | path: '/modals' 46 | }, 47 | ], 48 | }; 49 | 50 | export default function sidebarMenu(state = INITIAL_STATE, action) { 51 | switch (action.type) { 52 | case 'SET_MENU_ACTIVE': 53 | return { ...state, activeMenu: action.menu } 54 | break; 55 | default: 56 | return state 57 | break; 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/components/Alert/styles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Alert = styled.button` 4 | border: none; 5 | border-radius: 0.42rem; 6 | padding: .65rem 1rem; 7 | font-size: 0.9em; 8 | line-height: 1.5; 9 | margin-bottom: 10px; 10 | 11 | font-weight: 300; 12 | transition: all 0.2s; 13 | /* color: #777; */ 14 | 15 | width: 100%; 16 | display: flex; 17 | align-items: center; 18 | justify-content: space-between; 19 | 20 | button { 21 | background-color: transparent; 22 | color: #eee; 23 | border: none; 24 | cursor: pointer; 25 | font-size: 16px; 26 | } 27 | 28 | &.primary { 29 | color: #fff !important; 30 | background-color: #3699ff; 31 | } 32 | 33 | &.danger { 34 | color: #fff !important; 35 | background-color: #f64e60; 36 | } 37 | 38 | &.warning { 39 | background-color: orange; 40 | color: #fff !important; 41 | } 42 | 43 | &.success { 44 | background-color: #1bc5bd; 45 | color: #fff !important; 46 | } 47 | 48 | &.info { 49 | background-color: #8950fc; 50 | color: #fff !important; 51 | } 52 | 53 | &.light { 54 | color: #80808f !important; 55 | background-color: #f3f6f9; 56 | } 57 | 58 | &.dark { 59 | color: #fff !important; 60 | background-color: #212121; 61 | } 62 | 63 | &.alert-circle { 64 | border-radius: 2rem; 65 | } 66 | 67 | &.alert-shadow { 68 | box-shadow: 0 9px 16px 0 rgba(27,197,189,.25)!important; 69 | } 70 | 71 | &.hover { 72 | &:hover { 73 | filter: brightness(85%); 74 | } 75 | } 76 | 77 | `; 78 | -------------------------------------------------------------------------------- /src/components/Table/index.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Table = styled.table` 4 | overflow-x: scroll; 5 | width: 100%; 6 | display: table; 7 | border-collapse: collapse; 8 | border-spacing: 2px; 9 | border-color: grey; 10 | 11 | @media screen and (max-width: 790px) { 12 | display: block !important; 13 | /* width: 100%; */ 14 | overflow-x: auto; 15 | -webkit-overflow-scrolling: touch; 16 | } 17 | 18 | thead { 19 | display: table-header-group; 20 | vertical-align: middle; 21 | border-color: inherit; 22 | 23 | tr { 24 | display: table-row; 25 | vertical-align: inherit; 26 | border-color: inherit; 27 | } 28 | 29 | th { 30 | vertical-align: bottom; 31 | border-bottom: 2px solid #dee2e6; 32 | padding: .75rem; 33 | } 34 | 35 | font-size: 13px; 36 | color: #444; 37 | } 38 | 39 | tbody { 40 | font-size: 13px; 41 | color: #464e5f; 42 | 43 | display: table-row-group; 44 | vertical-align: middle; 45 | border-color: inherit; 46 | 47 | td { 48 | display: table-cell; 49 | padding: .75rem; 50 | vertical-align: top; 51 | border-top: 1px solid #dee2e6; 52 | } 53 | } 54 | 55 | .edit, .eraser, .info { 56 | margin: 0 3px; 57 | cursor: pointer; 58 | font-size: 12px; 59 | padding: 8px 10px; 60 | border-radius: 60px; 61 | color: #fff; 62 | border: none; 63 | font-weight: 400; 64 | transition: all 0.2s; 65 | 66 | &:hover { 67 | filter: brightness(90%); 68 | } 69 | } 70 | 71 | .edit { 72 | background-color: orange; 73 | } 74 | 75 | .eraser { 76 | background: #f64e60; 77 | } 78 | 79 | .info { 80 | background: #8950fc; 81 | } 82 | `; 83 | -------------------------------------------------------------------------------- /src/pages/Sis/styles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Wrap = styled.div` 4 | display: grid; 5 | grid-template-columns: 18% 82%; 6 | grid-template-rows: 100vh; 7 | 8 | /* grid-template-areas: '' */ 9 | `; 10 | 11 | export const Main = styled.div` 12 | @media screen and (max-width: 1200px) { 13 | grid-row: 1; 14 | grid-column: 1/3; 15 | } 16 | 17 | background: #ebedf5; 18 | 19 | .content { 20 | height: calc(100vh - 70px); 21 | overflow-y: auto; 22 | padding: 30px 0; 23 | 24 | .title { 25 | h1 { 26 | /* font-family: 'Montserrat'; */ 27 | color: #424242; 28 | font-weight: 300; 29 | } 30 | } 31 | } 32 | `; 33 | 34 | export const NavBar = styled.div` 35 | padding: 0 30px; 36 | height: 70px; 37 | background: #fff; 38 | 39 | display: flex; 40 | justify-content: flex-end; 41 | align-items: center; 42 | 43 | ul { 44 | list-style: none; 45 | 46 | li { 47 | padding: 0 10px; 48 | border-left: 1px solid #999; 49 | cursor: pointer; 50 | 51 | font-weight: 400; 52 | color: #b5b5c3; 53 | 54 | } 55 | } 56 | 57 | span { 58 | font-size: 13px; 59 | color: #b5b5c3; 60 | font-weight: normal; 61 | 62 | .name { 63 | font-weight: bold; 64 | } 65 | } 66 | 67 | .toggle { 68 | opacity: 0; 69 | transition: margin 0.3s; 70 | } 71 | 72 | @media screen and (max-width: 1200px) { 73 | display: flex; 74 | justify-content: space-between; 75 | 76 | ul { 77 | display: none; 78 | } 79 | 80 | 81 | svg { 82 | color: #fff; 83 | } 84 | 85 | .toggle { 86 | color: #555; 87 | opacity: 1; 88 | } 89 | 90 | } 91 | `; 92 | 93 | -------------------------------------------------------------------------------- /src/components/Dropzone/index.js: -------------------------------------------------------------------------------- 1 | import React, {useCallback, useState} from 'react' 2 | import { useDropzone } from 'react-dropzone' 3 | import { Dropzone as DropBackground } from './styles'; 4 | 5 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; 6 | import { faUpload, faPencilAlt } from '@fortawesome/free-solid-svg-icons'; 7 | import Profile from '~/assets/img/default-profile.jpg'; 8 | 9 | const Dropzone = ({file, onFileUploaded }) => { 10 | 11 | const [selectedFiles, setSelectedFiles] = useState(''); 12 | const onDrop = useCallback(acceptedFiles => { 13 | const file = acceptedFiles[0]; 14 | 15 | const fileUrl = URL.createObjectURL(file); 16 | 17 | setSelectedFiles(fileUrl); 18 | onFileUploaded(file); 19 | 20 | }, [onFileUploaded]) 21 | 22 | const {getRootProps, getInputProps, isDragActive} = useDropzone({ 23 | onDrop, 24 | accept: 'image/*' 25 | }) 26 | 27 | return ( 28 | 29 | 30 | {/* { 31 | isDragActive ? 32 |

Drop the files here ...

: 33 |

Drag 'n' drop some files here, or click to select files

34 | } */} 35 | { selectedFiles || file 36 | ? 37 |
38 | Point File 40 | Alterar 41 |
42 | : 43 |
44 | Point File 45 | Carregar 46 |
47 | } 48 | 49 | 50 | ) 51 | } 52 | 53 | export default Dropzone; 54 | -------------------------------------------------------------------------------- /src/components/Button/index.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Button = styled.button` 4 | border: none; 5 | border-radius: 0.42rem; 6 | padding: .65rem 1rem; 7 | font-size: 1rem; 8 | line-height: 1.5; 9 | 10 | font-weight: 500; 11 | font-family: 'Poppins', Helvetica, sans-serif; 12 | transition: all 0.2s; 13 | color: #777; 14 | cursor: pointer; 15 | 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | margin: ${props => props.margin ? props.margin : ''}; 20 | 21 | &.primary { 22 | color: #fff; 23 | background-color: #3699ff; 24 | } 25 | 26 | &.danger { 27 | color: #fff; 28 | background-color: #f64e60; 29 | } 30 | 31 | &.warning { 32 | background-color: orange; 33 | color: #fff; 34 | } 35 | 36 | &.success { 37 | background-color: #1bc5bd; 38 | color: #fff; 39 | } 40 | 41 | &.info { 42 | background-color: #8950fc; 43 | color: #fff; 44 | } 45 | 46 | &.light { 47 | color: #80808f; 48 | background-color: #f3f6f9; 49 | } 50 | 51 | &.dark { 52 | color: #fff; 53 | background-color: #212121; 54 | } 55 | 56 | &.btn-lg { 57 | padding: .825rem 1.42rem; 58 | font-size: 1.08rem; 59 | line-height: 1.5; 60 | } 61 | 62 | &.btn-sm { 63 | /* font-size: 90%; */ 64 | padding: .55rem .75rem; 65 | font-size: 12px; 66 | line-height: 1.35; 67 | } 68 | 69 | &.btn-circle { 70 | border-radius: 2rem; 71 | } 72 | 73 | &.btn-shadow { 74 | box-shadow: 0 9px 16px 0 rgba(27,197,189,.25)!important; 75 | } 76 | 77 | &:hover { 78 | filter: brightness(85%); 79 | } 80 | 81 | svg { 82 | margin: 0 3px !important; 83 | } 84 | 85 | &.right { 86 | margin-left: auto; 87 | } 88 | 89 | &.center { 90 | margin: 0 auto; 91 | } 92 | 93 | `; 94 | -------------------------------------------------------------------------------- /src/pages/Sis/Sidebar/index.js: -------------------------------------------------------------------------------- 1 | import React, { memo } from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | // Styled 5 | import { Side } from './styles'; 6 | 7 | // Logout function 8 | import { logout } from '~/services/auth'; 9 | 10 | // Logo 11 | import Logo from '~/assets/img/kadoo.png'; 12 | 13 | // Icons 14 | import { FiLogOut } from 'react-icons/fi'; 15 | 16 | // Connection Redux 17 | import { connect } from 'react-redux'; 18 | 19 | function Sidebar({ drag, activeMenu, itensMenu, dispatch }) { 20 | 21 | function toggleMenu(menu) { 22 | return { 23 | type: 'SET_MENU_ACTIVE', 24 | menu 25 | }; 26 | } 27 | 28 | return ( 29 | 30 |
31 | 32 |
33 |
    34 | {itensMenu.map(item => ( 35 |
  • 36 | dispatch(toggleMenu(item)) }> 37 | 38 | { item.icon } 39 | 40 | 41 | { item.name } 42 | 43 | 44 |
    • 45 | ))} 46 |
  • 47 | logout()} to={`/sis/login`}> 48 | 49 | 50 | 51 | 52 | Sair 53 | 54 | 55 |
    • 56 |
57 | 58 | ); 59 | } 60 | 61 | export default memo( 62 | connect(state => ({ 63 | activeMenu: state.menu.activeMenu, 64 | itensMenu: state.menu.itens 65 | }))(Sidebar) 66 | ); 67 | -------------------------------------------------------------------------------- /src/components/Dropzone/styles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | 4 | export const Dropzone = styled.div` 5 | height: 200px; 6 | width: 200px; 7 | overflow: hidden; 8 | border-radius: 360px; 9 | margin: 15px auto; 10 | background: #E1FAEC; 11 | /* border-radius: 10px; */ 12 | 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | /* margin-top: 48px; */ 17 | cursor: pointer; 18 | 19 | 20 | 21 | .image, .image-default { 22 | position: relative; 23 | 24 | display: flex; 25 | align-items: center; 26 | justify-content: center; 27 | width: 100%; 28 | height: 100%; 29 | 30 | img { 31 | transition: all 0.2s; 32 | } 33 | } 34 | 35 | &:hover { 36 | .image img { 37 | filter: brightness(30%) !important; 38 | } 39 | 40 | .image span { 41 | opacity: 1; 42 | } 43 | } 44 | 45 | .image img{ 46 | width: 100%; 47 | height: 100%; 48 | object-fit: cover; 49 | } 50 | 51 | .image-default img { 52 | width: 100%; 53 | height: 100%; 54 | object-fit: cover; 55 | filter: brightness(50%) !important; 56 | } 57 | 58 | .image-default span { 59 | /* opacity: 0; */ 60 | position: absolute; 61 | color: #fff; 62 | font-weight: 500; 63 | transition: all 0.2s; 64 | } 65 | 66 | .image span { 67 | opacity: 0; 68 | position: absolute; 69 | color: #fff; 70 | font-weight: 500; 71 | transition: all 0.2s; 72 | } 73 | 74 | p { 75 | width: calc(100% - 60px); 76 | height: calc(100% - 60px); 77 | border-radius: 10px; 78 | border: 1px dashed #4ECB79; 79 | 80 | display: flex; 81 | flex-direction: column; 82 | justify-content: center; 83 | align-items: center; 84 | color: #333; 85 | } 86 | 87 | p svg { 88 | color: #4ECB79; 89 | width: 24px; 90 | height: 24px; 91 | margin-bottom: 8px; 92 | } 93 | `; 94 | -------------------------------------------------------------------------------- /src/components/ButtonGroup/index.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const ButtonGroup = styled.div` 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | 8 | button { 9 | cursor: pointer; 10 | font-size: 12px; 11 | padding: 8px 10px; 12 | /* border-radius: 60px; */ 13 | background: #dcdcdc; 14 | color: #fff; 15 | border: none; 16 | font-weight: 500; 17 | transition: all 0.2s; 18 | 19 | &:first-of-type { 20 | border-top-left-radius: .42rem; 21 | border-bottom-left-radius: .42rem; 22 | } 23 | 24 | &:last-of-type { 25 | border-top-right-radius: .42rem; 26 | border-bottom-right-radius: .42rem; 27 | } 28 | 29 | &:hover { 30 | opacity: 0.95; 31 | /* box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; */ 32 | } 33 | 34 | } 35 | 36 | &.primary .active{ 37 | color: #fff; 38 | background-color: #3699ff; 39 | 40 | span { 41 | color: #3699ff; 42 | background: #fff; 43 | border-radius: 60px; 44 | padding: 0 5px; 45 | } 46 | } 47 | 48 | &.danger .active{ 49 | color: #fff; 50 | background-color: #f64e60; 51 | 52 | span { 53 | color: #f64e60; 54 | background: #fff; 55 | border-radius: 60px; 56 | padding: 0 5px; 57 | } 58 | } 59 | 60 | &.warning .active{ 61 | background-color: orange; 62 | color: #fff; 63 | 64 | span { 65 | color: orange; 66 | background: #fff; 67 | border-radius: 60px; 68 | padding: 0 5px; 69 | } 70 | } 71 | 72 | &.success .active{ 73 | background-color: #1bc5bd; 74 | color: #fff; 75 | 76 | span { 77 | color: #1bc5bd; 78 | background: #fff; 79 | border-radius: 60px; 80 | padding: 0 5px; 81 | } 82 | } 83 | 84 | &.info .active{ 85 | background-color: #8950fc; 86 | color: #fff; 87 | 88 | span { 89 | color: #8950fc; 90 | background: #fff; 91 | border-radius: 60px; 92 | padding: 0 5px; 93 | } 94 | } 95 | `; 96 | -------------------------------------------------------------------------------- /src/pages/Sis/Sidebar/styles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Side = styled.div` 4 | transition: all 0.5s; 5 | background: #1e1e2d; 6 | 7 | .logo { 8 | background: #1b1b28; 9 | padding: 10px !important; 10 | width: 100%; 11 | min-height: 70px; 12 | /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */ 13 | 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | 18 | img { 19 | width: 50%; 20 | height: auto; 21 | } 22 | } 23 | 24 | ul { 25 | list-style: none; 26 | margin-top: 20px; 27 | 28 | /* padding: 15px 0; */ 29 | 30 | li { 31 | 32 | cursor: pointer; 33 | 34 | display: flex; 35 | 36 | a{ 37 | padding: 13px 25px; 38 | display: flex; 39 | flex: 1; 40 | /* align-items: center; */ 41 | } 42 | 43 | .icon { 44 | color: #494b74; 45 | flex: 0 0 33px; 46 | font-size: 1rem; 47 | } 48 | 49 | .item { 50 | font-size: 13px; 51 | font-weight: 500; 52 | line-height: 20px; 53 | color: #a2a3b7; 54 | 55 | display: flex; 56 | align-items: center; 57 | } 58 | 59 | &.active { 60 | border-left: 3px solid #3699ff; 61 | } 62 | 63 | &.active, &:hover { 64 | background: #1b1b28; 65 | 66 | .icon { 67 | color: #3699ff; 68 | } 69 | 70 | .item { 71 | color: #fff; 72 | } 73 | } 74 | 75 | 76 | } 77 | } 78 | 79 | /* transition: width 0.2s linear; */ 80 | @media screen and (max-width: 1200px) { 81 | /* grid-row: 1; 82 | grid-column-start: 1; 83 | grid-column-end: 0; */ 84 | /* z-index: 9999; */ 85 | 86 | position: ${props => props.drag ? 'absolute' : 'inherit'}; 87 | height: ${props => props.drag ? '100vh' : 'inherit'}; 88 | width: ${props => props.drag ? '185px' : '0'}; 89 | overflow: hidden; 90 | z-index: 999; 91 | } 92 | `; 93 | -------------------------------------------------------------------------------- /src/pages/Sis/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState, Suspense, lazy } from 'react'; 2 | import { Switch, Route } from 'react-router-dom'; 3 | 4 | // Icons 5 | import { FiMenu, FiUser, FiLogOut } from 'react-icons/fi'; 6 | 7 | // Styled Components 8 | import Sidebar from './Sidebar'; 9 | import { Wrap, Main, NavBar } from './styles'; 10 | 11 | const Dashboard = lazy(() => import('./Dashboard')); 12 | const Tables = lazy(() => import('./Tables')); 13 | const Buttons = lazy(() => import('./Buttons')); 14 | const Cards = lazy(() => import('./Cards')); 15 | const Forms = lazy(() => import('./Forms')); 16 | const Alerts = lazy(() => import('./Alerts')); 17 | const Modals = lazy(() => import('./Modals')); 18 | 19 | export default function Sis() { 20 | 21 | const [ drag, setDrag ] = useState(false); 22 | return ( 23 | 24 | 25 |
26 | 27 | {/* drag ? setDrag(false) : setDrag(true)} /> */} 28 | drag ? setDrag(false) : setDrag(true)} /> 29 | Olá, { 'Luis Otávio' } 30 | 31 |
32 |
33 | 35 |
36 |
37 | }> 38 | {/* Your pages */} 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 |
50 | 51 |
52 | 53 | ); 54 | } 55 | 56 | -------------------------------------------------------------------------------- /src/components/Pagination/index.js: -------------------------------------------------------------------------------- 1 | import React, { memo } from 'react'; 2 | 3 | import styled from 'styled-components'; 4 | 5 | const PaginationSection = styled.nav` 6 | display: flex; 7 | justify-content: flex-end; 8 | 9 | ul.pagination { 10 | display: flex; 11 | padding-left: 0; 12 | list-style: none; 13 | border-radius: .25rem; 14 | 15 | .page-item.disabled .page-link { 16 | color: #6c757d; 17 | pointer-events: none; 18 | cursor: auto; 19 | background-color: #fff; 20 | border-color: #dee2e6; 21 | } 22 | 23 | .page-item.active .page-link { 24 | z-index: 3; 25 | color: #fff; 26 | background-color: #3490dc; 27 | border-color: #3490dc; 28 | cursor: pointer; 29 | } 30 | 31 | .page-item:first-child .page-link { 32 | margin-left: 0; 33 | border-top-left-radius: .25rem; 34 | border-bottom-left-radius: .25rem; 35 | } 36 | 37 | .page-link { 38 | cursor: pointer; 39 | position: relative; 40 | display: block; 41 | padding: .5rem .75rem; 42 | margin-left: -1px; 43 | line-height: 1.25; 44 | color: #3490dc; 45 | background-color: #fff; 46 | border: 1px solid #dee2e6; 47 | } 48 | } 49 | `; 50 | 51 | 52 | function Pagination({ pages, active, before, after, load }) { 53 | 54 | function loadPage(page) { 55 | load(page) 56 | } 57 | 58 | const items = []; 59 | 60 | for (let i = 1; i <= pages; i++) { 61 | items.push(
    • ) 62 | } 63 | 64 | return ( 65 | 66 |
      67 | {/*
    • 68 | 69 |
      • */} 70 | { 71 | items 72 | } 73 | {/*
    • 74 | 75 |
      • */} 76 |
    77 |     78 | ); 79 | } 80 | 81 | export default memo(Pagination); 82 | -------------------------------------------------------------------------------- /src/pages/Sis/Alerts/index.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | 3 | // Icons 4 | // import { FiCalendar, FiMessageCircle, FiLogOut, FiUsers } from 'react-icons/fi'; 5 | 6 | import { Card } from '~/components/Card'; 7 | import Alert from '~/components/Alert'; 8 | 9 | // This styled only show buttons in row format 10 | import styled from 'styled-components'; 11 | const Buttons = styled.div` 12 | display: flex; 13 | 14 | &.wrap { 15 | flex-wrap: wrap; 16 | } 17 | /* justify-content: space-around; */ 18 | 19 | button { 20 | margin: 5px; 21 | } 22 | 23 | `; 24 | 25 | export default function AlertsPage() { 26 | const [ alrt, setAlert ] = useState(true); 27 | 28 | 29 | function toggleAlert(valueWhenToggle) { 30 | alert('This alert was closed') 31 | 32 | setAlert(valueWhenToggle) 33 | } 34 | 35 | useEffect(() => { 36 | document.title = 'Alerts' 37 | }, []); 38 | 39 | return ( 40 | <> 41 |
    42 |

    Alerts

    43 |
    44 |
    45 | 46 |
    47 |

    Simple Alerts

    48 |
    49 |
    50 | 51 | 52 | 53 | 54 | 55 | 56 |
    57 |     58 |
    59 |
    60 | 61 |
    62 |

    Pass Function Toggle and value when

    63 |
    64 |
    65 | 66 | 67 | 68 |
    69 |     70 |
    71 | 72 | ); 73 | } 74 | -------------------------------------------------------------------------------- /src/pages/SignIn/styles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Back = styled.a` 4 | position: absolute; 5 | top: 15px; 6 | left: 20px; 7 | color: #b20710; 8 | font-weight: bold; 9 | cursor: pointer; 10 | `; 11 | 12 | export const Container = styled.div` 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | /*height: 100vh; 17 | padding: 0 20px; */ 18 | 19 | `; 20 | 21 | export const Form = styled.form` 22 | width: 400px; 23 | background: #fff; 24 | padding: 20px; 25 | display: flex; 26 | flex-direction: column; 27 | align-items: center; 28 | border-radius: 10px; 29 | box-shadow: 1px 1px 20px 10px #dcdcdc; 30 | 31 | img{ 32 | width: 130px; 33 | margin: 10px 0 40px; 34 | } 35 | 36 | p{ 37 | color: #ff3333; 38 | margin-bottom: 15px; 39 | border: 1px solid #ff3333; 40 | border-radius: 20px; 41 | padding: 10px; 42 | width: 100%; 43 | text-align: center; 44 | } 45 | 46 | input{ 47 | display: flex; 48 | height: 46px; 49 | margin-bottom: 15px; 50 | padding: 0 20px; 51 | color: #777; 52 | font-size: 15px; 53 | width: 100%; 54 | border: 1px solid #ddd; 55 | border-radius: 5px; 56 | transition: all 0.2s linear; 57 | 58 | &::placeholder { 59 | color: #999; 60 | } 61 | 62 | &:focus { 63 | /* border: 2px solid #b20710; */ 64 | box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .28); 65 | } 66 | 67 | &.invalid{ 68 | border-color: red; 69 | box-shadow: none; 70 | 71 | &::placeholder { 72 | color: red; 73 | } 74 | } 75 | } 76 | 77 | button{ 78 | /* background-color: #b20710; */ 79 | cursor: pointer; 80 | color: #fff; 81 | font-size: 16px; 82 | background: #b20710; 83 | height: 42px; 84 | border: 2px solid #b20710; 85 | border-radius: 5px; 86 | width: 100%; 87 | font-weight: bold; 88 | transition: all 0.2s; 89 | } 90 | 91 | button:hover{ 92 | opacity: 0.98; 93 | box-shadow: 0 1px 6px 0 #b20710; 94 | 95 | } 96 | 97 | hr{ 98 | margin: 20px 0; 99 | border: none; 100 | border-bottom: 1px solid #cdcdcd; 101 | width: 100%; 102 | } 103 | 104 | a{ 105 | font-size: 14px; 106 | // font-weight: bold; 107 | color: #999; 108 | text-decoration: none; 109 | transition: all 0.2s; 110 | } 111 | 112 | a:hover{ 113 | text-decoration: underline; 114 | } 115 | `; -------------------------------------------------------------------------------- /src/pages/Sis/Modals/index.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState, Suspense, lazy } from 'react'; 2 | import { ModalProvider } from 'styled-react-modal'; 3 | // Icons 4 | // import { FiCalendar, FiMessageCircle, FiLogOut, FiUsers } from 'react-icons/fi'; 5 | 6 | import { Card } from '~/components/Card'; 7 | import { Button } from '~/components/Button'; 8 | 9 | // This styled only show buttons in row format 10 | import styled from 'styled-components'; 11 | const Buttons = styled.div` 12 | display: flex; 13 | 14 | &.wrap { 15 | flex-wrap: wrap; 16 | } 17 | /* justify-content: space-around; */ 18 | 19 | button { 20 | margin: 5px; 21 | } 22 | 23 | `; 24 | 25 | let ModalForm = () => <>; 26 | let ModalSuccess = () => <>; 27 | let ModalError = () => <>; 28 | 29 | export default function ButtonsPage() { 30 | const [ OpenForm, setOpenForm ] = useState(false); 31 | const [ openSuccess, setSuccess ] = useState(false); 32 | const [ openError, setError ] = useState(false); 33 | 34 | useEffect(() => { 35 | document.title = 'Modals' 36 | }, []); 37 | 38 | async function toggleModalForm(e) { 39 | ModalForm = await lazy(() => import("./modalForm")); 40 | 41 | setOpenForm(!OpenForm); 42 | } 43 | 44 | async function toggleModalSuccess(e) { 45 | ModalSuccess = await lazy(() => import("./modalSuccess")); 46 | 47 | setSuccess(!openSuccess); 48 | } 49 | 50 | async function toggleModalError(e) { 51 | ModalError = await lazy(() => import("./modalError")); 52 | 53 | setError(!openError); 54 | } 55 | 56 | function submitModalForm() { 57 | alert('this form was submited'); 58 | 59 | setOpenForm(!OpenForm); 60 | } 61 | 62 | return ( 63 | <> 64 |
    65 |

    Modals

    66 |
    67 |
    68 | 69 |
    70 |

    Examples

    71 |
    72 |
    73 | 74 | 75 | 76 | 77 | 78 |
    79 |     80 |
    81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | ); 90 | } 91 | -------------------------------------------------------------------------------- /src/pages/Sis/Tables/index.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | 3 | // Icons 4 | // import { FiCalendar, FiMessageCircle, FiLogOut, FiUsers } from 'react-icons/fi'; 5 | 6 | import { CardDashboard, Card } from '~/components/Card'; 7 | import { Table } from '~/components/Table'; 8 | 9 | import { getToken } from '~/services/auth'; 10 | import { FiEdit, FiInfo, FiTrash } from 'react-icons/fi'; 11 | 12 | const config = { 13 | headers: { 14 | 'Authorization': `Bearer ${getToken}` 15 | } 16 | }; 17 | 18 | let array = [ 19 | { 20 | id: 1, 21 | name: 'Luis Otávio', 22 | }, 23 | { 24 | id: 2, 25 | name: 'Fernando Moreira', 26 | }, 27 | { 28 | id: 3, 29 | name: 'José Augusto', 30 | }, 31 | { 32 | id: 2, 33 | name: 'Jonathan Moreira', 34 | }, 35 | ] 36 | 37 | export default function TablesPage() { 38 | 39 | useEffect(() => { 40 | document.title = 'Tables' 41 | }, []); 42 | 43 | return ( 44 | <> 45 |
    46 |

    Tables

    47 |
    48 |
    49 | 50 |
    51 |

    Tables

    52 |
    53 |
    54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | {array.map(item => ( 64 | 65 | 66 | 67 | 78 | 79 | ))} 80 | 81 |
    #NameActions
    { item.id }{ item.name } 68 | 71 | 74 | 77 |
    82 |
    83 |     84 |
    85 | 86 | ); 87 | } 88 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

    Dashboard Template with ReactJS

    6 | 7 |

    A simple and basic Dashboard template developed with ReactJs

    8 |

    9 | See a Live Demo 10 |

    11 |

    12 | Technologies   |    13 | How To Use    14 |

    15 | 16 | ## :rocket: Technologies 17 | 18 | This project was developed by me in a personal project, but, i am making open-source for more contribs. 19 | 20 | - [ReactJS](https://pt-br.reactjs.org) 21 | - [React-Router-Dom](https://www.npmjs.com/package/react-router-dom) 22 | - [Redux](https://redux.js.org) 23 | - [React-Notifications-Component](https://www.npmjs.com/package/react-notifications-component) 24 | - [Styled Components](https://styled-components.com) 25 | - [React-Icons](https://react-icons.github.io/react-icons/) 26 | - [Styled-React-Modal](https://www.npmjs.com/package/styled-react-modal) 27 | 28 | 29 | ## :information_source: How To Use 30 | 31 | In order to use it, you need to clone this repository and run the following steps from your command line: 32 | 33 | ```bash 34 | 35 | # Clone this repository 36 | 37 | $ git clone https://github.com/luisotavio756/dashboard-reactjs.git 38 | 39 | # Go into the repository 40 | 41 | $ cd dashboard-reactjs 42 | 43 | # Install packages 44 | 45 | $ yarn install or npm install 46 | 47 | # Run start and enjoy 48 | 49 | $ yarn start or npm start 50 | 51 | # Enjoy! 52 | 53 | ``` 54 | ## :rocket: Some Components and Updates that I seek for contributions 55 | 56 | You may develop others, if you have any good idea. 57 | 58 | - Dark and Light Mode 59 | - Breadcrumb Component 60 | - Betters forms rows 61 | - Navbar with icons actions like config, profile, notifications... 62 | - Profile page 63 | - Beautiful and correct CSS 64 | - Better responsiveness 65 | 66 | ## :heart: How To Contrib 67 | 68 | To contribute, you need to fork this repository and create a new branch with the name of your contribution, like: 69 | 70 | ```bash 71 | 72 | # Clone this repository 73 | 74 | $ git clone https://github.com/luisotavio756/dashboard-reactjs.git 75 | 76 | # Go into the repository 77 | 78 | $ cd dashboard-reactjs 79 | 80 | # Create a Branch 81 | OBS: Always add prefix "component-name_of_your_component" if you let create a new component, "update-name_of_component_updated", if you update some css or component. 82 | 83 | $ git branch component-breadcrumb 84 | 85 | # Checkout branch 86 | 87 | $ git checkout component-breadcrumb 88 | 89 | ``` 90 | 91 | After this, you may develop the new feature. Once you are done, send a pull request and contact me to check your contribution and merge it into master. Also, I will add credits for you in this repository :smile: 92 | 93 | --- 94 | 95 | Made with ♥ by Luis Otávio [Visit my LinkedIn!](https://www.linkedin.com/in/lu%C3%ADs-ot%C3%A1vio-87851517a/) :wave: 96 | Send a message in my [WhatsApp](https://api.whatsapp.com/send?phone=+5588997542399) :rocket: 97 | -------------------------------------------------------------------------------- /src/pages/SignIn/index.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | import { Link, useHistory } from 'react-router-dom'; 3 | 4 | import Logo from '~/assets/img/kadoo.png'; 5 | import api from '~/services/api'; 6 | import { login } from '~/services/auth'; 7 | 8 | import { Form, Container } from './styles'; 9 | 10 | const SignIn = () => { 11 | var history = useHistory(); 12 | const [email, setEmail] = useState('luis@gmail.com'); 13 | const [password, setPassword] = useState('12345678'); 14 | const [email_err, setEmailErr] = useState(''); 15 | const [password_err, setPasswordErr] = useState(''); 16 | const [error, setError] = useState(''); 17 | 18 | useEffect(() => { 19 | document.title = 'Kadoo Tecnologia - Login'; 20 | }, []); 21 | 22 | async function handleSignIn(e) { 23 | e.preventDefault(); 24 | // const { email, password } = this.state; 25 | 26 | if(email.length == 0) { 27 | setEmailErr("Campo Obrigatório"); 28 | } 29 | 30 | if (password.length == 0) { 31 | setPasswordErr("Campo Obrigatório") 32 | } 33 | 34 | if (!email || !password) { 35 | setError("Preencha todos os campos para entrar "); 36 | 37 | } else { 38 | try { 39 | // Connect to API 40 | 41 | // const response = await api.post("/users/auth", { 42 | // email, 43 | // password 44 | // }); 45 | 46 | // If your using API, erase this line and show 'Connect to API' & 'Set JWT in localstorage' 47 | if(!email == 'luis@gmail.com' || !password == '12345678') 48 | return 0; 49 | 50 | // Set JWT in localstorage 51 | // login(true); 52 | 53 | history.push('/'); 54 | } catch (err) { 55 | setError("Email ou Senha incorretos") 56 | } 57 | } 58 | } 59 | 60 | return ( 61 | <> 62 | 63 |
    64 | Airbnb 65 | {error &&

    {error}

    } 66 | { setEmail(e.target.value); setEmailErr('') }} 71 | value={email} 72 | className={email_err != '' ? 'invalid' : '' } 73 | /> 74 | { setPassword(e.target.value); setPasswordErr('') }} 79 | value={password} 80 | className={password_err != '' ? 'invalid' : '' } 81 | /> 82 | 83 |
    84 | Não tem uma Conta ? Cadastre-se ! 85 |
    86 |     87 | 88 | ); 89 | 90 | } 91 | 92 | export default SignIn; 93 | -------------------------------------------------------------------------------- /src/pages/Sis/Cards/index.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | 3 | // Icons 4 | // import { FiCalendar, FiMessageCircle, FiLogOut, FiUsers } from 'react-icons/fi'; 5 | 6 | import { Card } from '~/components/Card'; 7 | import { Button } from '~/components/Button'; 8 | 9 | // This styled only show buttons in row format 10 | import styled from 'styled-components'; 11 | const Buttons = styled.div` 12 | display: flex; 13 | 14 | &.wrap { 15 | flex-wrap: wrap; 16 | } 17 | /* justify-content: space-around; */ 18 | 19 | button { 20 | margin: 5px; 21 | } 22 | 23 | `; 24 | 25 | export default function CardsPage() { 26 | useEffect(() => { 27 | document.title = 'Cards' 28 | }, []); 29 | 30 | return ( 31 | <> 32 |
    33 |

    Cards

    34 |
    35 |
    36 | 37 |
    38 |

    Card Title

    39 |
    40 |
    41 |

    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam ab voluptatibus impedit saepe, error soluta quia. Incidunt natus voluptas magnam dolore amet quod accusamus perspiciatis, illum omnis, dignissimos porro recusandae.

    42 |
    43 |     44 |
    45 |
    46 | 47 |
    48 |

    Card With Action

    49 |
    50 |
    51 |

    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam ab voluptatibus impedit saepe, error soluta quia. Incidunt natus voluptas magnam dolore amet quod accusamus perspiciatis, illum omnis, dignissimos porro recusandae.

    52 |
    53 |
    54 | 55 |
    56 |     57 |
    58 |
    59 | 60 |
    61 |

    Card With Action Center

    62 |
    63 |
    64 |

    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam ab voluptatibus impedit saepe, error soluta quia. Incidunt natus voluptas magnam dolore amet quod accusamus perspiciatis, illum omnis, dignissimos porro recusandae.

    65 |
    66 |
    67 | 68 |
    69 |     70 |
    71 |
    72 | 73 |
    74 |

    Card With Action Start

    75 |
    76 |
    77 |

    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam ab voluptatibus impedit saepe, error soluta quia. Incidunt natus voluptas magnam dolore amet quod accusamus perspiciatis, illum omnis, dignissimos porro recusandae.

    78 |
    79 |
    80 | 81 |
    82 |     83 |
    84 | 85 | ); 86 | } 87 | -------------------------------------------------------------------------------- /src/global.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); 2 | 3 | * { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | outline: 0; 8 | } 9 | 10 | 11 | html, body { 12 | font-size: 13px; 13 | font-family: 'Poppins', 'PS Regular', sans-serif !important; 14 | height: 100%; 15 | /* overflow-y: scroll; */ 16 | /* -webkit-font-smoothing: antialiased; */ 17 | 18 | } 19 | 20 | button { 21 | font-family: 'Poppins', 'PS Regular', sans-serif !important; 22 | } 23 | 24 | h1.fw-400 { 25 | font-weight: 400; 26 | } 27 | 28 | .shadow { 29 | box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; 30 | } 31 | 32 | /* For mobile phones: */ 33 | [class*="col-"] { 34 | margin: inherit 15px; 35 | padding: 0 1rem !important; 36 | } 37 | 38 | 39 | .col-1 { 40 | width: 8.33%; 41 | } 42 | 43 | .col-2 { 44 | width: 16.66%; 45 | } 46 | 47 | .col-3 { 48 | width: 25%; 49 | } 50 | 51 | .col-4 { 52 | width: 33.33%; 53 | } 54 | 55 | .col-5 { 56 | width: 41.66%; 57 | } 58 | 59 | .col-6 { 60 | width: 50%; 61 | } 62 | 63 | .col-7 { 64 | width: 58.33%; 65 | } 66 | .col-8 { 67 | width: 66.66%; 68 | } 69 | 70 | .col-9 { 71 | width: 75%; 72 | } 73 | 74 | .col-10 { 75 | width: 83.33%; 76 | } 77 | 78 | .col-11 { 79 | width: 91.66%; 80 | } 81 | 82 | .col-12 { 83 | width: 100%; 84 | } 85 | 86 | @media only screen and (max-width: 920px) { 87 | /* For mobile phones: */ 88 | [class*="col-"] { 89 | margin-top: 15px; 90 | width: 100%; 91 | } 92 | 93 | .px-0 { 94 | padding: 0 .5rem !important; 95 | } 96 | 97 | .visible-xs { 98 | display: block !important; 99 | } 100 | 101 | .hidden-xs { 102 | display: none !important; 103 | } 104 | } 105 | 106 | .hidden-xs { 107 | display: block; 108 | } 109 | 110 | .visible-xs, .d-none { 111 | display: none; 112 | } 113 | 114 | .row { 115 | display: -ms-flexbox; 116 | display: flex; 117 | -ms-flex-wrap: wrap; 118 | flex-wrap: wrap; 119 | } 120 | 121 | 122 | .img-fluid { 123 | width: 100%; 124 | height: auto; 125 | } 126 | 127 | .text-center { 128 | text-align: center; 129 | } 130 | 131 | a { 132 | color: inherit; 133 | text-decoration: none; 134 | } 135 | 136 | .loader { 137 | z-index: 9999; 138 | position: fixed; 139 | top: calc(50% - 4em); 140 | left: calc(50% - 4em); 141 | width: 8em; 142 | height: 8em; 143 | border: .7em solid rgba(0, 0, 0, 0.2); 144 | border-left: .7em solid #b70710; 145 | border-radius: 50%; 146 | animation: load8 1.1s infinite linear; 147 | transition: opacity 0.3s; 148 | } 149 | 150 | .loader-admin { 151 | position: absolute; 152 | height: calc(100vh - 70px); 153 | width: 100%; 154 | align-items: flex-end; 155 | justify-content: center; 156 | align-self: center; 157 | text-align: center; 158 | display: flex; 159 | } 160 | 161 | .loader-admin > div { 162 | 163 | width: 8em; 164 | height: 8em; 165 | border: .7em solid rgba(0, 0, 0, 0.2); 166 | border-left: .7em solid #b70710; 167 | border-radius: 50%; 168 | animation: load8 1.1s infinite linear; 169 | transition: opacity 0.3s; 170 | } 171 | 172 | .loader-more { 173 | width: 3em; 174 | height: 3em; 175 | border: .4em solid rgba(0, 0, 0, 0.2); 176 | border-left: .4em solid #b70710; 177 | border-radius: 50%; 178 | animation: load8 1.1s infinite linear; 179 | transition: opacity 0.3s; 180 | margin: 0 auto; 181 | } 182 | 183 | .loader--hide { 184 | opacity: 0; 185 | } 186 | 187 | @keyframes load8 { 188 | 0% { 189 | transform: rotate(0deg); 190 | } 191 | 100% { 192 | transform: rotate(360deg); 193 | } 194 | } 195 | 196 | 197 | 198 | 199 | 200 | -------------------------------------------------------------------------------- /src/components/Card/index.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Card = styled.div` 4 | margin-top: 30px; 5 | border-radius: 10px; 6 | border: none; 7 | box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; 8 | display: flex; 9 | -webkit-box-orient: vertical; 10 | -webkit-box-direction: normal; 11 | flex-direction: column; 12 | min-width: 0; 13 | /* width: 100%; */ 14 | word-wrap: break-word; 15 | background-color: #fff; 16 | background-clip: border-box; 17 | 18 | .card-title { 19 | padding: 1rem 1.25rem 0rem; 20 | 21 | @media screen and (max-width: 790px) { 22 | padding: 1rem .5rem 0; 23 | } 24 | 25 | margin-bottom: 0; 26 | background-color: transparent; 27 | border: none; 28 | display: flex; 29 | align-items: center; 30 | justify-content: space-between; 31 | 32 | h3 { 33 | font-size: 1rem; 34 | font-weight: 600; 35 | color: #48465b; 36 | } 37 | 38 | .tools { 39 | @media screen and (max-width: 790px) { 40 | span { 41 | display: none; 42 | } 43 | } 44 | button, a { 45 | margin: 0 3px; 46 | cursor: pointer; 47 | font-size: 12px; 48 | background: #b20710; 49 | padding: 8px 10px; 50 | border-radius: 6px; 51 | color: #fff; 52 | border: none; 53 | font-weight: bold; 54 | /* line-height: 1px; */ 55 | /* border: 1px solid #999; */ 56 | transition: all 0.2s; 57 | 58 | &:hover { 59 | filter: brightness(90%); 60 | /* opacity: 0.95; */ 61 | /* box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; */ 62 | } 63 | } 64 | } 65 | } 66 | 67 | .card-body { 68 | -webkit-box-flex: 1; 69 | flex: 1 1 auto; 70 | min-height: 1px; 71 | padding: 1.5rem 1.25rem; 72 | 73 | @media screen and (max-width: 790px) { 74 | padding: 1.5rem .5rem; 75 | } 76 | 77 | &.light-text { 78 | p { 79 | color: #777; 80 | } 81 | } 82 | } 83 | 84 | .card-actions { 85 | padding: 0 1.25rem 1.25rem 1.25rem; 86 | display: flex; 87 | 88 | &.flex-end { 89 | justify-content: flex-end; 90 | } 91 | 92 | &.center { 93 | justify-content: center; 94 | } 95 | 96 | &.flex-start { 97 | justify-content: flex-start; 98 | } 99 | } 100 | `; 101 | 102 | export const CardDashboard = styled.div` 103 | margin-top: 30px; 104 | border-radius: 10px; 105 | border: none; 106 | box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; 107 | display: flex; 108 | -webkit-box-orient: vertical; 109 | -webkit-box-direction: normal; 110 | flex-direction: column; 111 | min-width: 0; 112 | /* width: 100%; */ 113 | word-wrap: break-word; 114 | background-color: #fff; 115 | background-clip: border-box; 116 | 117 | &.red { 118 | border-left: 0.25rem solid #f64e60; 119 | color: #f64e60; 120 | } 121 | 122 | &.green { 123 | border-left: 0.25rem solid #1cc88a !important; 124 | color: #1cc88a !important; 125 | } 126 | 127 | &.blue { 128 | border-left: 0.25rem solid #36b9cc !important; 129 | color: #36b9cc !important; 130 | } 131 | 132 | &.orange { 133 | border-left: 0.25rem solid #f6c23e !important; 134 | color: #f6c23e !important; 135 | } 136 | 137 | .card-body { 138 | -webkit-box-flex: 1; 139 | flex: 1 1 auto; 140 | min-height: 1px; 141 | padding: 1.5rem 1.25rem; 142 | @media screen and (max-width: 790px) { 143 | padding: 1.5rem .5rem; 144 | } 145 | 146 | .row { 147 | align-items: center; 148 | } 149 | 150 | .col { 151 | flex-basis: 0; 152 | -webkit-box-flex: 1; 153 | flex-grow: 1; 154 | max-width: 100%; 155 | 156 | .title { 157 | color: #5a5c69 !important; 158 | font-size: .7rem; 159 | text-transform: uppercase!important; 160 | margin-bottom: .25rem!important; 161 | } 162 | 163 | .number { 164 | font-size: 1.125rem; 165 | font-weight: 700!important; 166 | } 167 | } 168 | 169 | .col-auto { 170 | flex: 0 0 auto; 171 | width: auto; 172 | max-width: 100%; 173 | 174 | svg { 175 | -webkit-transform: rotate(-15deg); 176 | transform: rotate(-15deg); 177 | } 178 | } 179 | } 180 | `; 181 | -------------------------------------------------------------------------------- /src/pages/Sis/Modals/modalError.js: -------------------------------------------------------------------------------- 1 | import React, { useState, memo, useRef } from 'react'; 2 | import Modal from 'styled-react-modal'; 3 | 4 | import { Form } from '~/components/Form'; 5 | import { Link } from 'react-router-dom'; 6 | import { FiX, FiCheckCircle } from 'react-icons/fi'; 7 | 8 | 9 | const StyledModal = Modal.styled` 10 | 11 | max-width: 600px; 12 | width: 98%; 13 | height: auto; 14 | 15 | background-color: white; 16 | position: fixed; 17 | top: 0; 18 | margin: 1.75rem auto; 19 | border-radius: .3rem; 20 | 21 | @keyframes modalFade { 22 | from {transform: translateY(-50%);opacity: 0;} 23 | to {transform: translateY(0);opacity: 1;} 24 | } 25 | 26 | & { 27 | animation-name: modalFade; 28 | animation-duration: .3s; 29 | } 30 | 31 | .modal-header { 32 | display: -webkit-box; 33 | display: flex; 34 | -webkit-box-align: start; 35 | align-items: flex-start; 36 | -webkit-box-pack: justify; 37 | justify-content: space-between; 38 | padding: 1rem; 39 | border-bottom: 1px solid #dee2e6; 40 | border-top-left-radius: calc(.3rem - 1px); 41 | border-top-right-radius: calc(.3rem - 1px); 42 | color: #333; 43 | 44 | .modal-title { 45 | margin-bottom: 0; 46 | line-height: 1.6; 47 | font-size: 1.25rem; 48 | font-weight: normal; 49 | 50 | } 51 | 52 | button.close { 53 | padding: 0; 54 | background-color: transparent; 55 | border: 0; 56 | -webkit-appearance: none; 57 | -moz-appearance: none; 58 | appearance: none; 59 | align-self: center; 60 | cursor: pointer; 61 | font-size: 22px; 62 | } 63 | } 64 | 65 | .modal-body { 66 | // position: relative; 67 | // flex: 1 1 auto; 68 | padding: 1rem; 69 | height: auto; 70 | overflow-y: auto; 71 | 72 | h1, p { 73 | text-align: center; 74 | } 75 | 76 | div.icon { 77 | text-align: center; 78 | color: #f64e60; 79 | } 80 | 81 | h1 { 82 | color: #777; 83 | margin-top: 5px 84 | } 85 | 86 | p { 87 | margin-top: 5px; 88 | color: #666; 89 | font-size: 14px; 90 | line-height: 22px; 91 | } 92 | 93 | div.link { 94 | margin: 15px auto; 95 | text-align: center; 96 | } 97 | 98 | a { 99 | padding: 9px 20px; 100 | background-color: #1bc5bd; 101 | text-align: center; 102 | color: #fff; 103 | font-weight: 500; 104 | border-radius: 10px; 105 | 106 | 107 | } 108 | } 109 | 110 | .modal-footer { 111 | display: flex; 112 | flex-wrap: wrap; 113 | align-items: center; 114 | justify-content: flex-end; 115 | padding: .75rem; 116 | border-top: 1px solid #dee2e6; 117 | border-bottom-right-radius: calc(.3rem - 1px); 118 | border-bottom-left-radius: calc(.3rem - 1px); 119 | 120 | .close, .submit { 121 | margin: 0 3px; 122 | padding: 7px 14px; 123 | border-radius: 50px; 124 | font-size: 12px; 125 | font-weight: 500 !important; 126 | transition: all 0.2s !important; 127 | line-height: 1.6; 128 | cursor: pointer; 129 | transition: all 0.2s; 130 | 131 | &:hover { 132 | filter: brightness(90%) 133 | } 134 | } 135 | 136 | .close { 137 | border: 1px solid transparent; 138 | color: #333333c9; 139 | background: none; 140 | } 141 | 142 | .submit { 143 | background-color: #1bbc9b; 144 | border: 1px solid #1bbc9b; 145 | color: #fff !important; 146 | } 147 | } 148 | `; 149 | 150 | function ModalSuccess({ isOpen, toggleModal }) { 151 | 152 | 153 | return ( 154 | 155 | 160 |
    161 |
    Success
    162 | 165 |
    166 |
    167 |
    168 | 169 |
    170 |

    Error !

    171 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi eligendi numquam eveniet quidem nobis at quisquam blanditiis cum nihil nemo, alias assumenda soluta hic. Id mollitia error rem fugit dolor?

    172 |
    173 |     174 | ); 175 | 176 | } 177 | 178 | export default memo(ModalSuccess); 179 | -------------------------------------------------------------------------------- /src/pages/Sis/Modals/modalSuccess.js: -------------------------------------------------------------------------------- 1 | import React, { useState, memo, useRef } from 'react'; 2 | import Modal from 'styled-react-modal'; 3 | 4 | import { Form } from '~/components/Form'; 5 | import { Link } from 'react-router-dom'; 6 | import { FiX, FiCheckCircle } from 'react-icons/fi'; 7 | 8 | 9 | const StyledModal = Modal.styled` 10 | 11 | max-width: 600px; 12 | width: 98%; 13 | height: auto; 14 | 15 | background-color: white; 16 | position: fixed; 17 | top: 0; 18 | margin: 1.75rem auto; 19 | border-radius: .3rem; 20 | 21 | @keyframes modalFade { 22 | from {transform: translateY(-50%);opacity: 0;} 23 | to {transform: translateY(0);opacity: 1;} 24 | } 25 | 26 | & { 27 | animation-name: modalFade; 28 | animation-duration: .3s; 29 | } 30 | 31 | .modal-header { 32 | display: -webkit-box; 33 | display: flex; 34 | -webkit-box-align: start; 35 | align-items: flex-start; 36 | -webkit-box-pack: justify; 37 | justify-content: space-between; 38 | padding: 1rem; 39 | border-bottom: 1px solid #dee2e6; 40 | border-top-left-radius: calc(.3rem - 1px); 41 | border-top-right-radius: calc(.3rem - 1px); 42 | color: #333; 43 | 44 | .modal-title { 45 | margin-bottom: 0; 46 | line-height: 1.6; 47 | font-size: 1.25rem; 48 | font-weight: normal; 49 | 50 | } 51 | 52 | button.close { 53 | padding: 0; 54 | background-color: transparent; 55 | border: 0; 56 | -webkit-appearance: none; 57 | -moz-appearance: none; 58 | appearance: none; 59 | align-self: center; 60 | cursor: pointer; 61 | font-size: 22px; 62 | } 63 | } 64 | 65 | .modal-body { 66 | // position: relative; 67 | // flex: 1 1 auto; 68 | padding: 1rem; 69 | height: auto; 70 | overflow-y: auto; 71 | 72 | h1, p { 73 | text-align: center; 74 | } 75 | 76 | div.icon { 77 | text-align: center; 78 | color: #1bc5bd; 79 | } 80 | 81 | h1 { 82 | color: #777; 83 | margin-top: 5px 84 | } 85 | 86 | p { 87 | margin-top: 5px; 88 | color: #666; 89 | font-size: 14px; 90 | line-height: 22px; 91 | } 92 | 93 | div.link { 94 | margin: 15px auto; 95 | text-align: center; 96 | } 97 | 98 | a { 99 | padding: 9px 20px; 100 | background-color: #1bc5bd; 101 | text-align: center; 102 | color: #fff; 103 | font-weight: 500; 104 | border-radius: 10px; 105 | 106 | 107 | } 108 | } 109 | 110 | .modal-footer { 111 | display: flex; 112 | flex-wrap: wrap; 113 | align-items: center; 114 | justify-content: flex-end; 115 | padding: .75rem; 116 | border-top: 1px solid #dee2e6; 117 | border-bottom-right-radius: calc(.3rem - 1px); 118 | border-bottom-left-radius: calc(.3rem - 1px); 119 | 120 | .close, .submit { 121 | margin: 0 3px; 122 | padding: 7px 14px; 123 | border-radius: 50px; 124 | font-size: 12px; 125 | font-weight: 500 !important; 126 | transition: all 0.2s !important; 127 | line-height: 1.6; 128 | cursor: pointer; 129 | transition: all 0.2s; 130 | 131 | &:hover { 132 | filter: brightness(90%) 133 | } 134 | } 135 | 136 | .close { 137 | border: 1px solid transparent; 138 | color: #333333c9; 139 | background: none; 140 | } 141 | 142 | .submit { 143 | background-color: #1bbc9b; 144 | border: 1px solid #1bbc9b; 145 | color: #fff !important; 146 | } 147 | } 148 | `; 149 | 150 | function ModalSuccess({ isOpen, toggleModal }) { 151 | 152 | 153 | return ( 154 | 155 | 160 |
    161 |
    Success
    162 | 165 |
    166 |
    167 |
    168 | 169 |
    170 |

    Success !

    171 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi eligendi numquam eveniet quidem nobis at quisquam blanditiis cum nihil nemo, alias assumenda soluta hic. Id mollitia error rem fugit dolor?

    172 |
    173 | 174 |
    175 |
    176 |     177 | ); 178 | 179 | } 180 | 181 | export default memo(ModalSuccess); 182 | -------------------------------------------------------------------------------- /src/pages/Sis/Dashboard/index.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | 3 | // Icons 4 | import { FiCalendar, FiMessageCircle, FiLogOut, FiUsers } from 'react-icons/fi'; 5 | 6 | import { CardDashboard, Card } from '~/components/Card'; 7 | import { Table } from '~/components/Table'; 8 | 9 | import { getToken } from '~/services/auth'; 10 | 11 | const config = { 12 | headers: { 13 | 'Authorization': `Bearer ${getToken}` 14 | } 15 | }; 16 | 17 | let array = [ 18 | { 19 | id: 1, 20 | name: 'Luis Otávio', 21 | }, 22 | { 23 | id: 2, 24 | name: 'Fernando Moreira', 25 | }, 26 | { 27 | id: 3, 28 | name: 'José Augusto', 29 | }, 30 | { 31 | id: 2, 32 | name: 'Jonathan Moreira', 33 | }, 34 | ] 35 | 36 | export default function Dashboard() { 37 | useEffect(() => { 38 | document.title = 'Dashboard' 39 | }, []); 40 | 41 | return ( 42 | <> 43 |
    44 |

    Olá, Bem vindo à Dashboard

    45 |
    46 |
    47 | 48 |
    49 |
    50 |
    51 |
    Card One
    52 |
    34
    53 |
    54 |
    55 | 56 |
    57 |
    58 |
    59 |     60 |
    61 |
    62 | 63 |
    64 |
    65 |
    66 |
    Card Two
    67 |
    0
    68 |
    69 |
    70 | 71 |
    72 |
    73 |
    74 |     75 |
    76 |
    77 | 78 |
    79 |
    80 |
    81 |
    Mensagens
    82 |
    0
    83 |
    84 |
    85 | 86 |
    87 |
    88 |
    89 |     90 |
    91 |
    92 | 93 |
    94 |
    95 |
    96 |
    Users
    97 |
    0
    98 |
    99 |
    100 | 101 |
    102 |
    103 |
    104 |     105 |
    106 |
    107 | 108 |
    109 |

    Tables

    110 |
    111 |
    112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | {array.map(item => ( 122 | 123 | 124 | 125 | 136 | 137 | ))} 138 | 139 |
    #NameActions
    { item.id }{ item.name } 126 | 129 | 132 | 135 |
    140 |
    141 |     142 |
    143 | 144 | ); 145 | } 146 | -------------------------------------------------------------------------------- /src/pages/Sis/Buttons/index.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | 3 | // Icons 4 | // import { FiCalendar, FiMessageCircle, FiLogOut, FiUsers } from 'react-icons/fi'; 5 | 6 | import { Card } from '~/components/Card'; 7 | import { Button } from '~/components/Button'; 8 | 9 | // This styled only show buttons in row format 10 | import styled from 'styled-components'; 11 | import { FiX, FiInfo, FiAlertTriangle, FiCheckCircle, FiCoffee } from 'react-icons/fi'; 12 | const Buttons = styled.div` 13 | display: flex; 14 | 15 | &.wrap { 16 | flex-wrap: wrap; 17 | } 18 | /* justify-content: space-around; */ 19 | 20 | button { 21 | margin: 5px; 22 | } 23 | 24 | `; 25 | 26 | export default function ButtonsPage() { 27 | useEffect(() => { 28 | document.title = 'Buttons' 29 | }, []); 30 | 31 | return ( 32 | <> 33 |
    34 |

    Tables

    35 |
    36 |
    37 | 38 |
    39 |

    State Buttons

    40 |
    41 |
    42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
    52 |     53 |
    54 |
    55 | 56 |
    57 |

    Circle Buttons

    58 |
    59 |
    60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 |
    70 |     71 |
    72 |
    73 | 74 |
    75 |

    Shadow Buttons

    76 |
    77 |
    78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 |
    88 |     89 |
    90 |
    91 | 92 |
    93 |

    Button with Icon

    94 |
    95 |
    96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 |
    104 |     105 |
    106 |
    107 | 108 |
    109 |

    Size Buttons

    110 |
    111 |
    112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 |
    128 |     129 |
    130 | 131 | ); 132 | } 133 | -------------------------------------------------------------------------------- /src/components/Form/index.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Form = styled.form` 4 | margin: 0 auto; 5 | /* background: #fff; */ 6 | /* box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; */ 7 | /* border-radius: 5px; */ 8 | padding: 0; 9 | 10 | .section-form { 11 | h2 { 12 | color: #7d40e7; 13 | } 14 | } 15 | 16 | .section-form:not(:first-of-type) { 17 | margin-top: 15px; 18 | } 19 | .input-block:not(:first-of-type) { 20 | margin-top: 15px; 21 | } 22 | 23 | .fieldset { 24 | font-size: 2em; 25 | text-align: left !important; 26 | color: #CF1A27; 27 | /* margin-bottom: 10px; */ 28 | font-weight: 600; 29 | } 30 | 31 | .input-block { 32 | width: 100%; 33 | display: flex; 34 | flex-direction: column; 35 | 36 | label { 37 | font-size: 13px; 38 | font-weight: 600; 39 | color: #626262; 40 | 41 | &.flex { 42 | display: flex; 43 | flex-direction: row; 44 | justify-content: space-between; 45 | } 46 | 47 | span { 48 | font-weight: 500; 49 | 50 | a { 51 | font-size: 12px !important; 52 | font-weight: 400; 53 | color: #4285f4 ; 54 | } 55 | } 56 | 57 | sup { 58 | color: red; 59 | } 60 | } 61 | 62 | 63 | input, textarea, select { 64 | font-family: 'Poppins', Helvetica, sans-serif; 65 | margin-top: 5px; 66 | 67 | min-height: 42px; 68 | font-size: 13px; 69 | font-weight: 400; 70 | color: rgb(102, 102, 102); 71 | border: 1px solid #dee2e6; 72 | padding: 5px 12px; 73 | border-radius: 6px; 74 | transition: all 0.2s; 75 | background: none; 76 | /* width: 100%; */ 77 | 78 | &:focus { 79 | border-color: #999; 80 | /* box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); */ 81 | } 82 | 83 | &.input-sm { 84 | min-height: 32px; 85 | font-size: 12px; 86 | } 87 | 88 | &.bottom-b { 89 | border: none; 90 | border-radius: 0; 91 | border-bottom: 1px solid #999; 92 | } 93 | 94 | &.is-invalid { 95 | border-color: red; 96 | } 97 | 98 | 99 | } 100 | 101 | 102 | p { 103 | margin-top: 3px; 104 | font-size: 12px; 105 | color: rgb(153, 153, 153); 106 | } 107 | 108 | 109 | .checkbox { 110 | display: flex; 111 | align-items: center; 112 | 113 | input { 114 | margin-top: 0; 115 | min-height: 0 !important; 116 | margin-right: 4px; 117 | } 118 | 119 | span { 120 | color: #777; 121 | } 122 | } 123 | 124 | .file-input { 125 | border: 1px solid #dee2e6; 126 | border-radius: 6px; 127 | overflow: hidden; 128 | display: inline-block; 129 | padding: 0px 0px 0px 12px; 130 | /* min-height: 42px; */ 131 | 132 | display: flex; 133 | align-items: center; 134 | /* justify-content: flex-end; */ 135 | cursor: pointer; 136 | 137 | input[type="file"] { 138 | display: none; 139 | } 140 | 141 | .text { 142 | flex: 0.9; 143 | font-size: 13px; 144 | font-weight: 400; 145 | color: #999; 146 | } 147 | 148 | .icon { 149 | flex: 0.1; 150 | width: 42px; 151 | height: 42px; 152 | background: #CF1A27; 153 | 154 | display: flex; 155 | align-items: center; 156 | justify-content: center; 157 | color: #fff; 158 | transition: all 0.2s; 159 | 160 | &:hover { 161 | filter: brightness(90%); 162 | } 163 | } 164 | 165 | } 166 | 167 | } 168 | 169 | .input-row { 170 | display: flex; 171 | flex-wrap: wrap; 172 | /* margin-top: 15px; */ 173 | 174 | .input-block { 175 | margin-top: 15px; 176 | } 177 | 178 | [class*="col-"] { 179 | margin-top: 0px; 180 | } 181 | 182 | @media screen and (max-width: 790px) { 183 | [class*="col-"] { 184 | padding: 0px !important; 185 | } 186 | } 187 | 188 | [class*="col-"]:first-of-type { 189 | padding-left: 0 !important; 190 | } 191 | 192 | [class*="col-"]:last-of-type { 193 | padding-right: 0 !important; 194 | } 195 | 196 | 197 | } 198 | 199 | button.btn-form { 200 | cursor: pointer; 201 | margin-top: 15px; 202 | width: 100%; 203 | font-size: 16px; 204 | background: #b20710; 205 | color: #fff; 206 | border: none; 207 | border-radius: 5px; 208 | padding: 13px 0; 209 | transition: all 0.2s linear; 210 | font-weight: 500; 211 | 212 | &.btn-sm { 213 | padding: 0 !important; 214 | height: 32px; 215 | font-size: 12px; 216 | } 217 | 218 | &.btn-circle { 219 | border-radius: 60px; 220 | } 221 | 222 | &:hover { 223 | filter: brightness(90%); 224 | } 225 | } 226 | 227 | .alert { 228 | padding: 15px 10px; 229 | /* border: 2px solid #7e1bf0; */ 230 | /* color: #7e1bf0; */ 231 | /* color: #fff; */ 232 | border-radius: 5px; 233 | transition: all 0.2s linear; 234 | 235 | &.alert-success { 236 | color: #fff; 237 | background: rgb(4, 211, 97); 238 | } 239 | 240 | &.alert-danger { 241 | color: #fff; 242 | background: darkred; 243 | } 244 | } 245 | 246 | `; 247 | -------------------------------------------------------------------------------- /src/pages/Sis/Modals/modalForm.js: -------------------------------------------------------------------------------- 1 | import React, { useState, memo, useRef } from 'react'; 2 | import Modal from 'styled-react-modal'; 3 | 4 | import { Form } from '~/components/Form'; 5 | import Alert from '~/components/Alert'; 6 | import { FiCheckCircle, FiX } from 'react-icons/fi'; 7 | 8 | 9 | const StyledModal = Modal.styled` 10 | 11 | max-width: 600px; 12 | width: 98%; 13 | height: auto; 14 | 15 | background-color: white; 16 | position: fixed; 17 | top: 0; 18 | margin: 1.75rem auto; 19 | border-radius: .3rem; 20 | 21 | @keyframes modalFade { 22 | from {transform: translateY(-50%);opacity: 0;} 23 | to {transform: translateY(0);opacity: 1;} 24 | } 25 | 26 | & { 27 | animation-name: modalFade; 28 | animation-duration: .3s; 29 | } 30 | 31 | .modal-header { 32 | display: -webkit-box; 33 | display: flex; 34 | -webkit-box-align: start; 35 | align-items: flex-start; 36 | -webkit-box-pack: justify; 37 | justify-content: space-between; 38 | padding: 1rem; 39 | border-bottom: 1px solid #dee2e6; 40 | border-top-left-radius: calc(.3rem - 1px); 41 | border-top-right-radius: calc(.3rem - 1px); 42 | color: #333; 43 | 44 | .modal-title { 45 | margin-bottom: 0; 46 | line-height: 1.6; 47 | font-size: 1.25rem; 48 | font-weight: normal; 49 | 50 | } 51 | 52 | button.close { 53 | padding: 0; 54 | background-color: transparent; 55 | border: 0; 56 | -webkit-appearance: none; 57 | -moz-appearance: none; 58 | appearance: none; 59 | align-self: center; 60 | cursor: pointer; 61 | font-size: 22px; 62 | } 63 | } 64 | 65 | .modal-body { 66 | // position: relative; 67 | // flex: 1 1 auto; 68 | padding: 1rem 1rem; 69 | max-height: 430px; 70 | overflow-y: auto; 71 | } 72 | 73 | .modal-footer { 74 | display: flex; 75 | flex-wrap: wrap; 76 | align-items: center; 77 | justify-content: flex-end; 78 | padding: .75rem; 79 | border-top: 1px solid #dee2e6; 80 | border-bottom-right-radius: calc(.3rem - 1px); 81 | border-bottom-left-radius: calc(.3rem - 1px); 82 | 83 | .close, .submit { 84 | margin: 0 3px; 85 | padding: 7px 14px; 86 | border-radius: 50px; 87 | font-size: 12px; 88 | font-weight: 500 !important; 89 | transition: all 0.2s !important; 90 | line-height: 1.6; 91 | cursor: pointer; 92 | transition: all 0.2s; 93 | 94 | &:hover { 95 | filter: brightness(90%) 96 | } 97 | } 98 | 99 | .close { 100 | border: 1px solid transparent; 101 | color: #333333c9; 102 | background: none; 103 | } 104 | 105 | .submit { 106 | background-color: #1bbc9b; 107 | border: 1px solid #1bbc9b; 108 | color: #fff !important; 109 | } 110 | } 111 | `; 112 | 113 | function ModalExperience({ isOpen, toggleModal, submit }) { 114 | const [ error, setError ] = useState(false); 115 | const reference = useRef(null); 116 | 117 | const [ data, setData ] = useState({ 118 | office: '', 119 | org: '', 120 | location: '', 121 | description: '', 122 | }); 123 | 124 | function handleInputChange(e) { 125 | const { value, name } = e.target; 126 | 127 | setData({ 128 | ...data, 129 | [name]: value 130 | }); 131 | } 132 | 133 | function handleSubmit(e) { 134 | e.preventDefault(); 135 | // alert(JSON.stringify(data)) 136 | 137 | submit() 138 | } 139 | 140 | return ( 141 | 142 | 147 |
    148 |
    Modal Form
    149 | 152 |
    153 |
    154 |
    155 | {error === 1 && } 156 | {error === 2 && } 157 | {error === 3 && } 158 |
    159 | 160 | 167 |
    168 |
    169 | 170 | 176 |
    177 | 178 |
    179 | 180 | 186 |
    187 |
    188 | 189 | 194 |
    195 | 196 | 197 |
    198 |
    199 | 202 | 205 |
    206 |
    207 |     208 | ); 209 | 210 | } 211 | 212 | export default memo(ModalExperience); 213 | -------------------------------------------------------------------------------- /src/pages/Sis/Forms/index.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | 3 | // Icons 4 | import { FiFile } from 'react-icons/fi'; 5 | 6 | import { Card } from '~/components/Card'; 7 | import { Button } from '~/components/Button'; 8 | import { Form } from '~/components/Form'; 9 | 10 | // This styled only show buttons in row format 11 | import styled from 'styled-components'; 12 | const Buttons = styled.div` 13 | display: flex; 14 | 15 | &.wrap { 16 | flex-wrap: wrap; 17 | } 18 | /* justify-content: space-around; */ 19 | 20 | button { 21 | margin: 5px; 22 | } 23 | 24 | `; 25 | 26 | export default function FormsPage() { 27 | const [ selectedCV, setSelectedCV ] = useState(); 28 | 29 | useEffect(() => { 30 | document.title = 'Forms' 31 | }, []); 32 | 33 | return ( 34 | <> 35 |
    36 |

    Forms

    37 |
    38 |
    39 | 40 |
    41 |

    Simple Form

    42 |
    43 |
    44 |
    45 |
    46 | 47 | 48 |
    49 |
    50 | 51 | 52 |
    53 |
    54 | 55 | 56 |
    57 |
    58 |
    59 |
    60 | 61 |
    62 |     63 |
    64 |
    65 | 66 |
    67 |

    Form Inline

    68 |
    69 |
    70 |
    71 |
    72 |
    73 |
    74 | 75 | 76 |
    77 |
    78 |
    79 |
    80 | 81 | 82 |
    83 |
    84 |
    85 |
    86 |
    87 |
    88 | 89 | 90 |
    91 |
    92 |
    93 |
    94 | 95 | 96 |
    97 |
    98 |
    99 |
    100 |
    101 |
    102 | 103 |
    104 |     105 |
    106 |
    107 | 108 |
    109 |

    All components Form

    110 |
    111 |
    112 |
    113 |
    114 | 115 | 116 |
    117 |
    118 | 119 | 120 |
    121 |
    122 | 123 | 130 |
    131 |
    132 | 133 | 134 |
    135 |
    136 |
    137 | { setIsHere(!isHere) }} 140 | /> 141 | I not working 142 |
    143 |
    144 |
    145 | 146 | 147 |
    148 |
    149 |
    150 |
    151 | 152 |
    153 |     154 |
    155 |
    156 | 157 |
    158 |

    File Input

    159 |
    160 |
    161 |
    162 |
    163 | 164 | 178 |
    179 |
    180 |
    181 |
    182 | 183 |
    184 |     185 |
    186 | 187 | ); 188 | } 189 | --------------------------------------------------------------------------------