Nesta tela podemos ver que despesa/benefício são adicionados ao usuário paciente, ambas essas listas são carregadas via fetch API, já previamente adicionadas em uma tela de adição. Neste `modal` já podemos verificar uma adição de familiar/entre outros, com botão de fechar caso desista. Nesta tela, todas as adições podem ser feitas em conjunto, muitas despesas, muitos benefícios ou muitos familiares, para então serem adicionados ao Banco de dados.

Nesta tela de controle de profissionais para a diretoria, pode-se criar cargos e projetos dos profissionais e alteração do projeto. A exibição das listas é carregada via fetch API, atualizada instantânea. Na primeira guia é o cadastro com uma senha automatica da instituição, e na guia funcionários, posso filtrar por projeto ou cargo, adicionei um botão de confirmação para a ação de `desativar funcionário` e `resetar senha`.

No primeiro login, o profissional é solicitado a redefinir sua senha, que é armazenada com criptografia segura utilizando password_hash. Dependendo do cargo ele terá acesso a opções extra do menu. Todo cargo tem seu campo sigiloso sobre o usuário/paciente. Em caso de esquecimento de senha, a diretoria pode redefinir pra senha inicial proposta da instituição.

A primeira tela, provavelmente a mais utilizada pela instituição, permite que o profissional cadastre um novo usuário, descreva sua situação, defina o tipo de atendimento e salve no sistema. é gerado um documento Word contendo as informações do atendimento. Na tela de edição, é possível alterar diversos campos relacionados ao usuário, como dados de saúde e moradia. Esses campos não exigem exibição completa — apenas um pequeno exemplo, como mostrado na primeira imagem, é suficiente para demonstrar a complexidade.

A busca é feita usando AJAX, e fiz conforme o usuário digita as respostas mudam pela requisição. Usei um 'where like' simples para trazer mais resultados possiveis que chegassem perto da pesquisa digitada.

A tela de perfil exibe informações do usuário, trazendo todas por shortcode, optei por não usar Modelo de página. Também trazendo a foto do perfil do usuário e verificando se o usuário existe no sistema em caso de alteração de URL.

A tela de Gerenciamento de Usuários, na entrada já exibe os 10 últimos cadastros de usuários e, ainda que pouco rebuscada, tem todas as ações principais citadas acima: De controle de usuários, alteração de qualquer dado, com verificação de campos nulos. Além disso, permite pesquisar por ID, CPF, RG para alteração de um usuário específico.

Interface de atualização de clientes integrada à API do sistema de pagamentos, permitindo a edição de dados cadastrais e garantindo a sincronização com a plataforma.

Com um um livro de destaque que se atualiza a cada 3 dias, uma tela de login, últimos livros adicionados e mais lidos, esse é a página inicial. Todos os gêneros, categorias são cadastrados no banco de dados podendo ter fácil adição de novos.

Este é a tela de busca de livros, onde trás os livros. Eu fiz uma query onde me traria resultado com o nome do autor, e do livro. Também coloquei filtros de data de lançamento e e ordem alfabética.

A página do livro, que era responsável por mostrar comentários dos livros, e a opção de download. Com todas as informações do livro, salvas e resgatadas do banco de dados.

Esta era a tela de Driver do usuário, onde ele salvava seus ebooks pessoais, podendo alternar entre privado e publico. Caso publico poderia ser baixado por outras pessoas.

Aqui eu fiz uma tela de login e cadastramento, usei crypto pra criptografar a senha e usei de recursos JS DOm pra transladar entre login e cadastro.

Aqui é a listagem de contatos salvos, com a opção de deletar e ver mais(onde possivelmente poderá ser editado). Como é a listagem, eu também fiz questão de fazer sempre que o usuário digitar alguma letra na barra de pesquisa já troca para essa tela de listagem.

Nesta terceira tela, eu criei o cadastramento de contatos, uma pequena verificação para todas informações obrigatórias, e opção para mais de uma rede social e número de contato.

Na tela de ver mais, onde eu posso editar as informações daquele contato específico e salva-la no banco de dados.

Todo o front feito por react, eu me preocupei sempre em seguir as boas práticas, e também novos desafios pra mim, coisas que eu imaginaria ser mais complicado no javascript puro, logo eu quis fazer um menu que alternasse a exibição do componente, como tudo é componente eu pensei ser mais fácil manipular com React do que Javascript puro.

Na Listagem de contatos salvos, não teve grande segredo, nada de diferente. Aqui foi onde eu pude mais treinar styled-components

Me dei o desafio de criar um ContextMenu(menu clicado com o botão direito) em cada contato, pra treinar esse React, o conclui com sucesso. Ao clicar em cada contato aparece Deletar ou Editar.

Ao clicar em Editar, me dei o outro desafio, criar um modal e imprimir o mesmo formulário do cadastramento. Também conclui com sucesso, foi aqui que precisei usar bastante as props do react, apesar de ter feito todos os meus próprios desafios, e ter ficado completo, me dei uma pausa sobre React, precisaria aprender mais sobre boas práticas, não usar de recursos de má programação.(Digo isto porque criar um contextmenu de uma lista, que passa o id do contato, para um outro modal que, foi bem trabalhoso pra um iniciante em react haha)