Adição do botão de exclusão e cor interativa do texto de entrada e saída

view/src/pages/Finance/Finance.css

@@ -148,3 +148,29 @@ body {
 .popup label {
   color: black; /* Ensure labels inside popup are black */
 }
+
+
+.financeCorpo li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+
+.financeCorpo li img {
+  cursor: pointer;
+    height: 20px;
+    width: 20px;
+    margin-right: 25px;
+    margin-top: 15px;
+    margin-left: 150px;
+}
+
+
+.entrada {
+  color: green;
+}
+
+.saida {
+  color: red;
+}

view/src/pages/Finance/index.jsx

@@ -71,6 +71,22 @@ function Finance() {
     setSaldo(total);
   };
 
+  const handleDelete = (index) => {
+    const novaListaAcoes = [...acoes];
+    const acaoRemovida = novaListaAcoes.splice(index, 1)[0];
+
+    setAcoes(novaListaAcoes);
+
+    // Atualizar o saldo após a remoção do registro
+    let novoSaldo = saldo;
+    if (acaoRemovida.tipo === 'Entrada') {
+      novoSaldo -= acaoRemovida.valor;
+    } else if (acaoRemovida.tipo === 'Saída') {
+      novoSaldo += acaoRemovida.valor;
+    }
+    setSaldo(novoSaldo);
+  };
+
   return (
     <>
       <SideBar />
@@ -100,8 +116,9 @@ function Finance() {
           <h2>{mes} - Ações:</h2>
           <ul>
             {acoes.filter(acao => acao.mes === mes && acao.ano === ano).map((acao, index) => (
-              <li key={index}>
+              <li key={index} className={acao.tipo === 'Entrada' ? 'entrada' : 'saida'}>
                 {acao.tipo}: {acao.acao} - R$ {acao.valor.toFixed(2)}
+                <img src="trash.svg" alt="Delete" onClick={() => handleDelete(index)} />
               </li>
             ))}
           </ul>
@@ -141,3 +158,4 @@ function Finance() {
 }
 
 export default Finance;
+