Top 5 Products by Revenue
`;
renderCharts();
document.getElementById('download-pdf-btn').addEventListener('click', generatePdf);
};
const renderCharts = () => {
// Sales Over Time Chart
const sotCtx = document.getElementById('salesOverTimeChart').getContext('2d');
if(charts.sales) charts.sales.destroy();
charts.sales = new Chart(sotCtx, {
type: 'bar',
data: {
labels: analysisResult.salesOverTime.map(d => d.hour),
datasets: [{
label: 'Revenue',
data: analysisResult.salesOverTime.map(d => d.revenue),
backgroundColor: '#fb923c' /* orange-400 */
}]
},
options: { responsive: true, maintainAspectRatio: false, scales: { y: { ticks: { callback: value => formatCurrency(value) }}}}
});
// Top Products Chart
const tpcCtx = document.getElementById('topProductsChart').getContext('2d');
if(charts.products) charts.products.destroy();
charts.products = new Chart(tpcCtx, {
type: 'bar',
data: {
labels: analysisResult.topProducts.map(p => p.name),
datasets: [{
label: 'Revenue',
data: analysisResult.topProducts.map(p => p.unitsSold * p.price),
backgroundColor: ['#fdba74', '#fcd34d', '#a7f3d0', '#bae6fd', '#fbcfe8']
}]
},
options: { responsive: true, maintainAspectRatio: false, indexAxis: 'y', plugins: { legend: { display: false } }, scales: { x: { ticks: { callback: value => formatCurrency(value) }}}}
});
};
const renderDataConfig = () => {
const configContent = document.getElementById('content-data-config');
if (!configContent) return;
let productsHtml = appData.products.map((product, index) => `
`).join('');
configContent.innerHTML = `
Configure Flash Sale Data
`;
attachConfigListeners();
};
const attachConfigListeners = () => {
document.getElementById('add-product-btn').addEventListener('click', addProductRow);
document.getElementById('products-container').addEventListener('click', (e) => {
if (e.target.closest('.remove-product-btn')) {
const row = e.target.closest('.product-row');
row.remove();
}
});
document.getElementById('analyze-btn').addEventListener('click', handleDataUpdate);
};
const addProductRow = () => {
const container = document.getElementById('products-container');
const newRow = document.createElement('div');
newRow.className = 'product-row grid grid-cols-12 gap-x-4 gap-y-2 items-center';
newRow.innerHTML = `
`;
container.appendChild(newRow);
lucide.createIcons();
};
const handleDataUpdate = () => {
appData.saleName = document.getElementById('sale-name').value;
appData.totalVisitors = parseInt(document.getElementById('total-visitors').value) || 0;
appData.saleDurationHours = parseInt(document.getElementById('sale-duration').value) || 1;
appData.products = [];
document.querySelectorAll('.product-row').forEach(row => {
const name = row.querySelector('.product-name').value;
const unitsSold = parseInt(row.querySelector('.units-sold').value) || 0;
const price = parseFloat(row.querySelector('.product-price').value) || 0;
if (name && unitsSold > 0) {
appData.products.push({ name, unitsSold, price });
}
});
renderDashboard();
switchTab(0); // Go to dashboard after analysis
};
const generatePdf = () => {
loadingOverlay.style.display = 'flex';
const { jsPDF } = window.jspdf;
const pdfContent = document.getElementById('pdf-content-area');
const pdfHeader = document.getElementById('pdf-header');
document.getElementById('pdf-generated-date').textContent = new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
pdfHeader.classList.remove('hidden');
html2canvas(pdfContent, { scale: 2, useCORS: true, logging: false })
.then(canvas => {
pdfHeader.classList.add('hidden');
const imgData = canvas.toDataURL('image/jpeg', 0.95);
const pdf = new jsPDF({ orientation: 'landscape', unit: 'px', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const imgProps = pdf.getImageProperties(imgData);
const imgHeight = (imgProps.height * pdfWidth) / imgProps.width;
pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, imgHeight);
pdf.save(`Flash-Sale-Report-${appData.saleName.replace(/ /g, '_')}.pdf`);
loadingOverlay.style.display = 'none';
}).catch(err => {
console.error("PDF generation failed:", err);
pdfHeader.classList.add('hidden');
loadingOverlay.style.display = 'none';
alert('An error occurred generating the PDF.');
});
};
// --- TAB NAVIGATION & INITIALIZATION ---
const switchTab = (tabIndex) => {
activeTabIndex = tabIndex;
document.querySelectorAll('.tab-btn').forEach((btn, i) => btn.classList.toggle('active', i === tabIndex));
document.querySelectorAll('.tab-content').forEach((content, i) => content.classList.toggle('hidden', i !== tabIndex));
updateNavButtons();
};
const updateNavButtons = () => {
prevTabBtn.disabled = activeTabIndex === 0;
nextTabBtn.disabled = activeTabIndex === tabIdentifiers.length - 1;
};
const initializeUI = () => {
const tabs = [
{ name: 'Performance Dashboard', id: 'dashboard' },
{ name: 'Data Configuration', id: 'data-config' }
];
tabIdentifiers = tabs.map(t => t.id);
tabsContainer.innerHTML = tabs.map(tab => `
`).join('');
mainContent.innerHTML = tabs.map(tab => `
`).join('');
tabs.forEach((tab, index) => {
document.getElementById(`tab-${tab.id}`).addEventListener('click', () => switchTab(index));
});
renderDashboard();
renderDataConfig();
switchTab(0);
lucide.createIcons();
};
initializeUI();
prevTabBtn.addEventListener('click', () => { if (activeTabIndex > 0) switchTab(activeTabIndex - 1); });
nextTabBtn.addEventListener('click', () => { if (activeTabIndex < tabIdentifiers.length - 1) switchTab(activeTabIndex + 1); });
});
