Design System
Fundamentos visuais, componentes e padrões de interface usados em todas as telas do HaisFaturamento. Use esta referência antes de criar qualquer tela nova.
Padrões
Tabelas e paginação
Tabela responsiva com cards no mobile, paginação e célula de arquivo de origem.
Tabela com alternativa em cards
Exemplo real das listagens de TUSS e Base de precificação: tabela no desktop, cards empilhados em telas menores. Redimensione a janela para ver a troca.
| Arquivo | Data de envio | Status | Ações |
|---|---|---|---|
| tabela_tuss_2026_10.xlsxAtual | 08/10/2026 | Concluído | |
| tabela_tuss_2026_07.xlsx | 02/07/2026 | Processando | |
| tabela_tuss_2026_04_revisao_final.xlsx | 15/04/2026 | Falha |
- tabela_tuss_2026_10.xlsxAtualConcluído
- Data de envio
- 08/10/2026
- tabela_tuss_2026_07.xlsxProcessando
- Data de envio
- 02/07/2026
- tabela_tuss_2026_04_revisao_final.xlsxFalha
- Data de envio
- 15/04/2026
- Quando usar
- • Listagens com mais de um atributo por registro
- • Use cards (DataTableCardList) quando a tabela não couber sem rolagem horizontal
- Comportamento
- • Cabeçalho em maiúsculas discretas; status sempre como badge com ícone
- • Coluna Ações à direita, apenas com botões de ícone e tooltip
- • O breakpoint de troca é escolhido por página (lg, xl ou 2xl) conforme o número de colunas
- • Nome de arquivo truncado com tooltip; badge "Atual" ao lado do nome
- Acessibilidade
- • Tabela nativa com <th> para leitores de tela
- • Nos cards, os rótulos das colunas permanecem visíveis ou como sr-only
- • Botões de ícone sempre com aria-label descrevendo ação e alvo
Paginação
TablePagination: rodapé padrão das listagens, 20 itens por página, calculado sobre o total já filtrado.
Mostrando 1 a 20 de 137 resultados
- Quando usar
- • Sempre que a listagem puder ultrapassar 20 registros
- Comportamento
- • Mudar filtros ou itens por página volta para a página 1
- • Contagem mostra o intervalo exibido e o total filtrado
- Acessibilidade
- • Botões de página com aria-label e aria-current na página ativa
- • Seletor de itens por página com rótulo associado
Arquivo de origem
OriginFileCell: usado em Regras identificadas (Contratos) e Registros vigentes (Base de precificação).
contrato_amil_2026_aditivo_reajuste_anual.pdf
- Quando usar
- • Indicar de qual arquivo um registro ou regra foi extraído
- Comportamento
- • Nome truncado em largura fixa, completo no tooltip
- • O olho abre a pré-visualização do arquivo exato daquele registro, identificado por ID
- Acessibilidade
- • Nome truncado é focável para exibir o tooltip pelo teclado
- • Botão com aria-label "Visualizar arquivo de origem <nome>"