260 lines
14 KiB
HTML
260 lines
14 KiB
HTML
{% load i18n %}
|
|
<!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>{% trans "Submit Explanation" %} - PX360</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
navy: '#005696',
|
|
blue: '#007bbd',
|
|
light: '#eef6fb',
|
|
slate: '#64748b',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
|
body { font-family: 'Inter', sans-serif; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-light min-h-screen flex items-center py-8 px-4">
|
|
<div class="w-full max-w-3xl mx-auto">
|
|
<!-- Logo/Header -->
|
|
<div class="text-center mb-8">
|
|
<div class="inline-flex items-center justify-center w-16 h-16 bg-navy rounded-2xl mb-4">
|
|
<i data-lucide="message-square" class="w-8 h-8 text-white"></i>
|
|
</div>
|
|
<h1 class="text-2xl font-bold text-navy">{% trans "Submit Your Explanation" %}</h1>
|
|
<p class="text-slate mt-1">{% trans "PX360 Complaint Management System" %}</p>
|
|
</div>
|
|
|
|
<!-- Main Card -->
|
|
<div class="bg-white rounded-2xl shadow-lg border border-slate-100 overflow-hidden">
|
|
{% if error %}
|
|
<div class="bg-red-50 border-l-4 border-red-500 p-4 m-6 rounded-r-lg">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="alert-circle" class="w-5 h-5 text-red-500 flex-shrink-0"></i>
|
|
<p class="text-red-700 font-medium">{{ error }}</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Staff Information -->
|
|
{% if explanation.staff %}
|
|
<div class="bg-navy p-6 text-white">
|
|
<h2 class="text-sm font-semibold text-blue-200 mb-3 flex items-center gap-2">
|
|
<i data-lucide="user" class="w-4 h-4"></i>
|
|
{% trans "Requested From" %}
|
|
</h2>
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-14 h-14 bg-white/20 rounded-full flex items-center justify-center text-2xl font-bold">
|
|
{{ explanation.staff.first_name|first }}{{ explanation.staff.last_name|first }}
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-xl font-bold">{{ explanation.staff.first_name }} {{ explanation.staff.last_name }}</h3>
|
|
<div class="flex flex-wrap items-center gap-x-4 gap-y-1 mt-1 text-sm text-blue-100">
|
|
<span class="flex items-center gap-1">
|
|
<i data-lucide="id-card" class="w-4 h-4"></i>
|
|
{% trans "ID:" %} {{ explanation.staff.employee_id }}
|
|
</span>
|
|
{% if explanation.staff.department %}
|
|
<span class="flex items-center gap-1">
|
|
<i data-lucide="building-2" class="w-4 h-4"></i>
|
|
{{ explanation.staff.department.name }}
|
|
</span>
|
|
{% endif %}
|
|
{% if explanation.staff.job_title %}
|
|
<span class="flex items-center gap-1">
|
|
<i data-lucide="briefcase" class="w-4 h-4"></i>
|
|
{{ explanation.staff.job_title }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Original Staff Explanation (shown to manager during escalation) -->
|
|
{% if original_explanation %}
|
|
<div class="bg-orange-50 border-b border-orange-200 p-6">
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<div class="w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center">
|
|
<i data-lucide="arrow-up-circle" class="w-4 h-4 text-white"></i>
|
|
</div>
|
|
<h2 class="text-lg font-bold text-orange-700">{% trans "Original Staff Explanation" %}</h2>
|
|
</div>
|
|
<div class="bg-white rounded-xl p-4 border border-orange-200">
|
|
<div class="flex items-center gap-2 mb-3 pb-3 border-b border-orange-100">
|
|
<div class="w-8 h-8 bg-slate-200 rounded-full flex items-center justify-center text-sm font-bold text-slate">
|
|
{{ original_explanation.staff.first_name|first }}{{ original_explanation.staff.last_name|first }}
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold text-navy text-sm">{{ original_explanation.staff.first_name }} {{ original_explanation.staff.last_name }}</p>
|
|
<p class="text-xs text-slate">{% trans "Submitted:" %} {{ original_explanation.responded_at|date:"Y-m-d H:i" }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-slate text-sm leading-relaxed">
|
|
{{ original_explanation.explanation|linebreaksbr }}
|
|
</div>
|
|
{% if original_explanation.acceptance_notes %}
|
|
<div class="mt-3 pt-3 border-t border-orange-100">
|
|
<p class="text-xs font-semibold text-orange-600 mb-1">{% trans "Escalation Notes:" %}</p>
|
|
<p class="text-xs text-slate">{{ original_explanation.acceptance_notes }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="mt-4 bg-orange-100 rounded-lg p-3">
|
|
<p class="text-sm text-orange-800 flex items-start gap-2">
|
|
<i data-lucide="info" class="w-4 h-4 mt-0.5 flex-shrink-0"></i>
|
|
<span>{% trans "As the manager, please review the above explanation from your team member and provide your own perspective on this complaint." %}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Complaint Details -->
|
|
<div class="bg-light/50 border-b border-slate-100 p-6">
|
|
<h2 class="text-lg font-bold text-navy mb-4 flex items-center gap-2">
|
|
<i data-lucide="file-text" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Complaint Details" %}
|
|
</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-slate text-sm">{% trans "Reference:" %}</span>
|
|
<span class="font-bold text-navy">#{{ complaint.reference_number|slice:":8" }}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-slate text-sm">{% trans "Title:" %}</span>
|
|
<span class="font-bold text-navy">{{ complaint.title }}</span>
|
|
</div>
|
|
{% comment %} <div class="flex items-center gap-2">
|
|
<span class="text-slate text-sm">{% trans "Severity:" %}</span>
|
|
<span class="px-2.5 py-1 rounded-lg text-xs font-bold
|
|
{% if complaint.severity == 'critical' %}bg-red-100 text-red-600
|
|
{% elif complaint.severity == 'high' %}bg-orange-100 text-orange-600
|
|
{% elif complaint.severity == 'medium' %}bg-yellow-100 text-yellow-600
|
|
{% else %}bg-green-100 text-green-600{% endif %}">
|
|
{{ complaint.get_severity_display }}
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-slate text-sm">{% trans "Priority:" %}</span>
|
|
<span class="px-2.5 py-1 rounded-lg text-xs font-bold
|
|
{% if complaint.priority == 'urgent' %}bg-red-100 text-red-600
|
|
{% elif complaint.priority == 'high' %}bg-orange-100 text-orange-600
|
|
{% elif complaint.priority == 'medium' %}bg-yellow-100 text-yellow-600
|
|
{% else %}bg-blue-100 text-blue-600{% endif %}">
|
|
{{ complaint.get_priority_display }}
|
|
</span>
|
|
</div> {% endcomment %}
|
|
{% if complaint.patient %}
|
|
<div class="md:col-span-2 flex items-center gap-2">
|
|
<span class="text-slate text-sm">{% trans "Patient:" %}</span>
|
|
<span class="font-bold text-navy">{{ complaint.patient.get_full_name }}</span>
|
|
{% if complaint.patient.mrn %}
|
|
<span class="text-slate text-sm">(MRN: {{ complaint.patient.mrn }})</span>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="mt-4 pt-4 border-t border-slate-200">
|
|
<span class="text-slate text-sm">{% trans "Description:" %}</span>
|
|
<p class="mt-2 text-slate leading-relaxed">{{ complaint.short_description_en|linebreaksbr }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<form method="post" enctype="multipart/form-data" class="p-6 space-y-6">
|
|
{% csrf_token %}
|
|
|
|
<!-- Explanation Field -->
|
|
<div>
|
|
<label for="explanation" class="block text-sm font-bold text-navy mb-2">
|
|
{% trans "Your Explanation" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<p class="text-slate text-sm mb-3">
|
|
{% trans "Please provide your perspective about the complaint mentioned above. Your explanation will help us understand the situation better." %}
|
|
</p>
|
|
<textarea
|
|
id="explanation"
|
|
name="explanation"
|
|
rows="6"
|
|
required
|
|
class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition resize-none text-sm"
|
|
placeholder="{% trans 'Write your explanation here...' %}"
|
|
></textarea>
|
|
</div>
|
|
|
|
<!-- Attachments -->
|
|
<div>
|
|
<label for="attachments" class="block text-sm font-bold text-navy mb-2">
|
|
{% trans "Attachments (Optional)" %}
|
|
</label>
|
|
<p class="text-slate text-sm mb-3">
|
|
{% trans "You can attach relevant documents, images, or other files to support your explanation." %}
|
|
</p>
|
|
<div class="relative">
|
|
<input
|
|
type="file"
|
|
id="attachments"
|
|
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-light file:text-navy hover:file:bg-slate-100 file:transition cursor-pointer border border-slate-200 rounded-xl"
|
|
>
|
|
</div>
|
|
<p class="text-xs text-slate mt-2">
|
|
{% trans "Accepted file types: PDF, DOC, DOCX, JPG, PNG, etc. Maximum file size: 10MB." %}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Info Alert -->
|
|
<div class="bg-blue-50 border border-blue-200 rounded-xl p-4">
|
|
<div class="flex items-start gap-3">
|
|
<i data-lucide="info" class="w-5 h-5 text-blue flex-shrink-0 mt-0.5"></i>
|
|
<div>
|
|
<p class="font-semibold text-navy text-sm">{% trans "Important Note:" %}</p>
|
|
<p class="text-slate text-sm mt-1">
|
|
{% trans "This link can only be used once. After submitting your explanation, it will expire and cannot be used again." %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<button type="submit" class="w-full px-6 py-4 bg-gradient-to-r from-navy to-blue text-white rounded-xl font-bold text-lg hover:opacity-90 transition flex items-center justify-center gap-2 shadow-lg">
|
|
<i data-lucide="send" class="w-5 h-5"></i>
|
|
{% trans "Submit Explanation" %}
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Footer -->
|
|
<div class="bg-light/30 border-t border-slate-100 p-4 text-center">
|
|
<p class="text-slate text-xs">{% trans "PX360 Complaint Management System" %}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Note -->
|
|
<div class="text-center mt-6">
|
|
<div class="inline-flex items-center gap-2 text-slate text-xs">
|
|
<i data-lucide="shield-check" class="w-4 h-4"></i>
|
|
<span>{% trans "Secure token-based submission" %}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
</body>
|
|
</html>
|