446 lines
21 KiB
HTML
446 lines
21 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n static %}
|
|
|
|
{% block title %}{% trans "Appreciation" %} - PX360{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.page-header-gradient {
|
|
background: linear-gradient(135deg, #005696 0%, #0069a8 50%, #007bbd 100%);
|
|
color: white;
|
|
padding: 1.5rem 2rem;
|
|
border-radius: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
|
|
}
|
|
|
|
.section-card {
|
|
background: white;
|
|
border-radius: 1rem;
|
|
border: 2px solid #e2e8f0;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.section-card:hover {
|
|
border-color: #005696;
|
|
box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
|
|
}
|
|
|
|
.section-header {
|
|
padding: 1rem 1.5rem;
|
|
border-bottom: 2px solid #e2e8f0;
|
|
background: linear-gradient(to right, #f8fafc, #f1f5f9);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.section-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.toggle-switch {
|
|
position: relative;
|
|
width: 44px;
|
|
height: 24px;
|
|
background: #cbd5e1;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
.toggle-switch.active {
|
|
background: #005696;
|
|
}
|
|
.toggle-switch::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
transition: transform 0.3s;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
|
}
|
|
.toggle-switch.active::after {
|
|
transform: translateX(20px);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="mb-6">
|
|
<a href="{% url 'appreciation:appreciation_list' %}" class="inline-flex items-center gap-2 text-slate hover:text-navy transition text-sm font-semibold">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Back to Appreciations" %}
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Page Header -->
|
|
<div class="page-header-gradient">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<h1 class="text-2xl font-bold flex items-center gap-3">
|
|
<i data-lucide="heart" class="w-7 h-7"></i>
|
|
{% trans "Appreciation Detail" %}
|
|
</h1>
|
|
<p class="text-sm opacity-90 mt-1">{{ appreciation.created_at|date:"Y-m-d H:i" }} — {{ appreciation.hospital.name }}</p>
|
|
</div>
|
|
<span class="px-3 py-1.5 rounded-full text-xs font-bold uppercase
|
|
{% if appreciation.status == 'draft' %}bg-amber-400/20 text-white border border-white/30
|
|
{% elif appreciation.status == 'activated' %}bg-blue-400/20 text-white border border-white/30
|
|
{% elif appreciation.status == 'ai_analyzed' %}bg-purple-400/20 text-white border border-white/30
|
|
{% elif appreciation.status == 'sent' %}bg-green-400/20 text-white border border-white/30
|
|
{% elif appreciation.status == 'acknowledged' %}bg-emerald-400/20 text-white border border-white/30
|
|
{% else %}bg-slate-400/20 text-white border border-white/30{% endif %}">
|
|
{{ appreciation.get_status_display }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Patient / Submitter Info -->
|
|
{% if metadata %}
|
|
<div class="section-card mb-6">
|
|
<div class="section-header">
|
|
<div class="section-icon bg-blue-100">
|
|
<i data-lucide="user" class="w-5 h-5 text-blue-600"></i>
|
|
</div>
|
|
<h3 class="font-bold text-navy">{% trans "Submitted By" %}</h3>
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{% if metadata.submitted_by_name %}
|
|
<div>
|
|
<p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Name" %}</p>
|
|
<p class="text-sm font-semibold text-navy">{{ metadata.submitted_by_name }}</p>
|
|
</div>
|
|
{% endif %}
|
|
{% if metadata.submitted_by_phone %}
|
|
<div>
|
|
<p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Phone" %}</p>
|
|
<p class="text-sm font-semibold text-navy">{{ metadata.submitted_by_phone }}</p>
|
|
</div>
|
|
{% endif %}
|
|
{% if metadata.submitted_by_email %}
|
|
<div>
|
|
<p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Email" %}</p>
|
|
<p class="text-sm font-semibold text-navy">{{ metadata.submitted_by_email }}</p>
|
|
</div>
|
|
{% endif %}
|
|
{% if metadata.staff_name_mentioned %}
|
|
<div>
|
|
<p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Staff Mentioned" %}</p>
|
|
<p class="text-sm font-semibold text-navy">{{ metadata.staff_name_mentioned }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Message -->
|
|
<div class="section-card mb-6">
|
|
<div class="section-header">
|
|
<div class="section-icon bg-emerald-100">
|
|
<i data-lucide="message-square" class="w-5 h-5 text-emerald-600"></i>
|
|
</div>
|
|
<h3 class="font-bold text-navy">{% trans "Appreciation Message" %}</h3>
|
|
</div>
|
|
<div class="p-5">
|
|
<p class="text-slate-700 text-sm leading-relaxed">{{ appreciation.message_en|linebreaks }}</p>
|
|
{% if appreciation.message_ar %}
|
|
<div class="mt-4 pt-4 border-t border-slate-100">
|
|
<p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Arabic" %}</p>
|
|
<p class="text-slate-700 text-sm leading-relaxed" dir="rtl">{{ appreciation.message_ar|linebreaks }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Analysis -->
|
|
{% if appreciation.ai_analysis %}
|
|
<div class="section-card mb-6" style="border-color: #8b5cf6;">
|
|
<div class="section-header" style="background: linear-gradient(to right, #f5f3ff, #ede9fe); border-color: #c4b5fd;">
|
|
<div class="section-icon bg-purple-100">
|
|
<i data-lucide="sparkles" class="w-5 h-5 text-purple-600"></i>
|
|
</div>
|
|
<h3 class="font-bold text-purple-800">{% trans "AI Analysis" %}</h3>
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
|
{% if appreciation.ai_analysis.summary_en %}
|
|
<div>
|
|
<p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Summary (EN)" %}</p>
|
|
<p class="text-sm text-slate-700">{{ appreciation.ai_analysis.summary_en }}</p>
|
|
</div>
|
|
{% endif %}
|
|
{% if appreciation.ai_analysis.summary_ar %}
|
|
<div>
|
|
<p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Summary (AR)" %}</p>
|
|
<p class="text-sm text-slate-700" dir="rtl">{{ appreciation.ai_analysis.summary_ar }}</p>
|
|
</div>
|
|
{% endif %}
|
|
{% if appreciation.ai_analysis.themes %}
|
|
<div>
|
|
<p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Themes" %}</p>
|
|
<div class="flex flex-wrap gap-1.5">
|
|
{% for theme in appreciation.ai_analysis.themes %}
|
|
<span class="px-2 py-0.5 rounded-full text-xs font-bold bg-purple-100 text-purple-700">{{ theme }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if appreciation.ai_analysis.tone %}
|
|
<div>
|
|
<p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Tone" %}</p>
|
|
<span class="px-2.5 py-1 rounded-full text-xs font-bold capitalize bg-blue-100 text-blue-700">{{ appreciation.ai_analysis.tone }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% if appreciation.ai_analysis.suggested_response_en %}
|
|
<div class="mt-4 pt-4 border-t border-purple-100">
|
|
<p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Suggested Response" %}</p>
|
|
<p class="text-sm text-slate-600 bg-purple-50 rounded-lg p-3">{{ appreciation.ai_analysis.suggested_response_en }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Assigned Staff (shown if activated/analyzed/sent) -->
|
|
{% if appreciation.recipient %}
|
|
<div class="section-card mb-6">
|
|
<div class="section-header">
|
|
<div class="section-icon bg-blue-100">
|
|
<i data-lucide="user-check" class="w-5 h-5 text-blue-600"></i>
|
|
</div>
|
|
<h3 class="font-bold text-navy">{% trans "Assigned To" %}</h3>
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-navy/10 flex items-center justify-center">
|
|
<i data-lucide="user" class="w-5 h-5 text-navy"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-bold text-navy">{{ appreciation.get_recipient_name }}</p>
|
|
{% if appreciation.department %}
|
|
<p class="text-xs text-slate">{{ appreciation.department.name }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Activation Form (DRAFT only) -->
|
|
{% if can_activate %}
|
|
<form method="post" action="{% url 'appreciation:appreciation_activate' pk=appreciation.pk %}">
|
|
{% csrf_token %}
|
|
<div class="section-card mb-6" style="border-color: #10b981;">
|
|
<div class="section-header" style="background: linear-gradient(to right, #ecfdf5, #d1fae5); border-color: #a7f3d0;">
|
|
<div class="section-icon bg-emerald-100">
|
|
<i data-lucide="zap" class="w-5 h-5 text-emerald-600"></i>
|
|
</div>
|
|
<h3 class="font-bold text-emerald-800">{% trans "Activate Appreciation" %}</h3>
|
|
</div>
|
|
<div class="p-5">
|
|
<p class="text-slate text-sm mb-5">{% trans "Select the staff member and department, then activate to trigger AI analysis." %}</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-6">
|
|
<div>
|
|
<label class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
|
|
{% trans "Staff Member" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<select name="staff" id="id_staff" data-tomselect class="w-full px-3 py-2.5 border-2 border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy/20 focus:border-navy outline-none">
|
|
<option value="">{% trans "Select staff..." %}</option>
|
|
{% for s in staff_list %}
|
|
<option value="{{ s.id }}" data-department="{{ s.department.id }}">{{ s.first_name }} {{ s.last_name }}{% if s.employee_id %} ({{ s.employee_id }}){% endif %}{% if s.department %} - {{ s.department.name }}{% endif %}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">{% trans "Department" %}</label>
|
|
<select name="department" id="id_department" data-tomselect class="w-full px-3 py-2.5 border-2 border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy/20 focus:border-navy outline-none">
|
|
<option value="">{% trans "Auto from staff" %}</option>
|
|
{% for d in departments %}
|
|
<option value="{{ d.id }}">{{ d.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<p class="text-xs text-slate mt-1">{% trans "Auto-populated from staff selection" %}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">{% trans "Category" %}</label>
|
|
<select name="category" class="w-full px-3 py-2.5 border-2 border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy/20 focus:border-navy outline-none">
|
|
<option value="">{% trans "Select category..." %}</option>
|
|
{% for c in categories %}
|
|
<option value="{{ c.id }}" {% if appreciation.category and appreciation.category.id == c.id %}selected{% endif %}>{{ c.name_en }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-3 pt-4 border-t border-slate-100">
|
|
<button type="submit" class="flex-1 px-6 py-3 bg-emerald-600 text-white rounded-xl font-bold hover:bg-emerald-700 transition flex items-center justify-center gap-2 shadow-lg">
|
|
<i data-lucide="zap" class="w-5 h-5"></i> {% trans "Activate & Analyze" %}
|
|
</button>
|
|
<a href="{% url 'appreciation:appreciation_list' %}" class="px-6 py-3 border-2 border-slate-200 rounded-xl font-bold text-slate hover:bg-slate-50 transition">
|
|
{% trans "Cancel" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{% endif %}
|
|
|
|
<!-- Send Form (ACTIVATED/AI_ANALYZED only) -->
|
|
{% if can_send %}
|
|
<form method="post" action="{% url 'appreciation:appreciation_send' pk=appreciation.pk %}">
|
|
{% csrf_token %}
|
|
<div class="section-card mb-6" style="border-color: #005696;">
|
|
<div class="section-header" style="background: linear-gradient(to right, #eff6ff, #dbeafe); border-color: #93c5fd;">
|
|
<div class="section-icon bg-navy/10">
|
|
<i data-lucide="send" class="w-5 h-5 text-navy"></i>
|
|
</div>
|
|
<h3 class="font-bold text-navy">{% trans "Send Appreciation" %}</h3>
|
|
</div>
|
|
<div class="p-5">
|
|
<p class="text-slate text-sm mb-5">{% trans "Configure recipients and customize the message before sending." %}</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-5">
|
|
<div class="flex items-center justify-between p-4 bg-slate-50 rounded-xl">
|
|
<div>
|
|
<p class="text-sm font-bold text-navy">{% trans "Notify Department Manager" %}</p>
|
|
<p class="text-xs text-slate">{% trans "Send to the department manager" %}</p>
|
|
</div>
|
|
<label class="toggle-switch active" onclick="this.classList.toggle('active')">
|
|
<input type="checkbox" name="send_to_manager" class="hidden" value="on" checked>
|
|
</label>
|
|
</div>
|
|
<div class="flex items-center justify-between p-4 bg-slate-50 rounded-xl">
|
|
<div>
|
|
<p class="text-sm font-bold text-navy">{% trans "Notify Department" %}</p>
|
|
<p class="text-xs text-slate">{% trans "Send to entire department" %}</p>
|
|
</div>
|
|
<label class="toggle-switch active" onclick="this.classList.toggle('active')">
|
|
<input type="checkbox" name="send_to_department" class="hidden" value="on" checked>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-5">
|
|
<label class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">{% trans "Custom Message" %}</label>
|
|
<textarea name="custom_message" rows="4" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy/20 focus:border-navy outline-none resize-none"
|
|
placeholder="{% trans 'Add a personal note to include with the appreciation...' %}">{% if appreciation.ai_analysis.suggested_response_en %}{{ appreciation.ai_analysis.suggested_response_en }}{% endif %}</textarea>
|
|
<p class="text-xs text-slate mt-1">{% trans "Leave blank to send the original appreciation message only" %}</p>
|
|
</div>
|
|
|
|
<div class="mb-5">
|
|
<label class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">{% trans "CC Recipients" %}</label>
|
|
<input type="text" name="cc_emails" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy/20 focus:border-navy outline-none"
|
|
placeholder="{% trans 'email@example.com, another@example.com' %}">
|
|
<p class="text-xs text-slate mt-1">{% trans "Comma-separated email addresses" %}</p>
|
|
</div>
|
|
|
|
<div class="flex gap-3 pt-4 border-t border-slate-100">
|
|
<button type="submit" class="flex-1 px-6 py-3 bg-navy text-white rounded-xl font-bold hover:bg-blue transition flex items-center justify-center gap-2 shadow-lg">
|
|
<i data-lucide="send" class="w-5 h-5"></i> {% trans "Send Appreciation" %}
|
|
</button>
|
|
<a href="{% url 'appreciation:appreciation_list' %}" class="px-6 py-3 border-2 border-slate-200 rounded-xl font-bold text-slate hover:bg-slate-50 transition">
|
|
{% trans "Cancel" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
{% endif %}
|
|
|
|
<!-- Sent info (SENT/ACKNOWLEDGED status) -->
|
|
{% if appreciation.status == 'sent' or appreciation.status == 'acknowledged' %}
|
|
<div class="section-card mb-6" style="border-color: #22c55e;">
|
|
<div class="section-header" style="background: linear-gradient(to right, #f0fdf4, #dcfce7); border-color: #86efac;">
|
|
<div class="section-icon bg-green-100">
|
|
<i data-lucide="check-circle-2" class="w-5 h-5 text-green-600"></i>
|
|
</div>
|
|
<h3 class="font-bold text-green-800">{% trans "Sent" %}</h3>
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Sent At" %}</p>
|
|
<p class="text-sm font-semibold text-navy">{{ appreciation.sent_at|date:"Y-m-d H:i" }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "To Manager" %}</p>
|
|
<p class="text-sm font-semibold {% if appreciation.send_to_manager %}text-green-600{% else %}text-slate{% endif %}">
|
|
{% if appreciation.send_to_manager %}{% trans "Yes" %}{% else %}{% trans "No" %}{% endif %}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "To Department" %}</p>
|
|
<p class="text-sm font-semibold {% if appreciation.send_to_department %}text-green-600{% else %}text-slate{% endif %}">
|
|
{% if appreciation.send_to_department %}{% trans "Yes" %}{% else %}{% trans "No" %}{% endif %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{% if appreciation.custom_message %}
|
|
<div class="mt-4 pt-4 border-t border-green-100">
|
|
<p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "Custom Message" %}</p>
|
|
<p class="text-sm text-slate-700">{{ appreciation.custom_message }}</p>
|
|
</div>
|
|
{% endif %}
|
|
{% if appreciation.cc_list %}
|
|
<div class="mt-4 pt-4 border-t border-green-100">
|
|
<p class="text-xs font-bold text-slate uppercase tracking-wider mb-1">{% trans "CC" %}</p>
|
|
<div class="flex flex-wrap gap-1.5">
|
|
{% for email in appreciation.cc_list %}
|
|
<span class="px-2 py-0.5 rounded-full text-xs font-bold bg-green-100 text-green-700">{{ email }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if appreciation.acknowledged_at %}
|
|
<div class="mt-4 pt-4 border-t border-green-100">
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="check-circle" class="w-4 h-4 text-emerald-600"></i>
|
|
<p class="text-sm font-semibold text-emerald-700">{% trans "Acknowledged on" %} {{ appreciation.acknowledged_at|date:"Y-m-d H:i" }}</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
document.getElementById('id_staff')?.addEventListener('change', function() {
|
|
var selected = this.options[this.selectedIndex];
|
|
var deptId = selected.getAttribute('data-department');
|
|
var deptSelect = document.getElementById('id_department');
|
|
if (deptId) {
|
|
deptSelect.value = deptId;
|
|
if (deptSelect.tomselect) {
|
|
deptSelect.tomselect.setValue(deptId);
|
|
}
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll('.toggle-switch').forEach(function(toggle) {
|
|
toggle.addEventListener('click', function() {
|
|
var checkbox = this.querySelector('input[type="checkbox"]');
|
|
if (checkbox) {
|
|
checkbox.checked = this.classList.contains('active');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|