212 lines
11 KiB
HTML
212 lines
11 KiB
HTML
{% extends "layouts/public_base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Track Your Complaint" %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="min-h-screen bg-gradient-to-br from-light to-blue-50 py-12 px-4 sm:px-6 lg:px-8">
|
|
<div class="max-w-4xl mx-auto">
|
|
<!-- Back Link -->
|
|
<a href="/" class="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 mb-8 transition font-medium">
|
|
<i data-lucide="arrow-left" class="w-5 h-5"></i>
|
|
{% trans "Back to Home" %}
|
|
</a>
|
|
|
|
<!-- Search Card -->
|
|
<div class="bg-white rounded-3xl shadow-xl p-8 md:p-12 mb-8">
|
|
<div class="text-center mb-8">
|
|
<div class="inline-flex items-center justify-center w-20 h-20 bg-blue-100 rounded-full mb-6">
|
|
<i data-lucide="search" class="w-10 h-10 text-blue-500"></i>
|
|
</div>
|
|
<h1 class="text-3xl font-bold text-gray-800 mb-2">
|
|
{% trans "Track Your Complaint" %}
|
|
</h1>
|
|
<p class="text-gray-500 text-lg">
|
|
{% trans "Enter your reference number to check the status of your complaint" %}
|
|
</p>
|
|
</div>
|
|
|
|
<form method="POST" class="max-w-lg mx-auto">
|
|
{% csrf_token %}
|
|
<div class="mb-4">
|
|
<input
|
|
type="text"
|
|
name="reference_number"
|
|
class="w-full px-6 py-4 border-2 border-gray-200 rounded-xl text-gray-800 text-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
|
|
placeholder="{% trans 'e.g., CMP-20240101-123456' %}"
|
|
value="{{ reference_number }}"
|
|
required
|
|
>
|
|
</div>
|
|
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-xl font-bold text-lg transition shadow-lg shadow-blue-200 hover:shadow-xl hover:-translate-y-0.5">
|
|
<i data-lucide="search" class="inline w-5 h-5 mr-2"></i>
|
|
{% trans "Track Complaint" %}
|
|
</button>
|
|
</form>
|
|
<p class="text-center text-gray-400 text-sm mt-4">
|
|
{% trans "Your reference number was provided when you submitted your complaint" %}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Error Message -->
|
|
{% if error_message %}
|
|
<div class="bg-yellow-50 border border-yellow-200 rounded-2xl p-6 mb-8 flex items-start gap-4">
|
|
<div class="text-yellow-500 flex-shrink-0">
|
|
<i data-lucide="alert-triangle" class="w-6 h-6"></i>
|
|
</div>
|
|
<div>
|
|
<strong class="text-yellow-800 block mb-1">{% trans "Not Found" %}</strong>
|
|
<span class="text-yellow-700">{{ error_message }}</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Complaint Details -->
|
|
{% if complaint %}
|
|
<div class="bg-white rounded-3xl shadow-xl p-8 md:p-12">
|
|
<!-- Header -->
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6 pb-6 border-b border-gray-200">
|
|
<div class="text-center md:text-left">
|
|
<h2 class="text-2xl font-bold text-gray-800 flex items-center gap-2 md:justify-start justify-center">
|
|
<i data-lucide="hash" class="w-6 h-6 text-gray-400"></i>
|
|
{{ complaint.reference_number }}
|
|
</h2>
|
|
</div>
|
|
<div class="text-center md:text-right">
|
|
<span class="px-4 py-2 rounded-full text-sm font-bold uppercase tracking-wide
|
|
{% if complaint.status == 'open' %}bg-yellow-100 text-yellow-700
|
|
{% elif complaint.status == 'in_progress' %}bg-blue-100 text-blue-700
|
|
{% elif complaint.status == 'partially_resolved' %}bg-orange-100 text-orange-700
|
|
{% elif complaint.status == 'resolved' %}bg-green-100 text-green-700
|
|
{% elif complaint.status == 'closed' %}bg-gray-100 text-gray-700
|
|
{% elif complaint.status == 'cancelled' %}bg-red-100 text-red-700
|
|
{% endif %}">
|
|
{{ complaint.get_status_display }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SLA Information -->
|
|
<div class="{% if complaint.is_overdue %}bg-red-50 border-l-4 border-red-500{% else %}bg-blue-50 border-l-4 border-blue-500{% endif %} rounded-xl p-6 mb-6">
|
|
<div class="flex items-center gap-4">
|
|
<div class="{% if complaint.is_overdue %}text-red-500{% else %}text-blue-500{% endif %} flex-shrink-0">
|
|
<i data-lucide="{% if complaint.is_overdue %}alert-circle{% else %}clock{% endif %}" class="w-8 h-8"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h4 class="font-bold text-gray-800 mb-1">
|
|
{% if complaint.is_overdue %}
|
|
{% trans "Response Overdue" %}
|
|
{% else %}
|
|
{% trans "Expected Response Time" %}
|
|
{% endif %}
|
|
</h4>
|
|
<p class="text-gray-600">
|
|
<strong>{% trans "Due:" %}</strong>
|
|
{{ complaint.due_at|date:"F j, Y" }} at {{ complaint.due_at|time:"g:i A" }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Information Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
|
|
<div class="bg-gray-50 rounded-xl p-4">
|
|
<div class="flex items-center gap-2 text-gray-500 text-sm mb-1">
|
|
<i data-lucide="calendar" class="w-4 h-4"></i>
|
|
{% trans "Submitted On" %}
|
|
</div>
|
|
<div class="font-semibold text-gray-800">
|
|
{{ complaint.created_at|date:"F j, Y" }}
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-xl p-4">
|
|
<div class="flex items-center gap-2 text-gray-500 text-sm mb-1">
|
|
<i data-lucide="building" class="w-4 h-4"></i>
|
|
{% trans "Hospital" %}
|
|
</div>
|
|
<div class="font-semibold text-gray-800">
|
|
{{ complaint.hospital.name }}
|
|
</div>
|
|
</div>
|
|
{% if complaint.department %}
|
|
<div class="bg-gray-50 rounded-xl p-4">
|
|
<div class="flex items-center gap-2 text-gray-500 text-sm mb-1">
|
|
<i data-lucide="building-2" class="w-4 h-4"></i>
|
|
{% trans "Department" %}
|
|
</div>
|
|
<div class="font-semibold text-gray-800">
|
|
{{ complaint.department.name }}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="bg-gray-50 rounded-xl p-4">
|
|
<div class="flex items-center gap-2 text-gray-500 text-sm mb-1">
|
|
<i data-lucide="list" class="w-4 h-4"></i>
|
|
{% trans "Category" %}
|
|
</div>
|
|
<div class="font-semibold text-gray-800">
|
|
{% if complaint.category %}
|
|
{{ complaint.category.name_en }}
|
|
{% else %}
|
|
{% trans "Pending Classification" %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Timeline -->
|
|
{% if public_updates %}
|
|
<div class="mt-8">
|
|
<h3 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-2">
|
|
<i data-lucide="history" class="w-6 h-6 text-blue-500"></i>
|
|
{% trans "Complaint Timeline" %}
|
|
</h3>
|
|
<div class="relative pl-8">
|
|
<!-- Timeline Line -->
|
|
<div class="absolute left-3 top-0 bottom-0 w-0.5 bg-gray-200"></div>
|
|
|
|
{% for update in public_updates %}
|
|
<div class="relative pb-6 last:pb-0">
|
|
<!-- Timeline Dot -->
|
|
<div class="absolute left-[-1.3rem] top-1 w-4 h-4 rounded-full border-2 border-white
|
|
{% if update.update_type == 'status_change' %}bg-orange-500 shadow-[0_0_0_2px_#f97316]
|
|
{% elif update.update_type == 'resolution' %}bg-green-500 shadow-[0_0_0_2px_#22c55e]
|
|
{% else %}bg-blue-500 shadow-[0_0_0_2px_#3b82f6]{% endif %}">
|
|
</div>
|
|
|
|
<div class="text-sm text-gray-500 mb-1">
|
|
{{ update.created_at|date:"F j, Y" }} at {{ update.created_at|time:"g:i A" }}
|
|
</div>
|
|
<div class="font-semibold text-gray-800 mb-2">
|
|
{% if update.update_type == 'status_change' %}
|
|
{% trans "Status Updated" %}
|
|
{% elif update.update_type == 'resolution' %}
|
|
{% trans "Resolution Added" %}
|
|
{% elif update.update_type == 'communication' %}
|
|
{% trans "Update" %}
|
|
{% else %}
|
|
{{ update.get_update_type_display }}
|
|
{% endif %}
|
|
</div>
|
|
{% if update.comments %}
|
|
<div class="text-gray-600 leading-relaxed">
|
|
{{ update.comments|linebreaks }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-8 px-6 bg-gray-50 rounded-xl">
|
|
<i data-lucide="info" class="w-8 h-8 text-gray-400 mx-auto mb-2"></i>
|
|
<p class="text-gray-500">
|
|
{% trans "No updates available yet. You will be notified when there is progress on your complaint." %}
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endblock %} |