|
|
|
@ -26,10 +26,11 @@
|
|
|
|
|
<p class="text-secondosiblue font-poppinsBold">Remaining Balance: $<span>{{order.remaining_balance}}</span></p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{% if order.invoice %}
|
|
|
|
|
<div
|
|
|
|
|
class="w-full bg-gray-50 px-3 py-3 border border-gray-100 shadow-md rounded-md flex flex-col md:flex-row justify-end items-center gap-2 mt-3">
|
|
|
|
|
{% if order.invoice %}
|
|
|
|
|
<a class="w-full md:w-fit">
|
|
|
|
|
<a href="{% url 'addinvoice' order.id %}" class="w-full md:w-fit">
|
|
|
|
|
<button
|
|
|
|
|
class="w-full md: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">
|
|
|
|
|
Download Invoice
|
|
|
|
@ -37,13 +38,16 @@
|
|
|
|
|
</a>
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
<a class="w-full md:w-fit">
|
|
|
|
|
{% if order.invoice %}
|
|
|
|
|
<a href="{% url 'addpayment' order.id %}" class="w-full md:w-fit">
|
|
|
|
|
<button
|
|
|
|
|
class="w-full md: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">
|
|
|
|
|
Download Statement
|
|
|
|
|
</button>
|
|
|
|
|
</a>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{% if order_items %}
|
|
|
|
@ -69,82 +73,85 @@
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="overflow-x-auto border border-gray-300 rounded-t-md mt-10 tableContainer">
|
|
|
|
|
<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">
|
|
|
|
|
Amount
|
|
|
|
|
</th>
|
|
|
|
|
<th scope="col"
|
|
|
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap ">
|
|
|
|
|
Date Due
|
|
|
|
|
</th>
|
|
|
|
|
<th scope="col"
|
|
|
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
|
|
|
|
Date Paid
|
|
|
|
|
</th>
|
|
|
|
|
<th scope="col"
|
|
|
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
|
|
|
|
Comment
|
|
|
|
|
</th>
|
|
|
|
|
<th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
|
|
|
|
|
Payment
|
|
|
|
|
</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
|
|
|
|
|
<!-- TABLE BODY -->
|
|
|
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
|
|
|
{% for payment in payments %}
|
|
|
|
|
<tr>
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
|
|
|
<p class="text-secondosiblue">${{payment.amount}}</p>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
|
|
|
{% if payment.date_due %}
|
|
|
|
|
<p class="text-secondosiblue">{{payment.date_due}}</p>
|
|
|
|
|
{% else %}
|
|
|
|
|
<p class="text-secondosiblue">-</p>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
|
|
|
{% if payment.date_paid %}
|
|
|
|
|
<p class="text-secondosiblue">{{payment.date_paid}}</p>
|
|
|
|
|
{% else %}
|
|
|
|
|
<p class="text-red-500">UNPAID</p>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
|
|
|
<p class="text-secondosiblue">Comment</p>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm">
|
|
|
|
|
<div class="flex flex-col justify-center items-center gap-3">
|
|
|
|
|
{% for type in payment.type.all %}
|
|
|
|
|
<a
|
|
|
|
|
{% if type.name == 'Whish Money' %} href="{% url 'whishpayment' payment.id %}" {% endif %}
|
|
|
|
|
{% if type.name == 'Credit & Debit Card' %} href="{% url 'cardpayment' payment.id %}" {% endif %}
|
|
|
|
|
{% if type.name == 'Cash' %} href="{% url 'cashpayment' payment.id %}" {% endif %}>
|
|
|
|
|
<div
|
|
|
|
|
class="flex items-center gap-2 justify-center cursor-pointer text-secondosiblue hover:text-gray-400 duration-300">
|
|
|
|
|
<img src="{{type.image.url}}" class="w-[30px] rounded-md shadow-sm">
|
|
|
|
|
<p class="underline">{{type.name}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{% if payments %}
|
|
|
|
|
<div class="overflow-x-auto border border-gray-300 rounded-t-md mt-10 tableContainer">
|
|
|
|
|
<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">
|
|
|
|
|
Amount
|
|
|
|
|
</th>
|
|
|
|
|
<th scope="col"
|
|
|
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap ">
|
|
|
|
|
Date Due
|
|
|
|
|
</th>
|
|
|
|
|
<th scope="col"
|
|
|
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
|
|
|
|
Date Paid
|
|
|
|
|
</th>
|
|
|
|
|
<th scope="col"
|
|
|
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
|
|
|
|
|
Comment
|
|
|
|
|
</th>
|
|
|
|
|
<th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
|
|
|
|
|
Payment
|
|
|
|
|
</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
|
|
|
|
|
<!-- TABLE BODY -->
|
|
|
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
|
|
|
{% for payment in payments %}
|
|
|
|
|
<tr>
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
|
|
|
<p class="text-secondosiblue">${{payment.amount}}</p>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
|
|
|
{% if payment.date_due %}
|
|
|
|
|
<p class="text-secondosiblue">{{payment.date_due}}</p>
|
|
|
|
|
{% else %}
|
|
|
|
|
<p class="text-secondosiblue">-</p>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
|
|
|
{% if payment.date_paid %}
|
|
|
|
|
<p class="text-secondosiblue">{{payment.date_paid}}</p>
|
|
|
|
|
{% else %}
|
|
|
|
|
<p class="text-red-500">UNPAID</p>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
|
|
|
<p class="text-secondosiblue">Comment</p>
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm">
|
|
|
|
|
<div class="flex flex-col justify-center items-center gap-3">
|
|
|
|
|
{% for type in payment.type.all %}
|
|
|
|
|
<a
|
|
|
|
|
{% if type.name == 'Whish Money' %} href="{% url 'whishpayment' payment.id %}" {% endif %}
|
|
|
|
|
{% if type.name == 'Credit & Debit Card' %} href="{% url 'cardpayment' payment.id %}" {% endif %}
|
|
|
|
|
{% if type.name == 'Cash' %} href="{% url 'cashpayment' payment.id %}" {% endif %}>
|
|
|
|
|
<div
|
|
|
|
|
class="flex items-center gap-2 justify-center cursor-pointer text-secondosiblue hover:text-gray-400 duration-300">
|
|
|
|
|
<img src="{{type.image.url}}" class="w-[30px] rounded-md shadow-sm">
|
|
|
|
|
<p class="underline">{{type.name}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|