Componentes UI¶
📋 Visão Geral¶
O Motor de Pricing possui 25 componentes reutilizáveis na pasta components/. Eles encapsulam padrões de UI baseados em Dash Bootstrap Components e são utilizados por todas as páginas da aplicação.
🧩 Catálogo de Componentes¶
Componentes de Layout¶
| Componente | Arquivo | Descrição |
|---|---|---|
| Sidebar | Sidebar.py |
Barra lateral fixa com links de navegação para todas as páginas. Visível apenas para usuários autenticados. |
| Tabs | Tabs.py |
Componente de abas para alternar entre visões |
| Stepper | Stepper.py |
Navegação por etapas (usado na Arquitetura de Preços com 12 passos) |
| Modal | Modal.py |
Janela modal para confirmações, formulários e ajuda |
Componentes de Dados¶
| Componente | Arquivo | Descrição |
|---|---|---|
| Table | Table.py |
Tabela de dados principal — suporta edição inline, rowModelType="infinite", auto-size de colunas |
| Card | Card.py |
Card individual para exibição de métricas |
| Totalization_Cards | Totalization_Cards.py |
Conjunto de cards de totalização com cálculos automáticos |
Componentes de Formulário¶
| Componente | Arquivo | Descrição |
|---|---|---|
| Select | Select.py |
Dropdown de seleção individual |
| Selects_group | Selects_group.py |
Grupo de selects (filtros dinâmicos usados em todas as páginas) |
| Dropdown | Dropdown.py |
Menu dropdown genérico |
| Input | Input.py |
Campo de entrada de texto |
| DatePicker | DatePicker.py |
Seletor de data |
| Upload_file | Upload_file.py |
Upload de arquivos |
Componentes de Ação¶
| Componente | Arquivo | Descrição |
|---|---|---|
| Button | Button.py |
Botão padrão com cores configuráveis |
| Button_Export | Button_Export.py |
Botão de exportação para Excel |
| Button_tooltip | Button_tooltip.py |
Botão com tooltip informativo |
Componentes de Informação¶
| Componente | Arquivo | Descrição |
|---|---|---|
| Title | Title.py |
Título de página |
| Title_helper | Title_helper.py |
Título com botão de ajuda integrado |
| Helper_button | Helper_button.py |
Botão de ajuda (?) com tooltip |
| Helper_button_with_modal | Helper_button_with_modal.py |
Botão de ajuda que abre modal com texto explicativo |
| Alert | Alert.py |
Mensagem de alerta (sucesso, erro, aviso) |
| Toast | Toast.py |
Notificação temporária (toast) |
| Avatar | Avatar.py |
Avatar do usuário na sidebar |
🔑 Componentes Centrais¶
Table¶
O componente mais importante. Utiliza AG Grid do Dash para renderizar tabelas com:
- Edição inline — células editáveis com recálculo automático
- Infinite scroll — carregamento sob demanda para grandes volumes
- Auto-size — colunas ajustadas automaticamente ao conteúdo
- Filtros — integrado com
Selects_grouppara filtragem dinâmica
Selects_group¶
Componente de filtros dinâmicos que:
- Aceita uma lista de configurações de filtro
- Atualiza opções de cada filtro baseado nas seleções dos outros
- Opera sobre dados em cache (sem chamadas à API)
- Usado em todas as páginas de dados
Stepper¶
Componente de navegação por etapas:
- Exibe progresso visual com etapas numeradas
- Controle de visibilidade por CSS (todas as etapas pré-carregadas)
- Callback de atualização ao clicar em cada etapa
- Atualiza header e helper text para cada etapa
Totalization_Cards¶
Conjunto de cards que exibem indicadores calculados:
- Recalculados a cada mudança de filtro ou dados
- Formatação automática de valores numéricos
- Configuração por
cards_configespecífico de cada página
📝 Padrão de Uso¶
Todos os componentes seguem o padrão de funções criadoras (factory pattern):
from components.Table import create_table
from components.Button import create_button
from components.Modal import create_modal
from components.Select import create_select
from components.Selects_group import create_selects_group
Cada função create_* recebe parâmetros de configuração e retorna um elemento Dash pronto para uso no layout.
Última atualização: Março 2026 | Versão 1.0