ATM Network Performance Dashboard

A real-time, interactive overview of your ATM network.

${asset.id}

Status: ${asset.status}
Cash Level: ${asset.cashLevel}%
Transactions Today: ${asset.transactionsToday.toLocaleString()}
Last Maintenance: ${new Date(asset.lastMaintenance).toLocaleDateString()}

`; } function createKPICard(title, value) { return `

${title}

${value}

`; } function addTableRow(tableId) { const table = document.getElementById(tableId); const newRow = table.tBodies[0].insertRow(); newRow.innerHTML = ` `; newRow.querySelector('.delete-row-btn').addEventListener('click', (e) => e.target.closest('tr').remove()); } function filterAtms() { const filter = document.getElementById('atm-search').value.toLowerCase(); document.querySelectorAll('.atm-row').forEach(row => { row.style.display = row.textContent.toLowerCase().includes(filter) ? "" : "none"; }); } function navigateTabs(direction) { const newIndex = currentTabIndex + direction; if (newIndex >= 0 && newIndex < tabs.length) showTab(newIndex); } function updateNavButtons() { prevTabBtn.disabled = currentTabIndex === 0; nextTabBtn.disabled = currentTabIndex === tabs.length - 1; } async function generatePDF() { const { jsPDF } = window.jspdf; const doc = new jsPDF('p', 'pt', 'a4'); const activeTab = tabs[currentTabIndex]; const addHeader = (title) => { doc.setFontSize(18); doc.text('ATM Network Performance Report', 40, 60); doc.setFontSize(12); doc.setTextColor(100); doc.text(`Section: ${title}`, 40, 80); doc.setLineWidth(0.5); doc.line(40, 90, 555, 90); }; addHeader(activeTab.name); const tabElement = document.getElementById(activeTab.id); if (activeTab.id === 'dashboard-overview') { const canvas = await html2canvas(tabElement, { backgroundColor: '#ffffff', scale: 2 }); const imgData = canvas.toDataURL('image/png'); const pdfWidth = doc.internal.pageSize.getWidth() - 80; const pdfHeight = (canvas.height * pdfWidth) / canvas.width; doc.addImage(imgData, 'PNG', 40, 110, pdfWidth, pdfHeight); } else { const table = tabElement.querySelector('table'); if (table) doc.autoTable({ html: table, startY: 110 }); } doc.save(`ATM_Network_Report_${activeTab.name.replace(/\s/g, '_')}.pdf`); } init(); });