Histórico da Página
...
Filtros de Período: O usuário seleciona o intervalo desejado (ex: "Este Ano", "Próximos 90 dias") para focar sua análise.
Dashboard (K-Cards): O usuário clica nos cards de resumo (ex: "Faturas Vencidas") para filtrar a lista automaticamente e ver apenas o que requer atenção.
Ação Rápida: Na listagem, identifica faturas críticas pelo status colorido (Vermelho para Vencida, Azul para Pendente) e utiliza o menu de ações (
...) para pagar sem sair da tela.
| Dica | ||
|---|---|---|
| ||
Esta funcionalidade foi desenvolvida com Design Responsivo. Ao acessar pelo celular, a interface se adapta automaticamente: as tabelas se transformam em cards, garantindo que você consiga visualizar detalhes e realizar pagamentos com a mesma eficiência do desktop. |
02. EXEMPLO DE UTILIZAÇÃO
TELA FATURAS
Busca e Filtros
Para localizar títulos específicos ou refinar a listagem, o topo da tela oferece:
...
Status (Situação): Indicador visual colorido para rápida identificação do estado da fatura:
🔴 Vencida: Atenção imediata.
🟠 Pago Parcial: Requer conferência.
🔵 Pendente: No prazo (ícone de relógio).
🟢 Pago: Concluído.
🔘 Em Processamento: Aguardando registro bancário (ícone de ampulheta).
Nº Fatura: Número único de identificação do título financeiro.
Cliente: Nova coluna exibindo Código - Nome do cliente para fácil identificação da origem.
Competência: Mês e Ano de referência da cobrança (ex: 08/2025).
Vencimento: Data limite para o pagamento do título.
Valor: Valor total original da fatura.
Saldo: Valor restante a ser pago (destaca valores pendentes em casos de pagamento parcial).
Menu de Ações (
...): Acesso rápido para "Pagamento" (abrir modal) ou "Baixar Boleto".
...
DETALHES DA FATURA
Ao clicar em uma fatura na listagem, o usuário acessa uma visão detalhada estruturada em dois blocos principais:
Resumo da Fatura (Hero Card)
...
Colunas: Beneficiário, Descrição do Serviço, Competência, Tipo (Débito/Crédito) e Valor.
TELA PAGAMENTO (MODAL)
Ao selecionar "Pagar Fatura", um modal simplificado é exibido:
Copiar Código: Botão principal para copiar a linha digitável com um clique (com feedback visual de "Copiado!").
Baixar Boleto: Opção secundária para download do PDF.
Seleção de Método: Alternância entre Boleto e PIX (quando disponível).
...
03. TELA FATURAS
Outras Ações / Ações relacionadas
| Ação | Descrição relacionada | ||
|---|---|---|---|
| Pagar Fatura | Abre a janela de pagamento permitindo copiar a linha digitável com um clique ou alternar entre métodos (Boleto/PIX). | ||
| Baixar Boleto | Realiza o download imediato do boleto em arquivo PDF | ||
| Pagamento via Boleto | Exibe a linha digitável e opção de download do boleto | ||
| da fatura. | |||
| Visualizar Detalhes | Acessa a visão detalhada da fatura, exibindo o resumo financeiro e a lista de itens/beneficiários que compõem a cobrança. | ||
| Busca Avançada | Permite filtrar a listagem por critérios específicos, como: Nome/Código do Cliente, intervalo de datas personalizado. | ||
| Filtrar por Status | Ao clicar nos Cards de Resumo (ex: "Vencidas"), a lista é atualizada automaticamente para exibir apenas os itens daquele grupo. | Pagamento via PIX (em breve) | Disponibiliza a opção de pagamento via PIX |
04. TELA FATURAS
Principais Campos e Parâmetros
...
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas