You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
7.0 KiB
HTML
124 lines
7.0 KiB
HTML
|
|
{% extends "main.html" %}
|
|
{%load static%}
|
|
{% block content %}
|
|
|
|
<div class="w-full xxlg1:w-[75%]">
|
|
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
|
|
<h1 class="text-secondosiblue text-[30px] font-semibold">Orders</h1>
|
|
<div
|
|
class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
|
|
<div class="w-full s:w-fit flex justify-start items-center gap-5">
|
|
<div class="relative h-fit w-full s:w-fit flex items-center">
|
|
<input type="text" placeholder="Enter Order"
|
|
class="py-2 px-3 border border-gray-300 rounded-md outline-none w-full s:w-[300px] h-[40px] relative">
|
|
<button
|
|
class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
|
|
<i class="fa fa-search"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="w-full s:w-fit">
|
|
<a href="{% url 'addorder' %}">
|
|
<button
|
|
class="w-full s:w-fit text-base px-3 py-2 bg-osiblue text-white outline-none border border-osiblue rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">Add
|
|
Order</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto border border-gray-300 rounded-md mt-4">
|
|
<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">
|
|
Order 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">
|
|
Customer
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
|
Cart Total
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
|
Status
|
|
</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 -->
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
|
|
{% for order in orders %}
|
|
<tr>
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-slate-800">{{order.order_id}}</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-slate-800">{{order.customer.user.first_name}} {{order.customer.user.last_name}}</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-slate-800">${{order.get_cart_total}}</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300 {% if order.status == 'Completed' %} bg-green-700 {% elif order.status == 'Pending' %} bg-yellow-500 {% else %} bg-gray-400 {% endif %}">
|
|
<p class="text-white">{{order.status}}</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4">
|
|
<div class="w-full flex justify-center items-center gap-3">
|
|
|
|
<a href="">
|
|
<div class="text-[15px] text-blue-500 cursor-pointer">
|
|
<i class="fa fa-eye"></i>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
{% if order.status == 'Pending' and not order.invoice %}
|
|
<a href="{% url 'addinvoice' order.id %}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-[18px] text-blue-500">
|
|
<path fill-rule="evenodd" d="M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875ZM12.75 12a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V18a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V12Z" clip-rule="evenodd" />
|
|
<path d="M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z" />
|
|
</svg>
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% if order.invoice %}
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-[18px] text-blue-500">
|
|
<path fill-rule="evenodd" d="M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875Zm5.845 17.03a.75.75 0 0 0 1.06 0l3-3a.75.75 0 1 0-1.06-1.06l-1.72 1.72V12a.75.75 0 0 0-1.5 0v4.19l-1.72-1.72a.75.75 0 0 0-1.06 1.06l3 3Z" clip-rule="evenodd" />
|
|
<path d="M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z" />
|
|
</svg>
|
|
{% endif %}
|
|
|
|
|
|
<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" data-modal-url="">
|
|
<i class="fa fa-trash"></i>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% endblock %} |