Skip to content

Commit

Permalink
implementação da página finanças-Felipe Brandim
Browse files Browse the repository at this point in the history
  • Loading branch information
@Felipe-Brandim
Felipe-Brandim committed Jun 3, 2024
1 parent 8912f26 commit 378ab76
Show file tree
Hide file tree
Showing 4 changed files with 293 additions and 57 deletions.
4 changes: 2 additions & 2 deletions view/src/components/SideBar/SideBar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@
}

.embaixo{
margin-top: 310px;
margin-top: 10px;
display: flex;
flex-direction: column;

}

.edraLogo{
margin-left: 100%;
padding: 0px 1000px;
/*padding: 0px 1000px;*/
}
2 changes: 1 addition & 1 deletion view/src/components/SideBar/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ function SideBar(){
</nav>

<nav className="embaixo">
<Link to='/login'>
<Link to='/'>
<img src="logout.svg" alt="logout" class="sidebar-image img-logout"/>
</Link>

Expand Down
195 changes: 152 additions & 43 deletions view/src/pages/Finance/Finance.css
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,152 @@
.container{
width:100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: space-around;
}

.container img {
height:500px
}

.container p {
font-size: 18px;
}

.container span{
color: purple;
}

.btn {
width: 250px;
height: 100px;
font-size: 25px;
font-weight: bold;
border: 0;
border-radius: 18px;
color: #fdfdfd;
background-color: #414191;
cursor: pointer;
}

.btn:hover{
text-decoration: underline;
}

#paginaFinance{
background-color: #414191;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
body {
font-family: 'Poppins', monospace;
margin: 0;
padding: 0;
box-sizing: border-box;
}

#paginaFinance {
background-color: #fdfdfd;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #070606;
padding: 20px;
}

.financeTitulo {
margin-bottom: 2rem;
text-align: center;
font-size: 2.5rem;
color: #070606;
}

.img-text-container2 {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 2rem;
}

.caixa {
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: 1rem;
margin: 0 10px;
color: #070606; /* Altere a cor do texto dentro das caixas para preto */
}

.caixa label {
margin-bottom: 5px;
}

.caixa select {
width: 150px;
padding: 5px;
border-radius: 5px;
border: none;
font-size: 1rem;
}

.financeCorpo {
width: 80%;
background-color: #d2d3e4fa;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.336);
margin-bottom: 2rem;
color: #070606;
}

.financeCorpo h2, .financeCorpo h3 {
margin: 0 0 1rem 0;
}

.financeCorpo ul {
list-style: none;
padding: 0;
}

.financeCorpo li {
margin-bottom: 0.5rem;
}

.botao-container {
display: flex;
justify-content: center;
margin-top: 20px;
}

.botao {
font-size: 1.25rem;
width: 200px;
padding: 10px;
font-weight: bold;
border: none;
border-radius: 18px;
color: #fdfdfd;
background-color: #3a8ebb;
cursor: pointer;
transition: background-color 0.3s;
}

.botao:hover {
background-color: #2a6b9b;
text-decoration: underline;
}

.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #d2d3e4fa;
padding: 20px;
width: 550px;
border-radius: 8%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.336);
z-index: 999;
display: flex;
flex-direction: column;
}

.popup-content {
display: flex;
flex-direction: column;
color: black;
}

.close {
font-size: 1.5rem;
cursor: pointer;
align-self: flex-end;
}

.caixa input[type="text"], .caixa input[type="number"], .caixa select {
width: calc(100% - 10px);
background-color: #fdfdfd;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 1rem;
margin-bottom: 10px;
color: black;
}

.popup form {
display: flex;
flex-direction: column;
}

.popup .botao {
margin-top: 10px;
align-self: center;
}

.popup label {
color: black; /* Ensure labels inside popup are black */
}
149 changes: 138 additions & 11 deletions view/src/pages/Finance/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,143 @@
import React, {useState} from "react";
import React, { useState, useEffect } from "react";
import './Finance.css';
import SideBar from "../../components/SideBar"
import SideBar from "../../components/SideBar";

