New changes.

osinaweb/billing/add/urls.py

@@ -7,6 +7,9 @@ urlpatterns = [
     path('service', views.add_service, name='addservice'),
     path('order/<int:customer_id>/', views.add_order, name='addorder'),
 
-    path('invoice/<int:order_id>/', views.add_invoice_pdf, name='addinvoice'),
+
     path('service/<int:service_id>/<int:order_id>/', views.add_service_in_order, name='addserviceinorder'),
+    
+    path('add_payment_comment', views.add_payment_comment_modal, name='add_payment_comment_modal'),
+    path('add_payment', views.add_payment_modal, name='add_payment_modal'),
 ]

osinaweb/billing/add/views.py

@@ -7,7 +7,7 @@ from django.conf import settings
 import os
 from osinacore.decorators import *
 from django.core.files.base import ContentFile
-from weasyprint import HTML, CSS
+from django.db.models import Q
 
 
 
@@ -78,6 +78,7 @@ def add_service (request, *args, **kwargs):
 def add_order(request, customer_id):
     customer= get_object_or_404(CustomerProfile, id=customer_id)
     businesses = Business.objects.filter(customer=customer)
+    services = Item.objects.filter(Q(type='Service') & (Q(customer=customer) | Q(customer__isnull=True)))
 
     if request.method == 'POST':
         status = request.POST.get('status')
@@ -98,6 +99,7 @@ def add_order(request, customer_id):
     context = {
         'customer' : customer,
         'businesses' : businesses,
+        'services' : services,
     }
 
     return render(request, 'add_templates/add-order.html', context) 
@@ -119,63 +121,24 @@ def add_service_in_order(request, service_id, order_id):
 
 
 
+@staff_login_required
+def add_payment_comment_modal(request):
 
-def add_invoice_pdf(request, order_id):
-    order = get_object_or_404(Order, id=order_id)
-
-    current_year = str(timezone.now().year)[-2:]
-    last_invoice = Invoice.objects.all().last()
-    if last_invoice:
-        last_invoice_number = int(last_invoice.invoice_number.split('-')[1].split('+')[0])
-        new_invoice_number = f"$0{current_year}-{last_invoice_number + 1}"
-    else:
-        new_invoice_number = f"$0{current_year}-1425"
+    context = {
 
+    }
 
+    return render(request, 'add_templates/add-payment-comment-modal.html', context) 
 
-    invoice = Invoice.objects.create(
-        invoice_number = new_invoice_number,
-        order=order,
-        date_created=datetime.now(),
-    )
 
-    template = get_template('details_templates/invoice-details.html')
-    context = {'order': order} 
-    html_string = template.render(context)
+@staff_login_required
+def add_payment_modal(request):
 
-    # Define the CSS string with Poppins font
-    css_string = '''
-        @font-face {
-            font-family: 'Poppins';
-            src: url('path_to_poppins_font_file.ttf') format('truetype');  /* Update the path to the font file */
-        }
+    context = {
 
-        body {
-            font-family: 'Poppins', sans-serif;  /* Use Poppins font for the entire document */
     }
 
-        /* Your existing CSS styles */
-        /* Add or modify styles as needed */
-    '''
-
-    # Generate PDF
-    pdf = HTML(string=html_string).write_pdf(
-        stylesheets=[
-            CSS(string=css_string),
-            CSS(string='@page { margin: 30px; }')
-        ],
-        presentational_hints=True
-    )
-
-    filename = f'invoice_{invoice.invoice_number}.pdf'
-    pdf_content = ContentFile(pdf)
-    invoice.pdf.save(filename, pdf_content, save=True)
-
-
-    # Return PDF
-    response = HttpResponse(pdf, content_type='application/pdf')
-    response['Content-Disposition'] = 'attachment; filename="my_pdf.pdf"'
-    return response
+    return render(request, 'add_templates/add-payment-modal.html', context) 
 
 
 

osinaweb/billing/edit/urls.py

@@ -0,0 +1,7 @@
+from django.urls import path
+from billing.edit import views
+
+
+urlpatterns = [
+    path('edit_payment_modal', views.edit_payment_modal, name='edit_payment_modal'),
+]

osinaweb/billing/edit/views.py

@@ -0,0 +1,13 @@
+from django.shortcuts import render, get_object_or_404
+from osinacore.models import *
+from billing.models import *
+from osinacore.decorators import *
+
+@staff_login_required
+def edit_payment_modal(request):
+
+    context = {
+
+    }
+
+    return render(request, 'edit_templates/edit-payment-modal.html', context) 

osinaweb/billing/models.py

@@ -118,6 +118,7 @@ class OrderPayment(models.Model):
     def __str__(self):
         return f"Payment for {self.order}"
         
+
 class Receipt(models.Model):
     receipt_number = models.CharField(max_length=100)
     payment = models.ManyToManyField(OrderPayment)

osinaweb/billing/templates/add_templates/add-order.html

@@ -11,7 +11,7 @@
 <div class="w-full px-5 s:px-9 mb-5">
     <div class="w-full h-full shadow-md rounded-md py-5 px-3 bg-white">
         <h1 class="text-3xl text-secondosiblue text-center font-semibold">
