supervaizer 0.10.5__py3-none-any.whl

supervaizer/admin/templates/job_detail.html

@@ -0,0 +1,192 @@
+<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+    <div class="sm:flex sm:items-start">
+        <div class="w-full">
+            <!-- Header -->
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-lg leading-6 font-medium text-gray-900">Job Details</h3>
+                <button
+                    @click="open = false"
+                    class="bg-white rounded-md text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                >
+                    <span class="sr-only">Close</span>
+                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Job Information -->
+            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
+                <div>
+                    <h4 class="text-sm font-medium text-gray-900 mb-3">Basic Information</h4>
+                    <dl class="space-y-2">
+                        <div>
+                            <dt class="text-xs font-medium text-gray-500 uppercase tracking-wider">Name</dt>
+                            <dd class="text-sm text-gray-900">{{ job.name or "Unnamed Job" }}</dd>
+                        </div>
+                        <div>
+                            <dt class="text-xs font-medium text-gray-500 uppercase tracking-wider">ID</dt>
+                            <dd class="text-sm text-gray-900 font-mono">{{ job.id }}</dd>
+                        </div>
+                        <div>
+                            <dt class="text-xs font-medium text-gray-500 uppercase tracking-wider">Agent</dt>
+                            <dd class="text-sm text-gray-900">{{ job.agent_name or "-" }}</dd>
+                        </div>
+                        <div>
+                            <dt class="text-xs font-medium text-gray-500 uppercase tracking-wider">Status</dt>
+                            <dd>
+                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
+                                    {% if job.status == 'completed' %}bg-green-100 text-green-800
+                                    {% elif job.status == 'in_progress' %}bg-blue-100 text-blue-800
+                                    {% elif job.status == 'failed' %}bg-red-100 text-red-800
+                                    {% elif job.status == 'cancelled' %}bg-gray-100 text-gray-800
+                                    {% else %}bg-yellow-100 text-yellow-800{% endif %}">
+                                    {{ job.status.replace('_', ' ').title() }}
+                                </span>
+                            </dd>
+                        </div>
+                    </dl>
+                </div>
+
+                <div>
+                    <h4 class="text-sm font-medium text-gray-900 mb-3">Timestamps</h4>
+                    <dl class="space-y-2">
+                        <div>
+                            <dt class="text-xs font-medium text-gray-500 uppercase tracking-wider">Created</dt>
+                            <dd class="text-sm text-gray-900">{{ job.created_at or "-" }}</dd>
+                        </div>
+                        <div>
+                            <dt class="text-xs font-medium text-gray-500 uppercase tracking-wider">Finished</dt>
+                            <dd class="text-sm text-gray-900">{{ job.finished_at or "-" }}</dd>
+                        </div>
+                        <div>
+                            <dt class="text-xs font-medium text-gray-500 uppercase tracking-wider">Cases</dt>
+                            <dd class="text-sm text-gray-900">{{ (job.case_ids | length) if job.case_ids else 0 }} related case(s)</dd>
+                        </div>
+                    </dl>
+                </div>
+            </div>
+
+            <!-- Job Context -->
+            {% if job.job_context %}
+            <div class="mt-6">
+                <h4 class="text-sm font-medium text-gray-900 mb-3">Job Context</h4>
+                <div class="bg-gray-50 p-4 rounded-lg">
+                    <dl class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+                        {% if job.job_context.workspace_id %}
+                        <div>
+                            <dt class="text-xs font-medium text-gray-500">Workspace ID</dt>
+                            <dd class="text-sm text-gray-900 font-mono">{{ job.job_context.workspace_id }}</dd>
+                        </div>
+                        {% endif %}
+                        {% if job.job_context.mission_name %}
+                        <div>
+                            <dt class="text-xs font-medium text-gray-500">Mission</dt>
+                            <dd class="text-sm text-gray-900">{{ job.job_context.mission_name }}</dd>
+                        </div>
+                        {% endif %}
+                        {% if job.job_context.started_by %}
+                        <div>
+                            <dt class="text-xs font-medium text-gray-500">Started By</dt>
+                            <dd class="text-sm text-gray-900">{{ job.job_context.started_by }}</dd>
+                        </div>
+                        {% endif %}
+                    </dl>
+                </div>
+            </div>
+            {% endif %}
+
+            <!-- Related Cases -->
+            {% if cases %}
+            <div class="mt-6">
+                <h4 class="text-sm font-medium text-gray-900 mb-3">Related Cases ({{ cases | length }})</h4>
+                <div class="bg-white overflow-hidden shadow rounded-lg">
+                    <ul role="list" class="divide-y divide-gray-200">
+                        {% for case in cases %}
+                        <li class="px-4 py-3 hover:bg-gray-50">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center">
+                                    <div>
+                                        <p class="text-sm font-medium text-gray-900">{{ case.name or case.id[:8] + "..." }}</p>
+                                        <p class="text-sm text-gray-500">{{ case.description or "No description" }}</p>
+                                    </div>
+                                </div>
+                                <div class="flex items-center space-x-3">
+                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
+                                        {% if case.status == 'completed' %}bg-green-100 text-green-800
+                                        {% elif case.status == 'in_progress' %}bg-blue-100 text-blue-800
+                                        {% elif case.status == 'failed' %}bg-red-100 text-red-800
+                                        {% elif case.status == 'cancelled' %}bg-gray-100 text-gray-800
+                                        {% else %}bg-yellow-100 text-yellow-800{% endif %}">
+                                        {{ case.status.replace('_', ' ').title() }}
+                                    </span>
+                                    <button
+                                        onclick="showCaseDetails('{{ case.id }}')"
+                                        class="text-blue-600 hover:text-blue-900 text-sm font-medium"
+                                    >
+                                        View
+                                    </button>
+                                </div>
+                            </div>
+                        </li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+<!-- Modal Footer -->
+<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+    <button
+        @click="open = false"
+        type="button"
+        class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+    >
+        Close
+    </button>
+
+    <!-- Status Update Button -->
+    {% if job.status not in ['completed', 'failed', 'cancelled'] %}
+    <div class="relative inline-block text-left" x-data="{ statusOpen: false }">
+        <button
+            @click="statusOpen = !statusOpen"
+            type="button"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
+        >
+            Update Status
+        </button>
+
+        <div x-show="statusOpen" @click.away="statusOpen = false" x-cloak class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50">
+            <div class="py-1" role="menu">
+                <button
+                    hx-post="/admin/api/jobs/{{ job.id }}/status"
+                    hx-vals='{"status": "completed"}'
+                    hx-on::after-request="if(event.detail.successful) { window.showToast('Job status updated', 'success'); open = false; htmx.trigger('#jobs-table-container', 'refresh'); }"
+                    class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                >
+                    Mark as Completed
+                </button>
+                <button
+                    hx-post="/admin/api/jobs/{{ job.id }}/status"
+                    hx-vals='{"status": "failed"}'
+                    hx-on::after-request="if(event.detail.successful) { window.showToast('Job status updated', 'success'); open = false; htmx.trigger('#jobs-table-container', 'refresh'); }"
+                    class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                >
+                    Mark as Failed
+                </button>
+                <button
+                    hx-post="/admin/api/jobs/{{ job.id }}/status"
+                    hx-vals='{"status": "cancelled"}'
+                    hx-on::after-request="if(event.detail.successful) { window.showToast('Job status updated', 'success'); open = false; htmx.trigger('#jobs-table-container', 'refresh'); }"
+                    class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                >
+                    Cancel Job
+                </button>
+            </div>
+        </div>
+    </div>
+    {% endif %}
+</div>

