Skip to content

FWalterDias/Sistema-Financeiro

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Sistema Financiero

Cadastro de um novo usuário:

Para cadastrar um novo usuário você terá que preencher o formulário na página de sign-up.

*É importante garantir que todos os campos estão preenchidos, além de que as senha e confirmação de senha são iguais.


Login de usuário:

Após cadastrado no sistema, você poderá fazer o login


Página principal (main):

Nessa página você verá todas as informações:

  1. Tabela com a listagem de transações.
  2. Área de resumo, que traz as informações de entradas, saídas e saldos.
  3. Botão para adicionar uma nova transação.
  4. Botão para abrir área de filtros.

Veja na imagem abaixo:


Cadastro de uma nova transação:

Para cadastrar uma nova transação você deverá clicar no botão Adicionar Registro, que ficará logo abaixo da área de resumo.

Ao clicar no referido botão, um modal com a opção de adicionar informações de uma transação deve ser exibido:

  1. Nesse modal todas as informações devem ser preenchidas, lembrando que você pode adicionar uma entrada ou saída de dinheiro, por padrão o valor será o de saída, caso você queira adicionar um valor de entrada ele precisará clicar no botão Entrada.

*Todos os campos são obrigatórios!

Após você no botão confirmar, uma nova transação deve ser inserida e a tabela de listagem será atualizada.


Editar uma transação:

Para editar uma transaçãovocê deverá clicar no ícone do lápis, que se encontrará na tabela de listagem de transações:

Esse ícone =>

Ao clicar no ícone de editar uma transação, o modal (que foi utilizado para adicionar uma nova transação) deverá ser aberto e as informações da transação "clicada", serão preenchidas automaticamente, assim como a imagem abaixo:

*Novamente, todos os campos são obrigatórios!


Excluir uma transação:

Para excluir uma transação você deverá clicar no ícone da lixeira, que se encontrará na tabela de listagem de transações:

Esse ícone =>

Ao clicar nesse ícone, um "popup" irá aparecer para que você confirme ou não a exclusão, fazendo com que não hajam exclusões por engano, veja abaixo como aparece o "popup":


Resumo das transações:

O resumo das transações devem ser exibidos numa "box", onde teremos apenas 3 informações:

  • Entradas
  • Saídas
  • Saldo

Veja na imagem abaixo, como é o resumo;


Editar perfil de usuário:

No cabeçalho da aplicação existe um ícone:

Ao clicar nesse ícone, deverá ser exibido um modal para edição do usuário logado.

  1. O modal abrirá com os dados do usuário já carregados nele (menos senha e confirmação de senha)
  2. Após você preencher os campos ele deverá clicar em confirmar, nesse momento você deve validar se os campos estão preenchidos.
  3. Após o perfil ter sido atualizado o modal deverá ser fechado.
  4. Ao abrir novamente o modal, os dados do usuário devem estar atualizados.

Veja na imagem o modal já preenchido:


tags: front-end React CSS API