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.