diff --git a/docs/superpowers/specs/2026-08-20-tabela-clientes-ui-design.md b/docs/superpowers/specs/2026-08-20-tabela-clientes-ui-design.md new file mode 100644 index 0000000..a3ab741 --- /dev/null +++ b/docs/superpowers/specs/2026-08-20-tabela-clientes-ui-design.md @@ -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 `` 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).