Padrões de tela
Anatomia de uma tela
Toda tela gerencial do produto tem a mesma ordem vertical. Não é economia de esforço: é o que faz alguém que nunca abriu a tela de Recuperáveis já saber onde está o filtro, onde está a ação e onde a lista começa.
PageBar / PageStagePageBodyordem fixa
A ordem
De cima pra baixo, sempre. Uma tela pode pular etapas, nunca trocá-las de lugar.
| # | Bloco | Receita |
|---|---|---|
| 1 | Cabeçalho — barra de tela (sem sub-telas) ou palco (com sub-telas) | PageBar h-14 sticky · PageStage grade de 3 colunas |
| 2 | Cartões de número — informam o que mudou (não filtram) | grid gap-3 · rounded-xl border px-4 py-3 |
| 3 | Ferramentas — recorte + busca + filtros + ações da tela | flex flex-wrap gap-2/gap-3 · mb-phi-3 |
| 4 | Recorte de visão, quando a lista tem sub-coleções | segmented control: trilho rounded-full bg-ink-100 p-1 |
| 5 | A lista — cards (agenda) ou tabela (cadastros) | gap-phi-3 / rounded-xl |
| 6 | O detalhe — a própria linha expande em ficha, não navega | Gaveta + EditSurface |
| 7 | Ações em massa — barra flutuante na base | fixed bottom-4 · rounded-2xl · shadow-md ring-1 |
Qual cabeçalho
Uma pergunta só: a tela tem sub-telas?
Sem sub-telas → barra de tela
Faixa de 56px que sangra de ponta a ponta e cola no topo. Cadastros é o molde; Hoje, Números, Assistente e Atendimento repetem. O título é o h1 da página.
Com sub-telas → palco de tela
Grade de três colunas onde o título vira endereço fixo e o rail inteiro mora na faixa. Cobre /ajustes (11 sub-telas) e /configuracoes. O rail NUNCA volta a ser coluna própria ao lado do conteúdo.
Números e recortes: duas peças, dois trabalhos
A confusão mais comum de tela nova é misturar “o número que informa” com “o chip que filtra”. No app eles são peças diferentes, e é assim que a pessoa sabe onde clicar.
| Peça | O que faz | Receita |
|---|---|---|
| Cartão de número | INFORMA. Não é clicável. | rounded-xl border px-4 py-3 · valor text-2xl font-bold tabular-nums · rodapé text-xs |
| Chip de recorte | FILTRA a lista. Clicar aplica; clicar no ativo volta ao geral. | h-8 rounded-full border px-3 · ativo bg-brand-muted text-brand-strong · contagem tabular-nums opacity-70 · aria-pressed |
| Segmented control | Troca a VISÃO da mesma lista (Lista/Funil, Dia/Semana). | trilho rounded-full bg-ink-100 p-1 · ativo bg-surface shadow-xs · role=tablist |
NotaDe três a cinco recortes
Mais que isso o olho para de escanear e a fileira vira painel — e painel ninguém lê. Se precisa de mais, o excedente vira filtro dentro de um menu.
Ferramentas
Recorte, busca, filtros e as ações da tela. Tudo pílula, tudo numa faixa que quebra em linhas antes de espremer.
a forma da toolbar (cadastros-toolbar)
<div className="mb-phi-3 flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
{/* recorte: segmented control (role=tablist) ou chips com contagem */}
<div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center lg:ml-auto lg:justify-end">
<SearchInput wrapperClassName="w-full sm:w-64" aria-label="Buscar paciente" />
{/* filtros e ordenar: DropdownMenu com gramática de ESCOLHA */}
{/* ações da tela: Button sm + o menu ⋯ */}
</div>
</div>| Regra | Detalhe |
|---|---|
| Duas alturas, e só duas | h-9 no campo de busca (é um Input), h-8 nos chips e botões de toolbar. No dedo os dois sobem um degrau sozinhos. |
| flex-wrap sempre | No celular a linha quebra em vez de espremer. |
| A busca tem largura própria | wrapperClassName="w-full sm:w-64" — largura no invólucro, nunca no input. |
| Ferramentas no corpo, não na barra | A barra de tela só recebe ferramentas quando a tela NÃO tem corpo rolável (o Atendimento) — ali não há onde pôr a toolbar. |
| Focar a busca não apaga a lista | O foco em camadas fica de fora da toolbar de propósito: focar a busca serve pra VER a lista. |
Lista, detalhe e vazio
A lista é o assunto da tela. O detalhe abre nela mesma.
Cards ou tabela
| Formato | Quando | Nota |
|---|---|---|
| Tabela | Muitas linhas com os MESMOS campos comparáveis (cadastros). | Cabeçalho em overline, hover ink-50, numérico à direita, telefone em mono. |
| Cards | Poucos itens com forma própria (compromissos, documentos). | gap-phi-3, e o card clicável tem o hover do canon. |
| Linhas com divide-y | Listas curtas dentro de um card (insumos, equipe). | divide-y divide-border no pai; a linha só cuida do próprio ritmo. |
NotaO detalhe não navega
Clicar numa linha não leva pra outra tela: a linha vira ficha no lugar. Navegar custa contexto — a pessoa perde o filtro, a rolagem e a posição na lista, e volta sem saber onde estava.
Cada tela precisa dos três estados prontos antes de ser considerada pronta: carregando (cabeçalho real + esqueleto do corpo), vazio (nas duas variantes: nunca teve, e o filtro não achou) e erro (painel calmo com “tentar de novo”).
No celular
A mesma ordem, em coluna única.
| Bloco | O que muda |
|---|---|
| Barra de tela | Deixa de ser sticky: o topo já tem header + navegação grudados. |
| Palco | A grade se desfaz: faixa vira cabeçalho empilhado e o rail vira tira horizontal. |
| Fileira de resumo | Uma coluna, ou duas se os rótulos forem curtos. |
| Ferramentas | Quebram em linhas; a busca ocupa a primeira inteira. |
| Tabela | Vira lista de linhas empilhadas — tabela com rolagem lateral é último recurso. |
| Ações em massa | A pílula flutuante encolhe e os rótulos viram só ícone + contagem. |