140 lines
6.5 KiB
HTML
140 lines
6.5 KiB
HTML
{% extends 'layouts/public_base.html' %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Select Visit" %} - {{ hospital.name }} - PX360{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.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; }
|
|
.type-badge.daycase { background: #f3e8ff; color: #6b21a8; }
|
|
.type-badge.appointment { background: #fce7f3; color: #9d174d; }
|
|
.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;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-3xl mx-auto px-4 py-8 md:py-12">
|
|
<!-- Breadcrumb -->
|
|
<a href="{% url 'complaints:patient_complaint_portal' session.token %}"
|
|
class="inline-flex items-center gap-2 text-navy/70 hover:text-navy mb-6 transition-all font-medium group">
|
|
<div class="p-2 rounded-full group-hover:bg-navy/5 transition-colors">
|
|
<i data-lucide="arrow-left" class="w-5 h-5 group-hover:-translate-x-1 transition-transform"></i>
|
|
</div>
|
|
{% trans "Hospitals" %}
|
|
</a>
|
|
|
|
<!-- Header Card -->
|
|
<div class="glass-card rounded-2xl shadow-xl overflow-hidden mb-8 animate-fade-in">
|
|
<div class="bg-gradient-to-r from-navy to-blue p-6 text-white">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="building-2" class="w-6 h-6"></i>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-xl font-bold">{{ hospital.name }}</h1>
|
|
<p class="text-blue-100 text-sm">{% trans "Select the visit you want to submit a complaint about" %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-navy/10 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="user" class="w-5 h-5 text-navy"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-slate font-semibold uppercase tracking-wider">{% trans "Patient" %}</p>
|
|
<p class="font-bold text-gray-800">{{ patient.get_full_name }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Visit List -->
|
|
<div class="space-y-3 animate-slide-up" style="animation-delay: 0.1s">
|
|
{% if visits %}
|
|
{% for visit in visits %}
|
|
<a href="{% url 'complaints:patient_complaint_visit_form' session.token visit.id %}"
|
|
class="glass-card block rounded-2xl border border-white/50 hover:border-navy hover:shadow-xl transition-all duration-300 p-5 group">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-12 h-12 bg-navy/10 rounded-xl flex items-center justify-center group-hover:bg-navy/20 transition-colors">
|
|
<i data-lucide="calendar-check" class="w-6 h-6 text-navy"></i>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-1.5">
|
|
<span class="type-badge {{ visit.patient_type|lower }}">{{ visit.patient_type }}</span>
|
|
<span class="font-mono text-xs text-slate bg-slate-100 px-2 py-0.5 rounded-md">{{ visit.admission_id }}</span>
|
|
{% if visit.is_vip %}
|
|
<span class="vip-badge">VIP</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="flex items-center gap-2 text-sm text-slate">
|
|
<span class="flex items-center gap-1">
|
|
<i data-lucide="calendar" class="w-3.5 h-3.5"></i>
|
|
{{ visit.admit_date|date:"d M Y, H:i" }}
|
|
</span>
|
|
{% if visit.primary_doctor %}
|
|
<span class="text-slate-300">·</span>
|
|
<span class="flex items-center gap-1">
|
|
<i data-lucide="stethoscope" class="w-3.5 h-3.5"></i>
|
|
{{ visit.doctor_display }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
{% if visit.discharge_date %}
|
|
<div class="flex items-center gap-1 mt-1 text-xs text-green-600">
|
|
<i data-lucide="log-out" class="w-3 h-3"></i>
|
|
{% trans "Discharged" %}: {{ visit.discharge_date|date:"d M Y, H:i" }}
|
|
</div>
|
|
{% else %}
|
|
<div class="flex items-center gap-1 mt-1 text-xs text-amber-600">
|
|
<i data-lucide="loader" class="w-3 h-3"></i>
|
|
{% trans "Visit in progress" %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-navy">
|
|
<i data-lucide="chevron-right" class="w-5 h-5 text-slate-300 group-hover:text-navy group-hover:translate-x-1 transition-all"></i>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
{% else %}
|
|
<div class="glass-card rounded-2xl p-12 text-center">
|
|
<div class="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i data-lucide="calendar-x" class="w-8 h-8 text-slate-300"></i>
|
|
</div>
|
|
<p class="text-slate font-medium">{% trans "No visits found for this hospital" %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
{% endblock %}
|