-            Add Order for {{customer.user.first_name}} {{customer.user.last_name}}
+            Create Order for {{customer.user.first_name}} {{customer.user.last_name}}
         </h1>
 
 
@@ -20,7 +20,7 @@
             <div class="w-full flex flex-col gap-5">
                 <div class="w-full">
                     <label class="text-gray-500">Business:</label>
-                    <select name="business" id="businessSelectTag"
+                    <select name="business"
                         class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-1">
                         <option selected disabled>Businesses</option>
                         {% for business in businesses %}
@@ -29,22 +29,41 @@
                     </select>
                 </div>
 
-                <div class="w-full">
-                    <label class="text-gray-500">Status:</label>
-                    <select name="status" id=""
-                        class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-1"
-                        required>
-                        <option value="Completed">Completed</option>
-                        <option value="Pending">Pending</option>
-                        <option value="Failed">Failed</option>
-                        <option value="Cancelled">Cancelled</option>
-                        <option value="None">None</option>
+
+                <select name="service" id="servicesSelectTag"
+                    class="w-full h-[100px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-1"
+                    multiple required>
                 </select>
+
+
+                <div class="w-full">
+                    <p class="text-secondosiblue text-xl">Pick Services</p>
+                    <div class="w-full grid grid-cols-1 md:grid-cols-2 l:grid-cols-3 gap-5 mt-3">
+
+                        {% for service in services %}
+                        <div class="w-full shadow-md border border-gray-200 flex flex-col justify-between rounded-t-md">
+                            <div
+                                class="w-full h-full p-9 flex flex-col justify-center items-center gap-5 rounded-t-md bg-white">
+                                <p class="text-secondosiblue uppercase font-poppinsBold text-xl text-center">
+                                    {{service.title}}
+                                </p>
+                            </div>
+                            <div class="w-full flex flex-col justify-center items-center text-center mb-2">
+                                <p class="text-secondosiblue font-poppinsLight text-[17px] font-semibold">
+                                    ${{service.amount}}</p>
+                            </div>
+                            <div class="w-full px-3 py-2 text-white flex justify-center items-center gap-2 bg-osiblue rounded-b-md cursor-pointer addServiceButton"
+                                data-service-id="{{service.id}}" data-service-title="{{service.title}}">
+                                <p>Add</p>
+                            </div>
+                        </div>
+                        {% endfor %}
+                    </div>
                 </div>
 
                 <div class="w-full flex justify-center items-center mt-3">
                     <button type="submit"
-                        class="w-fit py-1 px-5 bg-osiblue rounded-md outline-none text-white border border-osiblue text-xl cursor-pointer hover:bg-white hover:text-osiblue duration-300">Save</button>
+                        class="w-fit py-1 px-5 bg-osiblue rounded-md outline-none text-white border border-osiblue text-xl cursor-pointer hover:bg-white hover:text-osiblue duration-300">Create</button>
                 </div>
             </div>
         </form>
@@ -52,6 +71,9 @@
 </div>
 
 
+<!---------------------- JS SCRIPTS -------------------->
+
+<script type="text/javascript" src='{% static "js/billing/add-order.js" %}'></script>
 
 
 {% endblock %}

osinaweb/billing/templates/add_templates/add-payment-comment-modal.html

@@ -0,0 +1,34 @@
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Osina</title>
+
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+</head>
+
+<body class="font-poppinsLight">
+    <form id="hiddenContent" method="POST" action="">
+        {% csrf_token %}
+        <h1 class="text-secondosiblue text-2xl font-semibold text-center">Add Comment</h1>
+
+        <div class="w-full flex justify-center items-center">
+            <textarea name="comment" type="text" placeholder="Write Your Comment..."
+                class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4 resize-none"
+                rows="5" required></textarea>
+        </div>
+
+        <div class="w-full flex justify-center items-center mt-4">
+            <button type="submit"
+                class="w-fit bg-osiblue border border-osiblue rounded-md text-white text-xl px-5 py-1 hover:bg-white hover:text-osiblue">Save</button>
+        </div>
+    </form>
+</body>
+
+</html>

osinaweb/billing/templates/add_templates/add-payment-modal.html

@@ -0,0 +1,62 @@
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Osina</title>
+
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+</head>
+
+<body class="font-poppinsLight">
+    <form id="hiddenContent" method="POST" action="">
+        {% csrf_token %}
+        <h1 class="text-secondosiblue text-2xl font-semibold text-center">Add Payment</h1>
+
+        <div class="w-full mt-4">
+            <label class="text-gray-500">Amount:</label>
+            <input name="title" type="decimal"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1" placeholder="Amount" required>
+        </div>
+
+        <div class="w-full mt-4">
+            <label class="text-gray-500">Date Paid:</label>
+            <input name="title" type="date"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1">
+        </div>
+
+        <div class="w-full mt-4">
+            <label class="text-gray-500">Date Due:</label>
+            <input name="title" type="date"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1">
+        </div>
+
+        <div class="w-full mt-4">
+            <label class="text-gray-500">Payment Method:</label>
+            <select name="" id="" class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1">
+                <option value="" selected disabled>Payment Method</option>
+            </select>
+        </div>
+
+
+        <div class="w-full mt-4">
+            <label class="text-gray-500">Comment:</label>
+            <textarea name="comment" type="text" placeholder="Write Your Comment..."
+            class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none resize-none"
+            rows="4"></textarea>
+        </div>
+
+
+        <div class="w-full flex justify-center items-center mt-4">
+            <button type="submit"
+                class="w-fit bg-osiblue border border-osiblue rounded-md text-white text-xl px-5 py-1 hover:bg-white hover:text-osiblue">Save</button>
+        </div>
+    </form>
+</body>
+
+</html>

