Skip to content

README.md

Latest commit

 

History

History
200 lines (144 loc) · 5.21 KB

README.md

File metadata and controls

200 lines (144 loc) · 5.21 KB

Dashboard Financeiro 2.0

Dashboard Financeiro 2.0 é um painel moderno para visualização de receitas, despesas e saldo, com suporte a múltiplas moedas, filtros avançados, gráficos interativos e exportação de dados.

O foco é simular um dashboard enterprise, com arquitetura modular em JavaScript, temas Dark e Light e uma experiência fluida em desktop e mobile.

📸 Print do projeto

Adicione aqui um print da tela principal do dashboard (exemplo):

/screenshots/dashboard-financeiro-2.0.png

Sugestão:

  • Tire um print em resolução alta (ex: 1440x900)
  • Use o tema Dark e/ou Light
  • Salve em /screenshots/dashboard-financeiro-2.0.png

🧩 Tecnologias utilizadas

  • HTML5 – marcação semântica do layout
  • CSS3 – layout responsivo, temas dark/light e animações suaves
  • JavaScript (ES6+) – lógica de negócio e orquestração
  • Chart.js (via CDN) – gráficos de linha, barra e pizza
  • Intl API – formatação de valores monetários
  • LocalStorage – persistência do tema (dark/light)

✨ Features

🎨 UI / UX

  • Tema Dark e Light com troca instantânea
  • Layout inspirado em dashboards enterprise
  • Sidebar fixa com navegação e botão de tema
  • Topbar com filtros principais
  • Cards de KPI com estados visuais (positivo, negativo, neutro)
  • Layout responsivo (desktop, tablet, mobile)
  • Animações suaves de entrada e microinterações (hover, foco)

📊 Métricas e KPIs

  • Total de receita
  • Total de despesas
  • Saldo (receitas - despesas)
  • Ticket médio por transação
  • Percentual de crescimento (comparação entre metades do período)

🔍 Filtros

  • Período: data inicial e data final
  • Categoria (Alimentação, Saúde, Lazer, Moradia, Transporte)
  • Tipo (Receita / Despesa)
  • Moeda de exibição: BRL / USD / EUR
  • Busca por descrição na tabela

📈 Gráficos (Chart.js)

  • Linha: evolução diária ou mensal do saldo
  • Barra: comparação entre total de receitas e total de despesas
  • Pizza (doughnut): distribuição por categoria

📋 Tabela de transações

  • Listagem de transações com:
    • ID
    • Descrição
    • Categoria
    • Tipo (Receita / Despesa)
    • Data
    • Valor (convertido para a moeda selecionada)
    • Moeda original
    • Status (Pago / Pendente) com badges visuais
  • Ordenação por coluna (ID, descrição, categoria, tipo, data, valor, moeda, status)
  • Busca por descrição
  • Contador de transações filtradas

📤 Exportação CSV

  • Exporta as transações filtradas para CSV
  • Inclui:
    • Valor original
    • Moeda original
    • Moeda de exibição
    • Valor convertido
  • Arquivo gerado com nome:
    • dashboard-financeiro-{moeda}.csv

🧠 Dados fake automáticos

  • Geração automática de 20 a 40 transações fake
  • Cada transação contém:
    • id
    • descricao
    • categoria
    • tipo (receita/despesa)
    • valor
    • data
    • moeda (BRL, USD, EUR)
    • status (pago/pendente)
  • Distribuição de datas nos últimos 90 dias

📁 Estrutura de pastas

dashboard-financeiro-2-0/
├─ index.html
├─ README.md
├─ css/
│  ├─ dashboard-dark.css
│  └─ dashboard-light.css
└─ js/
   ├─ api.js
   ├─ app.js
   ├─ charts.js
   ├─ filters.js
   ├─ table.js
   ├─ theme.js
   └─ ui.js

Opcional: pasta /screenshots para armazenar imagens do projeto.

🚀 Como rodar o projeto

Opção 1 – Abrir direto no navegador

  1. Baixe ou clone o repositório.
  2. Abra o arquivo index.html diretamente no navegador (duplo clique).
  3. Certifique-se de manter a estrutura de pastas (css/ e js/) intacta.

Chart.js é carregado via CDN, então é necessário ter conexão com a internet ao abrir o dashboard.

Opção 2 – Rodar com um servidor local simples

Isso evita problemas de caminho e simula melhor um ambiente real.

Com Node.js (http-server)

# Instalar globalmente, se ainda não tiver
npm install -g http-server

# Na pasta do projeto
http-server .

# Acesse no navegador
http://localhost:8080

Com VS Code (Live Server)

  1. Instale a extensão Live Server.
  2. Clique com o botão direito em index.html → Open with Live Server.
  3. O navegador abrirá o dashboard automaticamente.

🔗 Link para deploy (sugestão)

Você pode fazer o deploy facilmente em:

  • GitHub Pages
  • Vercel
  • Netlify

Exemplo de URL (ajuste para o seu repositório):

  • https://seu-usuario.github.io/dashboard-financeiro-2-0/

🗺️ Roadmap futuro

Ideias para evoluir o Dashboard Financeiro 2.0:

  • Persistir as transações em LocalStorage (ou backend real)
  • CRUD de transações (adicionar/editar/excluir)
  • Importar CSV para alimentar o dashboard
  • Múltiplos perfis de usuário
  • Autenticação (login simples)
  • Tema adicional “Creative Premium”
  • Modo de comparação entre períodos (ex: mês a mês)
  • Exportação em PDF com layout de relatório
  • Integração com uma API real de câmbio (ex: exchangerate API)

👤 Autor

  • Dashboard Financeiro 2.0
  • Desenvolvido como projeto de estudo e demonstração de um dashboard financeiro moderno e modular em front-end.