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

@@ -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>
+		
 	}
 }