Customer Profitability Dashboard

Customer Profitability Dashboard

Overall Profitability Metrics

Total Revenue

$0.00

Total Costs

$0.00

Net Profit

$0.00

Profit Margin

0.00%

Customer Lifetime Value (CLTV)

$0.00

Avg. Customer Acquisition Cost (CAC)

$0.00

Payback Period (Months)

0.00

Profitability by Segment/Product Line

Segment/Product Revenue ($) Costs ($) Net Profit ($) Profit Margin (%)

${displayTotalCosts.textContent}

Net Profit

${displayNetProfit.textContent}

Profit Margin

${displayProfitMargin.textContent}

Customer Lifetime Value (CLTV)

${displayCLTV.textContent}

Avg. Customer Acquisition Cost (CAC)

${displayCAC.textContent}

Payback Period (Months)

${displayPaybackPeriod.textContent}

Profitability by Segment/Product Line

${segmentProfitabilityHtml}
Segment/Product Revenue ($) Costs ($) Net Profit ($) Profit Margin (%)
`; // Append to body temporarily to render for html2canvas document.body.appendChild(pdfContentWrapper); try { const canvas = await html2canvas(pdfContentWrapper, { scale: 2, // Increase scale for better resolution useCORS: true, // Required if images are from different origin (though we don't use images here) logging: false // Disable logging for cleaner console }); const imgData = canvas.toDataURL('image/png'); const pdf = new window.jspdf.jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' }); const imgWidth = 210; // A4 width in mm const pageHeight = 297; // A4 height in mm const imgHeight = canvas.height * imgWidth / canvas.width; let heightLeft = imgHeight; let position = 0; pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); heightLeft -= pageHeight; while (heightLeft >= 0) { position = heightLeft - imgHeight; pdf.addPage(); pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); heightLeft -= pageHeight; } pdf.save('Customer_Profitability_Dashboard.pdf'); } catch (error) { console.error('Error generating PDF:', error); // Provide a user-friendly message if PDF generation fails alert('Failed to generate PDF. Please try again.'); } finally { // Remove the temporary wrapper document.body.removeChild(pdfContentWrapper); } } // --- Event Listeners --- // Tab switching if (dashboardTabBtn) { dashboardTabBtn.addEventListener('click', function() { switchTab('dashboard'); }); } if (dataConfigTabBtn) { dataConfigTabBtn.addEventListener('click', function() { switchTab('dataConfig'); }); } // Navigation buttons if (prevTabBtn) { prevTabBtn.addEventListener('click', function() { if (currentActiveTab === 'dataConfig') { switchTab('dashboard'); } }); } if (nextTabBtn) { nextTabBtn.addEventListener('click', function() { if (currentActiveTab === 'dashboard') { switchTab('dataConfig'); } }); } // Main metrics input change listener (for real-time updates) const mainMetricInputs = [ totalRevenueInput, totalCostsInput, cltvInput, cacInput ]; mainMetricInputs.forEach(input => { if (input) { input.addEventListener('input', function() { updateProfitabilityMetricsFromInputs(); renderDashboard(); // Update dashboard in real-time }); } }); // Add/Update Segment button if (addUpdateSegmentBtn) { addUpdateSegmentBtn.addEventListener('click', addUpdateSegment); } // Clear Segment Form button if (clearSegmentFormBtn) { clearSegmentFormBtn.addEventListener('click', clearSegmentForm); } // PDF download button if (downloadPdfBtn) { downloadPdfBtn.addEventListener('click', downloadPdf); } // --- Initial Load --- populateInputFields(); // Populate main metric inputs with initial data clearSegmentForm(); // Initialize segment form renderDashboard(); // Render dashboard with initial data renderExistingSegmentsTable(); // Render existing segments in config tab switchTab('dashboard'); // Ensure dashboard tab is active on load });
Scroll to Top