|
|
|
@ -26,13 +26,100 @@
|
|
|
|
|
<div class="w-full flex flex-col gap-3 mt-5">
|
|
|
|
|
<div class="w-full bg-gray-200 rounded-md shadow-md h-fit p-3 flex items-center justify-between gap-5">
|
|
|
|
|
<div class="flex items-center gap-5 text-[17px]">
|
|
|
|
|
<p class="text-secondosiblue font-semibold cursor-pointer">Open Tickets</p>
|
|
|
|
|
<p class="text-gray-500 cursor-pointer">Closed Tickets</p>
|
|
|
|
|
<p class="text-secondosiblue font-semibold cursor-pointer" id="openTicketsLink">Open Tickets</p>
|
|
|
|
|
<p class="text-gray-500 cursor-pointer" id="closedTicketsLink">Closed Tickets</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="overflow-x-auto border border-gray-300 rounded-md">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- OPEN TICKETS -->
|
|
|
|
|
<div class="overflow-x-auto border border-gray-300 rounded-md" id="openTickets">
|
|
|
|
|
<table class="min-w-full divide-y">
|
|
|
|
|
<!-- TABLE HEADER -->
|
|
|
|
|
<thead class="bg-gray-50">
|
|
|
|
|
<tr>
|
|
|
|
|
<th scope="col"
|
|
|
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
|
|
|
|
Subject
|
|
|
|
|
</th>
|
|
|
|
|
<th scope="col"
|
|
|
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
|
|
|
|
Ticket ID
|
|
|
|
|
</th>
|
|
|
|
|
<th scope="col"
|
|
|
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
|
|
|
|
Regarding
|
|
|
|
|
</th>
|
|
|
|
|
<th scope="col"
|
|
|
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 border-r border-gray-300 uppercase whitespace-nowrap">
|
|
|
|
|
Last Updated
|
|
|
|
|
</th>
|
|
|
|
|
<th scope="col"
|
|
|
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 border-r border-gray-300 uppercase whitespace-nowrap">
|
|
|
|
|
Updated By
|
|
|
|
|
</th>
|
|
|
|
|
<th scope="col"
|
|
|
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
|
|
|
|
|
Actions
|
|
|
|
|
</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
|
|
|
|
|
<!-- TABLE BODY -->
|
|
|
|
|
|
|
|
|
|
{% for ticket in open_tickets %}
|
|
|
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
|
|
|
<p class="text-secondosiblue">{{ticket.title}}</p>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
|
|
|
<p class="text-secondosiblue">{{ticket.ticket_number}}</p>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
|
|
|
<p class="text-secondosiblue">{{ticket.regarding}}</p>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
|
|
|
<p class="text-secondosiblue">{{ticket.last_update_date_added}}</p>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
|
|
|
<p class="text-secondosiblue">{{ticket.last_update_added_by}}</p>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm">
|
|
|
|
|
<div class="flex justify-center items-center gap-3">
|
|
|
|
|
<a href="{% url 'ticketdetails' ticket.ticket_number %}">
|
|
|
|
|
<div class="text-[15px] text-blue-500 cursor-pointer">
|
|
|
|
|
<i class="fa fa-eye"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
<a href="">
|
|
|
|
|
<div class="text-[15px] text-blue-500 cursor-pointer">
|
|
|
|
|
<i class="fa fa-edit"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
<div class="text-[15px] text-red-500 cursor-pointer">
|
|
|
|
|
<i class="fa fa-trash"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- CLOSED TICKETS -->
|
|
|
|
|
<div class="overflow-x-auto border border-gray-300 rounded-md hidden" id="closedTickets">
|
|
|
|
|
<table class="min-w-full divide-y">
|
|
|
|
|
<!-- TABLE HEADER -->
|
|
|
|
|
<thead class="bg-gray-50">
|
|
|
|
@ -65,28 +152,28 @@
|
|
|
|
|
</thead>
|
|
|
|
|
|
|
|
|
|
<!-- TABLE BODY -->
|
|
|
|
|
{% for ticket in closed_tickets %}
|
|
|
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
|
|
|
<p class="text-secondosiblue">My
|
|
|
|
|
Account Balance</p>
|
|
|
|
|
<p class="text-secondosiblue">{{ticket.title}}</p>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
|
|
|
<p class="text-secondosiblue">22666766</p>
|
|
|
|
|
<p class="text-secondosiblue">{{ticket.ticket_number}}</p>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
|
|
|
<p class="text-secondosiblue">Django</p>
|
|
|
|
|
<p class="text-secondosiblue">{{ticket.regarding}}</p>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
|
|
|
<p class="text-secondosiblue">20-2-2024</p>
|
|
|
|
|
<p class="text-secondosiblue">{{ticket.last_update_date_added}}</p>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
|
|
|
<p class="text-secondosiblue">Ositcom Ltd</p>
|
|
|
|
|
<p class="text-secondosiblue">{{ticket.last_update_added_by}}</p>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm">
|
|
|
|
@ -108,11 +195,19 @@
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src='{% static "js/tickets-filtering.js" %}'></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{% endblock %}
|