in

A Personal Finance Application Built With React


Após alguns meses trabalhando em projetos mais simples, você foi designado pelo seu Tech Lead para desenvolver uma aplicação que será apresentada a um cliente muito importante.

Para acessar o repositório da API que será consumida no front, acesse o seguinte link.

Para o seu desenvolvimento foi liberado layout que você pode encontrar no seguinte link.

Para acessar o pdf contendo as informações de id e class, acesse o seguinte link.

O sistema trata-se de uma aplicação para controles de finanças pessoais, e as funcionalidades são:

http://localhost:3000 .

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

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 deve ser o de saída, caso o usuário queira adicionar um valor de entrada ele precisará clicar no botão Entrada.

*Todos os campos são obrigatórios!

Após realizar as validações, após o usuário clicar no botão confirmar, uma nova transação deve ser inserida e a tabela de listagem deve ser atualizada.

É importante lembrar que quando adicionarmos uma nova transação, a área de resumo deve refletir o que a tabela está exibindo, refazendo assim todos os cálculos após a inserção de um novo registro.

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”, deverão ser preenchidas automaticamente, assim como a imagem abaixo:

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

Após validar os campos e o usuário clicar em confirmar, a transação deverá ser atualizada na API usando requisição do tipo patch ou put e a transação deverá ser atualizada na tabela de listagem de transações.

Esse ícone =>

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

Cada linha da tabela representa uma transação. Portanto cada botão representa a ação para um registro.

Importante: Somente a coluna em ordenação deve conter os ícones, resumidamente quando clicamos em uma coluna para ordenar, os outros ícones das demais colunas devem desaparecer.

Os filtros servem para dar granularidade aos dados, ou seja, para haver a possibilidade de exibir as transações conforme selecionamos requisitos para tal. Por exemplo, se disseremos que deve-se exibir apenas as transações realizadas aos domingos, basicamente deveríamos selecionar o domingo no filtro de Dia da semana, veja o exemplo abaixo:

Os filtros são cumulativos, ou seja, se você seleciona para filtrar segunda em dia da semana, depois seleciona pix em categoria, informa valor mínimo 10 e valor máximo 300, todos os filtros devem ser levados em consideração. Resumidamente não devemos exibir na tabela transações com: Valores menores que 10, valores maiores que 300, realizadas em um dia diferente de segunda e nem outra categoria que não seja pix.

O funcionamento dos filtros segue a seguinte ordem:

  1. Seleciona-se os filtros em dia da semana ou categoria
  2. Informa-se valores mínimos e/ou valores máximos
  3. Após selecionar os filtros desejados, clica-se no botão aplicar filtros.

Importante: Não é obrigatório selecionar todos tipos de filtros (Dia da semana + Categoria + Valores Mínimos + Valores Máximo), pois todos eles são indepententes.

Para limpar os filtros atuais, o usuário deverá clicar no botão limpar filtros

Importante:

  1. Ao clicar em aplicar filtros sem nenhum filtro selecionado, o sistema deve exibir todas as transações disponíveis cadastradas.
  2. Ao clicar em limpar filtros, o sistema deve exibir todas as transações disponíveis cadastradas.

Veja na imagem abaixo os botões:

Aulas úteis:

LEMBRE-SE: é melhor feito do que perfeito!!!

View Github


Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

TypeScript SETUP by SilvenLEAF – DEV Community

LowEndSetup: Initializing and Reinitializing Your VPS