ui: refactor investment cards

[leonardomerlin]

Before	After

Como existe um "pedido de ajuda" para melhorar a UI, tentei brincar um pouco e esta é apenas uma proposta para os cards.

1. Deixar os valores monetários "monospaced" e alinhados a direita (mais comum em extratos)
2. Deixar a badge de imposto de renda junto a label, para não "poluir" a área dos valores
3. Deixar o imposto de renda sempre visível, isso ajuda a manter a altura dos cards consistentes.
4. Limitar o tamanho do card para que não expanda muito em telas grandes, necessário para que os valores não fiquem muito distantes do label

---

Enfim, not big deal... mas achei um pouco difícil de trabalhar com o vuetify no geral. E para o tamanho do projeto, não sei se justifica usar (ou continuar usando) esse framework.

Talvez seja uma opção considerar algo mais "customizável/moderninho" como o unocss ou shadcn-vue.

Uma outra referência bacana em vue é o it-tools.tech.

O que acha?

[marcelorodrigo]

A formatação dos valores em monospaced ficou excelente, realmente muito boa.
No entanto, os cards menores acabaram deixando um espaço vazio na tela, especialmente em resoluções maiores.

Você acha que o uso de Flexbox ou Grid poderia otimizar esse layout?
Qual sua opinião?

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[leonardomerlin]

Eu também fiquei incomodado com o espaço vazio. Eu parei no meio de uma linha de raciocínio quando resolvi adicionar a linha de imposto em todos -> a ideia era deixar todos os cards com mesma altura, assim daria para deixar eles lado a lado ou fazer algo "colunar". Ou seja, talvez colocar scroll horizontal ou mesmo em formato tabela (apenas tela grande).

Vou buscar umas referências depois.

De cabeça eu acho que o Home Broker da Rico tinha uma UX razoavelmente boa para comparar investimentos.

[marcelorodrigo]

Achei essa abordagem bastante interessante.
Ela me fez lembrar das interfaces de usuário onde temos a seleção de planos, era also similar que você tinha em mente? Você acha que essa poderia ser uma ideia mais atrativa para a apresentação dos resultados do cálculo?

[marcelorodrigo]

Numa interface mais limpa, onde as opções de investimento são apresentadas em cards de tamanho uniforme. E, para destacar a melhor opção, o card com o maior retorno financeiro seria realçado.

[leonardomerlin]

1. Gostei da ideia de "destacar a melhor opção".

2. Achei agora aqui uma referência (fraca) da ferramenta que me referi antes:

Isso foi um screenshot em cima de um vídeo apresentando a ferramenta (que nem merece o link aqui). Na imagem dá pra ter uma noção das "caixas" para adicionar as simulações.

Acho que está sim alinhado com o seu exemplo anterior de comparação de planos de assinaturas sim. Acredito que estamos convergindo pra algo...

UI não é o meu forte mas vou tentar criar algo no Figma para evoluirmos melhor as ideias...brb

[leonardomerlin]

Exemplo 1 - cards lado a lado:

[leonardomerlin]

Exempl 2 - tables:

Screen.Recording.2024-10-12.at.23.54.09.mov

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud