${item.value}

`; dashboardSummary.appendChild(card); }); // Populate data breach table (sorted by date detected descending) const sortedBreachData = [...dataBreachData].sort((a, b) => new Date(b.dateDetected) - new Date(a.dateDetected)); sortedBreachData.forEach(item => { const row = dataBreachTableBody.insertRow(); const severityClass = `severity-${item.severity}`; row.innerHTML = ` ${item.breachId} ${item.dateDetected} ${item.type} ${item.impactedRecords.toLocaleString()} $${item.estimatedCost.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ${item.status} ${item.severity} ${item.description} `; }); } // --- Data Configuration Table Rendering and Editing --- /** * Renders the data in the configuration table. */ function renderConfigTable() { // Null check for config data table body if (!configDataTableBody) { console.error("Config data table body not found."); return; } configDataTableBody.innerHTML = ''; // Clear existing rows dataBreachData.forEach((item, index) => { const row = configDataTableBody.insertRow(); const severityClass = `severity-${item.severity}`; row.innerHTML = ` ${item.breachId} ${item.dateDetected} ${item.type} ${item.impactedRecords.toLocaleString()} $${item.estimatedCost.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ${item.status} ${item.severity} Edit Delete `; }); } /** * Adds a new row or updates an existing row in the data breach data. */ window.addRow = function() { // Null checks for input fields if (!breachIdInput || !dateDetectedInput || !breachTypeSelect || !impactedRecordsInput || !estimatedCostInput || !breachStatusSelect || !breachSeveritySelect || !breachDescriptionInput) { console.error("One or more input fields not found."); return; } const newBreach = { breachId: breachIdInput.value.trim(), dateDetected: dateDetectedInput.value.trim(), type: breachTypeSelect.value.trim(), impactedRecords: parseInt(impactedRecordsInput.value) || 0, estimatedCost: parseFloat(estimatedCostInput.value) || 0, status: breachStatusSelect.value.trim(), severity: breachSeveritySelect.value.trim(), description: breachDescriptionInput.value.trim() }; // Simple validation if (!newBreach.breachId || !newBreach.dateDetected || !newBreach.type || newBreach.impactedRecords < 0 || newBreach.estimatedCost < 0 || !newBreach.status || !newBreach.severity || !newBreach.description) { showModal("Please fill in all required fields (Breach ID, Date Detected, Type, Impacted Records, Estimated Cost, Status, Severity, Description) with valid values."); return; } // Check for duplicate Breach ID if adding a new row if (editingIndex === -1) { const isDuplicate = dataBreachData.some(breach => breach.breachId === newBreach.breachId); if (isDuplicate) { showModal(`Breach ID "${newBreach.breachId}" already exists. Please use a unique ID.`); return; } dataBreachData.push(newBreach); } else { // Update existing row dataBreachData[editingIndex] = newBreach; editingIndex = -1; // Reset editing state updateRowButton.classList.add('hidden'); cancelEditButton.classList.add('hidden'); addRowButton.classList.remove('hidden'); breachIdInput.disabled = false; // Re-enable breach ID for new entries } clearForm(); renderConfigTable(); updateDashboard(); // Keep dashboard in sync }; /** * Populates the form with data from the row to be edited. * @param {HTMLElement} button - The edit button clicked. */ window.editRow = function(button) { // Null checks for input fields and edit buttons if (!breachIdInput || !dateDetectedInput || !breachTypeSelect || !impactedRecordsInput || !estimatedCostInput || !breachStatusSelect || !breachSeveritySelect || !breachDescriptionInput || !addRowButton || !updateRowButton || !cancelEditButton) { console.error("One or more form/button elements not found for editing."); return; } const index = parseInt(button.dataset.index); editingIndex = index; const item = dataBreachData[index]; breachIdInput.value = item.breachId; dateDetectedInput.value = item.dateDetected; breachTypeSelect.value = item.type; impactedRecordsInput.value = item.impactedRecords; estimatedCostInput.value = item.estimatedCost; breachStatusSelect.value = item.status; breachSeveritySelect.value = item.severity; breachDescriptionInput.value = item.description; addRowButton.classList.add('hidden'); updateRowButton.classList.remove('hidden'); cancelEditButton.classList.remove('hidden'); breachIdInput.disabled = true; // Disable editing Breach ID during update }; /** * Deletes a row from the data breach data. * @param {HTMLElement} button - The delete button clicked. */ window.deleteRow = function(button) { const index = parseInt(button.dataset.index); showModal("Are you sure you want to delete this data breach record?", true, (confirmed) => { if (confirmed) { dataBreachData.splice(index, 1); renderConfigTable(); updateDashboard(); // Keep dashboard in sync clearForm(); // Clear form if the deleted item was being edited editingIndex = -1; updateRowButton.classList.add('hidden'); cancelEditButton.classList.add('hidden'); addRowButton.classList.remove('hidden'); breachIdInput.disabled = false; // Re-enable breach ID } }); }; /** * Clears the input form fields. */ function clearForm() { // Null checks for input fields if (!breachIdInput || !dateDetectedInput || !breachTypeSelect || !impactedRecordsInput || !estimatedCostInput || !breachStatusSelect || !breachSeveritySelect || !breachDescriptionInput) { console.error("One or more input fields not found for clearing."); return; } breachIdInput.value = ''; dateDetectedInput.value = ''; breachTypeSelect.value = ''; // Reset to default "Select Type" impactedRecordsInput.value = ''; estimatedCostInput.value = ''; breachStatusSelect.value = 'Investigating'; // Reset to default status breachSeveritySelect.value = 'Low'; // Reset to default severity breachDescriptionInput.value = ''; } /** * Cancels the current edit operation and clears the form. */ window.cancelEdit = function() { editingIndex = -1; clearForm(); updateRowButton.classList.add('hidden'); cancelEditButton.classList.add('hidden'); addRowButton.classList.remove('hidden'); breachIdInput.disabled = false; // Re-enable breach ID }; // --- PDF Download Functionality --- /** * Downloads the dashboard content as a PDF. */ window.downloadPdf = async function() { // Null check for dashboard content if (!dashboardTabContent) { console.error("Dashboard content for PDF not found."); return; } // Temporarily show the dashboard content if it's hidden, for accurate PDF generation const wasHidden = dashboardTabContent.classList.contains('hidden'); if (wasHidden) { dashboardTabContent.classList.remove('hidden'); } const { jsPDF } = window.jspdf; const doc = new jsPDF('p', 'pt', 'letter'); // 'p' for portrait, 'pt' for points, 'letter' size const element = dashboardTabContent; // The element to convert to PDF // Use html2canvas to render the HTML element to a canvas await html2canvas(element, { scale: 2, // Increase scale for better quality useCORS: true, // Important for images/external resources if any (though we don't use them here) logging: false // Disable logging for cleaner console }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const imgWidth = 550; // A fixed width for the image in PDF const pageHeight = doc.internal.pageSize.height; const imgHeight = (canvas.height * imgWidth) / canvas.width; let heightLeft = imgHeight; let position = 30; // Initial Y position for content doc.setFontSize(22); doc.setTextColor(31, 41, 55); // Gray 900 equivalent doc.text("Data Breach Dashboard", doc.internal.pageSize.getWidth() / 2, position, { align: "center" }); position += 30; // Move down for image doc.addImage(imgData, 'PNG', 30, position, imgWidth, imgHeight); heightLeft -= pageHeight; // If content overflows, add new pages while (heightLeft >= 0) { position = heightLeft - imgHeight + 30; // Adjust position for new page doc.addPage(); doc.addImage(imgData, 'PNG', 30, position, imgWidth, imgHeight); heightLeft -= pageHeight; } doc.save('Data_Breach_Dashboard.pdf'); }); // Restore hidden state if it was hidden initially if (wasHidden) { dashboardTabContent.classList.add('hidden'); } }; // --- Event Listeners --- if (addRowButton) { addRowButton.addEventListener('click', addRow); } else { console.error("Add Row Button not found."); } if (updateRowButton) { updateRowButton.addEventListener('click', addRow); // addRow function handles both add and update based on editingIndex } else { console.error("Update Row Button not found."); } if (cancelEditButton) { cancelEditButton.addEventListener('click', cancelEdit); } else { console.error("Cancel Edit Button not found."); } // Initial rendering and setup openTab('dashboard'); // Open dashboard by default updateDashboard(); // Populate dashboard with initial data renderConfigTable(); // Populate config table with initial data });