Despesas e Receitas

Dashboard de Despesas e Receitas

1. Descrição da Interface

O Dashboard de Despesas e Receitas éapresenta uma ferramenta de visualizaçãvisão financeiraabrangente projetadadas para gerenciar e monitorar finanças despesas e receitas relacionadas a umaà frota de veículos. AEsta interface apresenta diversos painéis com informações sobre transações financeiras organizadas por diferentes categorias e períodos.

A tela está estruturadaorganizada em seções verticais que mostram:

exibem

diferentes
• Totais de despesas e receitas dos últimos 12 meses
• Despesas e receitas por tipo
• Despesas e receitas por veículo
• Um gráfico comparativoaspectos das despesas e receitasreceitas, aotanto longopara doso meses
período
• Informaçõesatual detalhadasquanto dopara mêsos selecionado
últimos

12

Omeses. usoA tela possui uma estrutura de corespainéis é(cards) estratégicobem na interface,definida, com vermelhodados geralmentecategorizados representandopor despesastipo (valoresde negativos)despesa/receita e azul/roxopor representandoveículo, receitasalém (valoresde positivos). Percentuaisgráficos comparativos comque períodosfacilitam anterioresa sãoanálise destacadosfinanceira emda verde quando favoráveis e em vermelho quando desfavoráveis.frota.

2. Elementos da Interface

Seção Superior - TotaisDespesas dedos Últimos 12 mesesMeses

Despesas

1. TotalCabeçalho Totalização:

   • Exibe o valor total de Despesasdespesas - 12dos últimos 12 meses: Valor agregado (R$ -64.382,40)

2. Painel "Total de Despesas por Tipo - 12 mesesmeses":

   • Lista ordenadade despesas agrupadas por valor (decrescente)categorias
   • Colunas:Cada Posiçãolinha (1-18),inclui: Tiporanking, tipo de Despesa,despesa, Percentual,percentual, Valorvalor (R$)em reais
   • Tipos predominantes:de despesas incluem:
     • Alimentação,o Abastecimento Externo, Borracharia, etc.(80,75%)
     • ValoresAbastecimento possíveis:Externo Qualquer(4,35%)
     despesa
     • Borracharia categorizada(3,11%)
     no
     • Abastecimento sistemaInterno (2,72%)
     • E outras categorias com percentuais menores

3. Painel "Total de Despesas por Veículoculo":

   • Lista ordenadade despesas agrupadas por veículo
   • Cada linha inclui: ranking, placa/identificação do veículo, percentual, valor em reais
   • Itens organizados por valor (decrescente)de despesa em ordem decrescente
   • Colunas:Exemplos: PosiçãoOEB-2320 (1-16)73,03%), Placa/Identificação do Veículo, Percentual, ValorSLU-SD66 (R$8,55%)
   ,
   • ValoresNHY-3620 possíveis: Qualquer veículo cadastrado no sistema(3,88%)

Seção Intermediária - Receitas

 dos Últimos 12 Meses

1. Cabeçalho Totalização:

   • TotalExibe o valor total de Receitasreceitas - 12dos últimos 12 meses: Valor agregado (R$ 8.283,23)

2. Painel "Total de Receitas por Tipo - 12 mesesmeses":

   • Lista ordenadade receitas agrupadas por valor (decrescente)categorias
   • Colunas:Cada Posiçãolinha (1-2),inclui: Tiporanking, tipo de Receita,receita, Percentual,percentual, Valorvalor em reais
   • Tipos de receitas incluem:
     • Frete Durafix (R$69,34%)
     • Tipos: Frete Durafix, Frete Pago por Cliente
   • Painel de Receitas por Veículo:
     • Lista ordenada por valor (decrescente)
     • Colunas: Posição (1-2), Placa/Identificação do Veículo, Percentual, Valor (R$30,66%)

3. Painel "Total de Receitas por Veículo":

   • Lista de receitas agrupadas por veículo
   • Cada linha inclui: ranking, placa/identificação do veículo, percentual, valor em reais
   • Exemplos: SLU-SD66 (69,34%), ODX-1939 (30,66%)

Seção Central -de Gráfico Comparativo

