HH/templates/dashboard/partials/feedback_table.html
2026-02-22 08:35:53 +03:00

99 lines
5.7 KiB
HTML

{% load i18n %}
<div class="overflow-hidden border border-gray-100 rounded-2xl">
<div class="bg-gradient-to-r from-green-50 to-emerald-50 px-6 py-4 border-b border-gray-100 flex justify-between items-center">
<h3 class="font-bold text-lg flex items-center gap-2">
<i data-lucide="message-square" class="w-5 h-5 text-green-500"></i>
{% trans "Feedback" %}
</h3>
<div class="flex gap-2">
<button class="bulk-action-btn px-4 py-2 border-2 border-green-500 text-green-600 rounded-xl font-semibold hover:bg-green-50 transition text-sm" data-tab="feedback" disabled>
{% trans "Bulk Action" %}
</button>
<a href="#" class="px-4 py-2 bg-green-500 text-white rounded-xl font-semibold hover:bg-green-600 transition text-sm">
{% trans "View All" %}
</a>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">
<input type="checkbox" class="bulk-checkbox-all w-4 h-4 rounded border-gray-300">
</th>
<th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "ID" %}</th>
<th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Patient" %}</th>
<th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Rating" %}</th>
<th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Category" %}</th>
<th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Date" %}</th>
<th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Actions" %}</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-50">
{% for feedback in data.object_list %}
<tr class="hover:bg-gray-50 transition">
<td class="px-6 py-4">
<input type="checkbox" class="bulk-checkbox w-4 h-4 rounded border-gray-300" value="{{ feedback.id }}">
</td>
<td class="px-6 py-4 text-sm font-semibold text-gray-600">#{{ feedback.id }}</td>
<td class="px-6 py-4">
<a href="#" class="font-semibold text-gray-800 hover:text-green-500 transition">
{{ feedback.patient_name }}
</a>
</td>
<td class="px-6 py-4">
<span class="flex items-center gap-1 text-sm font-bold {% if feedback.rating >= 4 %}text-green-600{% elif feedback.rating >= 3 %}text-yellow-600{% else %}text-red-600{% endif %}">
{% for i in "12345" %}
{% if forloop.counter <= feedback.rating %}⭐{% else %}☆{% endif %}
{% endfor %}
</span>
</td>
<td class="px-6 py-4">
<span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-green-100 text-green-600">
{{ feedback.category }}
</span>
</td>
<td class="px-6 py-4 text-sm text-gray-600">
{{ feedback.created_at|date:"M d, Y" }}
</td>
<td class="px-6 py-4">
<a href="#" class="inline-flex items-center gap-1 text-green-500 hover:text-green-600 text-sm font-semibold">
{% trans "View" %}
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</td>
</tr>
{% empty %}
<tr>
<td colspan="7" class="px-6 py-12 text-center text-gray-500">
<i data-lucide="message-square" class="w-12 h-12 mx-auto mb-3 text-gray-300"></i>
<p class="font-semibold">{% trans "No feedback found" %}</p>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% if data.has_other_pages %}
<div class="px-6 py-4 border-t border-gray-100 flex justify-between items-center">
<div class="text-sm text-gray-500">
{% trans "Showing" %} <span class="font-bold">{{ data.start_index }}</span>-<span class="font-bold">{{ data.end_index }}</span> {% trans "of" %} <span class="font-bold">{{ data.paginator.count }}</span> {% trans "feedback" %}
</div>
<div class="flex gap-2">
{% if data.has_previous %}
<a href="?page={{ data.previous_page_number }}&tab=feedback" class="px-3 py-1.5 border border-gray-200 rounded-lg text-sm font-semibold hover:bg-gray-50 transition">
{% trans "Previous" %}
</a>
{% endif %}
<span class="px-3 py-1.5 bg-green-500 text-white rounded-lg text-sm font-bold">
{{ data.number }}
</span>
{% if data.has_next %}
<a href="?page={{ data.next_page_number }}&tab=feedback" class="px-3 py-1.5 border border-gray-200 rounded-lg text-sm font-semibold hover:bg-gray-50 transition">
{% trans "Next" %}
</a>
{% endif %}
</div>
</div>
{% endif %}
</div>