Harden CSP by removing unsafe-inline for scripts

Refactored all inline event handlers (onclick, onchange, onsubmit) to use
addEventListener with data-action attributes and event delegation pattern.

Changes:
- views/*.php: Replaced inline handlers with data-action attributes
- views/admin/*.php: Same refactoring for all admin views
- assets/js/dashboard.js: Added event delegation for bulk/quick action modals
- assets/js/ticket.js: Added event delegation for dynamic elements
- assets/js/markdown.js: Refactored toolbar button handlers
- assets/js/keyboard-shortcuts.js: Refactored modal close button
- SecurityHeadersMiddleware.php: Enabled strict CSP with nonces

The CSP now uses script-src 'self' 'nonce-{nonce}' instead of 'unsafe-inline',
significantly improving XSS protection.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

assets/js/dashboard.js

@@ -97,7 +97,7 @@ function initMobileSidebar() {
                 <span class="nav-icon">🏠</span>
                 <span>Home</span>
             </a>
-            <button type="button" onclick="openMobileSidebar()">
+            <button type="button" data-action="open-mobile-sidebar">
                 <span class="nav-icon">🔍</span>
                 <span>Filter</span>
             </button>
@@ -105,7 +105,7 @@ function initMobileSidebar() {
                 <span class="nav-icon">➕</span>
                 <span>New</span>
             </a>
-            <button type="button" onclick="if(typeof openSettingsModal==='function')openSettingsModal()">
+            <button type="button" data-action="open-settings-modal">
                 <span class="nav-icon">⚙️</span>
                 <span>Settings</span>
             </button>
@@ -150,6 +150,61 @@ document.addEventListener('DOMContentLoaded', function() {
     // Force dark mode only (terminal aesthetic - no theme switching)
     document.documentElement.setAttribute('data-theme', 'dark');
     document.body.classList.add('dark-mode');
+
+    // Event delegation for dynamically created modals
+    document.addEventListener('click', function(e) {
+        const target = e.target.closest('[data-action]');
+        if (!target) return;
+
+        const action = target.dataset.action;
+        switch (action) {
+            // Bulk operations
+            case 'perform-bulk-assign':
+                performBulkAssign();
+                break;
+            case 'close-bulk-assign-modal':
+                closeBulkAssignModal();
+                break;
+            case 'perform-bulk-priority':
+                performBulkPriority();
+                break;
+            case 'close-bulk-priority-modal':
+                closeBulkPriorityModal();
+                break;
+            case 'perform-bulk-status':
+                performBulkStatusChange();
+                break;
+            case 'close-bulk-status-modal':
+                closeBulkStatusModal();
+                break;
+            case 'perform-bulk-delete':
+                performBulkDelete();
+                break;
+            case 'close-bulk-delete-modal':
+                closeBulkDeleteModal();
+                break;
+            // Quick actions
+            case 'perform-quick-status':
+                performQuickStatusChange(target.dataset.ticketId);
+                break;
+            case 'close-quick-status-modal':
+                closeQuickStatusModal();
+                break;
+            case 'perform-quick-assign':
+                performQuickAssign(target.dataset.ticketId);
+                break;
+            case 'close-quick-assign-modal':
+                closeQuickAssignModal();
+                break;
+            // Mobile navigation
+            case 'open-mobile-sidebar':
+                if (typeof openMobileSidebar === 'function') openMobileSidebar();
+                break;
+            case 'open-settings-modal':
+                if (typeof openSettingsModal === 'function') openSettingsModal();
+                break;
+        }
+    });
 });
 
 function initTableSorting() {
@@ -716,8 +771,8 @@ function showBulkAssignModal() {
 
                 <div class="ascii-content">
                     <div class="modal-footer">
-                        <button onclick="performBulkAssign()" class="btn btn-bulk">Assign</button>
+                        <button data-action="perform-bulk-assign" class="btn btn-bulk">Assign</button>
-                        <button onclick="closeBulkAssignModal()" class="btn btn-secondary">Cancel</button>
+                        <button data-action="close-bulk-assign-modal" class="btn btn-secondary">Cancel</button>
                     </div>
                 </div>
             </div>
@@ -829,8 +884,8 @@ function showBulkPriorityModal() {
 
                 <div class="ascii-content">
                     <div class="modal-footer">
-                        <button onclick="performBulkPriority()" class="btn btn-bulk">Update</button>
+                        <button data-action="perform-bulk-priority" class="btn btn-bulk">Update</button>
-                        <button onclick="closeBulkPriorityModal()" class="btn btn-secondary">Cancel</button>
+                        <button data-action="close-bulk-priority-modal" class="btn btn-secondary">Cancel</button>
                     </div>
                 </div>
             </div>
@@ -963,8 +1018,8 @@ function showBulkStatusModal() {
                 
                 <div class="ascii-content">
                     <div class="modal-footer">
-                        <button onclick="performBulkStatusChange()" class="btn btn-bulk">Update</button>
+                        <button data-action="perform-bulk-status" class="btn btn-bulk">Update</button>
-                        <button onclick="closeBulkStatusModal()" class="btn btn-secondary">Cancel</button>
+                        <button data-action="close-bulk-status-modal" class="btn btn-secondary">Cancel</button>
                     </div>
                 </div>
             </div>
@@ -1057,8 +1112,8 @@ function showBulkDeleteModal() {
                 
                 <div class="ascii-content">
                     <div class="modal-footer">
-                        <button onclick="performBulkDelete()" class="btn btn-bulk" style="background: var(--status-closed); border-color: var(--status-closed);">Delete Permanently</button>
+                        <button data-action="perform-bulk-delete" class="btn btn-bulk" style="background: var(--status-closed); border-color: var(--status-closed);">Delete Permanently</button>
-                        <button onclick="closeBulkDeleteModal()" class="btn btn-secondary">Cancel</button>
+                        <button data-action="close-bulk-delete-modal" class="btn btn-secondary">Cancel</button>
                     </div>
                 </div>
             </div>
@@ -1332,8 +1387,8 @@ function quickStatusChange(ticketId, currentStatus) {
 
                 <div class="ascii-content">
                     <div class="modal-footer">
-                        <button onclick="performQuickStatusChange('${ticketId}')" class="btn btn-primary">Update</button>
+                        <button data-action="perform-quick-status" data-ticket-id="${ticketId}" class="btn btn-primary">Update</button>
-                        <button onclick="closeQuickStatusModal()" class="btn btn-secondary">Cancel</button>
+                        <button data-action="close-quick-status-modal" class="btn btn-secondary">Cancel</button>
                     </div>
                 </div>
             </div>
@@ -1407,8 +1462,8 @@ function quickAssign(ticketId) {
 
                 <div class="ascii-content">
                     <div class="modal-footer">
-                        <button onclick="performQuickAssign('${ticketId}')" class="btn btn-primary">Assign</button>
+                        <button data-action="perform-quick-assign" data-ticket-id="${ticketId}" class="btn btn-primary">Assign</button>
-                        <button onclick="closeQuickAssignModal()" class="btn btn-secondary">Cancel</button>
+                        <button data-action="close-quick-assign-modal" class="btn btn-secondary">Cancel</button>
                     </div>
                 </div>
             </div>

assets/js/keyboard-shortcuts.js

@@ -123,11 +123,16 @@ function showKeyboardHelp() {
                         </table>
                     </div>
                     <div class="modal-footer" style="margin-top: 1rem;">
-                        <button class="btn btn-secondary" onclick="this.closest('.modal-overlay').remove()">Close</button>
+                        <button class="btn btn-secondary" data-action="close-shortcuts-modal">Close</button>
                     </div>
                 </div>
             </div>
         </div>
     `;
     document.body.appendChild(modal);
+
+    // Add event listener for the close button
+    modal.querySelector('[data-action="close-shortcuts-modal"]').addEventListener('click', function() {
+        modal.remove();
+    });
 }

assets/js/markdown.js

@@ -356,17 +356,36 @@ function createEditorToolbar(textareaId, containerId) {
     const toolbar = document.createElement('div');
     toolbar.className = 'editor-toolbar';
     toolbar.innerHTML = `
-        <button type="button" onclick="toolbarBold('${textareaId}')" title="Bold (Ctrl+B)"><b>B</b></button>
+        <button type="button" data-toolbar-action="bold" data-textarea="${textareaId}" title="Bold (Ctrl+B)"><b>B</b></button>
-        <button type="button" onclick="toolbarItalic('${textareaId}')" title="Italic (Ctrl+I)"><i>I</i></button>
+        <button type="button" data-toolbar-action="italic" data-textarea="${textareaId}" title="Italic (Ctrl+I)"><i>I</i></button>
-        <button type="button" onclick="toolbarCode('${textareaId}')" title="Code">&lt;/&gt;</button>
+        <button type="button" data-toolbar-action="code" data-textarea="${textareaId}" title="Code">&lt;/&gt;</button>
         <span class="toolbar-separator"></span>
-        <button type="button" onclick="toolbarHeading('${textareaId}')" title="Heading">H</button>
+        <button type="button" data-toolbar-action="heading" data-textarea="${textareaId}" title="Heading">H</button>
-        <button type="button" onclick="toolbarList('${textareaId}')" title="List">≡</button>
+        <button type="button" data-toolbar-action="list" data-textarea="${textareaId}" title="List">≡</button>
-        <button type="button" onclick="toolbarQuote('${textareaId}')" title="Quote">"</button>
+        <button type="button" data-toolbar-action="quote" data-textarea="${textareaId}" title="Quote">"</button>
         <span class="toolbar-separator"></span>
-        <button type="button" onclick="toolbarLink('${textareaId}')" title="Link">🔗</button>
+        <button type="button" data-toolbar-action="link" data-textarea="${textareaId}" title="Link">🔗</button>
     `;
 
+    // Add event delegation for toolbar buttons
+    toolbar.addEventListener('click', function(e) {
+        const btn = e.target.closest('[data-toolbar-action]');
+        if (!btn) return;
+
+        const action = btn.dataset.toolbarAction;
+        const targetId = btn.dataset.textarea;
+
+        switch (action) {
+            case 'bold': toolbarBold(targetId); break;
+            case 'italic': toolbarItalic(targetId); break;
+            case 'code': toolbarCode(targetId); break;
+            case 'heading': toolbarHeading(targetId); break;
+            case 'list': toolbarList(targetId); break;
+            case 'quote': toolbarQuote(targetId); break;
+            case 'link': toolbarLink(targetId); break;
+        }
+    });
+
     container.insertBefore(toolbar, container.firstChild);
 }
 

assets/js/ticket.js

@@ -569,7 +569,7 @@ function showTab(tabName) {
 
     // Show selected tab and activate its button
     document.getElementById(`${tabName}-tab`).style.display = 'block';
-    document.querySelector(`[onclick="showTab('${tabName}')"]`).classList.add('active');
+    document.querySelector(`.tab-btn[data-tab="${tabName}"]`).classList.add('active');
 
     // Load attachments when tab is shown
     if (tabName === 'attachments') {
@@ -654,7 +654,7 @@ function renderDependencies(dependencies) {
                         <span style="margin-left: 0.5rem;">${escapeHtml(dep.title)}</span>
                         <span class="status-badge ${statusClass}" style="margin-left: 0.5rem; font-size: 0.8rem;">${escapeHtml(dep.status)}</span>
                     </div>
-                    <button onclick="removeDependency('${dep.dependency_id}')" class="btn btn-small" style="padding: 0.25rem 0.5rem; font-size: 0.8rem;">Remove</button>
+                    <button data-action="remove-dependency" data-dependency-id="${dep.dependency_id}" class="btn btn-small" style="padding: 0.25rem 0.5rem; font-size: 0.8rem;">Remove</button>
                 </div>`;
             });
 
@@ -956,7 +956,7 @@ function renderAttachments(attachments) {
             </div>
             <div class="attachment-actions">
                 <a href="/api/download_attachment.php?id=${att.attachment_id}" class="btn btn-small" title="Download">⬇</a>
-                <button onclick="deleteAttachment(${att.attachment_id})" class="btn btn-small btn-danger" title="Delete">✕</button>
+                <button data-action="delete-attachment" data-attachment-id="${att.attachment_id}" class="btn btn-small btn-danger" title="Delete">✕</button>
             </div>
         </div>`;
     });
@@ -1150,7 +1150,7 @@ function showMentionSuggestions(query, textarea) {
     let html = '';
     filtered.forEach((user, index) => {
         const isSelected = index === 0 ? 'selected' : '';
-        html += `<div class="mention-option ${isSelected}" data-username="${escapeHtml(user.username)}" onclick="selectMention('${escapeHtml(user.username)}')">
+        html += `<div class="mention-option ${isSelected}" data-username="${escapeHtml(user.username)}" data-action="select-mention">
             <span class="mention-username">@${escapeHtml(user.username)}</span>
             ${user.display_name ? `<span class="mention-displayname">${escapeHtml(user.display_name)}</span>` : ''}
         </div>`;
@@ -1212,6 +1212,31 @@ document.addEventListener('DOMContentLoaded', function() {
             el.innerHTML = highlightMentions(el.innerHTML);
         }
     });
+
+    // Event delegation for dynamically created elements
+    document.addEventListener('click', function(e) {
+        const target = e.target.closest('[data-action]');
+        if (!target) return;
+
+        const action = target.dataset.action;
+        switch (action) {
+            case 'remove-dependency':
+                removeDependency(target.dataset.dependencyId);
+                break;
+            case 'delete-attachment':
+                deleteAttachment(target.dataset.attachmentId);
+                break;
+            case 'select-mention':
+                selectMention(target.dataset.username);
+                break;
+            case 'save-edit-comment':
+                saveEditComment(parseInt(target.dataset.commentId));
+                break;
+            case 'cancel-edit-comment':
+                cancelEditComment(parseInt(target.dataset.commentId));
+                break;
+        }
+    });
 });
 
 // ========================================
@@ -1251,8 +1276,8 @@ function editComment(commentId) {
                 Markdown
             </label>
             <div class="comment-edit-buttons">
-                <button type="button" class="btn btn-small" onclick="saveEditComment(${commentId})">Save</button>
+                <button type="button" class="btn btn-small" data-action="save-edit-comment" data-comment-id="${commentId}">Save</button>
-                <button type="button" class="btn btn-secondary btn-small" onclick="cancelEditComment(${commentId})">Cancel</button>
+                <button type="button" class="btn btn-secondary btn-small" data-action="cancel-edit-comment" data-comment-id="${commentId}">Cancel</button>
             </div>
         </div>
     `;

middleware/SecurityHeadersMiddleware.php

@@ -26,12 +26,9 @@ class SecurityHeadersMiddleware {
         $nonce = self::getNonce();
 
         // Content Security Policy - restricts where resources can be loaded from
-        // Currently using 'unsafe-inline' for scripts due to legacy onclick handlers throughout views
+        // Using nonces for scripts to prevent XSS attacks while allowing inline scripts with valid nonces
-        // NOTE: Nonce infrastructure exists (getNonce method, nonce attributes in views) but is not
+        // All inline event handlers have been refactored to use addEventListener with data-action attributes
-        // enforced in CSP until all inline handlers are refactored to use addEventListener.
+        header("Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-{$nonce}'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self';");
-        // TODO: Complete refactoring of inline handlers, then change to:
-        //       script-src 'self' 'nonce-{$nonce}' (removing unsafe-inline)
-        header("Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self';");
 
         // Prevent clickjacking by disallowing framing
         header("X-Frame-Options: DENY");

views/CreateTicketView.php

@@ -77,7 +77,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                 <div class="ascii-frame-inner">
                     <div class="detail-group">
                         <label for="templateSelect">Use Template (Optional)</label>
-                        <select id="templateSelect" class="editable" onchange="loadTemplate()">
+                        <select id="templateSelect" class="editable" data-action="load-template">
                             <option value="">-- No Template --</option>
                             <?php if (isset($templates) && !empty($templates)): ?>
                                 <?php foreach ($templates as $template): ?>
@@ -172,7 +172,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                 <div class="ascii-frame-inner">
                     <div class="detail-group">
                         <label for="visibility">Ticket Visibility</label>
-                        <select id="visibility" name="visibility" class="editable" onchange="toggleVisibilityGroups()">
+                        <select id="visibility" name="visibility" class="editable" data-action="toggle-visibility-groups">
                             <option value="public" selected>Public - All authenticated users</option>
                             <option value="internal">Internal - Specific groups only</option>
                             <option value="confidential">Confidential - Creator, assignee, admins only</option>
@@ -230,7 +230,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                 <div class="ascii-frame-inner">
                     <div class="ticket-footer">
                         <button type="submit" class="btn primary">Create Ticket</button>
-                        <button type="button" onclick="window.location.href='<?php echo $GLOBALS['config']['BASE_URL']; ?>/'" class="btn back-btn">Cancel</button>
+                        <button type="button" data-action="navigate" data-url="<?php echo $GLOBALS['config']['BASE_URL']; ?>/" class="btn back-btn">Cancel</button>
                     </div>
                 </div>
             </div>
@@ -303,10 +303,32 @@ $nonce = SecurityHeadersMiddleware::getNonce();
             groupsContainer.style.display = 'block';
         } else {
             groupsContainer.style.display = 'none';
-            // Uncheck all group checkboxes when hiding
             document.querySelectorAll('.visibility-group-checkbox').forEach(cb => cb.checked = false);
         }
     }
+
+    // Event delegation for data-action handlers
+    document.addEventListener('click', function(event) {
+        const target = event.target.closest('[data-action]');
+        if (!target) return;
+
+        const action = target.dataset.action;
+        if (action === 'navigate') {
+            window.location.href = target.dataset.url;
+        }
+    });
+
+    document.addEventListener('change', function(event) {
+        const target = event.target.closest('[data-action]');
+        if (!target) return;
+
+        const action = target.dataset.action;
+        if (action === 'load-template') {
+            loadTemplate();
+        } else if (action === 'toggle-visibility-groups') {
+            toggleVisibilityGroups();
+        }
+    });
     </script>
 </body>
 </html>

views/DashboardView.php

@@ -84,7 +84,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                 <span class="user-name">👤 <?php echo htmlspecialchars($GLOBALS['currentUser']['display_name'] ?? $GLOBALS['currentUser']['username']); ?></span>
                 <?php if ($GLOBALS['currentUser']['is_admin']): ?>
                     <div class="admin-dropdown">
-                        <button class="admin-badge" onclick="toggleAdminMenu(event)">Admin ▼</button>
+                        <button class="admin-badge" data-action="toggle-admin-menu">Admin ▼</button>
                         <div class="admin-dropdown-content" id="adminDropdown">
                             <a href="/admin/templates">📋 Templates</a>
                             <a href="/admin/workflow">🔄 Workflow</a>
@@ -96,14 +96,14 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                         </div>
                     </div>
                 <?php endif; ?>
-                <button class="settings-icon" title="Settings (Alt+S)" onclick="openSettingsModal()">⚙</button>
+                <button class="settings-icon" title="Settings (Alt+S)" data-action="open-settings">⚙</button>
             <?php endif; ?>
         </div>
     </div>
 
     <!-- Collapsible ASCII Banner -->
     <div class="ascii-banner-wrapper collapsed">
-        <button class="banner-toggle" onclick="toggleBanner()">
+        <button class="banner-toggle" data-action="toggle-banner">
             <span class="toggle-icon">▼</span> ASCII Banner
         </button>
         <div id="ascii-banner-container" class="banner-content"></div>
@@ -127,7 +127,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
     <div class="dashboard-layout" id="dashboardLayout">
         <!-- Left Sidebar with Filters -->
         <aside class="dashboard-sidebar" id="dashboardSidebar">
-            <button class="sidebar-collapse-btn" onclick="toggleSidebar()" title="Collapse Sidebar">◀ Hide</button>
+            <button class="sidebar-collapse-btn" data-action="toggle-sidebar" title="Collapse Sidebar">◀ Hide</button>
             <div class="sidebar-content">
             <div class="ascii-frame-inner">
                 <div class="ascii-subsection-header">Filters</div>
@@ -190,7 +190,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
             </div>
         </aside>
         <!-- Expand button shown when sidebar is collapsed -->
-        <button class="sidebar-expand-btn" id="sidebarExpandBtn" onclick="toggleSidebar()" title="Show Filters">▶ Filters</button>
+        <button class="sidebar-expand-btn" id="sidebarExpandBtn" data-action="toggle-sidebar" title="Show Filters">▶ Filters</button>
 
         <!-- Main Content Area -->
         <main class="dashboard-main">
@@ -274,7 +274,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                     class="search-box"
                     value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>">
                 <button type="submit" class="btn search-btn">Search</button>
-                <button type="button" class="btn btn-secondary" onclick="openAdvancedSearch()" title="Advanced Search">⚙ Advanced</button>
+                <button type="button" class="btn btn-secondary" data-action="open-advanced-search" title="Advanced Search">⚙ Advanced</button>
                 <?php if (isset($_GET['search']) && !empty($_GET['search'])): ?>
                     <a href="?" class="clear-search-btn">✗</a>
                 <?php endif; ?>
@@ -284,15 +284,15 @@ $nonce = SecurityHeadersMiddleware::getNonce();
         <!-- Center: Actions + Count -->
         <div class="toolbar-center">
             <div class="view-toggle">
-                <button id="tableViewBtn" class="view-btn active" onclick="setViewMode('table')" title="Table View">≡</button>
+                <button id="tableViewBtn" class="view-btn active" data-action="set-view-mode" data-mode="table" title="Table View">≡</button>
-                <button id="cardViewBtn" class="view-btn" onclick="setViewMode('card')" title="Kanban View">▦</button>
+                <button id="cardViewBtn" class="view-btn" data-action="set-view-mode" data-mode="card" title="Kanban View">▦</button>
             </div>
-            <button onclick="window.location.href='<?php echo $GLOBALS['config']['BASE_URL']; ?>/ticket/create'" class="btn create-ticket">+ New Ticket</button>
+            <button data-action="navigate" data-url="<?php echo $GLOBALS['config']['BASE_URL']; ?>/ticket/create" class="btn create-ticket">+ New Ticket</button>
             <div class="export-dropdown" id="exportDropdown" style="display: none;">
-                <button class="btn" onclick="toggleExportMenu(event)">↓ Export Selected (<span id="exportCount">0</span>)</button>
+                <button class="btn" data-action="toggle-export-menu">↓ Export Selected (<span id="exportCount">0</span>)</button>
                 <div class="export-dropdown-content" id="exportDropdownContent">
-                    <a href="#" onclick="exportSelectedTickets('csv'); return false;">CSV</a>
+                    <a href="#" data-action="export-tickets" data-format="csv">CSV</a>
-                    <a href="#" onclick="exportSelectedTickets('json'); return false;">JSON</a>
+                    <a href="#" data-action="export-tickets" data-format="json">JSON</a>
                 </div>
             </div>
             <span class="ticket-count">Total: <?php echo $totalTickets; ?></span>
@@ -308,7 +308,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                 if ($page > 1) {
                     $currentParams['page'] = $page - 1;
                     $prevUrl = '?' . http_build_query($currentParams);
-                    echo "<button onclick='window.location.href=\"$prevUrl\"'>«</button>";
+                    echo "<button data-action='navigate' data-url='$prevUrl'>«</button>";
                 }
 
                 // Page number buttons
@@ -316,14 +316,14 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                     $activeClass = ($i === $page) ? 'active' : '';
                     $currentParams['page'] = $i;
                     $pageUrl = '?' . http_build_query($currentParams);
-                    echo "<button class='$activeClass' onclick='window.location.href=\"$pageUrl\"'>$i</button>";
+                    echo "<button class='$activeClass' data-action='navigate' data-url='$pageUrl'>$i</button>";
                 }
 
                 // Next page button
                 if ($page < $totalPages) {
                     $currentParams['page'] = $page + 1;
                     $nextUrl = '?' . http_build_query($currentParams);
-                    echo "<button onclick='window.location.href=\"$nextUrl\"'>»</button>";
+                    echo "<button data-action='navigate' data-url='$nextUrl'>»</button>";
                 }
                 ?>
             </div>
@@ -349,10 +349,10 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                 <?php if ($GLOBALS['currentUser']['is_admin'] ?? false): ?>
                 <div class="bulk-actions-inline" style="display: none;">
                     <span id="selected-count">0</span> tickets selected
-                    <button onclick="showBulkStatusModal()" class="btn btn-bulk">Change Status</button>
+                    <button data-action="bulk-status" class="btn btn-bulk">Change Status</button>
-                    <button onclick="showBulkAssignModal()" class="btn btn-bulk">Assign</button>
+                    <button data-action="bulk-assign" class="btn btn-bulk">Assign</button>
-                    <button onclick="showBulkPriorityModal()" class="btn btn-bulk">Priority</button>
+                    <button data-action="bulk-priority" class="btn btn-bulk">Priority</button>
-                    <button onclick="clearSelection()" class="btn btn-secondary">Clear</button>
+                    <button data-action="clear-selection" class="btn btn-secondary">Clear</button>
                 </div>
                 <?php endif; ?>
 
@@ -362,7 +362,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
         <thead>
             <tr>
                 <?php if ($GLOBALS['currentUser']['is_admin'] ?? false): ?>
-                    <th style="width: 40px;"><input type="checkbox" id="selectAllCheckbox" onclick="toggleSelectAll()"></th>
+                    <th style="width: 40px;"><input type="checkbox" id="selectAllCheckbox" data-action="toggle-select-all"></th>
                 <?php endif; ?>
                 <?php
                 $currentSort = isset($_GET['sort']) ? $_GET['sort'] : 'ticket_id';
@@ -390,7 +390,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                         $sortClass = ($currentSort === $col) ? "sort-$currentDir" : '';
                         $sortParams = array_merge($_GET, ['sort' => $col, 'dir' => $newDir]);
                         $sortUrl = '?' . http_build_query($sortParams);
-                        echo "<th class='$sortClass' onclick='window.location.href=\"$sortUrl\"'>$label</th>";
+                        echo "<th class='$sortClass' data-action='navigate' data-url='$sortUrl'>$label</th>";
                     }
                 }
                 ?>
@@ -406,7 +406,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
 
                     // Add checkbox column for admins
                     if ($GLOBALS['currentUser']['is_admin'] ?? false) {
-                        echo "<td onclick='toggleRowCheckbox(event, this)' class='checkbox-cell'><input type='checkbox' class='ticket-checkbox' value='{$row['ticket_id']}' onchange='updateSelectionCount()'></td>";
+                        echo "<td data-action='toggle-row-checkbox' class='checkbox-cell'><input type='checkbox' class='ticket-checkbox' value='{$row['ticket_id']}' data-action='update-selection'></td>";
                     }
 
                     echo "<td><a href='/ticket/{$row['ticket_id']}' class='ticket-link'>{$row['ticket_id']}</a></td>";
@@ -422,9 +422,9 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                     // Quick actions column
                     echo "<td class='quick-actions-cell'>";
                     echo "<div class='quick-actions'>";
-                    echo "<button onclick=\"event.stopPropagation(); window.location.href='/ticket/{$row['ticket_id']}'\" class='quick-action-btn' title='View'>👁</button>";
+                    echo "<button data-action='view-ticket' data-ticket-id='{$row['ticket_id']}' class='quick-action-btn' title='View'>👁</button>";
-                    echo "<button onclick=\"event.stopPropagation(); quickStatusChange('{$row['ticket_id']}', '{$row['status']}')\" class='quick-action-btn' title='Change Status'>🔄</button>";
+                    echo "<button data-action='quick-status' data-ticket-id='{$row['ticket_id']}' data-status='{$row['status']}' class='quick-action-btn' title='Change Status'>🔄</button>";
-                    echo "<button onclick=\"event.stopPropagation(); quickAssign('{$row['ticket_id']}')\" class='quick-action-btn' title='Assign'>👤</button>";
+                    echo "<button data-action='quick-assign' data-ticket-id='{$row['ticket_id']}' class='quick-action-btn' title='Assign'>👤</button>";
                     echo "</div>";
                     echo "</td>";
                     echo "</tr>";
@@ -487,14 +487,14 @@ $nonce = SecurityHeadersMiddleware::getNonce();
     </div>
 
     <!-- Settings Modal -->
-    <div class="settings-modal" id="settingsModal" style="display: none;" onclick="closeOnBackdropClick(event)">
+    <div class="settings-modal" id="settingsModal" style="display: none;" data-action="close-settings-backdrop">
         <div class="settings-content">
             <span class="bottom-left-corner">╚</span>
             <span class="bottom-right-corner">╝</span>
 
             <div class="settings-header">
                 <h3>⚙ System Preferences</h3>
-                <button class="close-settings" onclick="closeSettingsModal()">✗</button>
+                <button class="close-settings" data-action="close-settings">✗</button>
             </div>
 
             <div class="settings-body">
@@ -639,34 +639,34 @@ $nonce = SecurityHeadersMiddleware::getNonce();
             </div>
 
             <div class="settings-footer">
-                <button class="btn btn-primary" onclick="saveSettings()">Save Preferences</button>
+                <button class="btn btn-primary" data-action="save-settings">Save Preferences</button>
-                <button class="btn btn-secondary" onclick="closeSettingsModal()">Cancel</button>
+                <button class="btn btn-secondary" data-action="close-settings">Cancel</button>
             </div>
         </div>
     </div>
 
     <!-- Advanced Search Modal -->
-    <div class="settings-modal" id="advancedSearchModal" style="display: none;" onclick="closeOnAdvancedSearchBackdropClick(event)">
+    <div class="settings-modal" id="advancedSearchModal" style="display: none;" data-action="close-advanced-search-backdrop">
         <div class="settings-content">
             <div class="settings-header">
                 <h3>🔍 Advanced Search</h3>
-                <button class="close-settings" onclick="closeAdvancedSearch()">✗</button>
+                <button class="close-settings" data-action="close-advanced-search">✗</button>
             </div>
 
-            <form id="advancedSearchForm" onsubmit="performAdvancedSearch(event)">
+            <form id="advancedSearchForm">
                 <div class="settings-body">
                     <!-- Saved Filters -->
                     <div class="settings-section">
                         <h4>╔══ Saved Filters ══╗</h4>
                         <div class="setting-row">
                             <label for="saved-filters-select">Load Filter:</label>
-                            <select id="saved-filters-select" class="setting-select" style="max-width: 70%;" onchange="loadSavedFilter()">
+                            <select id="saved-filters-select" class="setting-select" style="max-width: 70%;" data-action="load-saved-filter">
                                 <option value="">-- Select a saved filter --</option>
                             </select>
                         </div>
                         <div class="setting-row" style="justify-content: flex-end; gap: 0.5rem;">
-                            <button type="button" class="btn btn-secondary" onclick="saveCurrentFilter()" style="padding: 0.5rem 1rem;">💾 Save Current</button>
+                            <button type="button" class="btn btn-secondary" data-action="save-filter" style="padding: 0.5rem 1rem;">💾 Save Current</button>
-                            <button type="button" class="btn btn-secondary" onclick="deleteSavedFilter()" style="padding: 0.5rem 1rem;">🗑 Delete Selected</button>
+                            <button type="button" class="btn btn-secondary" data-action="delete-filter" style="padding: 0.5rem 1rem;">🗑 Delete Selected</button>
                         </div>
                     </div>
 
@@ -757,8 +757,8 @@ $nonce = SecurityHeadersMiddleware::getNonce();
 
                 <div class="settings-footer">
                     <button type="submit" class="btn btn-primary">Search</button>
-                    <button type="button" class="btn btn-secondary" onclick="resetAdvancedSearch()">Reset</button>
+                    <button type="button" class="btn btn-secondary" data-action="reset-advanced-search">Reset</button>
-                    <button type="button" class="btn btn-secondary" onclick="closeAdvancedSearch()">Cancel</button>
+                    <button type="button" class="btn btn-secondary" data-action="close-advanced-search">Cancel</button>
                 </div>
             </form>
         </div>
@@ -768,26 +768,159 @@ $nonce = SecurityHeadersMiddleware::getNonce();
     <script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/keyboard-shortcuts.js"></script>
     <script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/advanced-search.js"></script>
     <script nonce="<?php echo $nonce; ?>">
-        // Admin dropdown toggle
+        // Event delegation for all data-action handlers
-        function toggleAdminMenu(event) {
-            event.stopPropagation();
-            const dropdown = document.getElementById('adminDropdown');
-            dropdown.classList.toggle('show');
-        }
-
-        // Close admin dropdown when clicking outside
         document.addEventListener('click', function(event) {
+            const target = event.target.closest('[data-action]');
+            if (!target) {
+                // Close admin dropdown when clicking outside
                 const dropdown = document.getElementById('adminDropdown');
                 if (dropdown && !event.target.closest('.admin-dropdown')) {
                     dropdown.classList.remove('show');
                 }
+                return;
+            }
+
+            const action = target.dataset.action;
+
+            switch (action) {
+                case 'toggle-admin-menu':
+                    event.stopPropagation();
+                    document.getElementById('adminDropdown').classList.toggle('show');
+                    break;
+
+                case 'open-settings':
+                    openSettingsModal();
+                    break;
+
+                case 'close-settings':
+                    closeSettingsModal();
+                    break;
+
+                case 'close-settings-backdrop':
+                    if (event.target === target) closeSettingsModal();
+                    break;
+
+                case 'save-settings':
+                    saveSettings();
+                    break;
+
+                case 'toggle-banner':
+                    toggleBanner();
+                    break;
+
+                case 'toggle-sidebar':
+                    toggleSidebar();
+                    break;
+
+                case 'open-advanced-search':
+                    openAdvancedSearch();
+                    break;
+
+                case 'close-advanced-search':
+                    closeAdvancedSearch();
+                    break;
+
+                case 'close-advanced-search-backdrop':
+                    if (event.target === target) closeAdvancedSearch();
+                    break;
+
+                case 'reset-advanced-search':
+                    resetAdvancedSearch();
+                    break;
+
+                case 'set-view-mode':
+                    setViewMode(target.dataset.mode);
+                    break;
+
+                case 'navigate':
+                    window.location.href = target.dataset.url;
+                    break;
+
+                case 'toggle-export-menu':
+                    event.stopPropagation();
+                    toggleExportMenu(event);
+                    break;
+
+                case 'export-tickets':
+                    event.preventDefault();
+                    exportSelectedTickets(target.dataset.format);
+                    break;
+
+                case 'bulk-status':
+                    showBulkStatusModal();
+                    break;
+
+                case 'bulk-assign':
+                    showBulkAssignModal();
+                    break;
+
+                case 'bulk-priority':
+                    showBulkPriorityModal();
+                    break;
+
+                case 'clear-selection':
+                    clearSelection();
+                    break;
+
+                case 'toggle-select-all':
+                    toggleSelectAll();
+                    break;
+
+                case 'toggle-row-checkbox':
+                    toggleRowCheckbox(event, target);
+                    break;
+
+                case 'view-ticket':
+                    event.stopPropagation();
+                    window.location.href = '/ticket/' + target.dataset.ticketId;
+                    break;
+
+                case 'quick-status':
+                    event.stopPropagation();
+                    quickStatusChange(target.dataset.ticketId, target.dataset.status);
+                    break;
+
+                case 'quick-assign':
+                    event.stopPropagation();
+                    quickAssign(target.dataset.ticketId);
+                    break;
+
+                case 'save-filter':
+                    saveCurrentFilter();
+                    break;
+
+                case 'delete-filter':
+                    deleteSavedFilter();
+                    break;
+            }
+        });
+
+        // Handle change events separately
+        document.addEventListener('change', function(event) {
+            const target = event.target.closest('[data-action]');
+            if (!target) return;
+
+            const action = target.dataset.action;
+
+            switch (action) {
+                case 'update-selection':
+                    updateSelectionCount();
+                    break;
+
+                case 'load-saved-filter':
+                    loadSavedFilter();
+                    break;
+            }
+        });
+
+        // Handle form submit for advanced search
+        document.getElementById('advancedSearchForm').addEventListener('submit', function(event) {
+            performAdvancedSearch(event);
         });
 
         // Helper function to get date in server timezone
         function getServerDate() {
-            // Get current UTC time
             const now = new Date();
-            // Apply server timezone offset (APP_TIMEZONE_OFFSET is in minutes)
             const serverTime = new Date(now.getTime() + (window.APP_TIMEZONE_OFFSET * 60000) + (now.getTimezoneOffset() * 60000));
             return serverTime.getFullYear() + '-' +
                 String(serverTime.getMonth() + 1).padStart(2, '0') + '-' +
@@ -800,7 +933,6 @@ $nonce = SecurityHeadersMiddleware::getNonce();
             card.addEventListener('click', function() {
                 const classList = this.classList;
                 let url = '/?';
-                // Use server timezone date (default: EST)
                 const today = getServerDate();
 
                 if (classList.contains('stat-open')) {

views/TicketView.php

@@ -182,7 +182,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                                 <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 0.75rem;">
                                     <div class="metadata-field">
                                         <label style="font-weight: 500; display: block; margin-bottom: 0.25rem; color: var(--terminal-cyan); font-family: var(--font-mono); font-size: 0.85rem;">Visibility:</label>
-                                        <select id="visibilitySelect" class="metadata-select editable-metadata" disabled onchange="toggleVisibilityGroupsEdit()" style="width: 100%; padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
+                                        <select id="visibilitySelect" class="metadata-select editable-metadata" disabled data-action="toggle-visibility-groups" style="width: 100%; padding: 0.25rem 0.5rem; border-radius: 0; border: 2px solid var(--terminal-green); background: var(--bg-primary); color: var(--terminal-green); font-family: var(--font-mono);">
                                             <option value="public" <?php echo $currentVisibility == 'public' ? 'selected' : ''; ?>>Public</option>
                                             <option value="internal" <?php echo $currentVisibility == 'internal' ? 'selected' : ''; ?>>Internal</option>
                                             <option value="confidential" <?php echo $currentVisibility == 'confidential' ? 'selected' : ''; ?>>Confidential</option>
@@ -211,7 +211,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                         </div>
                         <div class="header-controls">
                             <div class="status-priority-group">
-                                <select id="statusSelect" class="editable status-select status-<?php echo str_replace(' ', '-', strtolower($ticket["status"])); ?>" data-field="status" onchange="updateTicketStatus()">
+                                <select id="statusSelect" class="editable status-select status-<?php echo str_replace(' ', '-', strtolower($ticket["status"])); ?>" data-field="status" data-action="update-ticket-status">
                                     <option value="<?php echo $ticket['status']; ?>" selected>
                                         <?php echo $ticket['status']; ?> (current)
                                     </option>
@@ -275,14 +275,14 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                             <div class="markdown-toggles">
                                 <div class="preview-toggle">
                                     <label class="switch">
-                                        <input type="checkbox" id="markdownMaster" onchange="toggleMarkdownMode()">
+                                        <input type="checkbox" id="markdownMaster" data-action="toggle-markdown-mode">
                                         <span class="slider round"></span>
                                     </label>
                                     <span class="toggle-label">Enable Markdown</span>
                                 </div>
                                 <div class="preview-toggle">
                                     <label class="switch">
-                                        <input type="checkbox" id="markdownToggle" onchange="togglePreview()" disabled>
+                                        <input type="checkbox" id="markdownToggle" data-action="toggle-preview" disabled>
                                         <span class="slider round"></span>
                                     </label>
                                     <span class="toggle-label">Preview Markdown</span>
@@ -553,6 +553,28 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                     }
                 });
             }
+
+            // Handle change events for data-action
+            document.addEventListener('change', function(e) {
+                var target = e.target.closest('[data-action]');
+                if (!target) return;
+
+                var action = target.getAttribute('data-action');
+                switch (action) {
+                    case 'update-ticket-status':
+                        if (typeof updateTicketStatus === 'function') updateTicketStatus();
+                        break;
+                    case 'toggle-visibility-groups':
+                        if (typeof toggleVisibilityGroupsEdit === 'function') toggleVisibilityGroupsEdit();
+                        break;
+                    case 'toggle-markdown-mode':
+                        if (typeof toggleMarkdownMode === 'function') toggleMarkdownMode();
+                        break;
+                    case 'toggle-preview':
+                        if (typeof togglePreview === 'function') togglePreview();
+                        break;
+                }
+            });
         });
     </script>
 

views/admin/ApiKeysView.php

@@ -73,7 +73,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                 <div style="display: flex; gap: 0.5rem; align-items: center;">
                     <input type="text" id="newKeyValue" readonly
                         style="flex: 1; padding: 0.75rem; font-family: var(--font-mono); font-size: 0.85rem; background: var(--bg-primary); border: 2px solid var(--terminal-green); color: var(--terminal-green);">
-                    <button onclick="copyApiKey()" class="btn" title="Copy to clipboard">Copy</button>
+                    <button data-action="copy-api-key" class="btn" title="Copy to clipboard">Copy</button>
                 </div>
             </div>
 
@@ -135,7 +135,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                                     </td>
                                     <td>
                                         <?php if ($key['is_active']): ?>
-                                            <button onclick="revokeKey(<?php echo $key['api_key_id']; ?>)" class="btn btn-secondary" style="padding: 0.25rem 0.5rem; font-size: 0.8rem;">
+                                            <button data-action="revoke-key" data-id="<?php echo $key['api_key_id']; ?>" class="btn btn-secondary" style="padding: 0.25rem 0.5rem; font-size: 0.8rem;">
                                                 Revoke
                                             </button>
                                         <?php else: ?>
@@ -162,6 +162,22 @@ $nonce = SecurityHeadersMiddleware::getNonce();
     </div>
 
     <script nonce="<?php echo $nonce; ?>">
+    // Event delegation for data-action handlers
+    document.addEventListener('click', function(event) {
+        const target = event.target.closest('[data-action]');
+        if (!target) return;
+
+        const action = target.dataset.action;
+        switch (action) {
+            case 'copy-api-key':
+                copyApiKey();
+                break;
+            case 'revoke-key':
+                revokeKey(target.dataset.id);
+                break;
+        }
+    });
+
     document.getElementById('generateKeyForm').addEventListener('submit', async function(e) {
         e.preventDefault();
 

views/admin/CustomFieldsView.php

@@ -41,7 +41,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
             <div class="ascii-frame-inner">
                 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                     <h2 style="margin: 0;">Custom Field Definitions</h2>
-                    <button onclick="showCreateModal()" class="btn">+ New Field</button>
+                    <button data-action="show-create-modal" class="btn">+ New Field</button>
                 </div>
 
                 <table style="width: 100%;">
@@ -79,8 +79,8 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                                         </span>
                                     </td>
                                     <td>
-                                        <button onclick="editField(<?php echo $field['field_id']; ?>)" class="btn btn-small">Edit</button>
+                                        <button data-action="edit-field" data-id="<?php echo $field['field_id']; ?>" class="btn btn-small">Edit</button>
-                                        <button onclick="deleteField(<?php echo $field['field_id']; ?>)" class="btn btn-small btn-danger">Delete</button>
+                                        <button data-action="delete-field" data-id="<?php echo $field['field_id']; ?>" class="btn btn-small btn-danger">Delete</button>
                                     </td>
                                 </tr>
                             <?php endforeach; ?>
@@ -92,13 +92,13 @@ $nonce = SecurityHeadersMiddleware::getNonce();
     </div>
 
     <!-- Create/Edit Modal -->
-    <div class="settings-modal" id="fieldModal" style="display: none;">
+    <div class="settings-modal" id="fieldModal" style="display: none;" data-action="close-modal-backdrop">
         <div class="settings-content" style="max-width: 500px;">
             <div class="settings-header">
                 <h3 id="modalTitle">Create Custom Field</h3>
-                <button class="close-settings" onclick="closeModal()">×</button>
+                <button class="close-settings" data-action="close-modal">×</button>
             </div>
-            <form id="fieldForm" onsubmit="saveField(event)">
+            <form id="fieldForm">
                 <input type="hidden" id="field_id" name="field_id">
                 <div class="settings-body">
                     <div class="setting-row">
@@ -111,7 +111,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                     </div>
                     <div class="setting-row">
                         <label for="field_type">Field Type *</label>
-                        <select id="field_type" name="field_type" required onchange="toggleOptionsField()">
+                        <select id="field_type" name="field_type" required data-action="toggle-options-field">
                             <option value="text">Text</option>
                             <option value="textarea">Text Area</option>
                             <option value="select">Dropdown (Select)</option>
@@ -148,7 +148,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                 </div>
                 <div class="settings-footer">
                     <button type="submit" class="btn btn-primary">Save</button>
-                    <button type="button" class="btn btn-secondary" onclick="closeModal()">Cancel</button>
+                    <button type="button" class="btn btn-secondary" data-action="close-modal">Cancel</button>
                 </div>
             </form>
         </div>
@@ -169,16 +169,48 @@ $nonce = SecurityHeadersMiddleware::getNonce();
             document.getElementById('fieldModal').style.display = 'none';
         }
 
-        // Close modal on ESC key
+        // Event delegation for data-action handlers
-        document.addEventListener('keydown', (e) => {
+        document.addEventListener('click', function(event) {
-            if (e.key === 'Escape') {
+            const target = event.target.closest('[data-action]');
+            if (!target) return;
+
+            const action = target.dataset.action;
+            switch (action) {
+                case 'show-create-modal':
+                    showCreateModal();
+                    break;
+                case 'close-modal':
                     closeModal();
+                    break;
+                case 'close-modal-backdrop':
+                    if (event.target === target) closeModal();
+                    break;
+                case 'edit-field':
+                    editField(target.dataset.id);
+                    break;
+                case 'delete-field':
+                    deleteField(target.dataset.id);
+                    break;
             }
         });
 
-        // Close modal when clicking on backdrop (outside content)
+        document.addEventListener('change', function(event) {
-        document.getElementById('fieldModal').addEventListener('click', (e) => {
+            const target = event.target.closest('[data-action]');
-            if (e.target.classList.contains('settings-modal')) {
+            if (!target) return;
+
+            if (target.dataset.action === 'toggle-options-field') {
+                toggleOptionsField();
+            }
+        });
+
+        // Form submit handler
+        document.getElementById('fieldForm').addEventListener('submit', function(e) {
+            saveField(e);
+        });
+
+        // Close modal on ESC key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
                 closeModal();
             }
         });

views/admin/RecurringTicketsView.php

@@ -41,7 +41,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
             <div class="ascii-frame-inner">
                 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                     <h2 style="margin: 0;">Scheduled Tickets</h2>
-                    <button onclick="showCreateModal()" class="btn">+ New Recurring Ticket</button>
+                    <button data-action="show-create-modal" class="btn">+ New Recurring Ticket</button>
                 </div>
 
                 <table style="width: 100%;">
@@ -91,11 +91,11 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                                         </span>
                                     </td>
                                     <td>
-                                        <button onclick="editRecurring(<?php echo $rt['recurring_id']; ?>)" class="btn btn-small">Edit</button>
+                                        <button data-action="edit-recurring" data-id="<?php echo $rt['recurring_id']; ?>" class="btn btn-small">Edit</button>
-                                        <button onclick="toggleRecurring(<?php echo $rt['recurring_id']; ?>)" class="btn btn-small">
+                                        <button data-action="toggle-recurring" data-id="<?php echo $rt['recurring_id']; ?>" class="btn btn-small">
                                             <?php echo $rt['is_active'] ? 'Disable' : 'Enable'; ?>
                                         </button>
-                                        <button onclick="deleteRecurring(<?php echo $rt['recurring_id']; ?>)" class="btn btn-small btn-danger">Delete</button>
+                                        <button data-action="delete-recurring" data-id="<?php echo $rt['recurring_id']; ?>" class="btn btn-small btn-danger">Delete</button>
                                     </td>
                                 </tr>
                             <?php endforeach; ?>
@@ -107,13 +107,13 @@ $nonce = SecurityHeadersMiddleware::getNonce();
     </div>
 
     <!-- Create/Edit Modal -->
-    <div class="settings-modal" id="recurringModal" style="display: none;">
+    <div class="settings-modal" id="recurringModal" style="display: none;" data-action="close-modal-backdrop">
         <div class="settings-content" style="max-width: 800px; width: 90%;">
             <div class="settings-header">
                 <h3 id="modalTitle">Create Recurring Ticket</h3>
-                <button class="close-settings" onclick="closeModal()">×</button>
+                <button class="close-settings" data-action="close-modal">×</button>
             </div>
-            <form id="recurringForm" onsubmit="saveRecurring(event)">
+            <form id="recurringForm">
                 <input type="hidden" id="recurring_id" name="recurring_id">
                 <div class="settings-body">
                     <div class="setting-row">
@@ -126,7 +126,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                     </div>
                     <div class="setting-row">
                         <label for="schedule_type">Schedule Type *</label>
-                        <select id="schedule_type" name="schedule_type" required onchange="updateScheduleOptions()">
+                        <select id="schedule_type" name="schedule_type" required data-action="update-schedule-options">
                             <option value="daily">Daily</option>
                             <option value="weekly">Weekly</option>
                             <option value="monthly">Monthly</option>
@@ -183,7 +183,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                 </div>
                 <div class="settings-footer">
                     <button type="submit" class="btn btn-primary">Save</button>
-                    <button type="button" class="btn btn-secondary" onclick="closeModal()">Cancel</button>
+                    <button type="button" class="btn btn-secondary" data-action="close-modal">Cancel</button>
                 </div>
             </form>
         </div>
@@ -203,16 +203,51 @@ $nonce = SecurityHeadersMiddleware::getNonce();
             document.getElementById('recurringModal').style.display = 'none';
         }
 
-        // Close modal on ESC key
+        // Event delegation for data-action handlers
-        document.addEventListener('keydown', (e) => {
+        document.addEventListener('click', function(event) {
-            if (e.key === 'Escape') {
+            const target = event.target.closest('[data-action]');
+            if (!target) return;
+
+            const action = target.dataset.action;
+            switch (action) {
+                case 'show-create-modal':
+                    showCreateModal();
+                    break;
+                case 'close-modal':
                     closeModal();
+                    break;
+                case 'close-modal-backdrop':
+                    if (event.target === target) closeModal();
+                    break;
+                case 'edit-recurring':
+                    editRecurring(target.dataset.id);
+                    break;
+                case 'toggle-recurring':
+                    toggleRecurring(target.dataset.id);
+                    break;
+                case 'delete-recurring':
+                    deleteRecurring(target.dataset.id);
+                    break;
             }
         });
 
-        // Close modal when clicking on backdrop (outside content)
+        document.addEventListener('change', function(event) {
-        document.getElementById('recurringModal').addEventListener('click', (e) => {
+            const target = event.target.closest('[data-action]');
-            if (e.target.classList.contains('settings-modal')) {
+            if (!target) return;
+
+            if (target.dataset.action === 'update-schedule-options') {
+                updateScheduleOptions();
+            }
+        });
+
+        // Form submit handler
+        document.getElementById('recurringForm').addEventListener('submit', function(e) {
+            saveRecurring(e);
+        });
+
+        // Close modal on ESC key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
                 closeModal();
             }
         });

views/admin/TemplatesView.php

@@ -41,7 +41,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
             <div class="ascii-frame-inner">
                 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                     <h2 style="margin: 0;">Ticket Templates</h2>
-                    <button onclick="showCreateModal()" class="btn">+ New Template</button>
+                    <button data-action="show-create-modal" class="btn">+ New Template</button>
                 </div>
 
                 <p style="color: var(--terminal-green-dim); margin-bottom: 1rem;">
@@ -79,8 +79,8 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                                         </span>
                                     </td>
                                     <td>
-                                        <button onclick="editTemplate(<?php echo $tpl['template_id']; ?>)" class="btn btn-small">Edit</button>
+                                        <button data-action="edit-template" data-id="<?php echo $tpl['template_id']; ?>" class="btn btn-small">Edit</button>
-                                        <button onclick="deleteTemplate(<?php echo $tpl['template_id']; ?>)" class="btn btn-small btn-danger">Delete</button>
+                                        <button data-action="delete-template" data-id="<?php echo $tpl['template_id']; ?>" class="btn btn-small btn-danger">Delete</button>
                                     </td>
                                 </tr>
                             <?php endforeach; ?>
@@ -92,13 +92,13 @@ $nonce = SecurityHeadersMiddleware::getNonce();
     </div>
 
     <!-- Create/Edit Modal -->
-    <div class="settings-modal" id="templateModal" style="display: none;">
+    <div class="settings-modal" id="templateModal" style="display: none;" data-action="close-modal-backdrop">
         <div class="settings-content" style="max-width: 800px; width: 90%;">
             <div class="settings-header">
                 <h3 id="modalTitle">Create Template</h3>
-                <button class="close-settings" onclick="closeModal()">×</button>
+                <button class="close-settings" data-action="close-modal">×</button>
             </div>
-            <form id="templateForm" onsubmit="saveTemplate(event)">
+            <form id="templateForm">
                 <input type="hidden" id="template_id" name="template_id">
                 <div class="settings-body">
                     <div class="setting-row">
@@ -154,7 +154,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                 </div>
                 <div class="settings-footer">
                     <button type="submit" class="btn btn-primary">Save</button>
-                    <button type="button" class="btn btn-secondary" onclick="closeModal()">Cancel</button>
+                    <button type="button" class="btn btn-secondary" data-action="close-modal">Cancel</button>
                 </div>
             </form>
         </div>
@@ -176,16 +176,39 @@ $nonce = SecurityHeadersMiddleware::getNonce();
             document.getElementById('templateModal').style.display = 'none';
         }
 
-        // Close modal on ESC key
+        // Event delegation for data-action handlers
-        document.addEventListener('keydown', (e) => {
+        document.addEventListener('click', function(event) {
-            if (e.key === 'Escape') {
+            const target = event.target.closest('[data-action]');
+            if (!target) return;
+
+            const action = target.dataset.action;
+            switch (action) {
+                case 'show-create-modal':
+                    showCreateModal();
+                    break;
+                case 'close-modal':
                     closeModal();
+                    break;
+                case 'close-modal-backdrop':
+                    if (event.target === target) closeModal();
+                    break;
+                case 'edit-template':
+                    editTemplate(target.dataset.id);
+                    break;
+                case 'delete-template':
+                    deleteTemplate(target.dataset.id);
+                    break;
             }
         });
 
-        // Close modal when clicking on backdrop (outside content)
+        // Form submit handler
-        document.getElementById('templateModal').addEventListener('click', (e) => {
+        document.getElementById('templateForm').addEventListener('submit', function(e) {
-            if (e.target.classList.contains('settings-modal')) {
+            saveTemplate(e);
+        });
+
+        // Close modal on ESC key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
                 closeModal();
             }
         });

views/admin/WorkflowDesignerView.php

@@ -41,7 +41,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
             <div class="ascii-frame-inner">
                 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
                     <h2 style="margin: 0;">Status Transitions</h2>
-                    <button onclick="showCreateModal()" class="btn">+ New Transition</button>
+                    <button data-action="show-create-modal" class="btn">+ New Transition</button>
                 </div>
 
                 <p style="color: var(--terminal-green-dim); margin-bottom: 1rem;">
@@ -119,8 +119,8 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                                         </span>
                                     </td>
                                     <td>
-                                        <button onclick="editTransition(<?php echo $wf['transition_id']; ?>)" class="btn btn-small">Edit</button>
+                                        <button data-action="edit-transition" data-id="<?php echo $wf['transition_id']; ?>" class="btn btn-small">Edit</button>
-                                        <button onclick="deleteTransition(<?php echo $wf['transition_id']; ?>)" class="btn btn-small btn-danger">Delete</button>
+                                        <button data-action="delete-transition" data-id="<?php echo $wf['transition_id']; ?>" class="btn btn-small btn-danger">Delete</button>
                                     </td>
                                 </tr>
                             <?php endforeach; ?>
@@ -132,13 +132,13 @@ $nonce = SecurityHeadersMiddleware::getNonce();
     </div>
 
     <!-- Create/Edit Modal -->
-    <div class="settings-modal" id="workflowModal" style="display: none;">
+    <div class="settings-modal" id="workflowModal" style="display: none;" data-action="close-modal-backdrop">
         <div class="settings-content" style="max-width: 450px;">
             <div class="settings-header">
                 <h3 id="modalTitle">Create Transition</h3>
-                <button class="close-settings" onclick="closeModal()">×</button>
+                <button class="close-settings" data-action="close-modal">×</button>
             </div>
-            <form id="workflowForm" onsubmit="saveTransition(event)">
+            <form id="workflowForm">
                 <input type="hidden" id="transition_id" name="transition_id">
                 <div class="settings-body">
                     <div class="setting-row">
@@ -171,7 +171,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                 </div>
                 <div class="settings-footer">
                     <button type="submit" class="btn btn-primary">Save</button>
-                    <button type="button" class="btn btn-secondary" onclick="closeModal()">Cancel</button>
+                    <button type="button" class="btn btn-secondary" data-action="close-modal">Cancel</button>
                 </div>
             </form>
         </div>
@@ -193,16 +193,39 @@ $nonce = SecurityHeadersMiddleware::getNonce();
             document.getElementById('workflowModal').style.display = 'none';
         }
 
-        // Close modal on ESC key
+        // Event delegation for data-action handlers
-        document.addEventListener('keydown', (e) => {
+        document.addEventListener('click', function(event) {
-            if (e.key === 'Escape') {
+            const target = event.target.closest('[data-action]');
+            if (!target) return;
+
+            const action = target.dataset.action;
+            switch (action) {
+                case 'show-create-modal':
+                    showCreateModal();
+                    break;
+                case 'close-modal':
                     closeModal();
+                    break;
+                case 'close-modal-backdrop':
+                    if (event.target === target) closeModal();
+                    break;
+                case 'edit-transition':
+                    editTransition(target.dataset.id);
+                    break;
+                case 'delete-transition':
+                    deleteTransition(target.dataset.id);
+                    break;
             }
         });
 
-        // Close modal when clicking on backdrop (outside content)
+        // Form submit handler
-        document.getElementById('workflowModal').addEventListener('click', (e) => {
+        document.getElementById('workflowForm').addEventListener('submit', function(e) {
-            if (e.target.classList.contains('settings-modal')) {
+            saveTransition(e);
+        });
+
+        // Close modal on ESC key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
                 closeModal();
             }
         });