Add admin user selector to jobs page

- Add user dropdown for admins to view jobs of any user
- Update backend routes to accept user_id parameter
- Modify API to support user selection for admins
- Update JavaScript to handle user changes and API calls

templates/jobs.html

@@ -34,7 +34,15 @@
     function updateJobStatuses() {
         // Add random parameter to avoid browser caching
         const randomParam = Math.random().toString(36).substring(7);
-        fetch('/api/job_status_updates?since=' + lastUpdate + '&_=' + randomParam)
+        const userSelector = document.getElementById('userSelector');
+        let url = '/api/job_status_updates?since=' + lastUpdate + '&_=' + randomParam;
+
+        // Include user_id parameter if admin is viewing another user's jobs
+        if (userSelector && userSelector.value) {
+            url += '&user_id=' + userSelector.value;
+        }
+
+        fetch(url)
             .then(response => response.json())
             .then(data => {
                 if (data.updates && data.updates.length > 0) {
@@ -322,6 +330,18 @@
         });
     }
 
+    // Handle user selector change (for admins)
+    function handleUserChange() {
+        const userSelector = document.getElementById('userSelector');
+        if (userSelector) {
+            userSelector.addEventListener('change', function() {
+                const selectedUserId = this.value;
+                // Reload the page with the new user_id parameter
+                window.location.href = `/jobs?user_id=${selectedUserId}`;
+            });
+        }
+    }
+
     // Update every 5 seconds
     setInterval(updateJobStatuses, 5000);
 
@@ -329,6 +349,7 @@
     document.addEventListener('DOMContentLoaded', function() {
         initializeCompletedJobs();
         initializeJobActions();
+        handleUserChange();
         updateJobStatuses();
     });
 
@@ -353,8 +374,24 @@
 <div class="container">
         <div class="jobs-table">
             <div class="table-header">
-                <h2><i class="fas fa-tasks"></i> Active Jobs</h2>
-                <p style="margin: 0.5rem 0 0 0; color: #64748b; font-size: 0.9rem;">View and manage your queued, processing, and recently cancelled jobs</p>
+                <div style="display: flex; justify-content: space-between; align-items: flex-start;">
+                    <div>
+                        <h2><i class="fas fa-tasks"></i> Active Jobs</h2>
+                        <p style="margin: 0.5rem 0 0 0; color: #64748b; font-size: 0.9rem;">View and manage your queued, processing, and recently cancelled jobs</p>
+                    </div>
+                    {% if current_user.role == 'admin' and all_users %}
+                    <div style="display: flex; align-items: center; gap: 0.5rem;">
+                        <label for="userSelector" style="font-size: 0.9rem; color: #374151; font-weight: 500;">View jobs for:</label>
+                        <select id="userSelector" style="border: 1px solid #d1d5db; border-radius: 6px; padding: 0.375rem 0.75rem; font-size: 0.875rem; background: white;">
+                            {% for user_option in all_users %}
+                            <option value="{{ user_option.id }}" {% if user_option.id == selected_user_id %}selected{% endif %}>
+                                {{ user_option.username }} ({{ user_option.email }})
+                            </option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                    {% endif %}
+                </div>
             </div>
             {% for job in queue_items %}
             <div class="job-row" data-job-id="{{ job.id }}">