72 lines
3.4 KiB
Markdown
72 lines
3.4 KiB
Markdown
# 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).
|