Tela de edição da despesa

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