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
4.6 KiB
HTML
97 lines
4.6 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">
|
|
<button
|
|
class="flex justify-center items-center gap-2 px-3 py-1 rounded-md bg-osiblue text-white border border-osiblue cursor-pointer hover:bg-white hover:text-osiblue duration-300 generateInvoice" data-invoice-id="{{ invoice.id }}">
|
|
Generate Invoice
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% endblock %} |