Your inventory is empty. Add an item to get started!
`;
return;
}
const table = document.createElement('table');
table.className = 'min-w-full divide-y divide-gray-200';
table.innerHTML = `
| Item Name |
Category |
Stock Level |
Status |
Actions |
`;
const tbody = table.querySelector('tbody');
inventory.sort((a, b) => a.name.localeCompare(b.name)).forEach(item => {
const stockPercent = Math.min((item.stock / (item.reorder * 2)) * 100, 100); // Assume max stock is 2x reorder point for visualization
let status, barColor, textColor;
if (item.stock <= item.reorder) {
status = 'Reorder'; textColor = 'text-red-800'; barColor = 'bg-red-500';
} else if (item.stock <= item.reorder * 1.5) {
status = 'Low'; textColor = 'text-yellow-800'; barColor = 'bg-yellow-500';
} else {
status = 'In Stock'; textColor = 'text-green-800'; barColor = 'bg-green-500';
}
const row = document.createElement('tr');
row.innerHTML = `
${item.name} |
${item.category} |
|
${status} |
|
`;
tbody.appendChild(row);
});
inventoryContainer.appendChild(table);
};
const renderShoppingList = () => {
shoppingListContainer.innerHTML = '';
const toOrder = inventory.filter(item => item.stock <= item.reorder);
if (toOrder.length === 0) {
shoppingListContainer.innerHTML = `
🎉 All supplies are well-stocked! Nothing to order right now.
`;
downloadPdfBtn.disabled = true;
return;
}
downloadPdfBtn.disabled = false;
const list = document.createElement('ul');
list.className = 'space-y-3';
toOrder.forEach(item => {
const li = document.createElement('li');
li.className = 'bg-white p-4 rounded-lg shadow flex justify-between items-center';
li.innerHTML = `
${item.name}
Current: ${item.stock} | Reorder at: ${item.reorder}
NEEDS REPLENISHING
`;
list.appendChild(li);
});
shoppingListContainer.appendChild(list);
};
const resetForm = () => {
itemForm.reset();
document.getElementById('item-id').value = '';
submitItemBtn.textContent = 'Add Item to Inventory';
itemForm.querySelector('h2').textContent = 'Add a New Supply Item';
};
// --- Event Handlers ---
itemForm.addEventListener('submit', (e) => {
e.preventDefault();
const id = document.getElementById('item-id').value;
const newItem = {
id: id ? parseInt(id) : Date.now(),
name: document.getElementById('item-name').value,
category: document.getElementById('item-category').value,
stock: parseInt(document.getElementById('current-stock').value),
reorder: parseInt(document.getElementById('reorder-point').value)
};
if (id) { // Editing existing item
inventory = inventory.map(item => item.id === newItem.id ? newItem : item);
} else { // Adding new item
inventory.push(newItem);
}
resetForm();
renderAll();
updateTabs(0); // Go back to dashboard
});
clearFormBtn.addEventListener('click', resetForm);
inventoryContainer.addEventListener('click', (e) => {
const target = e.target;
const id = parseInt(target.dataset.id);
if (target.classList.contains('delete-btn')) {
inventory = inventory.filter(item => item.id !== id);
renderAll();
} else if (target.classList.contains('edit-btn')) {
const item = inventory.find(i => i.id === id);
if (item) {
document.getElementById('item-id').value = item.id;
document.getElementById('item-name').value = item.name;
document.getElementById('item-category').value = item.category;
document.getElementById('current-stock').value = item.stock;
document.getElementById('reorder-point').value = item.reorder;
submitItemBtn.textContent = 'Update Item';
itemForm.querySelector('h2').textContent = 'Edit Supply Item';
updateTabs(1); // Switch to form tab
}
}
});
// --- PDF Download Logic ---
downloadPdfBtn.addEventListener('click', () => {
const toOrder = inventory.filter(item => item.stock <= item.reorder);
if (toOrder.length === 0) return;
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
const pdfContent = document.createElement('div');
pdfContent.style.padding = '20px';
pdfContent.style.fontFamily = 'Helvetica, Arial, sans-serif';
pdfContent.style.color = '#333';
pdfContent.innerHTML = `
Office Supplies Shopping List
Generated on: ${new Date().toLocaleDateString('en-US')}
| Item Name |
Category |
Current Stock |
${toOrder.map(item => `
| ${item.name} |
${item.category} |
${item.stock} |
`).join('')}
`;
document.body.appendChild(pdfContent);
html2canvas(pdfContent).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdfWidth = doc.internal.pageSize.getWidth();
const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
doc.save('office-supplies-shopping-list.pdf');
document.body.removeChild(pdfContent);
});
});
// --- Initial State & Render All ---
const renderAll = () => {
renderInventory();
renderShoppingList();
};
updateTabs(0);
renderAll();
});
