├── src ├── react-app-env.d.ts ├── core │ ├── utils │ │ ├── emojis.ts │ │ ├── formatCurrency.ts │ │ ├── months.ts │ │ └── formatDate.ts │ ├── components │ │ ├── Input │ │ │ ├── styles.ts │ │ │ └── index.tsx │ │ ├── Content │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ ├── SelectInput │ │ │ ├── styles.ts │ │ │ └── index.tsx │ │ ├── DataNotFound │ │ │ ├── styles.ts │ │ │ └── index.tsx │ │ ├── Button │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ ├── Layout │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ ├── Toggle │ │ │ ├── styles.ts │ │ │ └── index.tsx │ │ ├── MainHeader │ │ │ ├── styles.ts │ │ │ └── index.tsx │ │ ├── ContentHeader │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ ├── MessageBox │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ ├── WalletCard │ │ │ ├── styles.ts │ │ │ └── index.tsx │ │ ├── HistoryBox │ │ │ ├── styles.ts │ │ │ └── index.tsx │ │ ├── PieGraph │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ ├── BarChartBox │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ ├── MovimentHistoryCard │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ └── Aside │ │ │ ├── styles.ts │ │ │ └── index.tsx │ ├── styles │ │ ├── themes │ │ │ ├── light.ts │ │ │ └── dark.ts │ │ ├── GlobalStyles.ts │ │ └── styled.d.ts │ ├── assets │ │ ├── arrow-down.svg │ │ ├── arrow-up.svg │ │ ├── dollar.svg │ │ ├── sweating.svg │ │ ├── logo.svg │ │ ├── thinking.svg │ │ ├── sad.svg │ │ └── happy.svg │ └── hooks │ │ ├── auth.tsx │ │ └── theme.tsx ├── routes │ ├── auth.routes.tsx │ ├── index.tsx │ └── app.routes.tsx ├── pages │ ├── Dashboard │ │ ├── styles.ts │ │ └── index.tsx │ ├── Register │ │ ├── styles.ts │ │ └── index.tsx │ ├── SignIn │ │ ├── styles.ts │ │ └── index.tsx │ ├── Dependents │ │ ├── styles.ts │ │ └── index.tsx │ ├── List │ │ ├── styles.ts │ │ └── index.tsx │ ├── Metas │ │ ├── styles.ts │ │ └── index.tsx │ └── Transactions │ │ ├── styles.ts │ │ └── index.tsx ├── index.tsx ├── App.tsx └── repositories │ ├── gains.ts │ └── expenses.ts ├── .gitignore ├── public ├── index.html └── assets │ └── logo.svg ├── tsconfig.json ├── package.json └── README.md /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/core/utils/emojis.ts: -------------------------------------------------------------------------------- 1 | const emojis = ['🤑', '🤩', '😍', '😎', '😄', '😃']; 2 | 3 | export default emojis; -------------------------------------------------------------------------------- /src/core/components/Input/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.input` 4 | width: 100%; 5 | 6 | margin: 7px 0; 7 | padding: 10px; 8 | 9 | border-radius: 5px; 10 | `; -------------------------------------------------------------------------------- /src/core/components/Content/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Container } from './styles'; 3 | 4 | const Content: React.FC = ({children}) => ( 5 | 6 | {children} 7 | 8 | ) 9 | 10 | export default Content; -------------------------------------------------------------------------------- /src/core/components/SelectInput/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | 5 | 6 | > select { 7 | padding: 7px 10px; 8 | border-radius: 5px; 9 | margin-left: 10px; 10 | } 11 | `; -------------------------------------------------------------------------------- /src/core/utils/formatCurrency.ts: -------------------------------------------------------------------------------- 1 | const formatCurrency = (current: number): string => { 2 | return current.toLocaleString( 3 | 'pt-br', 4 | { 5 | style: 'currency', 6 | currency: 'BRL' 7 | }); 8 | } 9 | 10 | export default formatCurrency; -------------------------------------------------------------------------------- /src/core/utils/months.ts: -------------------------------------------------------------------------------- 1 | const months = [ 2 | 'Janeiro', 3 | 'Fevereiro', 4 | 'Março', 5 | 'Abril', 6 | 'Maio', 7 | 'Junho', 8 | 'Julho', 9 | 'Agosto', 10 | 'Setembro', 11 | 'Outubro', 12 | 'Novembro', 13 | 'Dezembro' 14 | ]; 15 | 16 | export default months -------------------------------------------------------------------------------- /src/core/components/DataNotFound/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export const Container = styled.div` 4 | p { 5 | font-size: 24px; 6 | text-align: center; 7 | 8 | strong { 9 | font-size: 32px; 10 | color: ${props => props.theme.colors.info}; 11 | } 12 | } 13 | `; -------------------------------------------------------------------------------- /src/core/components/Input/index.tsx: -------------------------------------------------------------------------------- 1 | import React, {InputHTMLAttributes} from 'react'; 2 | import { Container } from './styles'; 3 | 4 | type IInputProps = InputHTMLAttributes; 5 | 6 | const Input: React.FC = ({...rest}) => ( 7 | 8 | ) 9 | 10 | export default Input; -------------------------------------------------------------------------------- /src/core/components/Button/index.tsx: -------------------------------------------------------------------------------- 1 | import React, {ButtonHTMLAttributes} from 'react'; 2 | import { Container } from './styles'; 3 | 4 | type IButtonProps = ButtonHTMLAttributes; 5 | 6 | const Button: React.FC = ({children,...rest}) => ( 7 | 8 | {children} 9 | 10 | ) 11 | 12 | export default Button; -------------------------------------------------------------------------------- /src/core/styles/themes/light.ts: -------------------------------------------------------------------------------- 1 | export const light = { 2 | title: 'light', 3 | 4 | colors: { 5 | primary: '#DCDCDC', 6 | secondary: '#FFFFFF', 7 | tertiary: '#F5F5F5', 8 | 9 | white: '#000', 10 | black:'#fff', 11 | gray: '#BFBFBF', 12 | 13 | success: '#03BB85', 14 | info: '#3B5998', 15 | warning: '#FF6961', 16 | }, 17 | }; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/core/styles/themes/dark.ts: -------------------------------------------------------------------------------- 1 | export const dark = { 2 | title: 'dark', 3 | 4 | colors: { 5 | primary: '#1B1F38', 6 | secondary: '#252A48', 7 | tertiary: '#313862', 8 | 9 | white: '#FFF', 10 | black:'#000', 11 | gray: '#BFBFBF', 12 | 13 | success: '#4E41F0', 14 | info: '#F7931B', 15 | warning: '#E44C4E', 16 | }, 17 | }; 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/routes/auth.routes.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Switch, Route } from 'react-router-dom'; 3 | import Register from '../pages/Register'; 4 | 5 | import SignIn from '../pages/SignIn'; 6 | 7 | const AuthRoutes: React.FC = () => ( 8 | 9 | 10 | 11 | 12 | ); 13 | 14 | export default AuthRoutes; -------------------------------------------------------------------------------- /src/core/components/Layout/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Aside from '../Aside'; 3 | import Content from '../Content'; 4 | import MainHeader from '../MainHeader'; 5 | import { Grid } from './styles'; 6 | 7 | const Layout: React.FC = ({children}) => ( 8 | 9 | 10 |