$${exp.amount.toFixed(2)}
`;
elements.list.appendChild(item);
});
calculateTotal();
};
const calculateTotal = () => {
const total = expenses.reduce((sum, exp) => sum + exp.amount, 0);
elements.totalAmount.textContent = `$${total.toFixed(2)}`;
};
const addExpense = () => {
hideError();
const type = elements.expenseType.value;
const description = elements.expenseDescription.value.trim();
const date = new Date(elements.expenseDate.value).toLocaleDateString('en-US', {timeZone: 'UTC'});
let amount = parseFloat(elements.expenseAmount.value);
if (!description || !date) {
displayError("Please fill in the date and description."); return;
}
if (type === 'mileage') {
const distance = parseFloat(elements.mileageDistance.value);
if (isNaN(distance) || distance <= 0) {
displayError("Please enter a valid distance for mileage."); return;
}
amount = distance * MILEAGE_RATE;
} else {
if (isNaN(amount) || amount <= 0) {
displayError("Please enter a valid amount."); return;
}
}
expenses.push({ date, type, description, amount });
renderExpenses();
// Reset form
elements.expenseDescription.value = '';
elements.expenseAmount.value = '';
elements.mileageDistance.value = '';
};
const handleTypeChange = () => {
if (elements.expenseType.value === 'mileage') {
elements.mileageFields.classList.remove('hidden');
elements.expenseAmount.classList.add('hidden');
elements.expenseAmount.value = '';
} else {
elements.mileageFields.classList.add('hidden');
elements.expenseAmount.classList.remove('hidden');
}
};
async function downloadPDF() {
const contentToPrint = document.getElementById('pdf-content');
if (!contentToPrint || expenses.length === 0) return;
if (typeof window.jspdf === 'undefined' || typeof window.html2canvas === 'undefined') {
displayError("PDF generation library is not available."); return;
}
try {
const { jsPDF } = window.jspdf;
const pdfCanvas = await html2canvas(contentToPrint, { scale: 2 });
const imgData = pdfCanvas.toDataURL('image/png');
const pdf = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (pdfCanvas.height * pdfWidth) / pdfCanvas.width;
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
const fileName = elements.reportName.value.trim().replace(/\s+/g, '-') || 'reimbursement-report';
pdf.save(`${fileName}.pdf`);
} catch(err) {
console.error("PDF generation failed:", err);
}
}
const displayError = (message) => {
elements.error.textContent = message;
elements.error.classList.remove('hidden');
};
const hideError = () => elements.error.classList.add('hidden');
elements.addBtn.addEventListener('click', addExpense);
elements.expenseType.addEventListener('change', handleTypeChange);
elements.list.addEventListener('click', (e) => {
if (e.target.classList.contains('remove-btn')) {
const index = parseInt(e.target.dataset.index, 10);
expenses.splice(index, 1);
renderExpenses();
}
});
elements.reportName.addEventListener('input', renderExpenses);
elements.pdfBtn.addEventListener('click', downloadPDF);
// Initial render
handleTypeChange();
renderExpenses();
});
