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.
97 lines
5.0 KiB
HTML
97 lines
5.0 KiB
HTML
{% extends "main.html" %}
|
|
{%load static%}
|
|
{% block content %}
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
|
|
|
<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">Invoices</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 Invoice Number"
|
|
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="">
|
|
<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
|
|
Invoice</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">
|
|
Invoice Number
|
|
</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">
|
|
Order
|
|
</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 Created
|
|
</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 invoice in invoices %}
|
|
<tr>
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-slate-800">{{invoice.invoice_number}}</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-slate-800">{{invoice.order.customer}}</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-slate-800">{{invoice.order.id}}</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<p class="text-slate-800">{{invoice.date_created}}</p>
|
|
</td>
|
|
|
|
<td class="px-6 py-4">
|
|
<div class="w-full flex justify-center items-center">
|
|
<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>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% endblock %} |