Total Budget: $${data.budget.toFixed(2)}

Total Spent: $${totalSpent.toFixed(2)}

Remaining: $${remaining.toFixed(2)}

`; const categoryTotals = data.categories.map(cat => { const total = data.expenses.filter(ex => ex.category === cat).reduce((sum, ex) => sum + ex.amount, 0); return { category: cat, total }; }); getElement('summary-by-category').innerHTML = ` ${categoryTotals.map(cat => ` `).join('')}

${cat.category}

$${cat.total.toFixed(2)}

`; }; // --- Event Handlers --- const handleBudgetChange = (e) => { const newBudget = parseFloat(e.target.value); if (!isNaN(newBudget) && newBudget >= 0) { data.budget = newBudget; saveData(); renderAll(); } }; const handleAddExpense = (e) => { e.preventDefault(); const desc = getElement('expense-desc').value; const amount = parseFloat(getElement('expense-amount').value); const category = getElement('expense-category').value; if (desc && amount > 0 && category) { data.expenses.push({ id: Date.now(), desc, amount, category }); saveData(); renderAll(); e.target.reset(); } }; const handleDeleteExpense = (e) => { if (e.target.classList.contains('delete-expense-btn')) { const expenseId = parseInt(e.target.dataset.id); data.expenses = data.expenses.filter(ex => ex.id !== expenseId); saveData(); renderAll(); } }; const generatePDF = () => { const content = getElement('pdf-content'); if (!content) return; content.classList.add('pdf-mode'); html2canvas(content, { scale: 2 }).then(canvas => { content.classList.remove('pdf-mode'); const imgData = canvas.toDataURL('image/png'); const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const ratio = canvas.width / canvas.height; const pdfImgWidth = pdfWidth - 20; const pdfImgHeight = pdfImgWidth / ratio; pdf.addImage(imgData, 'PNG', 10, 10, pdfImgWidth, pdfImgHeight); pdf.save('Project_Budget_Summary.pdf'); }); }; // --- Initial Setup & Event Listeners --- tabs.forEach(tab => { tab.addEventListener('click', () => { const tabNum = tab.dataset.tab; tabs.forEach(t => t.classList.remove('active')); tab.classList.add('active'); tabContents.forEach(c => c.classList.remove('active')); getElement(`tab-${tabNum}`).classList.add('active'); }); }); getElement('total-budget').addEventListener('change', handleBudgetChange); getElement('add-expense-form').addEventListener('submit', handleAddExpense); getElement('transaction-list').addEventListener('click', handleDeleteExpense); getElement('download-pdf-btn').addEventListener('click', generatePDF); loadData(); renderAll(); });