Expenses.js

import React, { useState, useContext } from 'react'; import { FinanceContext } from '../contexts/FinanceContext'; import ExpenseTracker from '../components/ExpenseTracker'; import numberToWords from '../utils/numberToWords'; function Expenses() { const [amount, setAmount] = useState(''); const [isSubmitting, setIsSubmitting] = useState(false); const { allocations, allocateFunds } = useContext(FinanceContext); const [isDarkMode, setIsDarkMode] = useState(false); const handleSubmit = (e) => { e.preventDefault(); const parsedAmount = parseFloat(amount); if (parsedAmount <= 0) { alert('Vui lòng nhập số tiền hợp lệ!'); return; } setIsSubmitting(true); setTimeout(() => { allocateFunds(parsedAmount); setIsSubmitting(false); setAmount(''); }, 1000); }; const toggleDarkMode = () => { setIsDarkMode(!isDarkMode); }; const formatVND = (value) => { return new Intl.NumberFormat('vi-VN', { style: 'currency', currency: 'VND' }).format(value); }; const totalAmount = parseFloat(allocations.essentials) + parseFloat(allocations.savings) + parseFloat(allocations.selfInvestment) + parseFloat(allocations.charity) + parseFloat(allocations.emergency); return (

Quản lý chi tiêu

Phân bổ ngân sách

Số tiền (VND) setAmount(e.target.value)} className={`w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500 transition ${ isDarkMode ? 'bg-gray-800 text-white border-gray-600' : 'bg-white text-gray-800 border-gray-300' }`} placeholder="Nhập số tiền" required min="1" />

Tiêu dùng thiết yếu (50%)

{formatVND(allocations.essentials)}

Tiết kiệm bắt buộc (20%)

{formatVND(allocations.savings)}

Đầu tư bản thân (15%)

{formatVND(allocations.selfInvestment)}

Từ thiện (5%)

{formatVND(allocations.charity)}

Dự phòng linh hoạt (10%)

{formatVND(allocations.emergency)}

{totalAmount > 0 && (

Tổng số tiền

{formatVND(totalAmount)}

{numberToWords(totalAmount)}

)}

); } export default Expenses;