sankalp
71b700388b
Enhances user experience with dark‑mode detection, responsive layout, and streamlined role selection workflow
67 lines
3.0 KiB
HTML
67 lines
3.0 KiB
HTML
<div class="max-w-5xl mx-auto p-4 md:p-8">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h1 class="text-2xl font-bold">{{ access.project.name }}</h1>
|
|
<p class="text-gray-500 text-sm mt-1">External Client Dashboard — {{ tickets|length }} tickets</p>
|
|
</div>
|
|
<form method="post" action="{% url 'external-logout' access.access_token %}" class="inline">
|
|
{% csrf_token %}
|
|
<button class="px-3 py-2 text-sm text-gray-600 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors">
|
|
<i class="fas fa-sign-out-alt mr-1"></i>Logout
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="border-b border-gray-200 bg-gray-50">
|
|
<th class="text-left px-4 py-3 font-semibold text-gray-600">ID</th>
|
|
<th class="text-left px-4 py-3 font-semibold text-gray-600">Name</th>
|
|
<th class="text-left px-4 py-3 font-semibold text-gray-600">Status</th>
|
|
<th class="text-left px-4 py-3 font-semibold text-gray-600">Priority</th>
|
|
<th class="text-left px-4 py-3 font-semibold text-gray-600">Created</th>
|
|
<th class="text-left px-4 py-3 font-semibold text-gray-600">Due</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for t in tickets %}
|
|
<tr class="border-b border-gray-100 hover:bg-gray-50">
|
|
<td class="px-4 py-3 font-mono text-xs text-gray-500">{{ t.uuid }}</td>
|
|
<td class="px-4 py-3 font-medium">{{ t.name }}</td>
|
|
<td class="px-4 py-3">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium"
|
|
style="background-color: {{ t.status.color }}20; color: {{ t.status.color }}">
|
|
{{ t.status.name }}
|
|
</span>
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
{% if t.priority %}
|
|
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium"
|
|
style="background-color: {{ t.priority.color }}20; color: {{ t.priority.color }}">
|
|
<i class="fas fa-flag"></i>{{ t.priority.name }}
|
|
</span>
|
|
{% else %}
|
|
<span class="text-gray-400">—</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="px-4 py-3 text-gray-500 text-xs">{{ t.created_at|date:"M d, Y" }}</td>
|
|
<td class="px-4 py-3 text-gray-500 text-xs">
|
|
{% if t.due_date %}{{ t.due_date|date:"M d, Y" }}{% else %}—{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="6" class="px-4 py-12 text-center text-gray-400">
|
|
<i class="fas fa-ticket-alt text-3xl mb-2"></i>
|
|
<p class="text-base font-medium">No tickets yet</p>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|