O que é o novo design na tela Painel de processos?

O novo design do Painel de Processos foi pensado para deixar a visualização mais limpa, intuitiva e funcional. Agora, os ícones do topo dos cards foram agrupados em um menu dentro card, evitando poluição visual e abrindo espaço para novas funcionalidades.

Além disso, o visual dos cards foi ajustado com melhorias em cores, bordas e espaçamentos, facilitando a leitura e o destaque de informações importantes, como prioridade e data programada. Também aplicamos ajustes que garantem melhor aproveitamento da tela, mantendo a pesquisa fixa e ativando rolagem horizontal apenas quando necessário.

Esse redesign traz mais organização e agilidade para quem gerencia múltiplos processos ao mesmo tempo.

Quais foram as mudanças na tela de Painel de Processos?

Segue abaixo as mudanças na tela de Painel de Processos:

Ícones do topo

No novo design do Painel de Processos, os ícones que antes ficavam no topo de cada card foram organizados dentro de um menu de opções. Isso ajuda a manter o visual mais limpo e padronizado, sem excesso de ícones espalhados. Além disso, esse novo formato permite que a gente inclua novas funcionalidades no futuro, sem complicar a interface.

As seguintes opções estão disponíveis:

Edição rápida;
Abrir processo em nova aba;
Clonar processo;
Ver proposta;
Tarefas pendentes;
Excluir processo;

O único ícone que continua visível no topo do card é o que dá acesso às informações da pessoa vinculada ao processo. Ele foi reposicionado e ganhou um novo estilo, mas sua função permanece a mesma: ao clicar, o sistema abre um modal com os dados da pessoa e seus contatos.

Esse ícone está posicionado de forma fixa no card, próximo ao menu de opções que aparece quando o mouse é passado sobre o card.

Cores e efeitos no card selecionado

O novo design traz um destaque visual mais claro, onde os cards ganharam uma borda azul e o fundo muda levemente de cor quando o usuário passa o mouse. Essa mudança ajuda a identificar melhor o card selecionado, tornando a navegação mais fácil e visualmente organizada.

Informações exibidas no card

Alguns ajustes foram feitos na forma como as informações aparecem dentro de cada card, para melhorar a leitura e manter um visual mais organizado.

Título: para evitar que ocupe muito espaço, ele está limitado a duas linhas, mas, ao passar o mouse, é possível visualizar o texto completo.
Responsável: se o nome do responsável for muito longo, ele será cortado com reticências, mas o nome completo pode ser visto ao passar o mouse.
Pessoa vinculada: como os dados da pessoa vinculada já podem ser consultados de forma detalhada no modal, essa informação foi removida do card. Isso ajuda a reduzir a quantidade de texto exibido e a manter o foco nas informações mais relevantes.
Campos personalizados: o conteúdo desses campos são limitados a no máximo 4 linhas visíveis. Caso ultrapasse esse limite, o restante do texto deve ser visto ao passar o mouse.

Nova lógica de cores na tag de data programada

A tradicional bolinha colorida que indicava a situação do prazo do processo foi substituída por uma tag de data mais informativa e visualmente clara. Agora, a cor da tag indica diretamente o status da data programada:

🟢 Verde: em dia
🟡 Amarelo: vence em até 3 dias
🟠 Laranja: vence hoje
🔴 Vermelho: em atraso
🔵 Azul: entregue no prazo
🟣 Roxo: entregue com atraso

Se o processo não tiver data programada, a tag simplesmente não é exibida.

Ajustes de tamanhos, espaçamentos e bordas

Para deixar a tela mais equilibrada e melhorar a visualização dos cards no Painel de Processos, também realizamos alguns ajustes visuais importantes:

Bordas mais suaves e proporcionais: o visual ficou mais moderno e agradável.
Menos espaçamento entre etapas: essa mudança ajuda a manter o foco no conteúdo, principalmente para quem acompanha muitos processos ao mesmo tempo.
Título das etapas mais bem posicionado: esse ajuste melhora a organização visual, especialmente em painéis com muitas etapas de tamanhos diferentes.
Largura mínima para etapas e cards: se o número de etapas ultrapassar o espaço disponível, o sistema ativa uma barra de rolagem horizontal apenas na área do painel de etapas. A pesquisa e os filtros no topo continuam fixos, permitindo navegação com mais controle e clareza.