import React, { useState, useEffect } from 'react'; import { PieChart, Pie, Cell, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'; import { CreditCard, TrendingUp, TrendingDown, DollarSign, Calendar, Plus, Settings, LogOut, Menu, X, Home, FileText, Wallet } from 'lucide-react'; // Mock data inicial const mockData = { user: { name: 'Usuário', email: 'usuario@email.com' }, balance: 5420.50, income: 6500.00, expenses: 3879.50, cards: [ { id: 1, name: 'Dígio F', closeDay: 10, dueDay: 17, balance: 850.00, color: '#8B5CF6' }, { id: 2, name: 'Dígio C', closeDay: 15, dueDay: 22, balance: 1200.00, color: '#3B82F6' }, { id: 3, name: 'Mercado Pago', closeDay: 5, dueDay: 12, balance: 650.00, color: '#10B981' }, { id: 4, name: 'Caixa F', closeDay: 20, dueDay: 27, balance: 430.00, color: '#F59E0B' } ], categories: { 'Moradia': ['Aluguel', 'Internet', 'Água', 'Energia'], 'Alimentação': ['Mercado', 'Restaurante', 'Lanche'], 'Transporte': ['Combustível', 'Uber', 'Manutenção'], 'Saúde': ['Farmácia', 'Consulta', 'Plano'], 'Lazer': ['Cinema', 'Streaming', 'Viagem'], 'Educação': ['Curso', 'Livro', 'Material'] }, transactions: [ { id: 1, date: '2026-01-10', description: 'Mercado', category: 'Alimentação', subcategory: 'Mercado', type: 'Cartão Crédito', card: 'Dígio F', amount: 350.00, installments: 1 }, { id: 2, date: '2026-01-08', description: 'TV Samsung', category: 'Lazer', subcategory: 'Cinema', type: 'Cartão Crédito', card: 'Mercado Pago', amount: 2400.00, installments: 12 }, { id: 3, date: '2026-01-05', description: 'Aluguel', category: 'Moradia', subcategory: 'Aluguel', type: 'Débito', card: '', amount: 1200.00, installments: 1 } ] }; const COLORS = ['#8B5CF6', '#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#EC4899']; export default function FinanceApp() { const [isLoggedIn, setIsLoggedIn] = useState(false); const [currentView, setCurrentView] = useState('dashboard'); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [data, setData] = useState(mockData); const [newTransaction, setNewTransaction] = useState({ date: new Date().toISOString().split('T')[0], description: '', category: '', subcategory: '', type: 'Cartão Crédito', card: '', amount: '', installments: 1 }); // Login const handleLogin = (e) => { e.preventDefault(); setIsLoggedIn(true); }; // Adicionar transação const handleAddTransaction = (e) => { e.preventDefault(); const transaction = { id: data.transactions.length + 1, ...newTransaction, amount: parseFloat(newTransaction.amount) }; setData({ ...data, transactions: [...data.transactions, transaction] }); setNewTransaction({ date: new Date().toISOString().split('T')[0], description: '', category: '', subcategory: '', type: 'Cartão Crédito', card: '', amount: '', installments: 1 }); alert('Lançamento adicionado com sucesso!'); }; // Dados para gráficos const categoryData = Object.keys(data.categories).map(cat => ({ name: cat, value: data.transactions .filter(t => t.category === cat) .reduce((sum, t) => sum + t.amount, 0) })).filter(d => d.value > 0); const monthlyData = [ { month: 'Nov', receitas: 6500, despesas: 4200 }, { month: 'Dez', receitas: 6500, despesas: 3950 }, { month: 'Jan', receitas: 6500, despesas: 3879.50 } ]; if (!isLoggedIn) { return (

Controle Financeiro

Organize suas finanças de forma simples

Versão Demo - Use qualquer email/senha para entrar

); } return (
{/* Header */}

Controle Financeiro

Saldo Geral: R$ {data.balance.toFixed(2)}
{/* Sidebar - Desktop */} {/* Mobile Navigation */}
{/* Main Content */}
{/* Dashboard */} {currentView === 'dashboard' && (

Dashboard

{/* Cards de Resumo */}
Receitas

R$ {data.income.toFixed(2)}

Despesas

R$ {data.expenses.toFixed(2)}

Saldo

R$ {data.balance.toFixed(2)}

{/* Gráficos */}

Despesas por Categoria

`${name} ${(percent * 100).toFixed(0)}%`} outerRadius={80} fill="#8884d8" dataKey="value" > {categoryData.map((entry, index) => ( ))}

Receitas vs Despesas

{/* Faturas dos Cartões */}

Faturas dos Cartões

{data.cards.map(card => (
{card.name}

R$ {card.balance.toFixed(2)}

Vence dia {card.dueDay}

))}
)} {/* Lançamentos */} {currentView === 'transactions' && (

Novo Lançamento

setNewTransaction({...newTransaction, date: e.target.value})} className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500" required />
setNewTransaction({...newTransaction, description: e.target.value})} className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500" placeholder="Ex: Mercado" required />
{newTransaction.type === 'Cartão Crédito' && (
)}
setNewTransaction({...newTransaction, amount: e.target.value})} className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500" placeholder="0.00" required />
setNewTransaction({...newTransaction, installments: parseInt(e.target.value)})} className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-purple-500" required />
{/* Lista de Transações */}

Últimos Lançamentos

{data.transactions.slice().reverse().map(transaction => (

{transaction.description}

{transaction.category} • {transaction.subcategory}

{new Date(transaction.date).toLocaleDateString('pt-BR')}

-R$ {transaction.amount.toFixed(2)}

{transaction.installments > 1 && (

{transaction.installments}x de R$ {(transaction.amount / transaction.installments).toFixed(2)}

)}
))}
)} {/* Cartões */} {currentView === 'cards' && (

Meus Cartões

{data.cards.map(card => (

{card.name}

Fatura Atual: R$ {card.balance.toFixed(2)}

Fechamento

Dia {card.closeDay}

Vencimento

Dia {card.dueDay}

))}
)} {/* Configurações */} {currentView === 'settings' && (

Configurações

Perfil