204 lines
12 KiB
HTML
204 lines
12 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
|
|
{% block title %}{% trans "Import HIS Patient Data" %} - PX360{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Page Header -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<a href="{% url 'surveys:instance_list' %}" class="text-blue hover:text-navy transition flex items-center gap-1">
|
|
<i data-lucide="arrow-left" class="w-5 h-5"></i>
|
|
<span class="text-sm font-medium">{% trans "Back to Surveys" %}</span>
|
|
</a>
|
|
</div>
|
|
<h1 class="text-2xl font-bold text-navy flex items-center gap-3">
|
|
<i data-lucide="upload-cloud" class="w-7 h-7 text-blue"></i>
|
|
{% trans "Import HIS Patient Data" %}
|
|
</h1>
|
|
<p class="text-slate mt-1">{% trans "Import patient visit data from MOH Statistics CSV and send surveys" %}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- Import Form -->
|
|
<div class="lg:col-span-2">
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
|
|
<div class="p-6">
|
|
<h2 class="text-lg font-bold text-navy mb-6 flex items-center gap-2">
|
|
<i data-lucide="file-spreadsheet" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Upload CSV File" %}
|
|
</h2>
|
|
|
|
<form method="post" enctype="multipart/form-data" class="space-y-6">
|
|
{% csrf_token %}
|
|
|
|
<!-- Hospital Selection -->
|
|
<div>
|
|
<label for="{{ form.hospital.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{{ form.hospital.label }} <span class="text-red-600">*</span>
|
|
</label>
|
|
{{ form.hospital }}
|
|
{% if form.hospital.help_text %}
|
|
<p class="text-xs text-slate mt-1.5">{{ form.hospital.help_text }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- CSV File Upload -->
|
|
<div>
|
|
<label for="{{ form.csv_file.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{{ form.csv_file.label }} <span class="text-red-600">*</span>
|
|
</label>
|
|
{{ form.csv_file }}
|
|
{% if form.csv_file.help_text %}
|
|
<p class="text-xs text-slate mt-1.5">{{ form.csv_file.help_text }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Skip Header Rows -->
|
|
<div>
|
|
<label for="{{ form.skip_header_rows.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{{ form.skip_header_rows.label }}
|
|
</label>
|
|
{{ form.skip_header_rows }}
|
|
{% if form.skip_header_rows.help_text %}
|
|
<p class="text-xs text-slate mt-1.5">{{ form.skip_header_rows.help_text }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Form Actions -->
|
|
<div class="flex flex-col sm:flex-row gap-3 pt-6 border-t border-slate-200">
|
|
<button type="submit" class="flex-1 px-6 py-3 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition flex items-center justify-center gap-2 shadow-sm">
|
|
<i data-lucide="upload" class="w-5 h-5"></i>
|
|
{% trans "Import & Review" %}
|
|
</button>
|
|
<a href="{% url 'surveys:instance_list' %}" class="px-6 py-3 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-light transition flex items-center justify-center gap-2">
|
|
<i data-lucide="x" class="w-5 h-5"></i>
|
|
{% trans "Cancel" %}
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Instructions Sidebar -->
|
|
<div class="space-y-6">
|
|
<!-- CSV Format Guide -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
|
|
<div class="p-6">
|
|
<h3 class="text-sm font-bold text-navy mb-4 flex items-center gap-2">
|
|
<i data-lucide="info" class="w-4 h-4 text-blue"></i>
|
|
{% trans "CSV Format Guide" %}
|
|
</h3>
|
|
|
|
<div class="space-y-4">
|
|
<p class="text-sm text-slate">{% trans "Upload a MOH Statistics CSV file with the following columns:" %}</p>
|
|
|
|
<ul class="space-y-2">
|
|
<li class="flex items-start gap-2 text-xs text-slate">
|
|
<span class="mt-1 w-1.5 h-1.5 rounded-full bg-blue flex-shrink-0"></span>
|
|
<span><strong>SNo</strong> - Serial number</span>
|
|
</li>
|
|
<li class="flex items-start gap-2 text-xs text-slate">
|
|
<span class="mt-1 w-1.5 h-1.5 rounded-full bg-blue flex-shrink-0"></span>
|
|
<span><strong>Facility Name</strong> - Hospital/Facility</span>
|
|
</li>
|
|
<li class="flex items-start gap-2 text-xs text-slate">
|
|
<span class="mt-1 w-1.5 h-1.5 rounded-full bg-blue flex-shrink-0"></span>
|
|
<span><strong>Visit Type</strong> - EMERGENCY, INPATIENT, OPD</span>
|
|
</li>
|
|
<li class="flex items-start gap-2 text-xs text-slate">
|
|
<span class="mt-1 w-1.5 h-1.5 rounded-full bg-blue flex-shrink-0"></span>
|
|
<span><strong>Admit Date</strong> - Admission date</span>
|
|
</li>
|
|
<li class="flex items-start gap-2 text-xs text-slate">
|
|
<span class="mt-1 w-1.5 h-1.5 rounded-full bg-blue flex-shrink-0"></span>
|
|
<span><strong>Discharge Date</strong> - Discharge date</span>
|
|
</li>
|
|
<li class="flex items-start gap-2 text-xs text-slate">
|
|
<span class="mt-1 w-1.5 h-1.5 rounded-full bg-blue flex-shrink-0"></span>
|
|
<span><strong>Patient Name</strong> - Full patient name</span>
|
|
</li>
|
|
<li class="flex items-start gap-2 text-xs text-slate">
|
|
<span class="mt-1 w-1.5 h-1.5 rounded-full bg-blue flex-shrink-0"></span>
|
|
<span><strong>File Number</strong> - MRN (Medical Record Number)</span>
|
|
</li>
|
|
<li class="flex items-start gap-2 text-xs text-slate">
|
|
<span class="mt-1 w-1.5 h-1.5 rounded-full bg-blue flex-shrink-0"></span>
|
|
<span><strong>SSN</strong> - National ID</span>
|
|
</li>
|
|
<li class="flex items-start gap-2 text-xs text-slate">
|
|
<span class="mt-1 w-1.5 h-1.5 rounded-full bg-blue flex-shrink-0"></span>
|
|
<span><strong>Mobile No</strong> - Phone number</span>
|
|
</li>
|
|
<li class="flex items-start gap-2 text-xs text-slate">
|
|
<span class="mt-1 w-1.5 h-1.5 rounded-full bg-blue flex-shrink-0"></span>
|
|
<span><strong>Gender</strong> - Male/Female</span>
|
|
</li>
|
|
<li class="flex items-start gap-2 text-xs text-slate">
|
|
<span class="mt-1 w-1.5 h-1.5 rounded-full bg-blue flex-shrink-0"></span>
|
|
<span><strong>Nationality</strong> - Country</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="bg-blue-50 border border-blue-200 rounded-xl p-4">
|
|
<div class="flex items-start gap-2">
|
|
<i data-lucide="lightbulb" class="w-4 h-4 text-blue-600 mt-0.5 flex-shrink-0"></i>
|
|
<div>
|
|
<p class="text-xs font-semibold text-blue-800 mb-1">{% trans "Note:" %}</p>
|
|
<p class="text-xs text-blue-700">{% trans "The CSV may have header/metadata rows at the top. Adjust 'Skip Header Rows' accordingly (default: 5)." %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Import Process -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
|
|
<div class="p-6">
|
|
<h3 class="text-sm font-bold text-navy mb-4 flex items-center gap-2">
|
|
<i data-lucide="workflow" class="w-4 h-4 text-blue"></i>
|
|
{% trans "Import Process" %}
|
|
</h3>
|
|
|
|
<div class="space-y-3">
|
|
<div class="flex items-center gap-3 group">
|
|
<span class="w-8 h-8 rounded-full bg-blue text-white flex items-center justify-center text-xs font-bold shadow-sm group-hover:bg-blue-700 transition">1</span>
|
|
<span class="text-sm text-slate font-medium group-hover:text-navy transition">{% trans "Upload CSV file" %}</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 group">
|
|
<span class="w-8 h-8 rounded-full bg-blue text-white flex items-center justify-center text-xs font-bold shadow-sm group-hover:bg-blue-700 transition">2</span>
|
|
<span class="text-sm text-slate font-medium group-hover:text-navy transition">{% trans "Review patient data" %}</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 group">
|
|
<span class="w-8 h-8 rounded-full bg-blue text-white flex items-center justify-center text-xs font-bold shadow-sm group-hover:bg-blue-700 transition">3</span>
|
|
<span class="text-sm text-slate font-medium group-hover:text-navy transition">{% trans "Create patient records" %}</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 group">
|
|
<span class="w-8 h-8 rounded-full bg-blue text-white flex items-center justify-center text-xs font-bold shadow-sm group-hover:bg-blue-700 transition">4</span>
|
|
<span class="text-sm text-slate font-medium group-hover:text-navy transition">{% trans "Send surveys" %}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Apply Tailwind classes to form fields dynamically
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Apply Tailwind classes to form fields
|
|
const textInputs = document.querySelectorAll('input[type="text"], input[type="number"], input[type="file"], select, textarea');
|
|
textInputs.forEach(input => {
|
|
input.classList.add('w-full', 'px-4', 'py-2.5', 'border', 'border-slate-200', 'rounded-xl', 'focus:border-blue', 'focus:ring-1', 'focus:ring-blue', 'transition', 'text-slate', 'bg-white');
|
|
});
|
|
|
|
// Initialize Lucide icons
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
{% endblock %} |