`;
noBatchesPlaceholder.style.display = 'block';
} else {
noBatchesPlaceholder.style.display = 'none';
filteredBatches.forEach(batch => {
const tr = document.createElement('tr');
tr.dataset.batchId = batch.id;
tr.innerHTML = `
${batch.id} |
${batch.productName} |
${batch.quantity} |
${STATUS_OPTIONS[batch.status]} |
${formatDate(batch.creationDate)} |
${formatDate(batch.dueDate)} |
|
`;
batchesTbody.appendChild(tr);
});
}
};
// --- CRUD & FORM HANDLING ---
addBatchForm.addEventListener('submit', (e) => {
e.preventDefault();
const newBatch = {
id: 'B' + Date.now().toString().slice(-6),
productName: document.getElementById('btd-add-product-name').value.trim(),
quantity: parseInt(document.getElementById('btd-add-quantity').value),
status: document.getElementById('btd-add-status').value,
creationDate: new Date().toISOString(),
dueDate: document.getElementById('btd-add-due-date').value,
notes: document.getElementById('btd-add-notes').value.trim()
};
batches.unshift(newBatch);
saveState();
addBatchForm.reset();
renderAll();
// Switch to dashboard to show the new entry
tabButtons[0].click();
});
batchesTbody.addEventListener('click', (e) => {
const action = e.target.dataset.action;
if (action) {
const batchId = e.target.closest('tr').dataset.batchId;
if (action === 'edit') {
showEditModal(batchId);
} else if (action === 'delete') {
if (confirm('Are you sure you want to delete this batch? This action cannot be undone.')) {
batches = batches.filter(b => b.id !== batchId);
saveState();
renderAll();
}
}
}
});
const showEditModal = (batchId) => {
const batch = batches.find(b => b.id === batchId);
if (!batch) return;
document.getElementById('btd-edit-batch-id').value = batch.id;
document.getElementById('btd-edit-batch-id-display').value = batch.id;
document.getElementById('btd-edit-creation-date-display').value = formatDate(batch.creationDate);
document.getElementById('btd-edit-product-name').value = batch.productName;
document.getElementById('btd-edit-quantity').value = batch.quantity;
document.getElementById('btd-edit-status').value = batch.status;
document.getElementById('btd-edit-due-date').value = batch.dueDate;
document.getElementById('btd-edit-notes').value = batch.notes;
editModal.classList.add('visible');
};
const hideEditModal = () => editModal.classList.remove('visible');
cancelEditBtn.addEventListener('click', hideEditModal);
editBatchForm.addEventListener('submit', (e) => {
e.preventDefault();
const batchId = document.getElementById('btd-edit-batch-id').value;
const batchIndex = batches.findIndex(b => b.id === batchId);
if (batchIndex > -1) {
batches[batchIndex] = {
...batches[batchIndex],
productName: document.getElementById('btd-edit-product-name').value.trim(),
quantity: parseInt(document.getElementById('btd-edit-quantity').value),
status: document.getElementById('btd-edit-status').value,
dueDate: document.getElementById('btd-edit-due-date').value,
notes: document.getElementById('btd-edit-notes').value.trim()
};
saveState();
renderAll();
hideEditModal();
}
});
// --- EVENT LISTENERS ---
searchInput.addEventListener('input', renderBatchTable);
statusFilter.addEventListener('change', renderBatchTable);
// --- PDF EXPORT ---
document.getElementById('btd-download-pdf-btn').addEventListener('click', () => {
const doc = new jsPDF();
const captureArea = document.getElementById('btd-pdf-content-capture');
const summaryCards = document.getElementById('btd-summary-cards');
const downloadButton = document.getElementById('btd-download-pdf-btn');
downloadButton.textContent = 'Generating...';
downloadButton.disabled = true;
html2canvas(summaryCards, { scale: 2 }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
// Add Title
doc.setFontSize(18);
doc.text('Batch Tracking Report', 14, 22);
doc.setFontSize(11);
doc.setTextColor(100);
doc.text(`Generated on: ${new Date().toLocaleDateString()}`, 14, 29);
// Add Summary Image
const imgProps = doc.getImageProperties(imgData);
const pdfWidth = doc.internal.pageSize.getWidth();
const imgWidth = pdfWidth - 28;
const imgHeight = (imgProps.height * imgWidth) / imgProps.width;
doc.addImage(imgData, 'PNG', 14, 40, imgWidth, imgHeight);
// Add Table
const tableHeaders = [['Batch ID', 'Product', 'Qty', 'Status', 'Created', 'Due Date']];
const tableBody = batches.map(b => [
b.id,
b.productName,
b.quantity,
STATUS_OPTIONS[b.status],
formatDate(b.creationDate),
formatDate(b.dueDate)
]);
doc.autoTable({
head: tableHeaders,
body: tableBody,
startY: imgHeight + 50,
theme: 'striped',
headStyles: { fillColor: [30, 55, 153] }, // --btd-secondary-color
styles: { fontSize: 9 }
});
doc.save('Batch_Tracking_Report.pdf');
}).finally(() => {
downloadButton.textContent = 'Download Report as PDF';
downloadButton.disabled = false;
});
});
// --- INITIALIZATION ---
renderAll();
});
