Vendor: ${product.vendor}
Vendor Price: $${product.vendorPrice.toFixed(2)}
Store Price: $${product.storePrice.toFixed(2)}
`;
dashboardContainer.appendChild(card);
});
downloadPdfBtn.disabled = false;
};
const renderConfigTable = () => {
configTableBody.innerHTML = '';
products.forEach(product => {
const row = document.createElement('tr');
row.dataset.id = product.id;
row.innerHTML = `
|
|
|
|
|
|
`;
configTableBody.appendChild(row);
});
};
// --- UI & EVENT HANDLERS ---
const switchTab = (tabId) => {
currentTab = tabId;
Object.values(tabPanes).forEach(pane => pane.classList.add('hidden'));
tabPanes[tabId].classList.remove('hidden');
Object.values(tabButtons).forEach(btn => btn.classList.replace('tab-active', 'tab-inactive'));
tabButtons[tabId].classList.replace('tab-inactive', 'tab-active');
updateNavButtons();
};
const navigateTabs = (direction) => {
const currentIndex = tabs.indexOf(currentTab);
const newIndex = direction === 'next' ? currentIndex + 1 : currentIndex - 1;
if (newIndex >= 0 && newIndex < tabs.length) {
if (tabs[newIndex] === 'dashboard') renderDashboard();
switchTab(tabs[newIndex]);
}
};
const updateNavButtons = () => {
const currentIndex = tabs.indexOf(currentTab);
prevBtn.disabled = currentIndex === 0;
nextBtn.disabled = currentIndex === tabs.length - 1;
prevBtn.classList.toggle('opacity-50', prevBtn.disabled);
nextBtn.classList.toggle('opacity-50', nextBtn.disabled);
};
const handleSyncSimulation = () => {
runSyncBtnSpinner.classList.remove('hidden');
runSyncBtnText.textContent = 'Syncing...';
runSyncBtn.disabled = true;
setTimeout(() => {
products.forEach(p => {
if (Math.random() < 0.1) { // 10% chance of a random error
p.status = 'Error';
} else if (p.vendorPrice > p.storePrice) {
p.status = 'Error'; // Losing money is an error
} else if (p.vendorPrice !== p.storePrice) {
p.status = 'Out of Sync'; // Prices differ but not losing money
} else {
p.status = 'Synced';
}
});
renderDashboard();
renderConfigTable(); // Update config table in background
runSyncBtnSpinner.classList.add('hidden');
runSyncBtnText.textContent = 'Simulate Sync';
runSyncBtn.disabled = false;
}, 500); // Simulate network delay
};
const handlePdfDownload = () => {
const pdfContent = document.getElementById('pdf-content');
const titleEl = document.createElement('h2');
titleEl.className = 'text-2xl font-bold text-gray-800 text-center mb-6';
titleEl.textContent = 'Product Sync Status Report';
pdfContent.insertBefore(titleEl, pdfContent.firstChild);
html2canvas(pdfContent, { scale: 2, backgroundColor: '#ffffff' }).then(canvas => {
pdfContent.removeChild(titleEl);
const imgData = canvas.toDataURL('image/png');
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth(), margin = 40;
const contentWidth = pdfWidth - margin * 2;
const canvasAspectRatio = canvas.width / canvas.height;
const contentHeight = contentWidth / canvasAspectRatio;
pdf.addImage(imgData, 'PNG', margin, margin, contentWidth, contentHeight);
pdf.save('Product-Sync-Report.pdf');
});
};
// --- EVENT LISTENERS ---
window.switchTab = switchTab;
window.navigateTabs = navigateTabs;
searchInput.addEventListener('input', renderDashboard);
downloadPdfBtn.addEventListener('click', handlePdfDownload);
runSyncBtn.addEventListener('click', handleSyncSimulation);
addProductBtn.addEventListener('click', () => {
const newProduct = {
id: nextId++,
name: 'New Product',
vendor: 'New Vendor',
vendorPrice: 0.00,
storePrice: 0.00,
status: 'Out of Sync'
};
products.push(newProduct);
renderConfigTable();
});
configTableBody.addEventListener('input', e => {
if (e.target.classList.contains('config-input')) {
const id = parseInt(e.target.closest('tr').dataset.id);
const prop = e.target.dataset.prop;
const product = products.find(p => p.id === id);
if (product) {
const value = e.target.type === 'number' ? parseFloat(e.target.value) : e.target.value;
product[prop] = value;
}
}
});
configTableBody.addEventListener('click', e => {
if (e.target.classList.contains('remove-row-btn')) {
const idToRemove = parseInt(e.target.closest('tr').dataset.id);
products = products.filter(p => p.id !== idToRemove);
renderConfigTable();
}
});
// --- INITIALIZATION ---
renderDashboard();
renderConfigTable();
updateNavButtons();
switchTab('dashboard');
});