osinaweb/billing/templates/details_templates/order-details.html

@@ -7,13 +7,34 @@
 
 <div class="w-full xxlg1:w-[75%]">
     <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
-        <div class="w-full bg-gray-50 px-3 py-3 border border-gray-100 shadow-md rounded-md flex flex-col s:flex-row justify-between items-start s:items-center gap-3">
-            <div>
-                <h1 class="text-secondosiblue text-xl">Order {{order.order_id}}</h1>
-                <p class="text-gray-500">{{order.customer.user.first_name}} {{order.customer.user.last_name}}</p>
+        <div
+            class="w-full bg-gray-50 px-3 py-3 border border-gray-100 shadow-md rounded-md flex flex-col xll:flex-row justify-center xll:justify-between items-center gap-3">
+            <div class="text-center xll:text-left">
+                <h1 class="text-secondosiblue text-xl">Order {{order.order_id}} - {{order.customer.user.first_name}}
+                    {{order.customer.user.last_name}}</h1>
+                <p class="text-gray-500"></p>
+                <p>
+                    <span
+                        class="uppercase text-green-700 font-semibold text-sm {% if order.status == 'Completed' %} text-green-700 {% elif order.status == 'Pending' %} text-yellow-500 {% elif order.status == 'Failed' %} text-red-500 {% endif %}">{{order.status}}</span>
+                    <span class="text-sm font-light text-gray-500"> - 12-02-2024</span>
+                </p>
             </div>
 
-            <p class="uppercase text-green-700 font-semibold  {% if order.status == 'Completed' %} text-green-700 {% elif order.status == 'Pending' %} text-yellow-500 {% elif order.status == 'Failed' %} text-red-500 {% endif %}">{{order.status}}</p>
+
+            <div class="w-full xll:w-fit flex flex-col s:flex-row justify-center xll:justify-end items-center gap-2">
+                <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 Payment
+                </button>
+                <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">
+                    Generate Invoice
+                </button>
+                <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">
+                    Update Status
+                </button>
+            </div>
         </div>
 
         {% if order_items %}
@@ -23,22 +44,27 @@
 
                 {% for item in order_items %}
                 <div class="w-full shadow-md border border-gray-200 flex flex-col justify-between rounded-t-md">
-                    <div class="w-full h-full p-9 flex flex-col justify-center items-center gap-5 rounded-t-md bg-white">
+                    <div
+                        class="w-full h-full p-9 flex flex-col justify-center items-center gap-5 rounded-t-md bg-white">
                         <p class="text-secondosiblue uppercase font-poppinsBold text-xl text-center">{{item.item.title}}
                         </p>
                     </div>
                     <div class="w-full flex flex-col justify-center items-center text-center mb-2">
-                        <p class="text-secondosiblue font-poppinsLight text-[17px] font-semibold">${{item.item.amount}}</p>
+                        <p class="text-secondosiblue font-poppinsLight text-[17px] font-semibold">${{item.item.amount}}
+                        </p>
                     </div>
-                   <a href="{% url 'deleteorderitem' item.id %}"><div
+                    <a href="{% url 'deleteorderitem' item.id %}">
+                        <div
                             class="w-full px-3 py-2 text-white flex justify-center items-center gap-2 bg-red-500 rounded-b-md cursor-pointer">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke-width="1.5"
-                        stroke="currentColor" class="w-4 h-4 text-white">>
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke-width="1.5" stroke="currentColor" class="w-4 h-4 text-white">>
+                                <path stroke-linecap="round" stroke-linejoin="round"
+                                    d="M15 12H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                             </svg>
 
                             <p>Remove</p>
-                    </div></a>
+                        </div>
+                    </a>
                 </div>
                 {% endfor %}
             </div>
@@ -53,29 +79,152 @@
 
                 {% for service in services %}
                 <div class="w-full shadow-md border border-gray-200 flex flex-col justify-between rounded-t-md">
-                    <div class="w-full h-full p-9 flex flex-col justify-center items-center gap-5 rounded-t-md bg-white">
+                    <div
+                        class="w-full h-full p-9 flex flex-col justify-center items-center gap-5 rounded-t-md bg-white">
                         <p class="text-secondosiblue uppercase font-poppinsBold text-xl text-center">{{service.title}}
                         </p>
                     </div>
                     <div class="w-full flex flex-col justify-center items-center text-center mb-2">
-                        <p class="text-secondosiblue font-poppinsLight text-[17px] font-semibold">${{service.amount}}</p>
+                        <p class="text-secondosiblue font-poppinsLight text-[17px] font-semibold">${{service.amount}}
+                        </p>
                     </div>
