`;
dashboardContent.appendChild(card);
});
};
const renderManageList = () => {
manageList.innerHTML = '';
if (assets.length === 0) {
manageList.innerHTML = `
No assets to manage. Click 'Add New Asset' to start.
`;
return;
}
assets.forEach(asset => {
const item = document.createElement('div');
item.className = 'flex justify-between items-center bg-gray-50 p-3 rounded-md border';
item.innerHTML = `
${asset.tag} - ${asset.type}
Assigned to: ${asset.assignedTo}
`;
manageList.appendChild(item);
});
};
const openModal = (assetId = null) => {
assetForm.reset();
editingAssetId = assetId;
if (assetId) {
const asset = assets.find(a => a.id === assetId);
if (asset) {
modalTitle.textContent = 'Edit Asset';
document.getElementById('assetId').value = asset.id;
document.getElementById('assetTag').value = asset.tag;
document.getElementById('assetType').value = asset.type;
document.getElementById('assetStatus').value = asset.status;
document.getElementById('assignedTo').value = asset.assignedTo;
document.getElementById('purchaseDate').value = asset.date;
document.getElementById('purchaseCost').value = asset.cost;
}
} else {
modalTitle.textContent = 'Add New Asset';
}
assetModal.classList.remove('hidden');
document.body.classList.add('modal-open');
};
const closeModal = () => {
assetModal.classList.add('hidden');
document.body.classList.remove('modal-open');
editingAssetId = null;
};
const saveAsset = (e) => {
e.preventDefault();
const assetData = {
id: editingAssetId || Date.now(),
tag: document.getElementById('assetTag').value,
type: document.getElementById('assetType').value,
status: document.getElementById('assetStatus').value,
assignedTo: document.getElementById('assignedTo').value,
date: document.getElementById('purchaseDate').value,
cost: document.getElementById('purchaseCost').value
};
if (editingAssetId) {
assets = assets.map(asset => asset.id === editingAssetId ? assetData : asset);
} else {
assets.push(assetData);
}
renderAll();
closeModal();
};
const deleteAsset = (assetId) => {
assets = assets.filter(asset => asset.id !== assetId);
renderAll();
};
const switchTab = (tabNum) => {
currentTab = tabNum;
tabButtons.forEach(btn => btn.classList.toggle('active', parseInt(btn.dataset.tab) === tabNum));
tabContents.forEach(content => content.classList.toggle('active', parseInt(content.id.split('-')[2]) === tabNum));
updateNavButtons();
};
const updateNavButtons = () => {
prevBtn.disabled = currentTab === 1;
nextBtn.disabled = currentTab === totalTabs;
};
const generatePDF = () => {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.setFont('helvetica', 'bold');
doc.setFontSize(16);
doc.text('Office Asset & Equipment Report', 14, 22);
doc.setFontSize(10);
doc.setTextColor(100);
doc.text(`Report generated on: ${new Date().toLocaleDateString()}`, 14, 28);
const tableColumn = ["Asset Tag", "Type", "Status", "Assigned To", "Purchase Date", "Cost ($)"];
const tableRows = [];
assets.forEach(asset => {
const assetData = [
asset.tag,
asset.type,
asset.status,
asset.assignedTo,
asset.date,
parseFloat(asset.cost).toFixed(2)
];
tableRows.push(assetData);
});
doc.autoTable({
head: [tableColumn],
body: tableRows,
startY: 35,
theme: 'grid',
headStyles: { fillColor: [79, 70, 229] }, // Indigo color
});
doc.save('Office-Asset-Report.pdf');
};
// --- Event Listeners ---
addAssetBtn.addEventListener('click', () => openModal());
closeModalBtn.addEventListener('click', closeModal);
assetForm.addEventListener('submit', saveAsset);
downloadPdfBtn.addEventListener('click', generatePDF);
manageList.addEventListener('click', (e) => {
if (e.target.classList.contains('edit-btn')) {
openModal(parseInt(e.target.dataset.id));
}
if (e.target.classList.contains('delete-btn')) {
deleteAsset(parseInt(e.target.dataset.id));
}
});
tabButtons.forEach(btn => btn.addEventListener('click', () => switchTab(parseInt(btn.dataset.tab))));
nextBtn.addEventListener('click', () => { if (currentTab < totalTabs) switchTab(currentTab + 1); });
prevBtn.addEventListener('click', () => { if (currentTab > 1) switchTab(currentTab - 1); });
// --- Initialization ---
assets = [...sampleAssets];
renderAll();
updateNavButtons();
});
