Target Date: ${new Date(goal.targetDate+"T00:00:00").toLocaleDateString()} | Req. Monthly Saving: ${formatCurrency(reqMonthly)}

Your Plan: Allocate ${formatCurrency(goal.plannedMonthlyAllocation)}/month

Est. Time (Your Plan): ${estMonthsWithPlan === Infinity ? (remaining === 0 ? 'Achieved' : 'Never') : estMonthsWithPlan + ' months'} | Est. Completion: ${projectedDateWithPlan}

`; goalsListContainerEl.appendChild(card); }); goalsListContainerEl.querySelectorAll('.remove-item-btn').forEach(btn => { btn.addEventListener('click', e => { goals = goals.filter(g => g.id !== parseInt(e.target.dataset.id)); renderGoalsList(); updateFullSummary(); }); }); } // --- Budget Management (Tab 2 - Income, Fixed, Variable) --- // Generic add item to budget list function addBudgetItem(type, nameInputEl, amountInputEl, frequencySelectEl = null) { const name = nameInputEl.value.trim(); const amount = parseFloat(amountInputEl.value) || 0; if (!name || amount <= 0) { alert("Please enter a valid name and amount."); return; } let monthlyAmount = amount; const item = { id: Date.now(), name, amount }; if (type === 'income' && frequencySelectEl) { item.frequency = frequencySelectEl.value; if (item.frequency === 'weekly') monthlyAmount = amount * (52/12); else if (item.frequency === 'bi-weekly') monthlyAmount = amount * (26/12); } item.monthlyAmount = monthlyAmount; // Store calculated monthly amount if (type === 'income') incomeSources.push(item); else if (type === 'fixed') fixedExpenses.push(item); else if (type === 'variable') variableExpenses.push(item); // For variable, amount IS monthly budget renderBudgetLists(); updateFullSummary(); nameInputEl.value = ''; amountInputEl.value = ''; if (frequencySelectEl) frequencySelectEl.value = 'monthly'; } if(addIncomeBtn) addIncomeBtn.addEventListener('click', () => addBudgetItem('income', incomeSourceNameInput, incomeAmountInput, incomeFrequencySelect)); if(addFixedExpenseBtn) addFixedExpenseBtn.addEventListener('click', () => addBudgetItem('fixed', fixedExpenseNameInput, fixedExpenseAmountInput)); if(addVariableExpenseBtn) addVariableExpenseBtn.addEventListener('click', () => addBudgetItem('variable', variableCategoryNameInput, variableBudgetAmountInput)); function renderBudgetLists() { renderList(incomeSources, incomeListEl, 'income', item => `${item.name}: ${formatCurrency(item.amount)} (${item.frequency || 'monthly'}) -> ${formatCurrency(item.monthlyAmount)}/mo`); renderList(fixedExpenses, fixedExpenseListEl, 'fixed', item => `${item.name}: ${formatCurrency(item.amount)}/mo`); renderList(variableExpenses, variableExpenseListEl, 'variable', item => `${item.name}: ${formatCurrency(item.amount)}/mo budgeted`); totalMonthlyIncomeDisplayEl.textContent = formatCurrency(incomeSources.reduce((sum, s) => sum + s.monthlyAmount, 0)); totalMonthlyFixedDisplayEl.textContent = formatCurrency(fixedExpenses.reduce((sum, s) => sum + s.amount, 0)); // Fixed expenses assumed entered as monthly totalMonthlyVariableDisplayEl.textContent = formatCurrency(variableExpenses.reduce((sum, s) => sum + s.amount, 0)); } function renderList(items, element, type, displayFn) { if (!element) return; element.innerHTML = ''; if (items.length === 0) { element.innerHTML = `

No ${type} items yet.