supervaizer/admin/templates/job_start_test.html

@@ -0,0 +1,109 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="max-w-4xl mx-auto">
+    <div class="bg-white shadow rounded-lg p-6">
+        <h1 class="text-2xl font-bold text-gray-900 mb-6">Job Start Form Test</h1>
+
+        <!-- Validation Errors Container -->
+        <div id="validation-errors" class="mb-6"></div>
+
+        <!-- Agent Parameter Errors Container -->
+        <div id="agent-parameter-errors" class="mb-6"></div>
+
+        <!-- Job Start Form -->
+        <form data-job-start method="POST" class="space-y-6">
+            <!-- Job Fields -->
+            <div class="space-y-4">
+                <h3 class="text-lg font-medium text-gray-900">Job Parameters</h3>
+
+                <div>
+                    <label for="company_name" class="block text-sm font-medium text-gray-700">
+                        Company Name *
+                    </label>
+                    <input
+                        type="text"
+                        id="company_name"
+                        name="company_name"
+                        required
+                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+                        placeholder="Enter company name"
+                    >
+                </div>
+
+                <div>
+                    <label for="max_results" class="block text-sm font-medium text-gray-700">
+                        Max Results *
+                    </label>
+                    <input
+                        type="number"
+                        id="max_results"
+                        name="max_results"
+                        required
+                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+                        placeholder="Enter maximum results"
+                    >
+                </div>
+
+                <div>
+                    <label for="subscribe_updates" class="block text-sm font-medium text-gray-700">
+                        Subscribe to Updates
+                    </label>
+                    <input
+                        type="checkbox"
+                        id="subscribe_updates"
+                        name="subscribe_updates"
+                        class="mt-1 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                    >
+                    <span class="ml-2 text-sm text-gray-600">Receive email updates about this job</span>
+                </div>
+            </div>
+
+            <!-- Hidden Fields for Testing -->
+            <input type="hidden" name="encrypted_agent_parameters" value="test_encrypted_params">
+            <input type="hidden" name="api_key" value="{{ api_key }}">
+
+            <!-- Submit Button -->
+            <div class="flex justify-end">
+                <button
+                    type="submit"
+                    class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                >
+                    Start Job
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<script>
+    // Initialize JobStartForm when the page loads
+    document.addEventListener('DOMContentLoaded', function() {
+        // Wait for JobStartForm class to be available
+        function waitForJobStartForm() {
+            if (typeof window.JobStartForm !== 'undefined') {
+                console.log('JobStartForm class found, initializing...');
+
+                // Initialize the form with the current agent path
+                const form = new JobStartForm('/test-agent');
+
+                // Set up callbacks
+                form.setOnJobStarted(function(jobData) {
+                    console.log('Job started successfully:', jobData);
+                });
+
+                form.setOnJobError(function(error) {
+                    console.error('Job failed:', error);
+                });
+
+                console.log('JobStartForm initialized successfully');
+            } else {
+                console.log('JobStartForm class not ready yet, waiting...');
+                setTimeout(waitForJobStartForm, 100);
+            }
+        }
+
+        waitForJobStartForm();
+    });
+</script>
+{% endblock %}

