created quality page

py_app/app/static/script.js

@@ -120,4 +120,80 @@ document.addEventListener('DOMContentLoaded', () => {
             deleteUserPopup.style.display = 'none';
         }
     });
+
+    const reportButtons = document.querySelectorAll('.report-btn');
+    const reportTitle = document.getElementById('report-title');
+    const reportTable = document.getElementById('report-table');
+
+    // Handle report button clicks
+    reportButtons.forEach((button) => {
+        button.addEventListener('click', () => {
+            const reportNumber = button.dataset.report;
+
+            // Update the title dynamically
+            reportTitle.textContent = `Data for "Report ${reportNumber}"`;
+
+            // Fetch data for the selected report (mocked for now)
+            fetch(`/get_report_data?report=${reportNumber}`)
+                .then((response) => response.json())
+                .then((data) => {
+                    populateTable(data);
+                })
+                .catch((error) => {
+                    console.error('Error fetching report data:', error);
+                });
+        });
+    });
+
+    // Populate the table with data
+    function populateTable(data) {
+        const tableHead = reportTable.querySelector('thead tr');
+        const tableBody = reportTable.querySelector('tbody');
+
+        // Clear existing table content
+        tableHead.innerHTML = '';
+        tableBody.innerHTML = '';
+
+        if (data.headers && data.rows) {
+            // Populate table headers
+            data.headers.forEach((header) => {
+                const th = document.createElement('th');
+                th.textContent = header;
+                tableHead.appendChild(th);
+            });
+
+            // Populate table rows
+            data.rows.forEach((row) => {
+                const tr = document.createElement('tr');
+                row.forEach((cell) => {
+                    const td = document.createElement('td');
+                    td.textContent = cell;
+                    tr.appendChild(td);
+                });
+                tableBody.appendChild(tr);
+            });
+        } else {
+            // No data available
+            const tr = document.createElement('tr');
+            const td = document.createElement('td');
+            td.textContent = 'No data available.';
+            td.colSpan = data.headers ? data.headers.length : 1;
+            tr.appendChild(td);
+            tableBody.appendChild(tr);
+        }
+    }
+
+    // Export buttons
+    const exportCsvButton = document.getElementById('export-csv');
+    const exportPdfButton = document.getElementById('export-pdf');
+
+    exportCsvButton.addEventListener('click', () => {
+        alert('Exporting current report as CSV...');
+        // Add logic to export the current report as CSV
+    });
+
+    exportPdfButton.addEventListener('click', () => {
+        alert('Exporting current report as PDF...');
+        // Add logic to export the current report as PDF
+    });
 });