From 8424e97cf8e54c84b65414781a38a86168267207 Mon Sep 17 00:00:00 2001
From: StarFleetCPTN <starfleetcptn@protonmail.com>
Date: Wed, 26 Mar 2025 16:50:20 -0700
Subject: [PATCH] feat: Add modal functionality for viewing audit log details

- Implemented a modal to display detailed information for audit logs.
- Added event listeners for showing and hiding the modal based on user interactions.
- Enhanced user experience by allowing users to view JSON-formatted details in the modal.
- Included functionality to close the modal when clicking outside of it.
---
 components/admin_audit.templ | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/components/admin_audit.templ b/components/admin_audit.templ
index 8fc4e21..007f84b 100644
--- a/components/admin_audit.templ
+++ b/components/admin_audit.templ
@@ -302,6 +302,36 @@ templ AdminAuditLogs(ctx context.Context, data AuditLogsData) {
 			</div>
 		</div>
 		
+		<script>
+			// Modal functionality
+			document.addEventListener('DOMContentLoaded', function() {
+				const modal = document.getElementById('details-modal');
+				const detailsContent = document.getElementById('details-content');
+				
+				// Handle modal show/hide
+				document.querySelectorAll('[data-modal-target="details-modal"]').forEach(button => {
+					button.addEventListener('click', function() {
+						const details = this.getAttribute('data-details');
+						detailsContent.textContent = JSON.stringify(JSON.parse(details), null, 2);
+						modal.classList.remove('hidden');
+					});
+				});
+				
+				document.querySelectorAll('[data-modal-hide="details-modal"]').forEach(button => {
+					button.addEventListener('click', function() {
+						modal.classList.add('hidden');
+					});
+				});
+				
+				// Close modal when clicking outside
+				modal.addEventListener('click', function(e) {
+					if (e.target === modal) {
+						modal.classList.add('hidden');
+					}
+				});
+			});
+		</script>
+		
 	}
 }