Feature - Add User Info Page

[iz-120]

Closes: #8

This pull request introduces the user area pages with sidebar navigation, allowing users to access and manage their profile data and knowledge bases. The knowledge bases section wasn't developed, only the structure to develop it later was implemented.

Frontend Improvements:

user-info.tsx

• Created the user profile page with editable fields (name, email, phone, document type, document, birth date) using react-hook-form and zod validation. Each field can be edited individually by clicking a pencil icon, and changes can be canceled or saved. The sidebar allows navigation between "Dados de cadastro" and "Minhas bases".

user-bases.tsx

• Created the "Minhas bases" page, accessible via the sidebar. The sidebar remains consistent, and navigation between profile and bases is handled by route changes. The page includes a placeholder for listing the user's knowledge bases.

sidebar.tsx

• Implemented a reusable sidebar component with selectable items and a logout button. The sidebar highlights the selected item and triggers navigation or state changes as needed.

Styling and Utilities:

• Sidebar uses fixed positioning and consistent styling for seamless integration across user area pages.
• Maintains visual consistency with the rest of the application, following the design system.

[enzosakamoto]

Nessa página, não deve ter query param na URL, porque depois do login vamos armazenar o access token no local storage do usuário. Com esse token, é assim que vamos identificar quem é o user e pegar as infos dele através do back, passando somente o token. Quando ele acessar essa página e outras, vai ser feita uma requisição para pegar os dados do usuário, então pode deixar as infos de um user qualquer só para simular que estamos logados.

Outra coisa: acho que ficaria melhor ter duas visões:

1. Essa sendo a que ele vê quando acessa a página, com as informações do perfil dele (sem poder editar).
2. Essa sendo uma visão com um formulário editável. Depois de ele editar as infos que quiser, no final vai ter um botão de salvar que atualiza as infos dele e volta para o estado da primeira visão.

Dá pra fazer isso na mesma página, só com uma mudança de estado.

Recomendo usar os componentes que foram usados nas telas de login, sign-up e esqueci a senha. O combo de FormField + useForm + zod é muito poderoso e mais simples de gerenciar os estados. Para input e as labels, siga a mesma estrutura dessas páginas (se não tiver no seu código, puxe da branch dev).

[iz-120]

Beleza, vou fazer os ajustes! Obrigada pelo feedback!

[iz-120]

Removi o param na URL e manti apenas um mock user para simular os dados. Também alterei a forma de edição segundo o que você pediu (duas visualizações, uma com as informações sem edição e outra com estado de formulário editável) na mesma página apenas com mudança de estado. Ficou como você esperava/gostaria?

[enzosakamoto]

Ficou ótimo! Não sei se é bug visual, mas minha tela está com proporções de fonte diferentes e a label está ficando bugada (coloquei nas imagens abaixo). Deixa o tamanho de fonte padronizado igual está na segunda foto (fonte tamanho padrão) para todo o texto da página. A sidebar pode continuar a mesma.

Resumindo:

• Na primeira foto (antes da edição), deixa todas os tamanhos de fontes normais, sem alterar o tamanho padrão.
• Na segunda foto (no modo edição), as labels estão bugadas, o tamanho da fonte do input está ok, mas o da label não.

Fiz algumas alterações para que continue no mesmo esquema

Consegue terminar?

[iz-120]

Nossa, perdão. Acho que eu olhei só pelo Dark mode e nem percebi que tinha ficado assim. Acabei de arrumar. A única coisa que não consegui ajustar foi o tamanho da fonte dos inputs (no modo edição). Tentei deixar todos do mesmo tamanho que o texto equivalente no modo sem edição (que está com uma fonte maior), mas não consegui. O único que estava diferente era o "Tipo de Pessoa" e nele eu consegui mexer, então para tudo ficar, pelo menos, igual, eu diminuí o tamanho da fonte desse campo.