Expense Tracker

				
					// Add New Expense
const handleAddExpense = () => {
    if (expenseName && expenseAmount && expenseCategory && expenseDate) {
        setExpenses([...expenses, {
            name: expenseName,
            originalAmount: parseFloat(expenseAmount),
            amount: parseFloat(expenseAmount),
            category: expenseCategory,
            date: expenseDate,
        }]);
        setExpenseName(""); setExpenseAmount(""); setExpenseCategory(""); setExpenseDate("");
    }
};

// Fetch Currency Rates
const fetchCurrencyRates = async () => {
    const response = await fetch(`https://api.currencyapi.com/v3/latest?apikey=YOUR_API_KEY&base_currency=USD`);
    const result = await response.json();
    setCurrencyRate(result.data);
};

// Convert Expenses to Selected Currency
const convertExpense = (currency) => {
    if (currency && currencyRate[currency]) {
        const conversionRate = currencyRate[currency].value;
        const convertedAmount = expenses.map(exp => ({
            ...exp, amount: (exp.originalAmount * conversionRate).toFixed(2),
        }));
        setExpenses(convertedAmount);
    }
};

// Visualize Expenses by Category
const calculateCategoryTotals = () => {
    const totals = expenses.reduce((acc, exp) => {
        acc[exp.category] = (acc[exp.category] || 0) + exp.amount;
        return acc;
    }, {});
    return {
        labels: Object.keys(totals),
        datasets: [{
            data: Object.values(totals),
            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
        }],
    };
};

// Expense Chart


// Table to Display Expenses
<table>
    <thead>
        <tr>
            <th>Name</th><th>Amount ({selectedCurrency})</th><th>Category</th><th>Date</th><th>Actions</th>
        </tr>
    </thead>
    <tbody>
        {expenses.map((exp, i) =&gt; (
            <tr>
                <td>{exp.name}</td><td>{exp.amount}</td><td>{exp.category}</td><td>{exp.date}</td>
                <td><button> handleDeleteExpense(i)} className="btn btn-danger"&gt;Delete</button></td>
            </tr>
        ))}
    </tbody>
</table>