Invoices lsiting page created.

osinaweb/osinacore/views.py

@@ -1919,4 +1919,14 @@ def customer_index(request, *args, **kwargs):
 
     }
 
-    return render(request, 'customer_dashboard/customer_index.html', context)
+    return render(request, 'customer_dashboard/customer_index.html', context)
+
+
+@login_required
+def customer_invoices(request, *args, **kwargs):
+    
+    context = {
+
+    }
+
+    return render(request, 'customer_dashboard/listing_pages/customer-invoices.html', context)

osinaweb/osinaweb/urls.py

@@ -162,6 +162,7 @@ urlpatterns = [
 
     #CUSTOMER DASHBOARD
     path('customerdashboard/', views.customer_index, name='customerdashboard'),
+    path('customerinvoices/', views.customer_invoices, name='customerinvoices'),
 ]
 
 urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

osinaweb/templates/customer_dashboard/listing_pages/customer-invoices.html

@@ -0,0 +1,92 @@
+{% extends "customer_dashboard/customer_main.html" %}
+{%load static%}
+{% block content %}
+
+<div class="w-full px-5 s:px-9 flex flex-col gap-3">
+    <!-- <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 Business Type"
+                    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">
+            <button
+                class="w-full s:w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500 addBusinessTypeButton"
+                data-modal-url="{% url 'addbusinesstype' %}">Add
+                Business Type</button>
+        </div>
+    </div> -->
+
+    <!-- INVOICES -->
+    <div class="w-full bg-white rounded-md h-fit shadow-md p-5">
+        <div class="overflow-x-auto border border-gray-300 rounded-md">
+            <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">
+                            #
+                        </th>
+                        <th scope="col"
+                            class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                            Due Date
+                        </th>
+                        <th scope="col"
+                            class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                            Title
+                        </th>
+                        <th scope="col"
+                            class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
+                            Description
+                        </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">
+                            Amount
+                        </th>
+                    </tr>
+                </thead>
+
+                <!-- TABLE BODY -->
+                <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-slate-800">1</p>
+                        </td>
+
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                            <p class="text-slate-800">20-2-2024</p>
+                        </td>
+
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                            <p class="text-slate-800">Invoice 1</p>
+                        </td>
+
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                            <p class="text-slate-800">Invoice description section</p>
+                        </td>
+
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300 bg-yellow-500">
+                            <p class="text-white">Pending</p>
+                        </td>
+
+                        <td class="px-6 py-4 text-center text-sm">
+                            <p class="text-slate-800">200</p>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+</div>
+
+{% endblock %}