3.4 KiB
Tabela de Clientes: UI/UX — Colunas, Centralização e Densidade
Contexto
A tabela em /clientes usa o estilo genérico de table/th/td do
projeto (compartilhado com outras telas como /funcionarios e /log).
Isso deixa a tabela de clientes com padding grande demais para o volume de
linhas que ela normalmente exibe, todas as colunas alinhadas à esquerda
sem distinção (mesmo colunas curtas como Código e Status), e a coluna CNPJ
estreita a ponto do valor quebrar em duas linhas.
Objetivo
Melhorar o layout da tabela de /clientes — ajuste de largura de colunas,
alinhamento/centralização e densidade das linhas — igual para os dois
perfis de usuário (admin e padrão), já que hoje não existe distinção de
permissão nessa tela e este trabalho não introduz nenhuma.
Fora de escopo
- Qualquer restrição de ação por perfil (admin vs. padrão) — confirmado explicitamente que não é para mudar quem vê/usa o quê nesta tela.
- Mudança em dados exibidos, busca, filtro de status, paginação ou nas ações em si (Abrir, Gerar chave, alternar status).
- Mudança no estilo genérico de
table/th/tdusado por outras telas (/funcionarios,/log, etc.) — os ajustes ficam restritos a uma classe específica da tabela de clientes, sem tocar nas regras compartilhadas.
Design
Escopo do CSS: a tabela de /clientes ganha uma classe própria (ex.:
table-clientes) para que os ajustes de largura/alinhamento/densidade não
vazem para as demais tabelas do painel.
Larguras e alinhamento por coluna:
| Coluna | Largura | Alinhamento |
|---|---|---|
| Código | estreita e fixa | centralizado, tabular-nums |
| Razão | flexível (resto do espaço) | esquerda |
| Fantasia | flexível (resto do espaço) | esquerda |
| CNPJ | fixa, larga o bastante para não quebrar linha (18 caracteres) | centralizado, tabular-nums, white-space: nowrap |
| Status | estreita e fixa | centralizado |
| Ações (Abrir / Gerar chave) | fixa | direita |
Razão e Fantasia dividem o espaço restante igualmente entre si (cada uma recebendo a mesma largura flexível), já que são as colunas de leitura mais importantes da tabela.
Cabeçalhos: cada <th> reflete o alinhamento da coluna correspondente
(Código/CNPJ/Status centralizados, Razão/Fantasia à esquerda, Ações à
direita) — hoje todos os cabeçalhos ficam forçados à esquerda
independente do conteúdo da coluna.
Densidade: o padding vertical das células dessa tabela cai de 10px
para 7px (mantendo o padding horizontal), permitindo mais linhas visíveis
sem rolagem. Os botões de ação (Abrir / Gerar chave) ganham uma classe
específica de tabela que remove a margem superior de 14px do botão padrão
(pensada para formulários, não para dentro de células) e usa padding mais
compacto, mantendo o espaçamento consistente entre os dois botões.
Sem mudança de comportamento: os links de ordenação nos cabeçalhos
(ordenar_por/direcao), a bolinha de status clicável (toggle
ativo/inativo), o botão "Gerar chave" e a paginação continuam funcionando
exatamente como hoje — só a apresentação visual muda.
Testes
- Teste de router (
tests/test_router_clientes.py) verificando que a tabela renderizada usa a classetable-clientes(confirma que o CSS com escopo está sendo aplicado, sem checar detalhes visuais que testes automatizados não conseguem verificar de forma confiável).