Total Revenue
$${totalRevenue.toLocaleString('en-US', {minimumFractionDigits:2})}
Avg. Net Margin
${avgNetMargin.toFixed(2)}%
Most Profitable
${mostProfitable.name}
`;
// Results Table
document.getElementById('results-table-body').innerHTML = results.map(r => `
| ${r.name} |
$${r.netProfit.toFixed(2)} |
${r.netMargin.toFixed(2)}% |
$${r.grossProfit.toFixed(2)} |
${r.grossMargin.toFixed(2)}% |
`).join('');
// Charts
if(marginChart) marginChart.destroy();
marginChart = new Chart(document.getElementById('margin-chart').getContext('2d'), {
type: 'bar',
data: { labels: results.map(r => r.name), datasets: [{ label: 'Net Margin %', data: results.map(r => r.netMargin), backgroundColor: '#60a5fa' }] },
options: { plugins: { legend: { display: false } } }
});
if(profitContributionChart) profitContributionChart.destroy();
profitContributionChart = new Chart(document.getElementById('profit-contribution-chart').getContext('2d'), {
type: 'pie',
data: { labels: results.map(r => r.name), datasets: [{ data: results.map(r => r.totalNetProfit), backgroundColor: ['#60a5fa', '#a78bfa', '#fbbf24', '#f87171', '#34d399'] }] },
options: { responsive: true, plugins: { legend: { position: 'top' } } }
});
};
// --- EVENT HANDLERS ---
const handleNavClick = (direction) => {
const currentIndex = TABS.indexOf(currentTab);
const newIndex = direction === 'next' ? currentIndex + 1 : currentIndex - 1;
if (newIndex >= 0 && newIndex < TABS.length) showTab(TABS[newIndex]);
};
const handleConfigChange = (e) => {
const input = e.target;
if (input.tagName !== 'INPUT') return;
const id = parseInt(input.closest('tr').dataset.id);
const field = input.dataset.field;
const value = input.type === 'number' ? parseFloat(input.value) || 0 : input.value;
const product = products.find(p => p.id === id);
if(product) product[field] = value;
};
const handleAddProduct = () => {
const newId = products.length > 0 ? Math.max(...products.map(p => p.id)) + 1 : 1;
products.push({ id: newId, name: "New Product", unitsSold: 0, price: 0, cogs: 0, shipping: 0, marketing: 0 });
renderConfigTable();
};
const handleDeleteProduct = (e) => {
const btn = e.target.closest('.delete-product-btn');
if (btn) {
const id = parseInt(btn.closest('tr').dataset.id);
products = products.filter(p => p.id !== id);
renderConfigTable();
}
};
const generatePDF = () => {
const { jsPDF } = window.jspdf;
const pdfContent = document.getElementById('pdf-content');
const pdfBtnContainer = document.getElementById('pdf-button-container');
if (!pdfContent || !pdfBtnContainer) return;
pdfBtnContainer.style.display = 'none';
html2canvas(pdfContent, { scale: 2, useCORS: true }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({ orientation: 'l', unit: 'mm', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const imgWidth = pdfWidth - 20;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
pdf.setFontSize(22);
pdf.setFont('helvetica', 'bold');
pdf.text('Product Profitability Report', pdfWidth / 2, 15, { align: 'center' });
pdf.addImage(imgData, 'PNG', 10, 25, imgWidth, imgHeight);
pdf.save('product-profit-report.pdf');
pdfBtnContainer.style.display = 'block';
}).catch(err => {
console.error("Error generating PDF:", err);
pdfBtnContainer.style.display = 'block';
});
};
// --- ATTACH LISTENERS ---
Object.keys(tabButtons).forEach(key => tabButtons[key].addEventListener('click', () => showTab(key)));
prevBtn.addEventListener('click', () => handleNavClick('prev'));
nextBtn.addEventListener('click', () => handleNavClick('next'));
addProductBtn.addEventListener('click', handleAddProduct);
configTableBody.addEventListener('change', handleConfigChange);
configTableBody.addEventListener('click', handleDeleteProduct);
downloadPdfBtn.addEventListener('click', generatePDF);
// --- INITIAL SETUP ---
showTab('dashboard');
});