1. Gráfico de Barras: "Despesas x Receitas dos 12 últimos mesesmeses":
   • Eixo X: Meses (formato04-2024 MM-YYYY)a 03-2025)
   • Eixo Y: Valores em R$reais
   • Barras azuis:em Receitas
   vermelho:
   • Barras vermelhas: Despesasdespesas (valores negativos)
   • LegendaBarras incluindoem totaisazul/roxo: receitas (valores positivos)
   • Legenda: "Receitas R$ 8.283,23,23" e "Despesas R$ -64.382,40)40"
   • Nota informativa:Instrução: "Clique no mês de uma receita/despesa para atualizar os quadros abaixo"
   • Valores específicos visíveis para alguns meses

Seção Inferior - Detalhamento dopor Mês Selecionado (11-2024)

Despesas

do
1. Mês

Cabeçalho Despesa Total:

• Despesa Total - [mês-ano]: Valor agregadototal da despesa do mês selecionado (ex: R$ 46.960,18)
• ComparativoPercentual de comparação com o mês anterior: Percentual e indicação (ex: +9.292,04%)
comparado

ao mês anterior)

Painel de "Despesas por Tipo - [mês-ano]11-2024":

• Lista ordenadade despesas do mês agrupadas por valor (decrescente)categorias
• Colunas:Cada Posição,linha Tipoinclui: ranking, tipo de Despesa,despesa, Percentual,percentual, Valorvalor em reais
• Destaque para Alimentação (96,25% - R$) 45.200,30)

Painel de "Despesas por Veículo - [mês-ano]11-2024":

• Lista ordenadade despesas do mês agrupadas por valor (decrescente)veículo
• Colunas:Cada Posição,linha Placa/Identificaçinclui: ranking, placa/identificação do Veíveículo, Percentual,percentual, Valorvalor em reais
• Destaque para OEB-2320 (96,32% - R$) 45.231,39)

Receitas

Cabeçalho doReceita Mês

Total:

• Receita Total - [mês-ano]: Valor agregadototal da receita do mês selecionado (ex: R$ 5.743,23)
• ComparativoPercentual de comparação com o mês anterior: Percentual e indicação (ex: +126,11%)
comparado

ao mês anterior)

Painel de "Receitas por Tipo - [mês-ano]11-2024":

• Lista com tipo de receita, percentual epercentual, valor em reais
• Apenas Frete Durafix (100% - R$ 5.743,23)

Painel de "Receitas por Veículo - [mês-ano]11-2024":

• Lista com identificação do veículo, percentual epercentual, valor em reais
• Apenas SLU-SD66 (100% - R$ 5.743,23)

ModalElementos Interativos

1. Botões de Detalhamentonavegação em cada painel (Pop-up)setas
   para
   • Título:rolar "Listaquando Despesas"há oumais "Lista Receitas"itens)
   • TabelaGráfico interativo - permite clicar em um mês para filtrar os dados
   • Links nos itens de Transaçõeslista:
     -
     • Colunas:ao #,clicar Tipo,em Nome,um Data,tipo Valor,de Placadespesa ou veículo, exibe uma janela popup com os detalhes daquele item
     • Dados: Detalhamento individualPopup de cadadetalhamento transaçã(não dovisível filtronas selecionadoimagens, mas referenciado no código)

3. Propósito e Fluxo de Trabalho

Propósito

O Dashboardpropósito dedesta Despesastela e Receitas tem como objetivo principalé fornecer uma visão abrangente e detalhadacompleta das finanças relacionadas à frota de veículos,frota, permitindo:

1. Monitorar o totalAnálise de despesastendências e- receitasatravés emdo diferentesgráfico períodosde 12 meses
2. Identificar padrõesIdentificação de gastos porprincipais categoria- visualizando os itens que mais impactam o orçamento
3. Comparação de eficiência entre veículos - detalhando receitas e despesas por veículounidade
4. CompararAcompanhamento desempenhode financeirovariações entremensais períodos- com indicadores percentuais de variação
5. AnalisarDetalhamento detalhadamentede transações específicas
6. Tomar- decisõesatravés baseadasda em dados para otimizaçãofuncionalidade de custos e aumento de receitaspopup

Fluxo de Trabalho

O fluxo de trabalho típico para utilização desta tela segue estes passos:

pico:

1. Visualização Geral (12 meses):

   • O usuário iniciaacessa visualizandoo dashboard para visualizar o panorama financeiro da frota
   • Analisa os totaisdados e distribuição de despesas e receitasconsolidados dos últimos 12 meses (parte superior)
   • Identifica categorias de despesas significativas e veículos com maiores custos

2. Análise Temporal:

   • O usuário examinaObserva o gráfico comparativo para identificar meses atípicos ou tendências e anomalias nos meses
   • Clica em um mês específico no gráfico para análiseanalisar detalhada
   em
   detalhe
