PASSO 1 DE 4 • RECEITAS & RENDA
Receitas & Entradas Financeiras
Informe os valores planejados (sua meta) e o que de fato entrou na sua conta neste período.
Informe os valores planejados (sua meta) e o que de fato entrou na sua conta neste período.
| Categoria | Tipo | Meta Prevista | Gasto Real | Variação (R$) | Variação (%) | Status |
|---|
Atue como um Arquiteto de Software Frontend Sênior e Especialista em UI/UX & Banco de Dados Client-Side.
<contexto>
Quero construir uma Single Page Application (SPA) moderna e interativa de Gestão Financeira Pessoal baseada na comparação entre Orçamento Previsto (Meta) e Orçamento Real (Executado), com suporte a relatórios, alertas inteligentes e persistência de dados robusta no navegador via IndexedDB.
</contexto>
<tecnologias>
- Frontend: React (com Vite) ou HTML5 + Tailwind CSS + TypeScript/JavaScript.
- UI & Componentes: Lucide React (ícones), Tailwind CSS, Framer Motion (animações).
- Gráficos: Chart.js ou Recharts.
- Banco de Dados Client-Side: IndexedDB via Dexie.js (ou API nativa window.indexedDB) para armazenamento local assíncrono e estruturado.
- Exportação & Relatórios: `jspdf` e `html2canvas` para PDF; utilitário em JS para CSV.
</tecnologias>
<estrutura_do_app>
### ETAPA 1: Assistente Guiado de Onboarding (Quiz Stepper)
Formulário dinâmico passo a passo com barra de progresso e botões de atalho (ex: "Não tenho essa despesa"):
1. Receitas & Renda: Salário Principal, Renda Secundária e Renda Extra (valores Previsto vs. Real).
2. Despesas Essenciais: Moradia, Transporte e Alimentação.
3. Estilo de Vida & Família: Lazer, Filhos/Dependentes, Pets, Saúde e Cuidados Pessoais.
4. Dívidas & Investimentos: Poupança/Investimentos, Empréstimos e Impostos.
- Botão Final: "Gerar Meu Painel Financeiro" com animação e gravação automática no IndexedDB.
### ETAPA 2: Dashboard de Resultados & Analytics
1. Top KPI Cards: Saldo Líquido Real, Aderência ao Orçamento e Taxa de Poupança (%).
2. Visualização Gráfica: Gráfico de Barras Duplas (Previsto vs. Real) e Gráfico de Rosca (Distribuição de Despesas).
3. Tabela Inteligente Dinâmica: Categoria (com ícone), Meta Prevista, Gasto Real, Variação (R$ e %) e Status.
</estrutura_do_app>
<funcionalidades_avancadas>
### 1. Camada de Persistência via IndexedDB (Dexie.js)
- **Banco de Dados Local (`FinanceDB`):**
- Tabela `orçamentos`: Salva sessões com `id`, `data`, `receitas`, `despesas`, `saldoReal`, `saldoPrevisto`.
- Tabela `configurações`: Armazena preferências do usuário (tema dark/light, metas padrão).
- **Recursos da Persistência:**
- Carregamento automático da última sessão ao reabrir a aplicação.
- Histórico de Orçamentos: Permite consultar, carregar ou excluir registros passados salvos no navegador.
- Sincronização e backup: Botões para "Exportar Banco de Dados (JSON)" e "Importar Banco de Dados (JSON)".
### 2. Motor de Alertas e Inteligência Financeira
- **Alertas Condicionais Automáticos:**
- *Estouro de Categoria:* Exibir card em destaque vermelho se alguma categoria ultrapassar 15% da meta prevista.
- *Taxa de Poupança Baixa:* Alerta amarelo se a taxa de investimento for inferior a 10% da receita.
- *Saldo Negativo:* Alerta crítico caso o gasto real supere a receita real.
- **Badge de Saúde Financeira:** Status dinâmico ("Excelente", "Atenção" ou "Crítico").
### 3. Módulo de Exportação de Relatórios (PDF / CSV)
- **Exportação CSV:** Gera um arquivo `.csv` bem formatado contendo categorias, metas, valores reais e variações.
- **Exportação PDF:** Gera um relatório executivo A4 limpo com data, índice de Saúde Financeira, KPIs e tabela detalhada.
</funcionalidades_avancadas>
<formato_saida>
Forneça o código completo e funcional da aplicação React/JS modular, incluindo a inicialização do esquema do Dexie.js/IndexedDB, pronta para execução imediata no navegador.
</formato_saida>