function Finance(){

return(
<>
function Finance() {
const [showPopup, setShowPopup] = useState(false);
const [ano, setAno] = useState('2024');
const [mes, setMes] = useState('Junho');
const [acao, setAcao] = useState('');
const [valor, setValor] = useState('');
const [tipo, setTipo] = useState('Entrada');
const [acoes, setAcoes] = useState([]);
const [saldo, setSaldo] = useState(0);

<SideBar/>

</>
)
useEffect(() => {
calcularSaldo();
}, [acoes]);

const handleAnoChange = (e) => {
setAno(e.target.value);
};

const handleMesChange = (e) => {
setMes(e.target.value);
};

const handleAcaoChange = (e) => {
setAcao(e.target.value);
};

const handleValorChange = (e) => {
setValor(e.target.value);
};

const handleTipoChange = (e) => {
setTipo(e.target.value);
};

const handleImageClick = () => {
setShowPopup(true);
};

const handleClosePopup = () => {
setShowPopup(false);
};

const handleSubmit = (e) => {
e.preventDefault();
const novaAcao = {
ano,
mes,
acao,
valor: parseFloat(valor),
tipo
};
setAcoes([...acoes, novaAcao]);
setShowPopup(false);
setAcao('');
setValor('');
};

const calcularSaldo = () => {
let total = 0;
acoes.forEach(acao => {
if (acao.tipo === 'Entrada') {
total += acao.valor;
} else if (acao.tipo === 'Saída') {
total -= acao.valor;
}
});
setSaldo(total);
};

return (
<>
<SideBar />
<div id="paginaFinance">
<div className='financeTitulo'>
<h1>Financeiro</h1>
</div>
<div className='img-text-container2'>
<div className='caixa'>
<label htmlFor="ano">Ano:</label>
<select id="ano" value={ano} onChange={handleAnoChange}>
{Array.from({ length: 11 }, (_, i) => 2020 + i).map(year => (
<option key={year} value={year}>{year}</option>
))}
</select>
</div>
<div className='caixa'>
<label htmlFor="mes">Mês:</label>
<select id="mes" value={mes} onChange={handleMesChange}>
{['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'].map(month => (
<option key={month} value={month}>{month}</option>
))}
</select>
</div>
</div>
<div className='financeCorpo'>
<h2>{mes} - Ações:</h2>
<ul>
{acoes.filter(acao => acao.mes === mes && acao.ano === ano).map((acao, index) => (
<li key={index}>
{acao.tipo}: {acao.acao} - R$ {acao.valor.toFixed(2)}
</li>
))}
</ul>
<h3>Saldo Atual: R$ {saldo.toFixed(2)}</h3>
<div className="botao-container">
<button className='botao' onClick={handleImageClick}>Adicionar Entrada/Saída</button>
</div>
</div>
{showPopup && (
<div className="popup">
<div className="popup-content">
<span className="close" onClick={handleClosePopup}>&times;</span>
<form onSubmit={handleSubmit}>
<div className='caixa'>
<label htmlFor="acao">Ação:</label>
<input type="text" id="acao" value={acao} onChange={handleAcaoChange} required />
</div>
<div className='caixa'>
<label htmlFor="valor">Valor:</label>
<input type="number" step="0.01" id="valor" value={valor} onChange={handleValorChange} required />
</div>
<div className='caixa'>
<label htmlFor="tipo">Tipo:</label>
<select id="tipo" value={tipo} onChange={handleTipoChange}>
<option value="Entrada">Entrada</option>
<option value="Saída">Saída</option>
</select>
</div>
<button type="submit" className='botao'>Salvar</button>
</form>
</div>
</div>
)}
</div>
</>
);
}

export default Finance ;
export default Finance;

0 comments on commit 378ab76

Please sign in to comment.