Contas a Pagar

• Tela de listagem de contas a pagar
• Tela Nova Despesa
• Tela de visualização da despesa
• Tela de edição da despesa
• Tela de pagamento

Tela de listagem de contas a pagar

	Projeto/Sistema: EVOLUÇÃO DO PRODUTO GA	Versão do Template: 1.2
	Processo: Tela de listagem de contas a pagar	Versão do Documento: 1.0
	Responsável(eis):  Jalile Cornachioni	Data:  25/08/2025

1. Objetivo geral:

2. Impacto previsto:

3. Descrição das alterações

#1 - Tela de listagem de despesas

• Tornar a experiência mais intuitiva e eficiente.
• Expor indicadores financeiros de forma clara e visual.
• Facilitar buscas com filtro dinâmico multi-coluna.
• Destacar acesso rápido a ações relevantes  (recebimento, remessa, retorno).
• Reduzir o número de cliques para ações rotineiras.

3.1 Header:

Deve apresentar o título da tela, caminho acessado e botão de nova despesa [funcionalidade existente - manter]

3.2 Cards com indicadores financeiros que servem de filtro [funcionalidade nova]

• • • Vencidas – vermelho (#DB102B) – ícone de alerta.
    • A Vencer – amarelo (#FFB300) – ícone de relógio.
    • A Pagar - azul claro (#044572) - icóne de relógio. - este valor é a soma dos titulos Vencidos e À Vencer
    • Pagos– verde (#009966) – ícone de check.
    • Total Geral – azul (#044572) – ícone de cifrão.

• Os Cards "A Pagar" e o "Total Geral" não devem se comportar como filtro.
  • • Estado inicial (dependente da data de vencimento padrão)
    • O sistema deve considerar a data de vencimento vinda do filtro como referência (por padrão, data atual do sistema – today).
    • Se existirem registros para o período filtrado:
      • Todos os cards correspondentes aos status encontrados são carregados selecionados e coloridos.
      • A grid exibe os registros de todos os cards selecionados.
    • Se não existirem registros para um status na data filtrada:
      • O card é carregado desmarcado e exibido em cinza (estilo “desabilitado”).
      • A grid não exibe registros desse status.
      • Caso nenhum card tenha registros para a data filtrada (ex.: domingo sem títulos):
      • Todos os cards carregam em cinza/desabilitado.
      • A grid permanece vazia.

3.3 Sessão de filtros [funcionalidade existente - manter conforme protótipo]

• Tipo data = Vencimento
• Campo “Data inicial”: pré-preenchido com data atual do sistema (today).
• Campo “Data final”: pré-preenchido com data atual do sistema (today).
• Validação: data final não pode ser anterior à inicial.
• Conta (dropdown) - Valor padrão: “Todas”.
• Filtro de Informações: Campo de texto =  vazio por padrão.
• Dropdown lateral: valor padrão “Cliente”.
• Botão de busca (ícone lupa) dispara aplicação dos filtros.

3.4 Grid de listagem de registros

• Pagar– Ação para registrar pagamento de títulos. Estado inicial: desabilitado e habilita quando o usuário selecionar ao menos um título.
• Importar cnab240– Importação de arquivos de pagamentos; sempre habilitado, e não depende de seleção de registros na grid.
• Relatórios - Acesso rápido a relatórios financeiros do contas a pagar.
• Ações em Lote – Dropdown com múltiplas ações aplicáveis aos registros selecionados. Estado inicial: desabilitado e habilita quando o usuário selecionar ao menos um título.
• Filtros – Botão para expandir/contrair painel de filtros.
  • Estado inicial: todos os filtros selecionados, caso deseje, o usuário poderá desmarcar.
  • Filtros são combináveis entre si (ex.: “Com anexos” + “Registrados” + "Sem Registros).
• Exibição – Mostra quais colunas da grid o usuário pode exibir ou ocultar.
  • Estado inicial: Colunas ocultas por padrão: "Transferências".
  • A ordem das opções deve seguir a ordem das colunas.

3.5 Coluna situações: 

• • Registros: títulos Registrados (azul) / Não registrados (cinza)
  • Agendado: títulos agendados (azul), Não agendados (cinza)
  • Anexos: títulos Com anexos (azul) / Sem anexos (cinza)

• Todos os títulos devem possuir ambos ícones (papelzinho, relógioe clips) com o padrão de de cores azul para situação ativa e cinza para a negativa.
• O sistema passará aceitar 2 anexos para o contas a pagar e deve validar o campo novo "fatura_boleto" na tb"despesa" para marcar o ícone de agendamento como azul.
• Ícones ativos possuem a cor correspondente e exibem tooltip ao passar o mouse (por exemplo: "Agendado", "Com anexos", "Registrado").

3.6 Footer

Comportamento:

• Quantidade de registros

  • Por padrão, a grid carrega 15 registros por página.

  • Ao selecionar 50 ou 100, o sistema recarrega a grid exibindo mais linhas sem alterar o estado dos filtros ou dos cards.

• Rolagem da tela inteira

  • A grid não possui scroll interno; a rolagem é aplicada à tela inteira.

  • Isso significa que, ao rolar para baixo, o usuário perde de vista o header com os filtros e os cards, dificultando a referência visual.

4. Link do Protótipo / Telas

 

 

©SOFTEN SISTEMAS 2025

 

 

 

 

Tela Nova Despesa

	Projeto/Sistema: Evolução do Produto GA - Interno	Versão do Template: 1.1
	Processo: Tela nova despesa	Versão do Documento: 1.0
	Responsável(eis):  Jalile Cornachioni	Data:  25/08/2025

 

1. Objetivo geral:

2. Impacto previsto:

3. Descrição das alterações

#2 - Tela de nova despesa

A tela de Nova Despesa tem como objetivo permitir que o usuário cadastre rapidamente um novo lançamento no Contas a Pagar, informando os dados essenciais. Reposicionamos os campos obrigatórios e mais utilizados para o topo da tela, facilitando o acesso e acelerando o preenchimento. Embora a funcionalidade em si não tenha mudado, o layout foi modernizado para melhorar a experiência do usuário e reduzir o tempo de operação.

3.1 Header – Informações da Despesa

• Título: Nova Despesa - Identificação visual da área de cadastro da despesa.

• Preenchimento Automático via IA - Área para importação de arquivo para preenchimento da despesa de forma automatizada, deita por IA.

• Campos obrigatórios e prioritários: Fornecedor, Número do Documento, Descrição, Conta, Categoria, Forma de Pagamento, Data de Vencimento,  e Valor da Despesa.

• Pagamento Agendado: Toggle Switch para marcar o título como agendado ou não.
• Linha digitável: Campo texto reservado para linha digitável do boleto.

• Valores default: Conta = "Caixa Fìsico" e Forma de Pagamento = "Dinheiro".

• Indicador de status: Selo “A Vencer” posicionado no topo direito, em amarelo  (#FFB300).

3.2. Grid – Repetição de Lançamentos

• Campos de configuração: Quantidade de lançamentos e período de repetição (ex.: mensal).

• Tabela de parcelas: Lista com número da parcela e respectiva data de lançamento.

• Controles de expansão/retração: Permitem ocultar ou exibir detalhes dessa seção.

3.3. Rodapé – Informações Adicionais e Ações

• Campo de observação: Área livre para comentários e detalhes adicionais.

• Upload de fatura/boleto: Deve ser utilizado para anexar uma cópia da fatura.

• Upload de comprovante: Botão “Adicionar Comprovante” com instruções de formato e tamanho de arquivo.

• Botões de ação: “Salvar e Fechar” e “Salvar e Pagar”, posicionados para finalização rápida da operação.

3.4 Comportamento geral da tela:

No estado inicial, a sessão "informações da Despesa" deve estar no estado expanded (aberto) e os demais accordions renderizados em estado collapsed (fechados), exibindo apenas o header de cada seção. O usuário pode expandir ou retrair cada accordion de forma independente, conforme sua necessidade.

4. Link do Protótipo / Telas

 

 

 

©SOFTEN SISTEMAS 2025

 

 

 

 

Tela de visualização da despesa

	Projeto/Sistema: GERENCIAMENTO DE PROJETOS	Versão do Template: 1.2
	Processo: Tela de visualização da despesa	Versão do Documento: 1.0
	Responsável(eis):  Jalile Cornachioni	Data:  18/08/2025

1. Objetivo geral:

2. Impacto previsto:

3. Descrição das alterações

#3. Tela de visualização da despesa

O objetivo da criação desta nova tela de detalhes da Despesa é centralizar a visualização completa das informações de um título pago no Contas a Pagar em um formato não editável por padrão, garantindo mais segurança contra alterações acidentais, padronizando o fluxo de consulta e edição conforme o status do título e as permissões do usuário.
Além disso, ela permite acesso rápido a anexos, histórico e dados complementares, servindo como um ponto único de consulta antes de qualquer ação de edição ou pagamento, reduzindo erros operacionais e aumentando a rastreabilidade das mudanças.

3.1 Detalhes da tela

3.1.1 Header (Cabeçalho)

Objetivo: Apresentar de forma clara a identificação do título, status e ações principais.

• Título da página: Label: "Despesa [Número da Despesa ]" (ex.: Despesa 12345-1/3)
• Ícone indicando registro e anexo: Icon de reloginho para indicar título agendado e clips para títulos com anexo.
• Status do título: Label: ""Pago" (em verde #009966)
• Informações de criação: Label: "Criado em [Data] por [Usuário]" 
• Botões de ação: Editar (ícone de lápis), Pagar(ícone de confirmação/pagamento),
• Ações: (menu dropdown com opções adicionais.)
  Obs.: O botão "Pagar" muda para "estornar" quando o status do título for "Pago".
           O dropdown deve oferecer ações de acordo com a regras de status já existentes, adicionar ação de "excluir" e "baixa como perda" - estes status devem estar ativos/inativos conforme permissão do usuário.

3.2.2. Grid (Corpo da tela)
Objetivo: Exibir todos os dados da despesa de forma organizada em blocos de informação.

Bloco 1: Informações do pagamento

• Valor pago
• Data do pagamento
• Juros
• Multa

Bloco 2: Informações da despesa

• Cliente: Label: "Cliente" – valor: nome do cliente
• Número Documento: Label: "Número Documento" – código ou número de referência
• Descrição:
• Conta: Label: "Conta" – conta bancária vinculada
• Categoria: Label: "Categoria" – categoria da despesa (ex.: Alimentício)
• Forma de Pagamento: Label: "Forma de Pagamento" – ex.: Dinheiro, Pix, Cartão etc.
• Data de Vencimento: Label: "Data de Vencimento" – valor formatado (DD/MM/AAAA)
• Valor da Despesa: Label: "Valor da Despesa" – valor em moeda
  OBS.: em alguns casos exibir o campo: "Juros adicional do boleto", de acordo com a configuração da conta selecionada.

Bloco 3: Alterações de valores

• Alterações de Valores: área de texto exibindo campos que alteram o valor, seja por juros, desconto, etc.
  • Valor Original; Juros/Multa; Desconto; Valor

Bloco 4 e 5: Observações e anexos

• Informações Adicionais: área de texto exibindo a descrição ou observações complementares
• Anexos: Miniatura/listagem de anexos: com botão "Abrir anexo"

 

3.2 Comportamento geral e regras da tela

• A tela de visualização de despesa deve ser exibida em modal sempre que o usuário clicar em títulos pagos
• Todos os botões devem estar habilitados para interação, independente do status do título.
• ao clicar em "editar", o sistema deve exibir aviso sobre necessidade de estorno: "Não é possível alterar o vencimento ou valor de um título já recebido. Para prosseguir, realize o estorno do recebimento e tente novamente."
• Esta tela não deve permitir edição apenas para títulos pagos, a não ser que o usuário clique no botão "editar". Ao clicar em "editar" deve-se aplicar regras conforme abaixo:

Regras mandatórias:

• Usuário super_admin
• Permissão de usuário "Financeiro > Contas a Pagar"
• Permissão de usuário "Financeiro > Alterar Contas A Pagar"

 

3.3 Registro em Log

Para garantir rastreabilidade e auditoria das ações realizadas no sistema, toda operação de alteração em títulos deve gerar um registro em log contendo, no mínimo, os seguintes campos:

• Data/Hora da ação – momento exato em que a alteração foi realizada.

• Usuário – identificação única do usuário (ID) e nome completo responsável pela ação.

• Status anterior e novo do título – somente quando houver alteração de status.

• Lista de campos alterados – exibição dos campos modificados com seus respectivos valores antes e depois da edição.

4. Link do Protótipo 

©SOFTEN SISTEMAS 2025

 

 

 

 

Tela de edição da despesa

	Projeto/Sistema: GERENCIAMENTO DE PROJETOS	Versão do Template: 1.2
	Processo: Tela de edição da despesa	Versão do Documento: 1.0
	Responsável(eis):  Jalile Cornachioni	Data:  25/08/2025

1. Objetivo geral:

2. Impacto previsto:

3. Descrição das alterações

#4 - Tela de edição da despesa

O objetivo da mudança é modernizar o layout da tela de edição de despesa, tornando a experiência do usuário mais clara, intuitiva e alinhada ao padrão visual atualizado do sistema.

3.1 Detalhes da tela

3.1.1 Header (Cabeçalho)

Objetivo: Apresentar de forma clara a identificação do título, status e ações principais.

• Título da página: Editar despesa  [Número da despesa]" (ex.: despesa 12345-1/3)
• Ícone indicando registro e anexo: Icon de relógio para indicar agendado e clips para títulos com anexo.
• Status do título: Label: "À vencer", "Vencido"
• Informações de criação: Label: "Criado em [Data] por [Usuário]" 

3.1.2 Informações da Despesa

• Fornecedor(campo bloqueado, apenas visualização).

• Número do Documento e Descrição.

• Conta, Categoria, Forma de Pagamento.

• Data de Vencimento.

• Valor da Despesa(com validações de edição).

• Pagamento Agendado
• Linha digitável

3.1.3 Alterações de valores

• Valor Original (bloqueado).

• Juros/Multa (editável conforme status).

• Desconto (editável conforme status).

• Valor da Despesa final (cálculo automático com destaque).

3.1.4 Informações adicionais

• Observação (texto livre).

• Comprovantes: upload de arquivos (limite de tamanho, extensões permitidas, múltiplos anexos).

3.1.5 Botões de ação:

• Salvar e Fechar: Salva alterações e fecha a tela voltando para a tela de listagem de despesas
• Salvar e Pagar : Salva alterações e abre tela de pagamento

4. Link do Protótipo 

5. Telas

©SOFTEN SISTEMAS 2025

 

 

 

 

Tela de pagamento

	Projeto/Sistema: Evolução do Produto GA - Interno	Versão do Template: 1.1
	Processo: Pagamento da despesa	Versão do Documento: 1.0
	Responsável(eis):  Jalile Cornachioni	Data:  25/08/2025

1. Objetivo geral:

2. Impacto previsto:

3. Descrição das alterações

3.1 Detalhes da tela

3.1.1 Header (Cabeçalho)

• Título: “Pagamento Conta”

3.1.2. Dados de Recebimento

• Data pagamento (campo obrigatório): campo de data com calendário para seleção.
• Conta: lista suspensa para escolha da conta de destino (ex.: Caixa, Banco).
• Total a pagar: Valor fixo baseado na soma do valor original dos títulos selecionados.
• Total pago: Valor a pagar, considerando juros e acréscimos.

3.1.3. Referente a estes pagamentos (Tabela de Títulos)

• Tabela listando os títulos selecionados para recebimento, com as seguintes colunas:
• Desc./Fornecedor: identificação do cliente ou descrição da despesa.
• Nº Documento: número do título/documento.
• Vencimento: data de vencimento do título.
• Valor Original: valor principal do título.
• Multa: campo editável para inserção de multa.
• Juros: campo editável para juros aplicados.
• Desconto: campo editável para descontos concedidos.
• Acréscimo: campo editável para acréscimos manuais.
• Valor a Pagmento: cálculo automático do valor final considerando os ajustes.

3.1.4. Ações do Rodapé

• Cancelar: retorna para a tela anterior sem efetivar o recebimento.
• Pagar: confirma a operação de baixa, aplicando os valores informados.

3.2 Comportamento geral da tela:

A tela deve abrir em modo edição com os campos:

• Data pagamento deve ser atribuído data atual e respeitar a configuração FInanceiro > Proibir lançamentos com data retroativa", ou seja, habilitar somente se este campo estiver desmarcado na configuração adicional do sistema.
• Todos os demais campos dever estar habilitados para edição, respeitando as configurações de usuário.
• Ao imputar valor nos campos de acréscimo, juros/multa e/ou desconto o sistema deve recalcular o valor no campo "Valor pagamento" (manter o funcionamento atual)

4. Link do Protótipo 

5. Telas