-                   <a href="{% url 'addserviceinorder' service.id order.id %}"><div
+                    <a href="{% url 'addserviceinorder' service.id order.id %}">
+                        <div
                             class="w-full px-3 py-2 text-white flex justify-center items-center gap-2 bg-osiblue rounded-b-md cursor-pointer">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                 stroke="currentColor" class="w-4 h-4 text-white">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                             </svg>
                             <p>Add</p>
-                    </div></a>
+                        </div>
+                    </a>
                 </div>
                 {% endfor %}
             </div>
         </div>
         {% endif %}
 
+
+
+        <div class="mt-10 relative">
+            <div
+                class=" bg-gray-200 rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
+                <div class="px-3">
+                    <p class="text-secondosiblue uppercase font-bold">Payment</p>
+                </div>
+
+                <button
+                    class="h-full rounded-tr-md px-4 bg-secondosiblue text-gray-200 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center addPaymentButton"
+                    data-modal-url="{% url 'add_payment_modal' %}">
+                    <i class="fa fa-plus"></i>
+                </button>
+            </div>
+
+            <div class="overflow-x-auto border border-gray-300 rounded-b-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">
+                                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 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 ">
+                                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">
+                                Payment Method
+                            </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">
+                                Actions
+                            </th>
+                        </tr>
+                    </thead>
+
+                    <!-- TABLE BODY -->
+                    <tbody class="bg-white divide-y divide-gray-200">
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                            <p class="text-secondosiblue">$20.0</p>
+                        </td>
+
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                            <p class="text-secondosiblue">02-12-2024</p>
+                        </td>
+
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                            <p class="text-secondosiblue">02-12-2024</p>
+                        </td>
+
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                            <p class="text-secondosiblue">Cash</p>
+                        </td>
+
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                            <div class="w-full flex justify-center items-center">
+                                <div class="w-[30px] h-[30px] bg-gray-100 rounded-full flex justify-center items-center p-1 text-secondosiblue cursor-pointer hover:bg-secondosiblue hover:text-gray-100 duration-300 addPaymentCommentButton"
+                                    title="Add Comment" data-modal-url="{% url 'add_payment_comment_modal' %}">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                        stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M12 4.5v15m7.5-7.5h-15" />
+                                    </svg>
+                                </div>
+                            </div>
+                            <!-- <p class="text-secondosiblue">Comment</p> -->
+                        </td>
+
+                        <td class="px-6 py-4 text-center text-sm">
+                            <div class="flex justify-center items-center gap-3">
+                                <div data-modal-url="{% url 'edit_payment_modal' %}" class="editPaymentButton">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                        stroke-width="1.5" stroke="currentColor"
+                                        class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform cursor-pointer">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+                                    </svg>
+                                </div>
+
+
+                                <div data-modal-url="{% url 'deletepaymentmodal' %}" class="deletePaymentButton">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                        stroke-width="1.5" stroke="currentColor"
+                                        class="w-[18px] text-red-500 hover:scale-110 duration-500 transition-transform cursor-pointer">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+                                    </svg>
+                                </div>
+                            </div>
+                        </td>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden inset-0" id="popUpModal">
+    <div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
+        <button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
+            id="closeModalButton">
+            <i class="fa fa-close"></i>
+        </button>
+        <iframe id="popupModalFrame" frameborder="0"></iframe>
     </div>
 </div>
+<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
 
 
 {% endblock %}

osinaweb/billing/templates/edit_templates/edit-payment-modal.html

@@ -0,0 +1,62 @@
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Osina</title>
+
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+</head>
+
+<body class="font-poppinsLight">
+    <form id="hiddenContent" method="POST" action="">
+        {% csrf_token %}
+        <h1 class="text-secondosiblue text-2xl font-semibold text-center">Edit Payment</h1>
+
+        <div class="w-full mt-4">
+            <label class="text-gray-500">Amount:</label>
+            <input name="title" type="decimal"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1" placeholder="Amount" required>
+        </div>
+
+        <div class="w-full mt-4">
+            <label class="text-gray-500">Date Paid:</label>
+            <input name="title" type="date"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1">
+        </div>
+
+        <div class="w-full mt-4">
+            <label class="text-gray-500">Date Due:</label>
+            <input name="title" type="date"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1">
+        </div>
+
+        <div class="w-full mt-4">
+            <label class="text-gray-500">Payment Method:</label>
+            <select name="" id="" class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1">
+                <option value="" selected disabled>Payment Method</option>
+            </select>
+        </div>
+
+
+        <div class="w-full mt-4">
+            <label class="text-gray-500">Comment:</label>
+            <textarea name="comment" type="text" placeholder="Write Your Comment..."
+            class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none resize-none"
+            rows="4"></textarea>
+        </div>
+
+
+        <div class="w-full flex justify-center items-center mt-4">
+            <button type="submit"
+                class="w-fit bg-osiblue border border-osiblue rounded-md text-white text-xl px-5 py-1 hover:bg-white hover:text-osiblue">Save</button>
+        </div>
+    </form>
+</body>
+
+</html>

osinaweb/billing/urls.py