3. Verifica

   Análise Detalhada (mês específico):

   • Os painéis inferiores atualizam mostrandoos dados específicosdetalhados do mês selecionado na parte inferior
   • OSe usuário analisa a distribuição de despesas e receitas daquele mês
   • Compara o desempenho com o mês anterior através dos percentuais comparativos

4. Detalhamento de Transações:

   • O usuárionecessário, clica em um tipo específico de despesa/receitadespesa ou veículo para ver as transações individuais
   • Um modal é aberto mostrando a lista completa de transações do filtro selecionado

5. Tomada de Decisão:

   • Com base nas análises, o usuário identifica oportunidades de redução de custos ou aumento de receitas
   • Pode ajustar estratégias de gestão da frota com base nos dados apresentados

4. InstruçõesGuia Passo a Passo

Como Navegar pelo Dashboard

1. VisualizarAcessar oso TotaisDashboard Geraisde Despesas:

   • AoNo entrarmenu naprincipal, tela,selecione observea opção "Dashboard de Despesas"
   • A tela carregará automaticamente os valoresdados dos últimos 12 meses

2. Analisar Dados Consolidados:

   • Observe os totais de despesas (R$ -64.382,40) e receitas (R$ 8.283,23) dos últimos 12 meses no topo da página.gina
   • Verifique as listas de "Total de Despesas por Tipo" e "Total de Despesas por Veículo"
   • Use as setas de navegação caso haja mais itens do que cabem na visualização

3. AnalisarConsultar DespesasDetalhes porde Tipouma eDespesa porou VeículoReceita:

   • ExamineClique osno painéisnome lateraisdo superiores para identificar os principais tipostipo de despesasdespesa/receita ou no nome do veículo
   • Um popup se abrirá mostrando todas as transações relacionadas
   • Na janela de detalhamento, você pode ver: número de índice, tipo, nome, data, valor e quais veículos estão gerando mais custos.
   • Os percentuais indicam a proporção de cada item em relação ao total.placa

4. Analisar ReceitasFiltrar por Tipo e por Veículo:

   • Da mesma forma, observe os painéis de receitas para entender as principais fontes de receita e quais veículos estão gerando mais entradas.

5. Explorar o Gráfico Temporal:

   • Observe o gráfico de barras central para identificar tendências nos últimos 12 meses.
   • Barras azuis representam receitas e barras vermelhas representam despesas.

6. Selecionar um Mês Específico:

   • Clique em uma barra (mês) noNo gráfico parade atualizarbarras os"Despesas x Receitas dos 12 últimos meses", clique na barra do mês desejado
   • Os painéis inferiores comserão atualizados automaticamente para mostrar apenas os dados daquele mês específico.
   • Note a atualização do título dos painéis inferiores para refletir o mês selecionado.

7. Analisar Dados do Mês Selecionado:

   • Observe o totalpercentual de despesas e receitas do mês, bem como a comparaçvariação percentualem comrelação oao mês anterior.
   • Examine a distribuição de despesas e receitas daquele mês específico nos painéis inferiores.

8. Visualizar Transações Detalhadas:

   • Clique em qualquer item nos painéis (tipo de despesa/receita ou veículo) para abrir um pop-up com a lista detalhada de transações.
   • Utilize a tabela no pop-up para analisar cada transação individual.anterior

9. Fechar o Pop-upPopups de DetalhesDetalhamento:

   • Clique no botão de fechar (X) ouno canto superior do popup
   • Ou clique fora da área do pop-up para retornar à visualização principal do dashboard.popup

Como FiltrarInterpretar e Analisaros Dados Específicos

1. Filtrar por TipoAnálise de Despesa/ReceitaTendências:

   • Use o gráfico de barras para identificar meses com despesas ou receitas atípicas
   • Compare os valores mensais para detectar padrões sazonais

2. Identificação de Problemas:

   • Observe os tipos de despesas com percentuais maiores
   • Verifique os veículos que estão gerando mais despesas em relação às suas receitas

3. Comparação de Desempenho:

   • Compare a proporção entre receitas e despesas para cada veículo
   • Identifique veículos que possam estar operando de forma ineficiente

Perguntas Frequentes

1. Como identificar o veículo que mais gera despesas?

No painel "Total de Despesas por Veículo", os veículos são listados em ordem decrescente de valor. O veículo no topo da lista é o que gerou mais despesas no período.

2. Como posso ver as transações individuais de um determinado tipo de despesa?

