Add 'gerenciador/' from commit '34cc9c75a57dedbf61a6e6a1ba1f35f76e72434b'
git-subtree-dir: gerenciador git-subtree-mainline:f4f546c928git-subtree-split:34cc9c75a5
This commit is contained in:
@@ -0,0 +1,66 @@
|
||||
# Log: seções escondidas por padrão, com clique para abrir
|
||||
|
||||
## Contexto
|
||||
|
||||
A tela `/log` mostra duas tabelas: "Ações no painel" (histórico de ações do
|
||||
painel, já limitado aos 20 registros mais recentes) e "Envios automáticos de
|
||||
chave (n8n)" (log dos envios automáticos de chave via WhatsApp, sem limite).
|
||||
Como ambas aparecem sempre expandidas, a tela fica grande e atrapalha quando
|
||||
o usuário só quer olhar rapidamente um dos dois logs.
|
||||
|
||||
## Objetivo
|
||||
|
||||
Cada seção da tela `/log` deve começar **escondida** (fechada) ao carregar a
|
||||
página, exigindo um clique para expandir. Isso facilita, por exemplo, olhar
|
||||
só o log de envios de chave sem precisar rolar past o log inteiro do painel.
|
||||
|
||||
## Design
|
||||
|
||||
**Estrutura:** cada seção (`Ações no painel` e `Envios automáticos de chave
|
||||
(n8n)`) é envolvida em um elemento `<details class="secao-log">` HTML
|
||||
nativo, **fechado por padrão** (sem o atributo `open`). A ordem das seções
|
||||
não muda: Ações no painel primeiro, Envios automáticos de chave embaixo.
|
||||
|
||||
**Controles (dois, redundantes, ambos alternam o mesmo estado):**
|
||||
- O título da seção (dentro de `<summary>`) é clicável — clicar nele
|
||||
abre/fecha a seção. Uma seta (▸ fechado / ▾ aberto) ao lado do título
|
||||
indica visualmente o estado atual.
|
||||
- Um botão no estilo dos demais botões do painel (`Mostrar` / `Ocultar`)
|
||||
fica ao lado do título, dentro do mesmo `<summary>`. Como ele está dentro
|
||||
do `<summary>`, clicar nele já aciona o toggle nativo do `<details>` —
|
||||
não precisa de lógica de toggle separada. Um script pequeno escuta o
|
||||
evento `toggle` de cada `<details>` e só atualiza o texto do botão
|
||||
(`Mostrar`↔`Ocultar`) e o atributo `aria-expanded`, para acessibilidade.
|
||||
|
||||
**Estado não é persistido:** toda vez que a página `/log` é carregada, as
|
||||
duas seções começam fechadas — não guarda se o usuário tinha deixado aberta
|
||||
antes (sem localStorage, sem cookie, sem parâmetro de URL). Simplicidade,
|
||||
sem necessidade adicional hoje.
|
||||
|
||||
**Sem mudança de comportamento:** os dados carregados por seção (limite de
|
||||
20 em "Ações no painel", botão "Limpar log" restrito a administradores
|
||||
dentro dessa seção, listagem de envios do n8n) continuam exatamente como
|
||||
estão hoje — só o wrapper de exibição (fechado/aberto) muda.
|
||||
|
||||
## Fora de escopo
|
||||
|
||||
- Lembrar o estado aberto/fechado entre recarregamentos de página.
|
||||
- Abrir automaticamente alguma seção por padrão (as duas começam fechadas).
|
||||
- Qualquer mudança nos dados exibidos, na paginação, no limite de 20 ou no
|
||||
botão de limpar log.
|
||||
|
||||
## Arquivos afetados
|
||||
|
||||
- `app/templates/log.html` — envolver cada seção em `<details>`/`<summary>`,
|
||||
adicionar o botão Mostrar/Ocultar e a seta indicadora dentro do `summary`.
|
||||
- `app/static/estilo.css` — estilo do `<details>`/`<summary>` (remoção do
|
||||
marcador padrão do navegador, seta customizada que gira com `[open]`,
|
||||
espaçamento do botão dentro do `summary`).
|
||||
- Um pequeno `<script>` inline (ou incluído no bloco já existente do
|
||||
template) para sincronizar o texto do botão com o evento `toggle`.
|
||||
|
||||
## Testes
|
||||
|
||||
- Teste de router (`tests/test_router_log.py`) verificando que a resposta
|
||||
de `GET /log` contém os elementos `<details>` para as duas seções, sem o
|
||||
atributo `open`, confirmando que ambas carregam fechadas por padrão.
|
||||
@@ -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).
|
||||
Reference in New Issue
Block a user