@@ -6,6 +6,8 @@ from billing import views
 urlpatterns = [
     path('add/', include('billing.add.urls')),
     path('delete/', include('billing.delete.urls')),
+    path('delete/', include('billing.edit.urls')),
+
 
     # LISTING
     path('items/', views.items, name='items'),

osinaweb/osinacore/add/urls.py

@@ -31,5 +31,5 @@ urlpatterns = [
     path('ticket/<int:customer_id>/', views.add_ticket, name='addticket'),
     path('ticketupdate/<int:ticket_id>/', views.add_ticket_update, name='addticketupdate'),
 
-
+    path('add_payment_method_modal', views.add_payment_method_modal, name='add_payment_method_modal'),
 ]

osinaweb/osinacore/add/views.py

@@ -717,5 +717,15 @@ def add_ticket_update(request, ticket_id):
 
 
 
+@staff_login_required
+def add_payment_method_modal(request, *args, **kwargs):
+    
+    context = {
+        
+    }
+     
+    return render(request, 'add_templates/add-payment-method-modal.html', context)
+
+
 
 

osinaweb/osinacore/delete/urls.py

@@ -14,6 +14,8 @@ urlpatterns = [
     path('ticket/<int:ticket_id>', views.delete_ticket_modal, name='deleteticketmodal'),
     path('point/<int:point_id>/<str:task_id>/', views.delete_point_modal, name='deletepointmodal'),
     path('taskpoint/<int:point_id>/<str:task_id>/', views.delete_task_point_modal, name='deletetaskpointmodal'),
-    path('note/<int:note_id>', views.delete_note_modal, name='deletenotemodal')
+    path('note/<int:note_id>', views.delete_note_modal, name='deletenotemodal'),
+    path('payment/', views.delete_payment_modal, name='deletepaymentmodal'),
+    path('paymentmethod/', views.delete_payment_method_modal, name='deletepaymentmethodmodal')
 
 ]

osinaweb/osinacore/delete/views.py

@@ -153,3 +153,23 @@ def delete_note_modal(request, note_id):
     
     return render(request, "delete_templates/delete-note-modal.html", context)
 
+
+@staff_login_required
+def delete_payment_modal(request):
+
+    context = {
+    
+    }
+    
+    return render(request, "delete_templates/delete-payment-modal.html", context)
+
+
+@staff_login_required
+def delete_payment_method_modal(request):
+
+    context = {
+    
+    }
+    
+    return render(request, "delete_templates/delete-payment-method-modal.html", context)
+

osinaweb/osinacore/edit/urls.py

@@ -17,6 +17,7 @@ urlpatterns = [
     path('businesstype/<int:businesstype_id>/', views.edit_business_type, name='editbusinesstype'),
     path('reference/<int:reference_id>/', views.edit_reference, name='editreference'),
     path('tag/<int:tag_id>/', views.edit_tag, name='edittag'),
+    path('editpaymentmethod/', views.edit_payment_method, name='editpaymentmethod'),
 
 
     #Mark Points

osinaweb/osinacore/edit/views.py

@@ -378,6 +378,13 @@ def edit_tag(request, tag_id):
 
 
 
+@staff_login_required
+def edit_payment_method(request, *args, **kwargs):
+    
+    context = {
+
+    }
+    return render(request, 'edit_templates/edit-payment-method.html', context)
     
 
 

osinaweb/osinacore/templates/add-edit-main.html

@@ -272,6 +272,13 @@
                                 </div>
                             </a>
 
+                            <a href="{% url 'payment_methods' %}">
+                                <div
+                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
+                                    <p class="text-white">Payment Methods/p>
+                                </div>
+                            </a>
+
                             <a>
                                 <div
                                     class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
@@ -557,6 +564,13 @@
                                 </div>
                             </a>
 
+                            <a href="{% url 'payment_methods' %}">
+                                <div
+                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
+                                    <p class="text-white">Payment Methods/p>
+                                </div>
+                            </a>
+
                             <a>
                                 <div
                                     class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">

osinaweb/osinacore/templates/add_templates/add-payment-method-modal.html

@@ -0,0 +1,60 @@
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Osina</title>
+
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+</head>
+
+<body class="font-poppinsLight">
+    <form id="hiddenContent" method="POST" action="{% url 'addtagmodal' %}">
+        {% csrf_token %}
+        <h1 class="text-secondosiblue text-2xl font-semibold text-center">Add Payment Method</h1>
+
+        <div class="w-full mt-4">
+            <label class="text-gray-500">Payment Method:</label>
+            <input name="title" type="text"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1">
+        </div>
+
+        <div class="w-full mt-4">
+            <label class="text-gray-500">Description:</label>
+            <textarea name="" type="text" placeholder="Description"
+                class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1 resize-none"
+                rows="4" required></textarea>
+        </div>
+
+        <div class="w-full mt-4">
+            <label class="text-gray-500">Payment Logo:</label>
+            <div class="inbox-box border border-gray-300 w-full rounded-md px-3 mt-1">
+                <div class="flex items-center justify-between">
+                    <input name="logo" required type="file" class="file-input" accept="image/*" hidden />
+                    <span class="file-name text-gray-500 text-base focus:outline-none outline-none">Upload
+                        Logo</span>
+                    <label
+                        class="file-label bg-transparent text-gray-500 border border-white h-14 cursor-pointer flex items-center">
+                        <i class="fa fa-upload" style="font-size: 25px;"></i>
+                    </label>
+                </div>
+            </div>
+        </div>
+
+        <div class="w-full flex justify-center items-center mt-4">
+            <button type="submit"
+                class="w-fit bg-osiblue border border-osiblue rounded-md text-white text-xl px-5 py-1 hover:bg-white hover:text-osiblue duration-300">Save</button>
+        </div>
+    </form>
+
+    <!-------------- JS SCRIPTS --------------->
+    <script type="text/javascript" src='{% static "js/upload-input-tag.js" %}'></script>
+
+</body>
+
+</html>

osinaweb/osinacore/templates/delete_templates/delete-payment-method-modal.html

@@ -0,0 +1,30 @@
+{%load static%}
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+</head>
+
+<body class="font-poppinsLight">
+    <form id="hiddenContent" method="post" action="" target="_parent">
+        {% csrf_token %}
+
+        <div class="h-[140px] flex flex-col justify-center items-center">
+            <h1 class="text-secondosiblue text-xl font-semibold text-center">Are you sure you want to delete this Payment Method?</h1>
+
+            <div class="w-full flex justify-center items-center mt-5 gap-5">
+                <button 
+                    class="w-fit bg-red-500 border border-red-500 rounded-md text-white text-base px-5 py-1 hover:bg-white hover:text-red-500 duration-300">Delete</button>
+            </div>
+        </div>
+    </form>
+</body>
+
+</html>

osinaweb/osinacore/templates/delete_templates/delete-payment-modal.html

@@ -0,0 +1,30 @@
+{%load static%}
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+</head>
+
+<body class="font-poppinsLight">
+    <form id="hiddenContent" method="post" action="" target="_parent">
+        {% csrf_token %}
+
+        <div class="h-[140px] flex flex-col justify-center items-center">
+            <h1 class="text-secondosiblue text-xl font-semibold text-center">Are you sure you want to delete this Payment?</h1>
+
+            <div class="w-full flex justify-center items-center mt-5 gap-5">
+                <button 
+                    class="w-fit bg-red-500 border border-red-500 rounded-md text-white text-base px-5 py-1 hover:bg-white hover:text-red-500 duration-300">Delete</button>
+            </div>
+        </div>
+    </form>
+</body>
+
+</html>

osinaweb/osinacore/templates/details_templates/customer-details.html

@@ -183,6 +183,116 @@
             </table>
         </div>
     </div>
+
+    <!-- PAYMENTS -->
+    <div class="mt-10 relative">
+        <div class=" bg-gray-200 rounded-t-md flex justify-between items-center text-white text-xl font-bold h-[50px]">
+            <div class="px-3">
+                <p class="text-secondosiblue uppercase font-bold">Payment</p>
+            </div>
+
+            <button
+                class="h-full rounded-tr-md px-4 bg-secondosiblue text-gray-200 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center addPaymentButton"
+                data-modal-url="{% url 'add_payment_modal' %}">
+                <i class="fa fa-plus"></i>
+            </button>
+        </div>
+
+        <div class="overflow-x-auto border border-gray-300 rounded-b-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">
+                            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">
+                            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 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 ">
+                            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">
+                            Payment Method
+                        </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">
+                            Actions
+                        </th>
+                    </tr>
+                </thead>
+
+                <!-- TABLE BODY -->
+                <tbody class="bg-white divide-y divide-gray-200">
+                    <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                        <p class="text-secondosiblue">order 1</p>
+                    </td>
+
+                    <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                        <p class="text-secondosiblue">$20.0</p>
+                    </td>
+
+                    <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                        <p class="text-secondosiblue">02-12-2024</p>
+                    </td>
+
+                    <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                        <p class="text-secondosiblue">02-12-2024</p>
+                    </td>
+
+                    <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                        <p class="text-secondosiblue">Cash</p>
+                    </td>
+
+                    <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                        <div class="w-full flex justify-center items-center">
+                            <div class="w-[30px] h-[30px] bg-gray-100 rounded-full flex justify-center items-center p-1 text-secondosiblue cursor-pointer hover:bg-secondosiblue hover:text-gray-100 duration-300 addPaymentCommentButton"
+                                title="Add Comment" data-modal-url="{% url 'add_payment_comment_modal' %}">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+                                </svg>
+                            </div>
+                        </div>
+                        <!-- <p class="text-secondosiblue">Comment</p> -->
+                    </td>
+
+                    <td class="px-6 py-4 text-center text-sm">
+                        <div class="flex justify-center items-center gap-3">
+                            <div data-modal-url="{% url 'edit_payment_modal' %}" class="editPaymentButton">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor"
+                                    class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform cursor-pointer">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+                                </svg>
+                            </div>
+
+                            <div data-modal-url="{% url 'deletepaymentmodal' %}" class="deletePaymentButton">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor"
+                                    class="w-[18px] text-red-500 hover:scale-110 duration-500 transition-transform cursor-pointer">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+                                </svg>
+                            </div>
+                        </div>
+                    </td>
+                </tbody>
+            </table>
+        </div>
+    </div>
 </div>
 
 

osinaweb/osinacore/templates/edit_templates/edit-payment-method.html

@@ -0,0 +1,65 @@
+{% extends "add-edit-main.html" %}
+{%load static%}
+{% block content %}
+
+<div class="w-full px-5 s:px-9 mb-5">
+    <div class="w-full h-full shadow-md rounded-md py-5 px-3 bg-white">
+        <h1 class="text-3xl text-secondosiblue text-center font-semibold">
+            Edit Payment Method
+        </h1>
+
+        <form id="hiddenContent" method="POST" action="">
+            {% csrf_token %}
+
+            <div class="w-full flex flex-col gap-5 justify-center items-center">
+                <div class="w-full">
+                    <label class="text-gray-500">Payment Method:</label>
+                    <input name="title" type="text" value="shdhd"
+                        class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1">
+                </div>
+
+                <div class="w-full">
+                    <label class="text-gray-500">Description:</label>
+                    <textarea name="" type="text" placeholder="Description"
+                        class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1 resize-none"
+                        rows="4" required>dfsdfds dd</textarea>
+                </div>
+
+                <div class="w-full">
+                    <label class="text-gray-500">Payment Logo:</label>
+                    <div class="inbox-box border border-gray-300 w-full rounded-md px-3 mt-1">
+                        <div class="flex items-center justify-between">
+                            <input name="logo" required type="file" class="file-input" accept="image/*" hidden />
+                            <span class="file-name text-gray-500 text-base focus:outline-none outline-none">Upload
+                                Logo</span>
+                            <label
+                                class="file-label bg-transparent text-gray-500 border border-white h-14 cursor-pointer flex items-center">
+                                <i class="fa fa-upload" style="font-size: 25px;"></i>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+
+    </div>
+</div>
+
+
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden inset-0" id="popUpModal">
+    <div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
+        <button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
+            id="closeModalButton">
+            <i class="fa fa-close"></i>
+        </button>
+        <iframe id="popupModalFrame" frameborder="0"></iframe>
+    </div>
+</div>
+
+<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
+
+<!-------------- JS SCRIPTS --------------->
+<script type="text/javascript" src='{% static "js/upload-input-tag.js" %}'></script>
+
+{% endblock content %}

osinaweb/osinacore/templates/listing_pages/payment-methods.html

@@ -0,0 +1,101 @@
+{% 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-[25px]">Payment Methods</h1>
+
+        <!-- FILTERING -->
+        <div
+            class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row gap-3 justify-between 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 Payment"
+                        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-osiblue text-white outline-none border border-osiblue rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300 addPaymentMethodButton"
+                    data-modal-url="{% url 'add_payment_method_modal' %}">Add
+                    Payment Method</button>
+            </div>
+        </div>
+
+        <div class="overflow-x-auto border border-gray-300 rounded-md mt-5" id="customersContainer">
+            <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">
+                            Payment Method
+                        </th>
+                        <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap border-r border-gray-300">
+                            Description
+                        </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">
+                    <tr>
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                            <div class="w-full flex justify-center items-center gap-2 text-gray-500 text-sm">
+                                <img src="{% static 'images/icons/whishlogo.png' %}" class="w-[30px] rounded-md">
+                                <p>Whish</p>
+                            </div>
+                        </td>
+
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
+                            <p class="text-secondosiblue">Helo this is a description</p>
+                        </td>
+
+                        <td class="px-6 py-4 text-center text-sm">
+                            <div class="flex justify-center items-center gap-3">
+                                <a href="{% url 'editpaymentmethod' %}">
+                                    <div class="cursor-pointer">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+                                        </svg>
+                                    </div>
+                                </a>
+                                <div data-modal-url="{% url 'deletepaymentmethodmodal' %}" class="deletePaymentMethodButton">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[18px] text-red-500 hover:scale-110 duration-500 transition-transform">
+                                        <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+                                    </svg> 
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden inset-0" id="popUpModal">
+    <div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
+        <button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
+            id="closeModalButton">
+            <i class="fa fa-close"></i>
+        </button>
+        <iframe id="popupModalFrame" frameborder="0"></iframe>
+    </div>
+</div>
+
+<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
+
+
+{% endblock content %}

osinaweb/osinacore/templates/main.html

@@ -424,6 +424,14 @@
                                 </div>
                             </a>
 
+
+                            <a href="{% url 'payment_methods' %}">
+                                <div
+                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
+                                    <p class="text-white">Payment Methods</p>
+                                </div>
+                            </a>
+
                             <a>
                                 <div
                                     class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
@@ -718,6 +726,13 @@
                                 </div>
                             </a>
 
+                            <a href="{% url 'payment_methods' %}">
+                                <div
+                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">
+                                    <p class="text-white">Payment Methods/p>
+                                </div>
+                            </a>
+
                             <a>
                                 <div
                                     class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 cursor-pointer">

osinaweb/osinacore/templates/recent-activities.html

@@ -175,6 +175,13 @@
             {% else %}
             <p class="text-sm text-secondosiblue">{{latest.status.text}}</p>
             {% endif %}
+            <div class="w-full flex justify-end items-center mt-1 text-gray-400  hover:text-secondosiblue duration-300 cursor-pointer">
+                <p class="text-xs font-light">Osina</p>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+                </svg>
+            </div>
+
         </div>
 
         <!-- Add comment section -->

osinaweb/osinacore/urls.py

@@ -52,6 +52,7 @@ urlpatterns = [
     path('businesstypes/', views.business_types, name='businesstypes'),
     path('references/', views.references, name='references'),
     path('tags/', views.tags, name='tags'),
+    path('payment_methods/', views.payment_methods, name='payment_methods'),
 
     
     #Details Templates 

osinaweb/osinacore/views.py

@@ -475,6 +475,17 @@ def tags(request):
 
 
 
+@staff_login_required
+def payment_methods(request):
+
+    context = {
+    
+    }
+
+    return render(request, 'listing_pages/payment-methods.html', context)
+
+
+
 
 
 

osinaweb/static/dist/output.css

@@ -1048,6 +1048,14 @@ video {
   height: 3.5rem;
 }
 
+.h-2 {
+  height: 0.5rem;
+}
+
+.h-3 {
+  height: 0.75rem;
+}
+
 .h-4 {
   height: 1rem;
 }
@@ -1222,6 +1230,14 @@ video {
   width: 3.5rem;
 }
 
+.w-2 {
+  width: 0.5rem;
+}
+
+.w-3 {
+  width: 0.75rem;
+}
+
 .w-4 {
   width: 1rem;
 }
@@ -2590,6 +2606,10 @@ video {
   padding-top: 2.25rem;
 }
 
+.text-left {
+  text-align: left;
+}
+
 .text-center {
   text-align: center;
 }
@@ -3247,11 +3267,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.hover\:bg-fifthosiblue:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(146 156 183 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -3280,10 +3295,6 @@ video {
   --tw-bg-opacity: 0.6;
 }
 
-.hover\:fill-fifthosiblue:hover {
-  fill: #929cb7;
-}
-
 .hover\:p-2:hover {
   padding: 0.5rem;
 }
@@ -3293,6 +3304,11 @@ video {
   color: rgb(146 156 183 / var(--tw-text-opacity));
 }
 
+.hover\:text-gray-100:hover {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+
 .hover\:text-gray-500:hover {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
@@ -3461,10 +3477,6 @@ video {
     flex-direction: row;
   }
 
-  .s\:items-center {
-    align-items: center;
-  }
-
   .s\:justify-end {
     justify-content: flex-end;
   }
@@ -3839,14 +3851,35 @@ video {
     width: 75%;
   }
 
+  .xll\:w-fit {
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+
   .xll\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
+  .xll\:flex-row {
+    flex-direction: row;
+  }
+
+  .xll\:justify-end {
+    justify-content: flex-end;
+  }
+
+  .xll\:justify-between {
+    justify-content: space-between;
+  }
+
   .xll\:rounded-none {
     border-radius: 0px;
   }
 
+  .xll\:text-left {
+    text-align: left;
+  }
+
   .xll\:text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;

osinaweb/static/js/billing/add-order.js

@@ -0,0 +1,32 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const addButtons = document.querySelectorAll('.addServiceButton');
+
+    addButtons.forEach(function (button) {
+        button.addEventListener('click', function () {
+            const serviceId = button.getAttribute('data-service-id');
+            const serviceTitle = button.getAttribute('data-service-title');
+
+            const selectTag = document.getElementById('servicesSelectTag');
+            const option = document.createElement('option');
+            option.value = serviceId;
+            option.text = serviceTitle;
+
+            if (button.classList.contains('added')) {
+                button.classList.remove('added');
+                button.classList.remove('bg-red-500');
+                button.classList.add('bg-osiblue');
+                button.querySelector('p').textContent = "Add";
+                const optionToRemove = selectTag.querySelector(`option[value="${serviceId}"]`);
+                if (optionToRemove) {
+                    selectTag.removeChild(optionToRemove);
+                }
+            } else {
+                button.classList.add('added');
+                button.classList.add('bg-red-500');
+                button.querySelector('p').textContent = "Remove";
+                selectTag.appendChild(option);
+                option.selected = true;
+            }
+        });
+    });
+});

osinaweb/static/js/pop-modals.js

@@ -66,6 +66,15 @@ document.addEventListener("DOMContentLoaded", function () {
     addButtonClickListener("addUserStoryButton", "400px", "160px");
     addButtonClickListener("reactionDetailsButton", "400px", "300px");
 
+    addButtonClickListener("addPaymentCommentButton", "500px", "250px");
+    addButtonClickListener("addPaymentButton", "500px", "400px");
+    addButtonClickListener("editPaymentButton", "500px", "400px");
+
+    addButtonClickListener("addPaymentMethodButton", "500px", "400px");
+    
+    
+    
+    
     
 
     // DELETE BUTTONS
@@ -78,7 +87,8 @@ document.addEventListener("DOMContentLoaded", function () {
     addButtonClickListener("deleteProjectNoteButton", "400px", "140px");
     addButtonClickListener("deletePointButton", "400px", "140px");
     addButtonClickListener("deleteTicketButton", "400px", "140px");
-    
+    addButtonClickListener("deletePaymentButton", "400px", "140px");
+    addButtonClickListener("deletePaymentMethodButton", "400px", "140px");