315 lines
20 KiB
HTML
315 lines
20 KiB
HTML
{% load i18n %}
|
|
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="{{ LANGUAGE_CODE|default:'en' }}" dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ complaint.reference_number }} - {% trans "Review Feedback" %}</title>
|
|
<link rel="stylesheet" href="{% static 'dist/css/tailwind.css' %}">
|
|
<link rel="stylesheet" href="{% static 'vendor/fonts/noto-kufi-arabic/arabic.css' %}">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
body { font-family: 'Inter', 'Noto Kufi Arabic', sans-serif; }
|
|
[dir="rtl"] body, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] button {
|
|
font-family: 'Noto Kufi Arabic', sans-serif;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-50 min-h-screen py-8 px-4">
|
|
<div class="w-full max-w-3xl mx-auto">
|
|
|
|
<!-- Back -->
|
|
{% if complaint.department %}
|
|
<a href="{% url 'organizations:department_detail' complaint.department.id %}" class="inline-flex items-center gap-2 text-sm text-slate hover:text-navy transition mb-4">← {% trans "Back to Department" %}</a>
|
|
{% endif %}
|
|
|
|
<!-- Logo -->
|
|
<div class="text-center mb-6">
|
|
<img src="{% static 'img/hh-logo.png' %}" alt="Al Hammadi Hospital" class="h-16 w-auto mx-auto inline-block">
|
|
</div>
|
|
|
|
<!-- Complaint Card -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 mb-6">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<span class="text-sm font-bold text-navy">{{ complaint.reference_number }}</span>
|
|
</div>
|
|
<h1 class="text-xl font-bold text-navy mb-4">{{ complaint.title }}</h1>
|
|
<div class="border-t border-slate-100 pt-4">
|
|
<p class="text-xs font-bold text-slate/60 uppercase mb-2">{% trans "Description" %}</p>
|
|
<p class="text-base leading-relaxed text-slate">{{ complaint.description }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Staff Responses -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 mb-6">
|
|
{% if error %}
|
|
<div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-4">
|
|
<p class="text-sm text-red-700 font-medium">{{ error }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% comment %} <div class="flex items-center justify-between mb-4">
|
|
<p class="text-sm font-semibold text-navy">{% trans "Staff Responses" %}</p>
|
|
<a href="{% url 'complaints:complaint_review_pdf' complaint_id=complaint.id token=explanation.token %}" target="_blank"
|
|
class="inline-flex items-center gap-1.5 px-3 py-1.5 border border-slate-200 rounded-lg text-xs font-semibold text-slate hover:border-navy hover:text-navy transition">
|
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3M3 17V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg>
|
|
{% trans "PDF" %}
|
|
</a>
|
|
</div> {% endcomment %}
|
|
|
|
{% for sd in staff_data %}
|
|
<div class="border-2 border-slate-200 rounded-xl p-4 mb-4 last:mb-0">
|
|
<!-- Staff header -->
|
|
<div class="flex items-center gap-3 mb-3 pb-3 border-b border-slate-100">
|
|
<div class="w-10 h-10 rounded-full bg-navy flex items-center justify-center text-white font-bold text-sm">
|
|
{{ sd.staff.first_name|first }}{{ sd.staff.last_name|first }}
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-slate text-sm">{{ sd.staff.get_full_name }}</p>
|
|
{% if sd.staff.job_title %}<p class="text-xs text-slate/50">{{ sd.staff.job_title }}</p>{% endif %}
|
|
<span class="inline-flex items-center gap-1 text-xs mt-1 px-2 py-0.5 rounded-full
|
|
{% if sd.is_completed %}bg-green-100 text-green-700{% else %}bg-yellow-100 text-yellow-700{% endif %}">
|
|
{% if sd.is_completed %}{% trans "Responded" %}{% else %}{% trans "Pending" %}{% endif %}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{% if sd.is_completed %}
|
|
{% for pair in sd.qa_pairs %}
|
|
<div class="bg-slate-50 rounded-xl p-3 mb-2 last:mb-0">
|
|
<div class="flex items-start gap-2 mb-2">
|
|
<span class="flex-shrink-0 w-5 h-5 flex items-center justify-center rounded-full bg-navy text-white text-xs font-bold">{{ forloop.counter }}</span>
|
|
<p class="text-sm font-semibold text-slate">{{ pair.question.question_text }}</p>
|
|
</div>
|
|
<div class="pl-7">
|
|
{% if pair.question.question_type == 'yes_no' %}
|
|
{% if pair.answer == 'yes' %}
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-green-100 text-green-700">{% trans "Yes" %}</span>
|
|
{% elif pair.answer == 'no' %}
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-red-100 text-red-700">{% trans "No" %}</span>
|
|
{% else %}
|
|
<span class="text-sm text-slate/40">—</span>
|
|
{% endif %}
|
|
{% else %}
|
|
<p class="text-sm text-slate-600">{{ pair.answer|default:"—" }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
{% if sd.response.attachments.exists %}
|
|
<div class="mt-3 pt-3 border-t border-slate-100">
|
|
<p class="text-xs font-semibold text-slate/50 uppercase tracking-wide mb-2">{% trans "Attachments" %}</p>
|
|
<ul class="space-y-1.5">
|
|
{% for att in sd.response.attachments.all %}
|
|
<li>
|
|
<a href="{{ att.file.url }}" target="_blank" class="inline-flex items-center gap-2 text-sm text-blue-600 hover:underline">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 10-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/></svg>
|
|
{{ att.filename }}
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
{% else %}
|
|
<p class="text-sm text-slate/40 italic">{% trans "This staff member has not responded yet." %}</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
|
|
{% if staff_data and investigation.status == 'answers_received' %}
|
|
<!-- Final Reply Form -->
|
|
<div class="border-t border-slate-100 pt-6 mt-6">
|
|
<p class="text-sm font-semibold text-navy mb-2">{% trans "Your Final Reply" %}</p>
|
|
<p class="text-xs text-slate/60 mb-4">{% trans "Based on the staff feedback above, write your final reply." %}</p>
|
|
|
|
<form method="post" enctype="multipart/form-data" class="space-y-4">
|
|
{% csrf_token %}
|
|
|
|
{% if otp_sent %}
|
|
<!-- ═══ OTP VERIFICATION BANNER (top, prominent) ═══ -->
|
|
<div class="bg-green-50 border border-green-200 rounded-xl p-4">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="shield-check" class="w-5 h-5 text-green-600"></i>
|
|
<p class="text-sm font-bold text-green-800">{% trans "Verify your submission" %}</p>
|
|
</div>
|
|
<button type="submit" name="action" value="cancel_otp"
|
|
class="text-xs text-slate/60 hover:text-navy underline flex items-center gap-1">
|
|
<i data-lucide="pencil" class="w-3 h-3"></i>
|
|
{% trans "Edit response" %}
|
|
</button>
|
|
</div>
|
|
|
|
<p class="text-sm text-green-700 mb-3">
|
|
{% if otp_phone and otp_email %}{% trans "Verification code sent to your phone and email." %}
|
|
{% elif otp_phone %}{% trans "Verification code sent to your phone." %}
|
|
{% elif otp_email %}{% trans "Verification code sent to your email." %}
|
|
{% else %}{% trans "Verification code sent." %}{% endif %}
|
|
</p>
|
|
|
|
{% comment %} {% if dev_otp_code %}
|
|
<div class="mb-3 px-3 py-2 bg-yellow-50 border border-dashed border-yellow-400 rounded-lg text-xs text-yellow-800">
|
|
<span class="font-bold">DEBUG:</span>
|
|
{% trans "verification code is" %}
|
|
<span class="font-mono font-bold tracking-widest">{{ dev_otp_code }}</span>
|
|
</div>
|
|
{% endif %} {% endcomment %}
|
|
|
|
<div class="flex items-center gap-3">
|
|
<input type="text" name="otp_code" id="otpInput" maxlength="6" pattern="[0-9]{6}" autofocus
|
|
class="w-32 px-3 py-2 border-2 border-green-300 rounded-lg text-center text-lg font-bold tracking-widest focus:outline-none focus:border-green-600"
|
|
placeholder="000000" required
|
|
oninput="toggleVerifyBtn()">
|
|
<button type="submit" name="action" value="verify_submit" id="verifyBtn"
|
|
class="flex-1 px-4 py-2.5 bg-green-600 text-white rounded-xl font-bold text-sm hover:bg-green-700 transition disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center gap-2"
|
|
disabled>
|
|
<i data-lucide="check-circle" class="w-4 h-4"></i>
|
|
{% trans "Verify & Submit" %}
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center justify-between mt-3">
|
|
<p class="text-xs text-slate/60">{% trans "Enter the 6-digit code to complete your submission." %}</p>
|
|
<button type="submit" formnovalidate name="action" value="send_code"
|
|
class="text-xs text-green-700 hover:text-green-800 underline">
|
|
{% trans "Resend code" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Locked form fields wrapper -->
|
|
<div class="relative rounded-xl" style="opacity: 0.5; pointer-events: none;">
|
|
<div class="absolute -top-2.5 left-4 px-2 py-0.5 bg-slate-200 text-slate-600 rounded text-[10px] font-bold uppercase tracking-wider flex items-center gap-1 z-10">
|
|
<i data-lucide="lock" class="w-3 h-3"></i>
|
|
{% trans "Locked" %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<textarea name="final_reply" rows="6"
|
|
class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-sm text-slate focus:outline-none focus:border-navy resize-none"
|
|
placeholder="{% trans 'Write your final reply based on the feedback...' %}"
|
|
required>{{ final_reply|default:investigation.final_reply }}</textarea>
|
|
|
|
<!-- Findings -->
|
|
<div class="bg-slate-50 rounded-xl p-4 space-y-4">
|
|
<p class="text-xs font-bold text-slate/60 uppercase tracking-wide">{% trans "Assessment" %}</p>
|
|
|
|
<!-- Q1: Negligence -->
|
|
<div>
|
|
<p class="text-sm font-semibold text-slate mb-2">{% trans "Is there any negligence resulting from carelessness?" %}</p>
|
|
<div class="flex items-center gap-4">
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="radio" name="negligence_finding" value="yes" class="w-4 h-4 accent-red-600" {% if negligence_finding == 'yes' %}checked{% endif %} required>
|
|
<span class="text-sm font-semibold text-red-700">{% trans "Yes" %}</span>
|
|
</label>
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="radio" name="negligence_finding" value="no" class="w-4 h-4 accent-green-600" {% if negligence_finding == 'no' %}checked{% endif %}>
|
|
<span class="text-sm font-semibold text-green-700">{% trans "No" %}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q2: Policy issue -->
|
|
<div>
|
|
<p class="text-sm font-semibold text-slate mb-2">{% trans "Is it resulting from policies or regulations?" %}</p>
|
|
<div class="flex items-center gap-4">
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="radio" name="policy_issue_finding" value="yes" class="w-4 h-4 accent-red-600" {% if policy_issue_finding == 'yes' %}checked{% endif %} required>
|
|
<span class="text-sm font-semibold text-red-700">{% trans "Yes" %}</span>
|
|
</label>
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="radio" name="policy_issue_finding" value="no" class="w-4 h-4 accent-green-600" {% if policy_issue_finding == 'no' %}checked{% endif %}>
|
|
<span class="text-sm font-semibold text-green-700">{% trans "No" %}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Q3: Improvement project -->
|
|
<div>
|
|
<p class="text-sm font-semibold text-slate mb-2">{% trans "Does this complaint require an improvement project?" %}</p>
|
|
<div class="flex items-center gap-4 mb-2">
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="radio" name="requires_improvement_project" value="yes" class="w-4 h-4 accent-amber-600" {% if requires_improvement_project == 'yes' %}checked{% endif %} required onchange="toggleProjectField()">
|
|
<span class="text-sm font-semibold text-amber-700">{% trans "Yes" %}</span>
|
|
</label>
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="radio" name="requires_improvement_project" value="no" class="w-4 h-4 accent-slate-400" {% if requires_improvement_project == 'no' %}checked{% endif %} onchange="toggleProjectField()">
|
|
<span class="text-sm font-semibold text-slate-500">{% trans "No" %}</span>
|
|
</label>
|
|
</div>
|
|
<div id="projectField" class="{% if requires_improvement_project != 'yes' %}hidden{% endif %}">
|
|
<textarea name="improvement_project_note" rows="3"
|
|
class="w-full px-3 py-2 border-2 border-slate-200 rounded-lg text-sm text-slate focus:outline-none focus:border-navy resize-none"
|
|
placeholder="{% trans 'Describe the required improvement project...' %}">{{ improvement_project_note|default:investigation.improvement_project_note }}</textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Attachments -->
|
|
<div>
|
|
<label class="block text-sm font-semibold text-navy mb-2">{% trans "Attachments (Optional)" %}</label>
|
|
<input type="file" name="attachments" multiple
|
|
class="block w-full text-sm text-slate file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-slate-100 file:text-navy hover:file:bg-slate-200 file:transition cursor-pointer border-2 border-slate-200 rounded-xl">
|
|
</div>
|
|
|
|
<!-- Consent -->
|
|
<div class="bg-amber-50 border border-amber-200 rounded-xl p-4">
|
|
<label class="flex items-start gap-3 cursor-pointer">
|
|
<input type="checkbox" name="consent" id="consentCheckbox" class="mt-0.5 w-5 h-5 accent-navy shrink-0"
|
|
{% if consent_checked %}checked{% endif %}
|
|
onchange="toggleSubmitBtn()">
|
|
<span class="text-sm text-slate-700 leading-relaxed">
|
|
{% trans "I confirm that I have read and fully reviewed all staff responses above. I acknowledge that my final reply represents the official department response for this complaint, and I accept full responsibility for its accuracy and content." %}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
{% if otp_sent %}
|
|
<!-- Close the locked-fields wrapper -->
|
|
</div>
|
|
{% else %}
|
|
<!-- Step 1: Send code (only when OTP not yet sent) -->
|
|
<button type="submit" name="action" value="send_code" id="sendCodeBtn"
|
|
class="w-full flex items-center justify-center gap-2 px-4 py-3 bg-navy text-white rounded-xl font-bold text-sm hover:bg-blue transition disabled:opacity-40 disabled:cursor-not-allowed"
|
|
disabled>
|
|
<i data-lucide="send" class="w-4 h-4"></i> {% trans "Send Verification Code" %}
|
|
</button>
|
|
{% endif %}
|
|
</form>
|
|
</div>
|
|
{% elif staff_data and investigation.status != 'answers_received' %}
|
|
<div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mt-4">
|
|
<p class="text-sm text-blue-700">{% trans "Final reply will be available once staff responses are in." %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function toggleSubmitBtn() {
|
|
var cb = document.getElementById('consentCheckbox');
|
|
var btn = document.getElementById('sendCodeBtn');
|
|
if (btn) btn.disabled = !cb.checked;
|
|
}
|
|
function toggleVerifyBtn() {
|
|
var input = document.getElementById('otpInput');
|
|
var btn = document.getElementById('verifyBtn');
|
|
if (btn && input) btn.disabled = input.value.replace(/\s/g, '').length !== 6;
|
|
}
|
|
function toggleProjectField() {
|
|
var yesRadio = document.querySelector('input[name="requires_improvement_project"][value="yes"]');
|
|
var field = document.getElementById('projectField');
|
|
if (field && yesRadio) field.classList.toggle('hidden', !yesRadio.checked);
|
|
}
|
|
// Init directly — script is at the bottom of <body>, all elements exist.
|
|
toggleSubmitBtn();
|
|
toggleVerifyBtn();
|
|
toggleProjectField();
|
|
lucide.createIcons();
|
|
</script>
|
|
</body>
|
|
</html>
|