diff --git a/src/app/page.tsx b/src/app/page.tsx index 7003d39..51adb88 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -10,9 +10,41 @@ import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCar import FaqSplitText from '@/components/sections/faq/FaqSplitText'; import ContactCTA from '@/components/sections/contact/ContactCTA'; import FooterBase from '@/components/sections/footer/FooterBase'; -import { TrendingUp, Sparkles, DollarSign, Award, MessageSquare, Rocket, Users, ThumbsUp, Headphones, Zap, Crown } from 'lucide-react'; +import { TrendingUp, Sparkles, DollarSign, Award, MessageSquare, Rocket, Users, ThumbsUp, Headphones, Zap, Crown, BarChart3, PieChart, Wallet } from 'lucide-react'; +import { useState } from 'react'; +import Input from '@/components/form/Input'; export default function FinanceTrackPage() { + const [incomeAmount, setIncomeAmount] = useState(''); + const [incomeSource, setIncomeSource] = useState(''); + const [expenseAmount, setExpenseAmount] = useState(''); + const [expenseCategory, setExpenseCategory] = useState(''); + const [bankBalance, setBankBalance] = useState('12,500.00'); + const [monthlyIncome, setMonthlyIncome] = useState('8,000.00'); + const [monthlyExpenses, setMonthlyExpenses] = useState('3,200.00'); + + const handleAddIncome = () => { + if (incomeAmount && incomeSource) { + const newBalance = (parseFloat(bankBalance.replace(/,/g, '')) + parseFloat(incomeAmount)).toFixed(2); + const newIncome = (parseFloat(monthlyIncome.replace(/,/g, '')) + parseFloat(incomeAmount)).toFixed(2); + setBankBalance(newBalance.replace(/\B(?=(\d{3})+(?!\d))/g, ',')); + setMonthlyIncome(newIncome.replace(/\B(?=(\d{3})+(?!\d))/g, ',')); + setIncomeAmount(''); + setIncomeSource(''); + } + }; + + const handleAddExpense = () => { + if (expenseAmount && expenseCategory) { + const newBalance = (parseFloat(bankBalance.replace(/,/g, '')) - parseFloat(expenseAmount)).toFixed(2); + const newExpenses = (parseFloat(monthlyExpenses.replace(/,/g, '')) + parseFloat(expenseAmount)).toFixed(2); + setBankBalance(newBalance.replace(/\B(?=(\d{3})+(?!\d))/g, ',')); + setMonthlyExpenses(newExpenses.replace(/\B(?=(\d{3})+(?!\d))/g, ',')); + setExpenseAmount(''); + setExpenseCategory(''); + } + }; + return ( +
+
+
+
+

Your Financial Dashboard

+

Manage your income and expenses in real-time with our intuitive dashboard

+
+ +
+ {/* Income Entry Form */} +
+
+ +

Add Income

+
+
+ + + +
+
+ + {/* Expense Entry Form */} +
+
+ +

Add Expense

+
+
+ + + +
+
+ + {/* Bank Balance */} +
+
+ +

Bank Balance

+
+
${bankBalance}
+

Total available funds

+
+
+ + {/* Metrics Display */} +
+ {/* Monthly Income vs Expenses */} +
+
+ +

Monthly Income

+
+
${monthlyIncome}
+
+
+
+

Income this month

+
+ + {/* Monthly Expenses */} +
+
+ +

Monthly Expenses

+
+
${monthlyExpenses}
+
+
+
+

Expenses this month

+
+ + {/* Spending by Category */} +
+
+ +

Top Categories

+
+
+
+ Food & Dining + 35% +
+
+
+
+
+ Transport + 28% +
+
+
+
+
+ Other + 37% +
+
+
+
+
+
+
+
+
+
+