From a734b0f641766e4b4a396f2dc815159e433837e4 Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com.>
Date: Mon, 16 Jun 2025 23:56:17 +0100
Subject: [PATCH] js fixes

---
 .../resources/static/css/audit-dashboard.css  | 17 ++++++++-
 .../resources/static/js/audit/dashboard.js    | 37 +++++++++++++------
 .../resources/templates/audit/dashboard.html  |  5 ++-
 .../main/resources/messages_en_GB.properties  |  1 +
 4 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/proprietary/src/main/resources/static/css/audit-dashboard.css b/proprietary/src/main/resources/static/css/audit-dashboard.css
index 87bc3a27c..51531c04e 100644
--- a/proprietary/src/main/resources/static/css/audit-dashboard.css
+++ b/proprietary/src/main/resources/static/css/audit-dashboard.css
@@ -129,12 +129,14 @@
     background-color: var(--md-sys-color-surface-container-low);
     color: var(--md-sys-color-on-surface);
     border-radius: 4px;
-    padding: 10px;
-    max-height: 300px;
+    padding: 15px;
+    max-height: 350px;
     overflow-y: auto;
     font-family: monospace;
+    font-size: 0.9rem;
     white-space: pre-wrap;
     border: 1px solid var(--md-sys-color-outline-variant);
+    margin-top: 10px;
 }
 
 /* Simple, minimal radio styling - no extras */
@@ -192,6 +194,17 @@ label.btn-outline-primary input[type="radio"] {
     border-top-color: var(--md-sys-color-outline-variant);
 }
 
+/* Improved modal positioning */
+.modal-dialog-centered {
+    display: flex;
+    align-items: center;
+    min-height: calc(100% - 3.5rem);
+}
+
+.modal {
+    z-index: 1050;
+}
+
 /* Button overrides for theme consistency */
 .btn-outline-primary {
     color: var(--md-sys-color-primary);
diff --git a/proprietary/src/main/resources/static/js/audit/dashboard.js b/proprietary/src/main/resources/static/js/audit/dashboard.js
index c1700a4d0..3d013fa2e 100644
--- a/proprietary/src/main/resources/static/js/audit/dashboard.js
+++ b/proprietary/src/main/resources/static/js/audit/dashboard.js
@@ -358,7 +358,7 @@ function renderTable(events) {
                     <td>${formatDate(event.timestamp)}</td>
                     <td>${escapeHtml(event.principal || 'N/A')}</td>
                     <td>${escapeHtml(event.type || 'N/A')}</td>
-                    <td><button class="btn btn-sm btn-outline-primary view-details">View Details</button></td>
+                    <td><button class="btn btn-sm btn-outline-primary view-details">${window.i18n.viewDetails || 'View Details'}</button></td>
                 `;
                 
                 // Store event data for modal
@@ -385,22 +385,35 @@ function renderTable(events) {
 
 // Show event details in modal
 function showEventDetails(event) {
-    modalId.textContent = event.id;
-    modalPrincipal.textContent = event.principal;
-    modalType.textContent = event.type;
-    modalTimestamp.textContent = formatDate(event.timestamp);
+    // Get modal elements by ID with correct hyphenated IDs from HTML
+    const modalId = document.getElementById('modal-id');
+    const modalPrincipal = document.getElementById('modal-principal');
+    const modalType = document.getElementById('modal-type');
+    const modalTimestamp = document.getElementById('modal-timestamp');
+    const modalData = document.getElementById('modal-data');
+    const eventDetailsModal = document.getElementById('eventDetailsModal');
+    
+    // Set modal content
+    if (modalId) modalId.textContent = event.id;
+    if (modalPrincipal) modalPrincipal.textContent = event.principal;
+    if (modalType) modalType.textContent = event.type;
+    if (modalTimestamp) modalTimestamp.textContent = formatDate(event.timestamp);
     
     // Format JSON data
-    try {
-        const dataObj = JSON.parse(event.data);
-        modalData.textContent = JSON.stringify(dataObj, null, 2);
-    } catch (e) {
-        modalData.textContent = event.data;
+    if (modalData) {
+        try {
+            const dataObj = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
+            modalData.textContent = JSON.stringify(dataObj, null, 2);
+        } catch (e) {
+            modalData.textContent = event.data || 'No data available';
+        }
     }
     
     // Show the modal
-    const modal = new bootstrap.Modal(eventDetailsModal);
-    modal.show();
+    if (eventDetailsModal) {
+        const modal = new bootstrap.Modal(eventDetailsModal);
+        modal.show();
+    }
 }
 
 // No need for a dynamic pagination renderer anymore as we're using static buttons
diff --git a/proprietary/src/main/resources/templates/audit/dashboard.html b/proprietary/src/main/resources/templates/audit/dashboard.html
index 27f59ffc8..a0a61d69e 100644
--- a/proprietary/src/main/resources/templates/audit/dashboard.html
+++ b/proprietary/src/main/resources/templates/audit/dashboard.html
@@ -234,7 +234,7 @@
                 
                 <!-- Event Details Modal -->
                 <div class="modal fade" id="eventDetailsModal" tabindex="-1" aria-labelledby="eventDetailsModalLabel" aria-hidden="true">
-                    <div class="modal-dialog modal-lg">
+                    <div class="modal-dialog modal-lg modal-dialog-centered">
                         <div class="modal-content">
                             <div class="modal-header">
                                 <h5 class="modal-title" id="eventDetailsModalLabel" th:text="#{audit.dashboard.modal.eventDetails}">Event Details</h5>
@@ -368,7 +368,8 @@
             loadingPage: /*[[#{audit.dashboard.js.loadingPage}]]*/ 'Loading page',
             eventsByType: /*[[#{audit.dashboard.eventsByType}]]*/ 'Events by Type',
             eventsByUser: /*[[#{audit.dashboard.eventsByUser}]]*/ 'Events by User',
-            eventsOverTime: /*[[#{audit.dashboard.eventsOverTime}]]*/ 'Events Over Time'
+            eventsOverTime: /*[[#{audit.dashboard.eventsOverTime}]]*/ 'Events Over Time',
+            viewDetails: /*[[#{audit.dashboard.table.viewDetails}]]*/ 'View Details'
         };
     </script>
     
diff --git a/stirling-pdf/src/main/resources/messages_en_GB.properties b/stirling-pdf/src/main/resources/messages_en_GB.properties
index 940431990..2ff019480 100644
--- a/stirling-pdf/src/main/resources/messages_en_GB.properties
+++ b/stirling-pdf/src/main/resources/messages_en_GB.properties
@@ -1676,6 +1676,7 @@ audit.dashboard.table.time=Time
 audit.dashboard.table.user=User
 audit.dashboard.table.type=Type
 audit.dashboard.table.details=Details
+audit.dashboard.table.viewDetails=View Details
 
 # Pagination
 audit.dashboard.pagination.show=Show