107 lines
6.5 KiB
HTML
107 lines
6.5 KiB
HTML
{% load i18n %}
|
|
<div class="overflow-hidden border border-gray-100 rounded-2xl">
|
|
<div class="bg-gradient-to-r from-indigo-50 to-purple-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="clipboard-check" class="w-5 h-5 text-indigo-500"></i>
|
|
{% trans "PX Actions" %}
|
|
</h3>
|
|
<div class="flex gap-2">
|
|
<button class="bulk-action-btn px-4 py-2 border-2 border-indigo-500 text-indigo-500 rounded-xl font-semibold hover:bg-indigo-50 transition text-sm" data-tab="actions" disabled>
|
|
{% trans "Bulk Action" %}
|
|
</button>
|
|
<a href="{% url 'actions:action_list' %}" class="px-4 py-2 bg-indigo-500 text-white rounded-xl font-semibold hover:bg-indigo-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 "Title" %}</th>
|
|
<th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Type" %}</th>
|
|
<th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Priority" %}</th>
|
|
<th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Status" %}</th>
|
|
<th class="px-6 py-4 text-left text-xs font-bold text-gray-500 uppercase tracking-wider">{% trans "Due 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 action 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="{{ action.id }}">
|
|
</td>
|
|
<td class="px-6 py-4 text-sm font-semibold text-gray-600">#{{ action.id }}</td>
|
|
<td class="px-6 py-4">
|
|
<a href="{% url 'actions:action_detail' action.pk %}" class="font-semibold text-gray-800 hover:text-indigo-500 transition">
|
|
{{ action.title }}
|
|
</a>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-indigo-100 text-indigo-600">
|
|
{{ action.get_action_type_display }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-2.5 py-1 rounded-lg text-xs font-bold {% if action.priority == 'high' %}bg-orange-100 text-orange-600{% elif action.priority == 'medium' %}bg-yellow-100 text-yellow-600{% else %}bg-gray-100 text-gray-600{% endif %}">
|
|
{{ action.get_priority_display }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-2.5 py-1 rounded-lg text-xs font-bold {% if action.status == 'open' %}bg-yellow-100 text-yellow-600{% elif action.status == 'in_progress' %}bg-blue-100 text-blue-600{% elif action.status == 'completed' %}bg-green-100 text-green-600{% else %}bg-gray-100 text-gray-600{% endif %}">
|
|
{{ action.get_status_display }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-gray-600">
|
|
{% if action.due_date %}
|
|
{{ action.due_date|date:"M d, Y" }}
|
|
{% else %}
|
|
-
|
|
{% endif %}
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<a href="{% url 'actions:action_detail' action.pk %}" class="inline-flex items-center gap-1 text-indigo-500 hover:text-indigo-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="8" class="px-6 py-12 text-center text-gray-500">
|
|
<i data-lucide="clipboard-check" class="w-12 h-12 mx-auto mb-3 text-gray-300"></i>
|
|
<p class="font-semibold">{% trans "No PX actions 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 "actions" %}
|
|
</div>
|
|
<div class="flex gap-2">
|
|
{% if data.has_previous %}
|
|
<a href="?page={{ data.previous_page_number }}&tab=actions" 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-indigo-500 text-white rounded-lg text-sm font-bold">
|
|
{{ data.number }}
|
|
</span>
|
|
{% if data.has_next %}
|
|
<a href="?page={{ data.next_page_number }}&tab=actions" 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> |