supervaizer/admin/templates/jobs_list.html

@@ -0,0 +1,180 @@
+{% extends "base.html" %}
+
+{% block title %}Jobs - Supervaizer Admin{% endblock %}
+
+{% block content %}
+<div class="px-4 py-6 sm:px-0">
+    <!-- Header -->
+    <div class="md:flex md:items-center md:justify-between">
+        <div class="min-w-0 flex-1">
+            <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
+                Jobs
+            </h2>
+            <p class="mt-1 text-sm text-gray-500">Manage all jobs in the system</p>
+        </div>
+        <div class="mt-4 flex md:mt-0">
+            <button
+                hx-get="/admin/api/jobs"
+                hx-target="#jobs-table-container"
+                hx-indicator="#refresh-indicator"
+                class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            >
+                <svg id="refresh-indicator" class="htmx-indicator -ml-1 mr-2 h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                Refresh
+            </button>
+        </div>
+    </div>
+
+    <!-- Filters -->
+    <div class="mt-6 bg-white shadow rounded-lg" x-data="{ filtersOpen: false }">
+        <div class="px-6 py-4 border-b border-gray-200">
+            <button
+                @click="filtersOpen = !filtersOpen"
+                class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-900"
+            >
+                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.414A1 1 0 013 6.707V4z"></path>
+                </svg>
+                Filters
+                <svg class="w-4 h-4 ml-2 transition-transform" :class="filtersOpen ? 'rotate-180' : 'rotate-0'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                </svg>
+            </button>
+        </div>
+
+        <div x-show="filtersOpen" x-cloak class="px-6 py-4 border-b border-gray-200">
+            <form
+                hx-get="/admin/api/jobs"
+                hx-target="#jobs-table-container"
+                hx-trigger="change, submit"
+                class="grid grid-cols-1 gap-4 sm:grid-cols-4"
+            >
+                <!-- Status Filter -->
+                <div>
+                    <label for="status" class="block text-sm font-medium text-gray-700">Status</label>
+                    <select name="status" id="status" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
+                        <option value="">All statuses</option>
+                        <option value="stopped">Stopped</option>
+                        <option value="in_progress">In Progress</option>
+                        <option value="completed">Completed</option>
+                        <option value="failed">Failed</option>
+                        <option value="cancelled">Cancelled</option>
+                        <option value="awaiting">Awaiting</option>
+                    </select>
+                </div>
+
+                <!-- Agent Filter -->
+                <div>
+                    <label for="agent_name" class="block text-sm font-medium text-gray-700">Agent</label>
+                    <input type="text" name="agent_name" id="agent_name" placeholder="Agent name..." class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
+                </div>
+
+                <!-- Search -->
+                <div>
+                    <label for="search" class="block text-sm font-medium text-gray-700">Search</label>
+                    <input type="text" name="search" id="search" placeholder="Job name or ID..." class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
+                </div>
+
+                <!-- Sort -->
+                <div>
+                    <label for="sort" class="block text-sm font-medium text-gray-700">Sort by</label>
+                    <select name="sort" id="sort" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
+                        <option value="-created_at">Newest first</option>
+                        <option value="created_at">Oldest first</option>
+                        <option value="name">Name A-Z</option>
+                        <option value="-name">Name Z-A</option>
+                        <option value="status">Status</option>
+                    </select>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Jobs Table -->
+    <div id="jobs-table-container" class="mt-6">
+        <div class="bg-white shadow overflow-hidden rounded-md">
+            <div class="px-4 py-5 sm:p-6">
+                <div class="text-center">
+                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                    </svg>
+                    <h3 class="mt-2 text-sm font-medium text-gray-900">Loading jobs...</h3>
+                    <p class="mt-1 text-sm text-gray-500">Please wait while we fetch the job data.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Job Detail Modal -->
+<div id="job-modal" class="fixed inset-0 z-50" x-data="{ open: false }" x-show="open" x-cloak>
+    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" @click="open = false"></div>
+
+        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
+            <div id="job-modal-content">
+                <!-- Content will be loaded here via HTMX -->
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Case Detail Modal -->
+<div id="case-modal" class="fixed inset-0 z-50" x-data="{ open: false }" x-show="open" x-cloak>
+    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" @click="open = false"></div>
+
+        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
+            <div id="case-modal-content">
+                <!-- Content will be loaded here via HTMX -->
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    // Auto-load jobs on page load
+    document.addEventListener('DOMContentLoaded', function() {
+        // Load jobs immediately
+        htmx.ajax('GET', '/admin/api/jobs', {target: '#jobs-table-container'});
+
+        // Set up auto-refresh interval for jobs every 30 seconds
+        setInterval(function() {
+            htmx.ajax('GET', '/admin/api/jobs', {target: '#jobs-table-container'});
+        }, 30000); // Refresh every 30 seconds
+    });
+
+    // Handle job modal
+    document.body.addEventListener('htmx:afterRequest', function(e) {
+        if (e.detail.target.id === 'job-modal-content') {
+            // Show modal after content loads
+            const modal = document.getElementById('job-modal');
+            if (modal && modal._x_dataStack && modal._x_dataStack[0]) {
+                modal._x_dataStack[0].open = true;
+            }
+        }
+
+        // Handle case modal
+        if (e.detail.target.id === 'case-modal-content') {
+            // Show modal after content loads
+            const modal = document.getElementById('case-modal');
+            if (modal && modal._x_dataStack && modal._x_dataStack[0]) {
+                modal._x_dataStack[0].open = true;
+            }
+        }
+    });
+
+    // Global function to show job details
+    window.showJobDetails = function(jobId) {
+        htmx.ajax('GET', `/admin/api/jobs/${jobId}`, {target: '#job-modal-content'});
+    };
+
+    // Global function to show case details
+    window.showCaseDetails = function(caseId) {
+        htmx.ajax('GET', `/admin/api/cases/${caseId}`, {target: '#case-modal-content'});
+    };
+</script>
+{% endblock %}

