**Contas a Pagar** do módulo Financeiro foi redesenhado para melhorar a clareza das informações, reduzir tempo de operação, evitar frustrações comuns relatadas por usuários e garantir boas práticas do mercado.
#### **2. Impacto previsto:**
\#1 - Tela de listagem de despesas
\#2 - Tela de nova despesa
\#3 - Tela de visualização (apenas para despesa paga)
\#4 - Tela de edição
\#5 - Tela de pagamento
#### **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\]*
[](https://docs.softensistemas.com.br/uploads/images/gallery/2025-08/modelo-68-2.png)
**Configuração visual e cores:**
- - - 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.
**OBS**.: todos os ícones estão dentro de um círculo de mesma cor com 10% de opacidade.
**Comportamento**:
- 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.
[](https://docs.softensistemas.com.br/uploads/images/gallery/2025-08/toUmodelo-78.png)
##### **3.3 Sessão de filtros** *\[funcionalidade existente - manter conforme protótipo\]*
**Comportamento**: Estado inicial = Painel de filtros expandido (expanded) ao carregar a tela.
Campos e valores padrão:
- 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**
**Descrição e Comportamento**: A Grid deve conter o título "Lista de Contas a Pagar" e botões de acesso rápido:
- **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:**
**Descrição**: Coluna adicionada à Lista de Contas a Pagar, exibe três ícones representando atributos específicos de cada título, sendo Regsitrado, Agendado e Anexo.
**Comportamento**:
- - 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)
OBS.:
- 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
[Listagem de contas a pagar](https://www.figma.com/design/mN0I8GyW16Nio4YwGf82b1/Melhorias-Clarity?node-id=1394-140266&t=Wg3NsYpjUtd9g1Ng-0)
**Projeto/Sistema:**
[Evolução do Produto GA - Interno](https://docs.softensistemas.com.br/shelves/evolucao-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:**
**Contas a Pagar** do módulo Financeiro foi redesenhado para melhorar a clareza das informações, reduzir tempo de operação, evitar frustrações comuns relatadas por usuários e garantir boas práticas do mercado.
#### **2. Impacto previsto:**
\#1 - Tela de listagem de despesas
\#2 - Tela de nova despesa
\#3 - Tela de visualização (apenas para despesa paga)
\#4 - Tela de edição
\#5 - Tela de pagamento
#### **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.
[](https://docs.softensistemas.com.br/uploads/images/gallery/2025-08/image-1756133290280.png)
**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
**Contas a Pagar** do módulo Financeiro foi redesenhado para melhorar a clareza das informações, reduzir tempo de operação, evitar frustrações comuns relatadas por usuários e garantir boas práticas do mercado.
#### **2. Impacto previsto:**
\#1 - Tela de listagem de despesas
\#2 - Tela de nova despesa
\#3 - Tela de visualização (apenas para despesa paga)
\#4 - Tela de edição
\#5 - Tela de pagamento
#### **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
**Contas a Pagar** do módulo Financeiro foi redesenhado para melhorar a clareza das informações, reduzir tempo de operação, evitar frustrações comuns relatadas por usuários e garantir boas práticas do mercado.
#### **2. Impacto previsto:**
\#1 - Tela de listagem de despesas
\#2 - Tela de nova despesa
\#3 - Tela de visualização (apenas para despesa paga)
\#4 - Tela de edição
\#5 - Tela de pagamento
#### **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
[Edição da despesa](https://www.figma.com/design/mN0I8GyW16Nio4YwGf82b1/Melhorias-Clarity?node-id=1611-4799&t=Wg3NsYpjUtd9g1Ng-0)
**Projeto/Sistema:**
[Evolução do Produto GA - Interno](https://docs.softensistemas.com.br/shelves/evolucao-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:**
Contas a Pagar do módulo Financeiro foi redesenhado para melhorar a clareza das informações, reduzir tempo de operação, evitar frustrações comuns relatadas por usuários e garantir boas práticas do mercado.
#### **2. Impacto previsto:**
\#1 - Tela de listagem de despesas
\#2 - Tela de nova despesa
\#3 - Tela de visualização (apenas para despesa paga)
\#4 - Tela de edição
\#5 - Tela de pagamento
#### **3. Descrição das alterações**
**\#5 - Tela de pagamento**
A tela de **Pagamento de Despesa** foi modernizada para oferecer uma experiência mais clara e eficiente no processo de baixa de títulos, permitindo tanto o pagamento unitário quanto múltiplo. A nova interface organiza informações essenciais (valor original, multa, juros, desconto, acréscimos e valor final a pagar) de forma intuitiva
##### 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
[Pagamento de despesa](https://www.figma.com/design/mN0I8GyW16Nio4YwGf82b1/Melhorias-Clarity?node-id=1611-2812&t=Wg3NsYpjUtd9g1Ng-0)