339 lines
16 KiB
HTML
339 lines
16 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
|
|
{% block title %}{% trans "Import Job Status" %} - PX360{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.progress-ring {
|
|
width: 140px;
|
|
height: 140px;
|
|
}
|
|
.progress-ring-circle {
|
|
transition: stroke-dashoffset 0.35s;
|
|
transform: rotate(-90deg);
|
|
transform-origin: 50% 50%;
|
|
}
|
|
.stat-card {
|
|
transition: all 0.2s ease;
|
|
}
|
|
.stat-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Header -->
|
|
<div class="mb-6">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-2 text-sm text-slate mb-2">
|
|
<a href="{% url 'physicians:doctor_rating_job_list' %}" class="hover:text-navy">{% trans "Import Jobs" %}</a>
|
|
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
|
<span class="font-bold text-navy">{% trans "Job Details" %}</span>
|
|
</div>
|
|
<h1 class="text-2xl font-bold text-navy flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="activity" class="w-5 h-5 text-blue"></i>
|
|
</div>
|
|
{% trans "Import Job Status" %}
|
|
</h1>
|
|
<p class="text-slate text-sm mt-1">{{ job.name }}</p>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<a href="{% url 'physicians:doctor_rating_job_list' %}"
|
|
class="px-4 py-2 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-light transition flex items-center gap-2">
|
|
<i data-lucide="list" class="w-4 h-4"></i>
|
|
{% trans "All Jobs" %}
|
|
</a>
|
|
<a href="{% url 'physicians:doctor_rating_import' %}"
|
|
class="px-4 py-2 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition flex items-center gap-2">
|
|
<i data-lucide="upload" class="w-4 h-4"></i>
|
|
{% trans "Import More" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- Status Card -->
|
|
<div class="lg:col-span-1">
|
|
<div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
|
|
<div class="text-center">
|
|
<!-- Progress Circle -->
|
|
<div class="inline-flex items-center justify-center mb-4">
|
|
<div class="relative">
|
|
<svg class="progress-ring" viewBox="0 0 120 120">
|
|
<circle
|
|
class="progress-ring-circle"
|
|
stroke="#f1f5f9"
|
|
stroke-width="8"
|
|
fill="transparent"
|
|
r="52"
|
|
cx="60"
|
|
cy="60"
|
|
/>
|
|
<circle
|
|
class="progress-ring-circle"
|
|
stroke="{% if job.status == 'completed' %}#22c55e{% elif job.status == 'failed' %}#ef4444{% elif job.status == 'partial' %}#f59e0b{% else %}#007bbd{% endif %}"
|
|
stroke-width="8"
|
|
fill="transparent"
|
|
r="52"
|
|
cx="60"
|
|
cy="60"
|
|
stroke-dasharray="326.73"
|
|
stroke-dashoffset="{{ stroke_dashoffset }}"
|
|
stroke-linecap="round"
|
|
/>
|
|
</svg>
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<div class="text-center">
|
|
<h3 class="text-2xl font-bold text-navy mb-0">{{ progress }}%</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Badge -->
|
|
<div class="mb-4">
|
|
{% if job.status == 'pending' %}
|
|
<span class="inline-flex items-center px-4 py-2 rounded-xl text-sm font-bold bg-slate-100 text-slate-700">
|
|
<i data-lucide="clock" class="w-4 h-4 mr-2"></i>
|
|
{% trans "Pending" %}
|
|
</span>
|
|
{% elif job.status == 'processing' %}
|
|
<span class="inline-flex items-center px-4 py-2 rounded-xl text-sm font-bold bg-blue-100 text-blue-700">
|
|
<i data-lucide="loader-2" class="w-4 h-4 mr-2 animate-spin"></i>
|
|
{% trans "Processing" %}
|
|
</span>
|
|
{% elif job.status == 'completed' %}
|
|
<span class="inline-flex items-center px-4 py-2 rounded-xl text-sm font-bold bg-green-100 text-green-700">
|
|
<i data-lucide="check-circle" class="w-4 h-4 mr-2"></i>
|
|
{% trans "Completed" %}
|
|
</span>
|
|
{% elif job.status == 'failed' %}
|
|
<span class="inline-flex items-center px-4 py-2 rounded-xl text-sm font-bold bg-red-100 text-red-700">
|
|
<i data-lucide="x-circle" class="w-4 h-4 mr-2"></i>
|
|
{% trans "Failed" %}
|
|
</span>
|
|
{% elif job.status == 'partial' %}
|
|
<span class="inline-flex items-center px-4 py-2 rounded-xl text-sm font-bold bg-amber-100 text-amber-700">
|
|
<i data-lucide="alert-circle" class="w-4 h-4 mr-2"></i>
|
|
{% trans "Partial Success" %}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if not is_complete %}
|
|
<div class="flex items-center justify-center gap-2 text-blue">
|
|
<i data-lucide="loader-2" class="w-5 h-5 animate-spin"></i>
|
|
<span class="text-sm font-semibold">{% trans "Processing..." %}</span>
|
|
</div>
|
|
{% else %}
|
|
<p class="text-sm text-slate">
|
|
<i data-lucide="check" class="w-4 h-4 inline mr-1"></i>
|
|
{% trans "Job completed" %}
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Job Details -->
|
|
<div class="lg:col-span-2">
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
|
|
<div class="px-6 py-4 border-b border-slate-100 bg-slate-50">
|
|
<h3 class="font-bold text-navy flex items-center gap-2">
|
|
<i data-lucide="file-text" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Job Details" %}
|
|
</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<div class="space-y-4">
|
|
<div>
|
|
<p class="text-xs font-bold text-slate uppercase mb-1">{% trans "Hospital" %}</p>
|
|
<p class="text-sm font-semibold text-navy">{{ job.hospital.name }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-bold text-slate uppercase mb-1">{% trans "Source" %}</p>
|
|
<p class="text-sm text-slate">{{ job.get_source_display }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-bold text-slate uppercase mb-1">{% trans "Total Records" %}</p>
|
|
<p class="text-lg font-bold text-navy">{{ job.total_records }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-bold text-slate uppercase mb-1">{% trans "Created By" %}</p>
|
|
<p class="text-sm text-slate">{{ job.created_by.get_full_name|default:job.created_by.email }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<p class="text-xs font-bold text-slate uppercase mb-1">{% trans "Created" %}</p>
|
|
<p class="text-sm text-slate">{{ job.created_at|date:"Y-m-d H:i" }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-bold text-slate uppercase mb-1">{% trans "Started" %}</p>
|
|
<p class="text-sm text-slate">{{ job.started_at|date:"Y-m-d H:i"|default:"-" }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-bold text-slate uppercase mb-1">{% trans "Completed" %}</p>
|
|
<p class="text-sm text-slate">{{ job.completed_at|date:"Y-m-d H:i"|default:"-" }}</p>
|
|
</div>
|
|
{% if job.duration_seconds %}
|
|
<div>
|
|
<p class="text-xs font-bold text-slate uppercase mb-1">{% trans "Duration" %}</p>
|
|
<p class="text-sm font-semibold text-blue">{{ job.duration_seconds }} {% trans "seconds" %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Results Summary -->
|
|
{% if is_complete %}
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mt-6">
|
|
<div class="stat-card bg-white rounded-2xl p-6 shadow-sm border border-l-4 border-green-500">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="w-12 h-12 bg-green-50 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="check-circle" class="w-6 h-6 text-green-600"></i>
|
|
</div>
|
|
<span class="text-xs font-bold text-slate uppercase">{% trans "Successful" %}</span>
|
|
</div>
|
|
<p class="text-3xl font-bold text-green-600">{{ job.success_count }}</p>
|
|
</div>
|
|
|
|
<div class="stat-card bg-white rounded-2xl p-6 shadow-sm border border-l-4 border-red-500">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="w-12 h-12 bg-red-50 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="x-circle" class="w-6 h-6 text-red-600"></i>
|
|
</div>
|
|
<span class="text-xs font-bold text-slate uppercase">{% trans "Failed" %}</span>
|
|
</div>
|
|
<p class="text-3xl font-bold text-red-600">{{ job.failed_count }}</p>
|
|
</div>
|
|
|
|
<div class="stat-card bg-white rounded-2xl p-6 shadow-sm border border-l-4 border-amber-500">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="w-12 h-12 bg-amber-50 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="skip-forward" class="w-6 h-6 text-amber-600"></i>
|
|
</div>
|
|
<span class="text-xs font-bold text-slate uppercase">{% trans "Skipped" %}</span>
|
|
</div>
|
|
<p class="text-3xl font-bold text-amber-600">{{ job.skipped_count }}</p>
|
|
</div>
|
|
|
|
<div class="stat-card bg-white rounded-2xl p-6 shadow-sm border border-l-4 border-blue-500">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="layers" class="w-6 h-6 text-blue-600"></i>
|
|
</div>
|
|
<span class="text-xs font-bold text-slate uppercase">{% trans "Processed" %}</span>
|
|
</div>
|
|
<p class="text-3xl font-bold text-blue-600">{{ job.processed_count }}</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Error Message -->
|
|
{% if job.error_message %}
|
|
<div class="bg-red-50 border border-red-200 rounded-2xl p-6 mt-6">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-10 h-10 bg-red-100 rounded-xl flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="alert-triangle" class="w-5 h-5 text-red-600"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h4 class="font-bold text-red-800 mb-2 flex items-center gap-2">
|
|
<i data-lucide="circle-alert" class="w-4 h-4"></i>
|
|
{% trans "Error" %}
|
|
</h4>
|
|
<p class="text-sm text-red-700">{{ job.error_message }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Error Details -->
|
|
{% if results and results.errors %}
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 mt-6 overflow-hidden">
|
|
<div class="px-6 py-4 border-b border-slate-100 bg-slate-50">
|
|
<h3 class="font-bold text-navy flex items-center gap-2">
|
|
<i data-lucide="list" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Error Details" %}
|
|
</h3>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead class="bg-slate-50 border-b border-slate-200">
|
|
<tr>
|
|
<th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-3 px-4">{% trans "Row" %}</th>
|
|
<th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-3 px-4">{% trans "Error" %}</th>
|
|
<th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-3 px-4">{% trans "Data" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
{% for error in results.errors|slice:":50" %}
|
|
<tr class="hover:bg-light/30 transition">
|
|
<td class="py-3 px-4">
|
|
<span class="text-sm font-mono text-slate">{{ error.row }}</span>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<span class="text-sm text-red-600">{{ error.message }}</span>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<code class="text-xs bg-slate-100 px-2 py-1 rounded">{{ error.data|truncatechars:50 }}</code>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% if results.errors|length > 50 %}
|
|
<div class="px-6 py-4 bg-slate-50 border-t border-slate-200">
|
|
<p class="text-sm text-slate">
|
|
{% trans "Showing first 50 errors of" %} <strong>{{ results.errors|length }}</strong>
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Action Buttons -->
|
|
{% if is_complete %}
|
|
<div class="flex items-center gap-4 mt-6">
|
|
<a href="{% url 'physicians:individual_ratings_list' %}"
|
|
class="px-6 py-3 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition flex items-center gap-2 shadow-lg shadow-navy/20">
|
|
<i data-lucide="list" class="w-5 h-5"></i>
|
|
{% trans "View Imported Ratings" %}
|
|
</a>
|
|
<a href="{% url 'physicians:doctor_rating_import' %}"
|
|
class="px-6 py-3 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-light transition flex items-center gap-2">
|
|
<i data-lucide="upload" class="w-5 h-5"></i>
|
|
{% trans "Import More Ratings" %}
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
});
|
|
|
|
{% if not is_complete %}
|
|
// Auto-refresh page every 3 seconds while job is processing
|
|
setTimeout(function() {
|
|
window.location.reload();
|
|
}, 3000);
|
|
{% endif %}
|
|
</script>
|
|
{% endblock %}
|