Componentes

Status & selos

Uma fonte visual só: StatusPill. Os selos de cada área são cascas finas por cima dele, e o significado — rótulo, cor, ordem, se pulsa — mora no domínio daquela área, nunca na tela que desenha.

ui/status-pill.tsxlib/numeros/status.tsdocs/DOMINIO.md

StatusPill

Ponto colorido + rótulo numa pílula com borda. Pequeno, discreto, e sempre com o rótulo escrito — cor nunca é o único sinal.

ConectadoConectandoAguardandoDesconectadoBloqueado

os status reais de um número de WhatsApp, lidos de lib/numeros/status.ts

Prop	Tipo	Padrão	O que faz
label	string	—	O rótulo escrito. Obrigatório: cor sozinha não comunica.
dot	string	—	Classe de cor do ponto: "bg-brand", "bg-warning"…
text	string	text-fg-muted	Classe de cor do rótulo — sempre um tom -strong quando é semântico.
pulse	boolean	false	Liga o utility pulso no ponto. Só pra coisa viva AGORA.
className	string	—	Ajuste de layout do chamador.

o descritor mora no domínio, a pílula só apresenta

// lib/numeros/status.ts — um lugar só pra editar
export const STATUS_META = {
  connected:  { label: "Conectado",  dot: "bg-brand",    text: "text-brand-strong" },
  connecting: { label: "Conectando", dot: "bg-info",     text: "text-info-strong", pulse: true },
  pending:    { label: "Aguardando", dot: "bg-ink-400",  text: "text-fg-muted" },
  disconnected: { label: "Desconectado", dot: "bg-negative", text: "text-negative-strong" },
  banned:     { label: "Bloqueado",  dot: "bg-negative", text: "text-negative-strong" },
};

// na tela:
<StatusPill {...STATUS_META[linha.status]} />

Dois pesos

A regra é de densidade: pílula com fundo quando o status está SOZINHO; dot + texto sem fundo dentro de tabela ou lista densa.

AgendadoConfirmadoCompareceuFaltouFantasmaRecuperável

status sozinho (card, cabeçalho, painel): fundo suave + rótulo

AgendadoConfirmadoCompareceuFaltouFantasmaRecuperável

status em lista densa: dot + rótulo, sem fundo — 10 pílulas por coluna pesariam

Nota“Compareceu” é o único selo CHEIO

Ele é o desfecho que fecha a conta — o dado que vale dinheiro pra clínica. Por isso ganha fundo verde sólido com tinta --positive-fg em vez de fundo suave. É a única exceção de peso na família de selos, e ela é semântica, não estética.

A jornada do paciente

Os estados do paciente reusam a semântica: nenhum matiz novo. O significado é do domínio — a tela não recolore nada.

Selo	O que é	Significado	Token
Agendado	estado	Agendamento criado na agenda	--info
Confirmado	estado	O paciente confirmou presença	--brand
Compareceu	estado	Esteve na clínica	--positive (selo cheio)
Faltou	estado	No-show VERIFICADO — nunca carimbado pelo relógio	--negative
Fantasma	condição	Inatividade reversível: uma flag SOBRE o estado, que continua preservado	--warning
Recuperável	condição	Oportunidade viva — o selo pulsa porque ela ainda responde	--brand + pulso

Armadilha já pagaCondição não substitui estado

“Fantasma” e “parada” são flags sobre o estado preservado, não estados da máquina. Uma linha que mostra só “Fantasma” apaga a informação de que aquele agendamento continua CONFIRMADO — e é assim que a recepção deixa de confirmar quem já estava na agenda. Mostre o estado, e a condição ao lado.

Vocabulário importa

“Fantasma” é uma CONDIÇÃO (não responde), não um julgamento. O produto não diz “perdido”, “morto” nem “lixo”: quem sumiu pode voltar, e é disso que vive a Receita Recuperável.

Cor nunca é o único sinal

Todo status tem rótulo ao lado do dot. Na agenda, o compromisso ainda carrega FORMA — listrado (agendado), vazado (faltou), ✓ (compareceu) — porque a cor do cartão é escolhida pela clínica e não pode apagar o estado.

Badges genéricas

Nem todo selo é status. Contagem, procedência e delta têm formas próprias.

12 na fila Qualificado pelo agente +12% Não contatar

neutra · IA · delta com seta e tabular · restrição

Tipo	Forma	Regra
Contagem	borda + surface, sem dot	Número em tabular. Não usa cor semântica: contagem não é estado.
Procedência de IA	ia-muted + Sparkles	Só quando o agente produziu aquilo.
Delta	soft da direção + seta + tabular-nums	Verde pra bom, vermelho pra ruim — e “bom” depende da métrica: queda de no-show é verde.
Restrição	negative-soft + ícone	“Não contatar” é uma regra que a clínica precisa ver ANTES de agir.

Sim

Fantasma

Texto no tom -strong sobre o -soft, dot no tom base, respiro px-2.5 (a curva da pílula come espaço).

Não

Fantasma

Fundo cheio numa família que não é “compareceu”: pesa demais numa lista. E branco sobre âmbar reprova contraste.