supervaizer/admin/templates/jobs_table.html

@@ -0,0 +1,122 @@
+<div class="bg-white shadow overflow-hidden rounded-md">
+    <table class="min-w-full divide-y divide-gray-200">
+        <thead class="bg-gray-50">
+            <tr>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Job
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Agent
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Status
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Cases
+                </th>
+                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    Created
+                </th>
+                <th scope="col" class="relative px-6 py-3">
+                    <span class="sr-only">Actions</span>
+                </th>
+            </tr>
+        </thead>
+        <tbody class="bg-white divide-y divide-gray-200">
+            {% for job in jobs %}
+            <tr class="hover:bg-gray-50">
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <div>
+                        <div class="text-sm font-medium text-gray-900">{{ job.name }}</div>
+                        <div class="text-sm text-gray-500">{{ job.id }}</div>
+                    </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="text-sm text-gray-900">{{ job.agent_name }}</div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
+                        {% if job.status == 'completed' %}bg-green-100 text-green-800
+                        {% elif job.status == 'in_progress' %}bg-blue-100 text-blue-800
+                        {% elif job.status == 'failed' %}bg-red-100 text-red-800
+                        {% elif job.status == 'cancelled' %}bg-gray-100 text-gray-800
+                        {% else %}bg-yellow-100 text-yellow-800{% endif %}">
+                        {{ job.status.replace('_', ' ').title() }}
+                    </span>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                    {{ job.case_count }}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    {% if job.created_at %}
+                        {{ job.created_at[:10] }}
+                    {% else %}
+                        -
+                    {% endif %}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                    <button
+                        onclick="showJobDetails('{{ job.id }}')"
+                        class="text-blue-600 hover:text-blue-900 mr-4"
+                    >
+                        View
+                    </button>
+                    <button
+                        hx-delete="/admin/api/jobs/{{ job.id }}"
+                        hx-confirm="Are you sure you want to delete this job and all its cases?"
+                        hx-trigger="click"
+                        hx-on::after-request="if(event.detail.successful) { window.showToast('Job deleted successfully', 'success'); htmx.trigger('#jobs-table-container', 'refresh'); }"
+                        class="text-red-600 hover:text-red-900"
+                    >
+                        Delete
+                    </button>
+                </td>
+            </tr>
+            {% else %}
+            <tr>
+                <td colspan="6" class="px-6 py-12 text-center">
+                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                    </svg>
+                    <h3 class="mt-2 text-sm font-medium text-gray-900">No jobs found</h3>
+                    <p class="mt-1 text-sm text-gray-500">Try adjusting your filters or search criteria.</p>
+                </td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+
+    <!-- Pagination -->
+    {% if total > 0 %}
+    <div class="bg-white px-4 py-3 border-t border-gray-200 sm:px-6">
+        <div class="flex items-center justify-between">
+            <div class="flex items-center">
+                <p class="text-sm text-gray-700">
+                    Showing {{ skip + 1 }} to {{ skip + jobs|length }} of {{ total }} results
+                </p>
+            </div>
+            <div class="flex space-x-2">
+                {% if has_prev %}
+                <button
+                    hx-get="/admin/api/jobs?skip={{ skip - limit }}&limit={{ limit }}"
+                    hx-target="#jobs-table-container"
+                    class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
+                >
+                    Previous
+                </button>
+                {% endif %}
+
+                {% if has_next %}
+                <button
+                    hx-get="/admin/api/jobs?skip={{ skip + limit }}&limit={{ limit }}"
+                    hx-target="#jobs-table-container"
+                    class="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
+                >
+                    Next
+                </button>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+    {% endif %}
+</div>