383 lines
20 KiB
HTML
383 lines
20 KiB
HTML
{% extends 'layouts/base.html' %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Visit Journey" %} - {{ visit.admission_id }} - {{ patient.get_full_name }}{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.field-label {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: #64748b;
|
|
}
|
|
.field-value {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
line-height: 1.5;
|
|
}
|
|
.type-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.25rem 0.625rem;
|
|
border-radius: 0.5rem;
|
|
font-size: 0.6875rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.025em;
|
|
}
|
|
.type-badge.ed { background: #fef3c7; color: #92400e; }
|
|
.type-badge.ip { background: #dbeafe; color: #1e40af; }
|
|
.type-badge.op { background: #d1fae5; color: #065f46; }
|
|
.vip-badge {
|
|
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
|
color: white;
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.625rem;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.timeline-item { position: relative; }
|
|
.timeline-item:not(:last-child)::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 19px;
|
|
top: 44px;
|
|
bottom: -4px;
|
|
width: 2px;
|
|
background: #e2e8f0;
|
|
}
|
|
.timeline-dot {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="p-8">
|
|
<nav class="flex items-center gap-2 text-sm text-slate mb-6">
|
|
<a href="{% url 'organizations:patient_list' %}"
|
|
class="hover:text-navy transition flex items-center gap-1 group">
|
|
<i data-lucide="arrow-left" class="w-4 h-4 group-hover:-translate-x-1 transition-transform"></i>
|
|
{% trans "Patients" %}
|
|
</a>
|
|
<i data-lucide="chevron-right" class="w-4 h-4 text-slate-300"></i>
|
|
<a href="{% url 'organizations:patient_detail' patient.pk %}"
|
|
class="hover:text-navy transition">
|
|
{{ patient.get_full_name }}
|
|
</a>
|
|
<i data-lucide="chevron-right" class="w-4 h-4 text-slate-300"></i>
|
|
<span class="font-bold text-navy">{% trans "Visit Journey" %}</span>
|
|
</nav>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div class="lg:col-span-2 space-y-6">
|
|
<!-- Visit Summary Card -->
|
|
<section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
|
|
<div class="flex items-center justify-between mb-5">
|
|
<h2 class="text-lg font-bold text-navy flex items-center gap-2">
|
|
<div class="w-9 h-9 bg-gradient-to-br from-blue-100 to-blue-50 rounded-xl flex items-center justify-center shadow-sm">
|
|
<i data-lucide="route" class="w-5 h-5 text-blue"></i>
|
|
</div>
|
|
{% trans "Visit Journey" %}
|
|
</h2>
|
|
<div class="flex items-center gap-2">
|
|
<span class="type-badge {{ visit.patient_type|lower }}">{{ visit.patient_type }}</span>
|
|
{% if visit.is_vip %}<span class="vip-badge">VIP</span>{% endif %}
|
|
{% if visit.is_visit_complete %}
|
|
<span class="inline-flex px-2.5 py-1 rounded-full text-[10px] font-bold uppercase bg-green-100 text-green-700">{% trans "Complete" %}</span>
|
|
{% elif visit.survey_instance %}
|
|
<span class="inline-flex px-2.5 py-1 rounded-full text-[10px] font-bold uppercase bg-blue-100 text-blue-700">{% trans "Survey Sent" %}</span>
|
|
{% else %}
|
|
<span class="inline-flex px-2.5 py-1 rounded-full text-[10px] font-bold uppercase bg-amber-100 text-amber-700">{% trans "Active" %}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="font-mono text-sm text-slate mb-5 flex items-center gap-2">
|
|
<i data-lucide="hash" class="w-4 h-4 text-blue"></i>
|
|
<span class="font-bold text-navy">{{ visit.admission_id }}</span>
|
|
{% if visit.reg_code %}
|
|
<span class="text-slate-300">|</span>
|
|
<span>Reg: {{ visit.reg_code }}</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Visit Details Grid -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-5">
|
|
<div class="bg-slate-50 rounded-xl p-3 border border-slate-100">
|
|
<p class="field-label">{% trans "Admission" %}</p>
|
|
<p class="field-value">{{ visit.admit_date|date:"d M Y, H:i"|default:"-" }}</p>
|
|
</div>
|
|
<div class="bg-slate-50 rounded-xl p-3 border border-slate-100">
|
|
<p class="field-label">{% trans "Discharge" %}</p>
|
|
{% if visit.discharge_date %}
|
|
<p class="field-value text-green-600">{{ visit.discharge_date|date:"d M Y, H:i" }}</p>
|
|
{% else %}
|
|
<p class="field-value text-amber-600">{% trans "In Progress" %}</p>
|
|
{% endif %}
|
|
</div>
|
|
<div class="bg-slate-50 rounded-xl p-3 border border-slate-100">
|
|
<p class="field-label">{% trans "Hospital" %}</p>
|
|
<p class="field-value">{{ visit.hospital.name|default:"-" }}</p>
|
|
</div>
|
|
<div class="bg-slate-50 rounded-xl p-3 border border-slate-100">
|
|
<p class="field-label">{% trans "Insurance" %}</p>
|
|
<p class="field-value">{{ visit.insurance_company_name|default:"-" }}</p>
|
|
{% if visit.bill_type %}
|
|
<span class="text-[10px] font-bold bg-white text-slate-500 px-1.5 py-0.5 rounded border border-slate-200">{{ visit.bill_type }}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Timeline -->
|
|
<section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
|
|
<h3 class="text-sm font-bold text-navy mb-5 flex items-center gap-2">
|
|
<div class="w-9 h-9 bg-gradient-to-br from-slate-100 to-slate-50 rounded-xl flex items-center justify-center shadow-sm">
|
|
<i data-lucide="clock" class="w-5 h-5 text-slate"></i>
|
|
</div>
|
|
{% trans "Visit Timeline" %}
|
|
<span class="text-xs font-medium text-slate bg-slate-100 px-2 py-0.5 rounded-md ml-1">{{ timeline|length }} {% trans "events" %}</span>
|
|
</h3>
|
|
|
|
{% if timeline %}
|
|
<div class="space-y-4">
|
|
{% for event in timeline %}
|
|
<div class="timeline-item flex gap-4">
|
|
<div class="timeline-dot bg-navy/10 text-navy">
|
|
<i data-lucide="file-text" class="w-4 h-4"></i>
|
|
</div>
|
|
<div class="flex-1 min-w-0 bg-slate-50 rounded-xl p-4 border border-slate-100 hover:border-navy/30 transition">
|
|
<div class="flex items-center justify-between gap-3 mb-2">
|
|
<div class="flex items-center gap-2 flex-wrap">
|
|
{% if event.patient_type %}
|
|
<span class="type-badge {{ event.patient_type|lower }}">{{ event.patient_type }}</span>
|
|
{% endif %}
|
|
{% if event.visit_category %}
|
|
<span class="text-[10px] font-bold bg-white text-slate-500 px-1.5 py-0.5 rounded border border-slate-200">{{ event.visit_category }}</span>
|
|
{% endif %}
|
|
{% if event.type %}
|
|
<span class="text-xs font-semibold text-navy">{{ event.type }}</span>
|
|
{% endif %}
|
|
</div>
|
|
{% if event.parsed_date or event.bill_date %}
|
|
<span class="text-xs text-slate whitespace-nowrap flex items-center gap-1">
|
|
<i data-lucide="calendar" class="w-3 h-3"></i>
|
|
{% if event.parsed_date %}
|
|
{{ event.parsed_date|date:"d M Y, H:i" }}
|
|
{% else %}
|
|
{{ event.bill_date }}
|
|
{% endif %}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
{% if event.reg_code %}
|
|
<div class="flex items-center gap-3 text-xs text-slate">
|
|
<span>Reg: <span class="font-mono font-semibold">{{ event.reg_code }}</span></span>
|
|
{% if event.admission_id %}
|
|
<span class="text-slate-300">|</span>
|
|
<span>Adm: <span class="font-mono font-semibold">{{ event.admission_id }}</span></span>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="flex flex-col items-center py-10">
|
|
<div class="w-12 h-12 bg-slate-100 rounded-full flex items-center justify-center mb-3">
|
|
<i data-lucide="clock" class="w-6 h-6 text-slate-300"></i>
|
|
</div>
|
|
<p class="text-slate text-sm">{% trans "No timeline events recorded for this visit" %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="space-y-6">
|
|
<!-- Patient Info -->
|
|
<section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
|
|
<h3 class="text-sm font-bold text-navy mb-4 flex items-center gap-2">
|
|
<div class="w-9 h-9 bg-gradient-to-br from-blue-100 to-blue-50 rounded-xl flex items-center justify-center shadow-sm">
|
|
<i data-lucide="user-circle" class="w-5 h-5 text-blue"></i>
|
|
</div>
|
|
{% trans "Patient" %}
|
|
</h3>
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-12 h-12 rounded-xl flex items-center justify-center text-white font-bold text-lg flex-shrink-0"
|
|
style="background: linear-gradient(135deg, #007bbd 0%, #005696 100%);">
|
|
{{ patient.first_name|first }}{{ patient.last_name|first }}
|
|
</div>
|
|
<div class="min-w-0">
|
|
<a href="{% url 'organizations:patient_detail' patient.pk %}" class="font-bold text-navy hover:text-blue transition truncate block">{{ patient.get_full_name }}</a>
|
|
<span class="text-xs text-slate font-mono">{{ patient.mrn }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-3">
|
|
{% if patient.phone %}
|
|
<div class="flex items-center gap-2 text-sm text-slate">
|
|
<i data-lucide="phone" class="w-3.5 h-3.5 text-blue"></i>
|
|
<span class="font-mono">{{ patient.phone }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if patient.nationality %}
|
|
<div class="flex items-center gap-2 text-sm text-slate">
|
|
<i data-lucide="globe" class="w-3.5 h-3.5 text-blue"></i>
|
|
<span>{{ patient.nationality }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if patient.national_id %}
|
|
<div class="flex items-center gap-2 text-sm text-slate">
|
|
<i data-lucide="credit-card" class="w-3.5 h-3.5 text-blue"></i>
|
|
<span class="font-mono">{{ patient.national_id }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Doctor Info -->
|
|
<section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
|
|
<h3 class="text-sm font-bold text-navy mb-4 flex items-center gap-2">
|
|
<div class="w-9 h-9 bg-gradient-to-br from-purple-100 to-purple-50 rounded-xl flex items-center justify-center shadow-sm">
|
|
<i data-lucide="stethoscope" class="w-5 h-5 text-purple-600"></i>
|
|
</div>
|
|
{% trans "Medical Team" %}
|
|
</h3>
|
|
<div class="space-y-4">
|
|
{% if visit.primary_doctor_fk %}
|
|
<div>
|
|
<p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Primary Doctor" %}</p>
|
|
<a href="{% url 'organizations:staff_detail' visit.primary_doctor_fk.pk %}"
|
|
class="flex items-center gap-3 p-2.5 rounded-xl bg-slate-50 border border-slate-100 hover:border-navy/30 hover:bg-blue-50/30 transition group">
|
|
<div class="w-9 h-9 bg-navy/10 rounded-lg flex items-center justify-center">
|
|
<i data-lucide="user" class="w-4 h-4 text-navy"></i>
|
|
</div>
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold text-navy group-hover:text-blue transition truncate">{{ visit.primary_doctor_fk }}</p>
|
|
{% if visit.primary_doctor_fk.job_title %}
|
|
<p class="text-xs text-slate">{{ visit.primary_doctor_fk.job_title }}</p>
|
|
{% endif %}
|
|
</div>
|
|
<i data-lucide="chevron-right" class="w-4 h-4 text-slate-300 group-hover:text-navy transition ml-auto flex-shrink-0"></i>
|
|
</a>
|
|
</div>
|
|
{% else %}
|
|
<div>
|
|
<p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Primary Doctor" %}</p>
|
|
<p class="text-sm text-slate">{{ visit.doctor_display }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if visit.consultant_fk %}
|
|
<div>
|
|
<p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Consultant" %}</p>
|
|
<a href="{% url 'organizations:staff_detail' visit.consultant_fk.pk %}"
|
|
class="flex items-center gap-3 p-2.5 rounded-xl bg-slate-50 border border-slate-100 hover:border-navy/30 hover:bg-blue-50/30 transition group">
|
|
<div class="w-9 h-9 bg-purple-500/10 rounded-lg flex items-center justify-center">
|
|
<i data-lucide="user" class="w-4 h-4 text-purple-600"></i>
|
|
</div>
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-semibold text-navy group-hover:text-blue transition truncate">{{ visit.consultant_fk }}</p>
|
|
{% if visit.consultant_fk.job_title %}
|
|
<p class="text-xs text-slate">{{ visit.consultant_fk.job_title }}</p>
|
|
{% endif %}
|
|
</div>
|
|
<i data-lucide="chevron-right" class="w-4 h-4 text-slate-300 group-hover:text-navy transition ml-auto flex-shrink-0"></i>
|
|
</a>
|
|
</div>
|
|
{% elif visit.consultant_id %}
|
|
<div>
|
|
<p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Consultant" %}</p>
|
|
<p class="text-sm text-slate">{{ visit.consultant_display }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Additional Visit Info -->
|
|
<section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
|
|
<h3 class="text-sm font-bold text-navy mb-4 flex items-center gap-2">
|
|
<div class="w-9 h-9 bg-gradient-to-br from-slate-100 to-slate-50 rounded-xl flex items-center justify-center shadow-sm">
|
|
<i data-lucide="info" class="w-5 h-5 text-slate"></i>
|
|
</div>
|
|
{% trans "Visit Details" %}
|
|
</h3>
|
|
<div class="space-y-3">
|
|
{% if visit.company_name %}
|
|
<div>
|
|
<p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-0.5">{% trans "Company" %}</p>
|
|
<p class="text-sm font-medium text-gray-800">{{ visit.company_name }}</p>
|
|
</div>
|
|
{% endif %}
|
|
{% if visit.grade_name %}
|
|
<div>
|
|
<p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-0.5">{% trans "Grade" %}</p>
|
|
<p class="text-sm font-medium text-gray-800">{{ visit.grade_name }}</p>
|
|
</div>
|
|
{% endif %}
|
|
{% if visit.nationality %}
|
|
<div>
|
|
<p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-0.5">{% trans "Nationality" %}</p>
|
|
<p class="text-sm font-medium text-gray-800">{{ visit.nationality }}</p>
|
|
</div>
|
|
{% endif %}
|
|
<div>
|
|
<p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-0.5">{% trans "Patient ID (HIS)" %}</p>
|
|
<p class="text-sm font-mono font-medium text-gray-800">{{ visit.patient_id_his|default:"-" }}</p>
|
|
</div>
|
|
{% if visit.last_his_fetch_at %}
|
|
<div>
|
|
<p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-0.5">{% trans "Last HIS Sync" %}</p>
|
|
<p class="text-sm text-slate">{{ visit.last_his_fetch_at|date:"d M Y, H:i" }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Survey Status -->
|
|
{% if visit.survey_instance %}
|
|
<section class="rounded-2xl p-6 shadow-lg text-white relative overflow-hidden" style="background: linear-gradient(135deg, #007bbd 0%, #005696 100%);">
|
|
<div class="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full -translate-y-1/2 translate-x-1/2"></div>
|
|
<div class="relative z-10">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<i data-lucide="clipboard-list" class="w-5 h-5"></i>
|
|
<h3 class="text-sm font-bold">{% trans "Survey" %}</h3>
|
|
</div>
|
|
<p class="text-sm text-white/80 mb-1">{{ visit.survey_instance.survey_template.name }}</p>
|
|
<div class="flex items-center gap-3 text-xs text-white/70">
|
|
{% if visit.survey_instance.sent_at %}
|
|
<span class="flex items-center gap-1">
|
|
<i data-lucide="send" class="w-3 h-3"></i>
|
|
{{ visit.survey_instance.sent_at|date:"d M Y H:i" }}
|
|
</span>
|
|
{% endif %}
|
|
{% if visit.survey_instance.total_score %}
|
|
<span class="px-2 py-0.5 rounded bg-white/20 font-bold">{{ visit.survey_instance.total_score }}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
{% endblock %}
|