docs: spec da melhoria de ui/ux da tabela de clientes

2026-08-20 12:08:54 -03:00
parent d2135bce5d
commit 66c50b252a
1 changed files with 71 additions and 0 deletions
@@ -0,0 +1,71 @@
+# 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`/`td` usado 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 classe `table-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).