orion/app/modules/prospecting/templates/prospecting/admin/scan-jobs.html

{% extends "admin/base.html" %}
{% from 'shared/macros/headers.html' import page_header %}
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
{% from 'shared/macros/pagination.html' import pagination_controls %}

{% block title %}Scan Jobs{% endblock %}

{% block alpine_data %}scanJobs(){% endblock %}

{% block content %}
{{ page_header('Scan Jobs') }}

<!-- Quick Actions -->
<div class="mb-6 flex flex-wrap gap-3">
    <button @click="startBatchJob('http_check')"
            class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700">
        <span x-html="$icon('globe', 'w-4 h-4 mr-2')"></span>
        HTTP Check
    </button>
    <button @click="startBatchJob('tech_scan')"
            class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700">
        <span x-html="$icon('code', 'w-4 h-4 mr-2')"></span>
        Tech Scan
    </button>
    <button @click="startBatchJob('performance_scan')"
            class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-orange-600 rounded-lg hover:bg-orange-700">
        <span x-html="$icon('chart-bar', 'w-4 h-4 mr-2')"></span>
        Performance Scan
    </button>
    <button @click="startBatchJob('contact_scrape')"
            class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
        <span x-html="$icon('mail', 'w-4 h-4 mr-2')"></span>
        Contact Scrape
    </button>
    <button @click="startBatchJob('score_compute')"
            class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700">
        <span x-html="$icon('cursor-click', 'w-4 h-4 mr-2')"></span>
        Compute Scores
    </button>
</div>

{{ loading_state('Loading scan jobs...') }}
{{ error_state('Error loading scan jobs') }}

<!-- Jobs Table -->
<div x-show="!loading && !error" class="w-full overflow-hidden rounded-lg shadow">
    <div class="w-full overflow-x-auto">
        <table class="w-full whitespace-nowrap">
            <thead>
                <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
                    <th class="px-4 py-3">Job Type</th>
                    <th class="px-4 py-3">Status</th>
                    <th class="px-4 py-3">Progress</th>
                    <th class="px-4 py-3">Started</th>
                    <th class="px-4 py-3">Duration</th>
                    <th class="px-4 py-3">Result</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                <template x-for="job in jobs" :key="job.id">
                    <tr class="text-gray-700 dark:text-gray-400">
                        <td class="px-4 py-3 text-sm font-semibold" x-text="job.job_type.replace('_', ' ')"></td>
                        <td class="px-4 py-3">
                            <span class="px-2 py-1 text-xs font-semibold rounded-full"
                                  :class="jobStatusClass(job.status)"
                                  x-text="job.status"></span>
                        </td>
                        <td class="px-4 py-3">
                            <div class="flex items-center space-x-2">
                                <div class="w-24 h-2 bg-gray-200 rounded-full dark:bg-gray-700">
                                    <div class="h-2 bg-blue-500 rounded-full" :style="'width: ' + (job.progress_percent || 0) + '%'"></div>
                                </div>
                                <span class="text-xs" x-text="job.processed_items + '/' + job.total_items"></span>
                            </div>
                        </td>
                        <td class="px-4 py-3 text-xs" x-text="job.started_at ? new Date(job.started_at).toLocaleString() : '—'"></td>
                        <td class="px-4 py-3 text-xs" x-text="formatDuration(job)"></td>
                        <td class="px-4 py-3 text-xs">
                            <span x-show="job.failed_items > 0" class="text-red-600" x-text="job.failed_items + ' failed'"></span>
                            <span x-show="job.skipped_items > 0" class="text-yellow-600 ml-1" x-text="job.skipped_items + ' skipped'"></span>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>
</div>

{{ pagination_controls() }}
{% endblock %}

{% block extra_scripts %}
<script defer src="{{ url_for('prospecting_static', path='admin/js/scan-jobs.js') }}"></script>
{% endblock %}