`; return;} items.forEach(item => { const div = document.createElement('div'); div.classList.add('budget-item'); div.innerHTML = `${displayFn(item)} ×`; element.appendChild(div); }); element.querySelectorAll('.remove-item-btn').forEach(btn => { btn.addEventListener('click', e => { const id = parseInt(e.target.dataset.id); const itemType = e.target.dataset.type; if (itemType === 'income') incomeSources = incomeSources.filter(i => i.id !== id); else if (itemType === 'fixed') fixedExpenses = fixedExpenses.filter(i => i.id !== id); else if (itemType === 'variable') variableExpenses = variableExpenses.filter(i => i.id !== id); renderBudgetLists(); updateFullSummary(); }); }); } // --- Summary Tab & Full Update Logic --- function updateFullSummary() { const totalIncome = incomeSources.reduce((sum, s) => sum + s.monthlyAmount, 0); const totalFixed = fixedExpenses.reduce((sum, s) => sum + s.amount, 0); const totalVariable = variableExpenses.reduce((sum, s) => sum + s.amount, 0); const discretionary = totalIncome - totalFixed - totalVariable; const totalGoalAllocations = goals.reduce((sum, g) => sum + g.plannedMonthlyAllocation, 0); const netSurplus = discretionary - totalGoalAllocations; if(summaryIncomeEl) summaryIncomeEl.textContent = formatCurrency(totalIncome); if(summaryFixedExpensesEl) summaryFixedExpensesEl.textContent = formatCurrency(totalFixed); if(summaryVariableExpensesEl) summaryVariableExpensesEl.textContent = formatCurrency(totalVariable); if(summaryDiscretionaryIncomeEl) summaryDiscretionaryIncomeEl.textContent = formatCurrency(discretionary); if(summaryGoalAllocationsEl) summaryGoalAllocationsEl.textContent = formatCurrency(totalGoalAllocations); if(summaryNetSurplusEl) { summaryNetSurplusEl.textContent = formatCurrency(netSurplus); summaryNetSurplusEl.classList.remove('positive', 'negative', 'neutral'); if (netSurplus > 0) summaryNetSurplusEl.classList.add('positive'); else if (netSurplus < 0) summaryNetSurplusEl.classList.add('negative'); else summaryNetSurplusEl.classList.add('neutral'); } renderGoalProgressTable(); } function renderGoalProgressTable() { if(!goalProgressContainerEl) return; goalProgressContainerEl.innerHTML = ''; if (goals.length === 0) { goalProgressContainerEl.innerHTML = '

Add goals and planned allocations to see progress projections.

'; return; } const table = document.createElement('table'); table.innerHTML = ` Goal NameTargetSavedRemaining Target DateReq. Savings/Mo Your Plan/MoEst. Months (Plan)Est. Completion (Plan) `; const tbody = document.createElement('tbody'); goals.sort((a,b) => (a.priority === "High" ? -1 : (a.priority === "Low" ? 1 : 0)) - (b.priority === "High" ? -1 : (b.priority === "Low" ? 1 : 0)) || new Date(a.targetDate) - new Date(b.targetDate) ); goals.forEach(goal => { const row = tbody.insertRow(); const remaining = Math.max(0, goal.targetAmount - goal.currentSaved); const targetDt = new Date(goal.targetDate+"T00:00:00"); const monthsToTarget = getMonthsBetween(CURRENT_SYSTEM_DATE, targetDt); const reqMonthly = (monthsToTarget > 0 && remaining > 0) ? remaining / monthsToTarget : (remaining > 0 ? remaining : 0); const estMonthsWithPlan = (goal.plannedMonthlyAllocation > 0 && remaining > 0) ? Math.ceil(remaining / goal.plannedMonthlyAllocation) : Infinity; const projectedDateWithPlan = estMonthsWithPlan !== Infinity ? addMonthsToDate(CURRENT_SYSTEM_DATE, estMonthsWithPlan).toLocaleDateString() : (remaining === 0 ? "Achieved!" : "Never at this rate"); row.insertCell().textContent = goal.name; row.insertCell().textContent = formatCurrency(goal.targetAmount); row.insertCell().textContent = formatCurrency(goal.currentSaved); row.insertCell().textContent = formatCurrency(remaining); row.insertCell().textContent = targetDt.toLocaleDateString(); row.insertCell().textContent = formatCurrency(reqMonthly); row.insertCell().textContent = formatCurrency(goal.plannedMonthlyAllocation); row.insertCell().textContent = estMonthsWithPlan === Infinity ? (remaining === 0 ? 'Done' : 'N/A') : `${estMonthsWithPlan}`; row.insertCell().textContent = projectedDateWithPlan; }); table.appendChild(tbody); goalProgressContainerEl.appendChild(table); } // --- PDF Download --- if(downloadPdfBtn) { downloadPdfBtn.addEventListener('click', () => { if (typeof jsPDF === 'undefined') { alert('PDF library (jsPDF) is not loaded.'); return; } const doc = new jsPDF('p', 'pt', 'letter'); // Using points for better control, letter size if (typeof doc.autoTable !== 'function') { alert('PDF table library (jspdf-autotable) is not loaded correctly.'); return; } const currentCurrency = currencySymbolInput.value || '$'; const pageWidth = doc.internal.pageSize.getWidth(); const margin = 40; // Points let yPos = margin; const todayFormatted = CURRENT_SYSTEM_DATE.toLocaleDateString(); // Header doc.setFontSize(18); doc.setTextColor(document.documentElement.style.getPropertyValue('--primary-color') || '#007bff'); doc.text("My Financial Goal & Budget Plan", pageWidth / 2, yPos, { align: 'center' }); yPos += 15; doc.setFontSize(9); doc.setTextColor(100); doc.text(`Date Created: ${todayFormatted} | Currency: ${currentCurrency}`, pageWidth / 2, yPos, { align: 'center' }); yPos += 25; function addPdfSectionTitle(title) { if (yPos > doc.internal.pageSize.getHeight() - 60) { doc.addPage(); yPos = margin; } doc.setFontSize(14); doc.setTextColor(document.documentElement.style.getPropertyValue('--primary-darker-color') || '#0056b3'); doc.text(title, margin, yPos); yPos += 15; doc.setFontSize(10); doc.setTextColor(40); } // Section 1: Financial Goals Summary addPdfSectionTitle("1. Financial Goals Summary"); if (goals.length > 0) { const goalTableHead = [['Goal', 'Target', 'Saved', 'Remaining', 'Target Date', 'Req/Mo', 'Plan/Mo', 'Est.Mos', 'Est.Comp']]; const goalTableBody = goals.map(g => { const remaining = Math.max(0, g.targetAmount - g.currentSaved); const targetDt = new Date(g.targetDate+"T00:00:00"); const monthsToTarget = getMonthsBetween(CURRENT_SYSTEM_DATE, targetDt); const reqMonthly = (monthsToTarget > 0 && remaining > 0) ? remaining / monthsToTarget : (remaining > 0 ? remaining : 0); const estMonthsWithPlan = (g.plannedMonthlyAllocation > 0 && remaining > 0) ? Math.ceil(remaining / g.plannedMonthlyAllocation) : Infinity; const projectedDateWithPlan = estMonthsWithPlan !== Infinity ? addMonthsToDate(CURRENT_SYSTEM_DATE, estMonthsWithPlan).toLocaleDateString([],{month:'short', day:'numeric', year:'2-digit'}) : (remaining===0 ? "Achieved" : "Never"); return [ g.name, formatCurrency(g.targetAmount, currentCurrency), formatCurrency(g.currentSaved, currentCurrency), formatCurrency(remaining, currentCurrency), targetDt.toLocaleDateString([],{month:'short', day:'numeric', year:'2-digit'}), formatCurrency(reqMonthly, currentCurrency), formatCurrency(g.plannedMonthlyAllocation, currentCurrency), estMonthsWithPlan === Infinity ? (remaining === 0 ? 'Done': 'N/A') : estMonthsWithPlan, projectedDateWithPlan ]; }); doc.autoTable({ head: goalTableHead, body: goalTableBody, startY: yPos, theme: 'grid', headStyles: { fillColor: [0, 123, 255], fontSize: 8 }, bodyStyles: { fontSize: 7, cellPadding: 2 }, columnStyles: { 0: {cellWidth: 80}, // Goal 1: {cellWidth: 50, halign: 'right'},2: {cellWidth: 50, halign: 'right'},3: {cellWidth: 50, halign: 'right'}, // Amounts 4: {cellWidth: 50, halign: 'center'}, // Target Date 5: {cellWidth: 45, halign: 'right'},6: {cellWidth: 45, halign: 'right'}, // Savings 7: {cellWidth: 35, halign: 'center'},8: {cellWidth: 50, halign: 'center'} // Est }, didDrawPage: (data) => { yPos = data.cursor.y ; } }); yPos = doc.lastAutoTable.finalY + 15; } else { doc.text("No financial goals defined.", margin, yPos); yPos +=15; } // Section 2: Monthly Budget Snapshot addPdfSectionTitle("2. Monthly Budget Snapshot"); const totalIncome = incomeSources.reduce((sum, s) => sum + s.monthlyAmount, 0); const totalFixed = fixedExpenses.reduce((sum, s) => sum + s.amount, 0); const totalVariable = variableExpenses.reduce((sum, s) => sum + s.amount, 0); const discretionary = totalIncome - totalFixed - totalVariable; doc.autoTable({ startY: yPos, body: [ ["Total Monthly Income:", formatCurrency(totalIncome, currentCurrency)], ["Total Monthly Fixed Expenses:", formatCurrency(totalFixed, currentCurrency)], ["Total Budgeted Variable Expenses:", formatCurrency(totalVariable, currentCurrency)], [{content: "Discretionary Income (Before Goal Savings):", styles: {fontStyle:'bold'}}, formatCurrency(discretionary, currentCurrency)] ], theme: 'plain', columnStyles: {0: {fontStyle:'bold'}}, didDrawPage: (data) => { yPos = data.cursor.y ; } }); yPos = doc.lastAutoTable.finalY + 15; // Section 3: Overall Financial Position addPdfSectionTitle("3. Overall Financial Position"); const totalGoalAllocations = goals.reduce((sum, g) => sum + g.plannedMonthlyAllocation, 0); const netSurplus = discretionary - totalGoalAllocations; doc.autoTable({ startY: yPos, body: [ ["Discretionary Income:", formatCurrency(discretionary, currentCurrency)], ["Total Planned Monthly Goal Allocations:", formatCurrency(totalGoalAllocations, currentCurrency)], [{content: "Net Estimated Monthly Surplus / (Shortfall):", styles: {fontStyle:'bold', fontSize:11}}, {content: formatCurrency(netSurplus, currentCurrency), styles: {fontStyle:'bold', fontSize:11, textColor: netSurplus >=0 ? [34,139,34] : [220,53,69] }}] ], theme: 'striped', columnStyles: {0: {fontStyle:'bold'}}, didDrawPage: (data) => { yPos = data.cursor.y ; } }); doc.save('Financial_Goal_Budget_Plan.pdf'); }); } // Initial Load if(targetDateInput) targetDateInput.min = new Date(CURRENT_SYSTEM_DATE.getFullYear(), CURRENT_SYSTEM_DATE.getMonth(), CURRENT_SYSTEM_DATE.getDate() + 1).toISOString().split('T')[0]; showTab(0); renderGoalsList(); renderBudgetLists(); updateFullSummary(); updateGoalFormCalculations(); // Initialize goal form calculation display });