Clique no nome do tipo desejadode despesa (por exemplo, "ALIMENTAÇÃO") em qualquer um dos painéisis. paraUm visualizarpopup apenasserá asexibido transações daquela categoria.

O pop-up mostrarámostrando todas as transações relacionadas àqueledaquele tipo específico.

para o período

selecionado.

3. Por que alguns valores de despesas aparecem como negativos no gráfico?

FiltrarNo porcontexto Veículo:

financeiro

do
• Cliquesistema, nadespesas placa/identificaçsão representadas como valores negativos (saídas) e receitas como valores positivos (entradas), facilitando a visualização do veículoimpacto emno qualquercaixa.
  painel

  4. paraComo visualizarposso apenascomparar as transaçõesdespesas relacionadasde àqueleum veículo.

mês
• Oespecífico pop-upcom mostraráo todasmês as transações do veículo selecionado.

anterior?

Analisar Mês Específico:

• Clique no mês desejado no gráfico centralde parabarras. focarNa a análise naquele período.
• Os painéis inferiores serãseção atualizados automaticamente para mostrar os dados do mês selecionado.

Comparar com Mês Anterior:

• Observe os percentuais comparativosinferior, ao lado dos totais do mêsvalor selecionadototal, parao entendersistema exibe a variação percentual em relação ao mês anterior.
anterior
• Valores(por positivosexemplo, em"+9.292,04% verde indicam melhoria, enquanto valores negativos em vermelho indicam piora.

6. Perguntas Frequentes

Perguntas Gerais

1. Como faço para visualizar as despesas de um mês específico?

   • Clique na barra correspondentecomparado ao mês desejado no gráfico central "Despesas x Receitas dos 12 últimos meses"anterior"). Os painéis inferiores serão atualizados automaticamente.

2. Por que os valores de despesas aparecem com sinal negativo?

   5.

   Os valores de despesas são representados com sinal negativo para facilitar a visualização no gráfico comparativo, onde despesas e receitas são mostradas em direções opostas.

3. Como posso ver todas as despesas de um veículo específico?

   • Clique na linha correspondente ao veículo desejado em qualquer um dos painéis "Despesas por Veículo". Um pop-up será aberto mostrando todas as transações daquele veículo.

4. O que significa o percentual ao lado do valor total do mês?

   • Esse percentual indica a variação em relação ao mês anterior. Um valor positivo significa aumento e um valor negativo significa redução em relação ao mês anterior.

5. Como faço para ver os detalhes de um tipo específico de despesa?

   • Clique na linha correspondente ao tipo de despesa desejado em qualquer um dos painéis "Despesas por Tipo". Um pop-up será aberto com todas as transações daquele tipo.

Perguntas Técnicas

1. Por que algumas despesas não estão aparecendo no mês que foram registradas?

   • Para despesas parceladas, o sistema mostra a despesa no mês de pagamento de cada parcela, não no mês do registro inicial.

2. Como o sistema calcula o total de despesas dos últimos 12 meses?

   • O sistema soma todas as despesas não parceladas com data nos últimos 12 meses e adiciona as parcelas pagas no mesmo período para despesas parceladas.

3. É possível exportar esses dados para análise externa?

   O

   • Atualmentesistema a interfaceatualmente não oferecemostra funcionalidadeum diretabotão de exportação.o Contatevisível na interface. Consulte o administrador do sistema sobre recursos de exportação disponíveis.

     6. Como são calculados os percentuais em cada categoria?

     Os percentuais são calculados dividindo o valor de cada item pelo valor total da categoria. Por exemplo, se Alimentação representa R$ 45.200,30 de um total de R$ 46.960,18 em despesas, seu percentual será de aproximadamente 96,25%.

     7. Por que algumas despesas aparecem com 0,00%?

     Valores muito pequenos em relação ao total podem resultar em percentuais próximos a zero. O sistema arredonda esses valores para exibição, mas considera os valores reais nos cálculos.

     8. Posso filtrar por um veículo específico?

     A interface principal não mostra filtros diretos por veículo, mas ao clicar no nome do veículo nos painéis, você pode ver seus detalhes específicos.

     Regras de Negócio e Funcionamento Interno

     Carregamento de Dados

     O dashboard realiza várias chamadas ao servidor para obter extraçõesos diferentes conjuntos de dados. O processo começa com a função fetchDados() que é executada automaticamente quando o componente é montado. Esta função:

     1. Busca dados através da API REST "DashboardDespesas/Carregar"
     2. Recebe um objeto de resposta contendo todos os dados financeiros
     3. Processa os dados em vários subconjuntos para popular cada painel
     4. Calcula estatísticas como percentuais e totalizações

     Os dados são organizados em listas categorizadas:

     • graficoDespesasDoMes.analyticsData - despesas do mês por tipo
     • graficoReceitasDoMes.analyticsData - receitas do mês por tipo
     • graficoDespesasDoMes.analyticsDataPorVeiculo - despesas do mês por veículo
     • graficoReceitasDoMes.analyticsDataPorVeiculo - receitas do mês por veículo
     • totalListaDespesasPorTipo - despesas totais por tipo (12 meses)
     • totalListaReceitasPorTipo - receitas totais por tipo (12 meses)
     • listaTotalDespesasSomatorioPorVeiculo - despesas totais por veículo (12 meses)
     • listaTotalReceitasSomatorioPorVeiculo - receitas totais por veículo (12 meses)

     Filtragem por Período

     O sistema permite duas abordagens para filtrar dados por período:

     1. Filtro por parâmetro MesAno: Se um mês/ano específico for passado para a API, os dados retornados serão filtrados para aquele período.

     2. ComoFiltro sãpor clique no gráfico: Quando o tratadasusuário asclica despesasem semuma veículobarra associado?no gráfico, a função carregarDados(indiceGrafico) é chamada, que:

        • TodasExtrai aso despesasmês/ano nodo sistemaarray precisamlistaCategorias estarusando associadaso índice da barra clicada
        • Atualiza a umvariável veículo.labelMes Separa houverrefletir despesaso gerais,período elasselecionado
        devem
        • Chama serfetchDados() distribuídascom ouo associadasnovo aperíodo umpara veículoatualizar administrativo.todos os painéis

     Detalhamento de Transações

     O que acontece seQuando um veículousuário ouclica em um tipo de despesadespesa/receita for excluído do sistema?

     • O histórico de transações permanece no sistema, mas novas transações não poderão ser registradas com oou veículo ou tipo excluído.

   • Por queespecífico, o gráficosistema:

     mostra
     meses
     1. Determina emse quea nãsolicitação houveé transações?
        para
        o
        • Omês gráficoatual mostraou consistentementepara os últimos 12 meses,meses usando funções como fetchListaDespesaVeiculoMes() ou fetchListaDespesaVeiculo12Mes()
        • Define os parâmetros apropriados para a API (intervalo de datas, ID do veículo, tipo)
        • Faz a chamada à API e recebe uma lista detalhada de transações
        • Exibe as transações em um popup (controlado pelo objeto popupLista)

     Formatação de Valores

     O sistema utiliza funções de formatação para apresentar os valores de forma consistente:

     • formatarNumero() - formata números para exibição (ex: 1,234.56)
     • formatarMoedaReal() - formata valores monetários incluindo aqueleso semsímbolo da moeda (ex: R$ 1.234,56)

     Tratamento de Valores Parcelados

     O sistema considera tanto despesas normais quanto parceladas em seus cálculos. No backend, as consultas SQL recuperam:

     • Despesas normais (isPagamentoParcelado = 0) diretamente da tabela DespesasVeiculos
     • Pagamentos parcelados (isPagamentoParcelado = 1) através de junção com a tabela PagamentosDespesasReceitas

     Isso garante que todas as obrigações financeiras sejam refletidas corretamente, independentemente da forma de pagamento.

     Cálculo de Comparações

     O sistema oferece comparações porcentuais entre períodos:

     • Para o mês selecionado, mostra a variação percentual em relação ao mês anterior
     • O cálculo é feito através da fórmula: ((valorAtual/valorAnterior) - 1) * 100
     • Valores positivos indicam aumento, valores negativos indicam redução

     Por exemplo, uma despesa de R$ 46.960,18 em 11-2024 comparada com um valor menor no mês anterior resultou em +9.292,04% de aumento.

     Agrupamentos e Categorizações

     O sistema aplica diversas regras de negócio para categorizar transações, paraincluindo:

     manter
     a
     • Padronização continuidadede temporalnomes de tipos (ex: transformando "ABASTECIMENTOINTERNO" em "ABASTECIMENTO INTERNO")
     • Concatenação de placa e nome do veículo (ex: "placa / labelVeiculo")
     • Ordenação de listas por valor total em ordem decrescente
     • Cálculo de percentuais baseados no total da visualização.categoria

   Estes

processamentos garantem uma visualização consistente e significativa dos dados financeiros.