New changes.

osinaweb/billing/add/urls.py

@@ -7,8 +7,7 @@ urlpatterns = [
     path('service', views.add_service, name='addservice'),
     path('order/<int:customer_id>/', views.add_order, name='addorder'),
 
-    path('invoice-pdf/<int:order_id>/', views.add_invoice_pdf, name='addinvoice'),
-    path('payment-pdf/<int:order_id>/', views.add_payment_pdf, name='addpayment'),
+
 
     path('service/<int:service_id>/<int:order_id>/', views.add_service_in_order, name='addserviceinorder'),
 

osinaweb/billing/add/views.py

@@ -8,7 +8,7 @@ import os
 from osinacore.decorators import *
 from django.core.files.base import ContentFile
 from django.db.models import Q
-from weasyprint import HTML, CSS
+
 
 
 
@@ -213,116 +213,6 @@ 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"
-
-
-
-    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)
-
-    # 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 */
-        }
-        
-        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
-
-
-
-
-
-
-
-def add_payment_pdf(request, order_id):
-    order = get_object_or_404(Order, id=order_id)
-    payments = OrderPayment.objects.filter(order = order)
-    paid_amount = OrderPayment.objects.filter(order=order, date_paid__isnull=False).aggregate(total_paid=Sum('amount'))['total_paid'] or 0
-    cart_total = order.get_cart_total
-    remaining_amount = cart_total - paid_amount
-
-
-    invoice = order.invoice
-
-    # Render both invoice and payment details templates to HTML
-    invoice_template = get_template('details_templates/invoice-details.html')
-    payment_template = get_template('details_templates/payment-details.html')
-    invoice_html = invoice_template.render({'order': order})
-    payment_html = payment_template.render({'order': order, 'payments':payments, 'remaining_amount':remaining_amount,})
-
-    # Combine the HTML content of both templates
-    combined_html = f"{invoice_html}<div style='page-break-before: always;'></div>{payment_html}"
-
-    # Define CSS
-    css_string = '''
-        @font-face {
-            font-family: 'Poppins';
-            src: url('path_to_poppins_font_file.ttf') format('truetype');  /* Update the path to the font file */
-        }
-        
-        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=combined_html).write_pdf(
-        stylesheets=[
-            CSS(string=css_string),
-            CSS(string='@page { margin: 30px; }')
-        ],
-        presentational_hints=True
-    )
-
-    # Return PDF
-    response = HttpResponse(pdf, content_type='application/pdf')
-    response['Content-Disposition'] = 'attachment; filename="my_pdf.pdf"'
-    return response
 
 
 

osinaweb/customercore/templates/listing_pages/customer-projects.html

@@ -33,16 +33,14 @@
 
                     <div class="w-full mt-5 flex flex-col gap-2">
                         <div class="w-full flex justify-between items-center gap-3 text-gray-500 font-light text-xs">
-                            <p>{{project.start_date}}</p>
-                            <p>{{project.end_date}}</p>
+                            <p class="startDate">{{project.start_date}}</p>
+                            <p class="endDate">{{project.end_date}}</p>
                         </div>
 
                         <p id="projectId" class="hidden">{{project.id}}</p>
-                        <p class="hidden startDate">{{project.start_date}}</p>
-                        <p class="hidden endDate">{{project.end_date}}</p>
 
                         <div class="w-full rounded-md bg-white shadow-md h-[8px] mainBar">
-                            <div class=" rounded-md h-full rounded-md progressBar"></div>
+                            <div class=" rounded-md h-full progressBar"></div>
                         </div>
                     </div>
 
@@ -53,6 +51,7 @@
         </div>
     </div>
 </div>
-<script type="text/javascript" src='{% static "js/projects/calculate-all-projects-time.js" %}'></script>
+
+<script type="module" src='{% static "js/projects/calculate-all-projects-time.js" %}'></script>
 
 {% endblock content %}

osinaweb/customercore/templates/listing_pages/products.html

@@ -28,8 +28,9 @@
 
 
                 <div class="w-full grid grid-cols-1 l:grid-cols-3 gap-5 mt-5">
+                    <a href="{% url 'osimenuplans' %}">
                         <div
-                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white">
+                            class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                             <p class="text-secondosiblue uppercase font-poppinsBold text-xl s:text-2xl text-center">Basic
                             </p>
 
@@ -38,9 +39,11 @@
                                 <p class="text-gray-500">monthly/restaurant</p>
                             </div>
                         </div>
+                    </a>
 
+                    <a href="{% url 'osimenuplans' %}">
                         <div
-                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white">
+                            class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                             <p class="text-secondosiblue uppercase font-poppinsBold text-xl s:text-2xl text-center">Standard
                             </p>
 
@@ -49,9 +52,11 @@
                                 <p class="text-gray-500">monthly/restaurant</p>
                             </div>
                         </div>
+                    </a>
 
+                    <a href="{% url 'osimenuplans' %}">
                         <div
-                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white">
+                            class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                             <p class="text-secondosiblue uppercase font-poppinsBold text-xl s:text-2xl text-center">Premium
                             </p>
 
@@ -60,6 +65,7 @@
                                 <p class="text-gray-500">monthly/restaurant</p>
                             </div>
                         </div>
+                    </a>
                 </div>
             </div>
 
@@ -76,8 +82,9 @@
 
 
                 <div class="w-full grid grid-cols-1 l:grid-cols-3 gap-5 mt-5">
+                    <a href="{% url 'osicardplans' %}">
                         <div
-                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white">
+                            class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:text-osiblue hover:scale-105 duration-300">
                             <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">Basic</p>
 
                             <div class="w-full flex flex-col justify-center items-center">
@@ -85,6 +92,7 @@
                                 <p class="text-gray-500">monthly/restaurant</p>
                             </div>
                         </div>
+                    </a>
                 </div>
             </div>
         </div>
@@ -106,8 +114,9 @@
 
 
                 <div class="w-full grid grid-cols-1 l:grid-cols-3 gap-5 mt-5">
+                    <a href="{% url 'sharedhostingplans' %}">
                         <div
-                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white">
+                            class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                             <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">Shared
                                 Basic</p>
 
@@ -117,9 +126,11 @@
                                 <p class="text-gray-500">Regular Price: $12.00/month</p>
                             </div>
                         </div>
+                    </a>
 
+                    <a href="{% url 'sharedhostingplans' %}">
                         <div
-                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white">
+                            class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                             <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">Shared
                                 Plus
                             </p>
@@ -130,9 +141,11 @@
                                 <p class="text-gray-500">Regular Price: $17.50/month</p>
                             </div>
                         </div>
+                    </a>
 
+                    <a href="{% url 'sharedhostingplans' %}">
                         <div
-                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white">
+                            class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                             <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">Shared
                                 Power</p>
 
@@ -142,6 +155,7 @@
                                 <p class="text-gray-500">Regular Price: $24.00/month</p>
                             </div>
                         </div>
+                    </a>
                 </div>
             </div>
 
@@ -160,8 +174,9 @@
 
 
                 <div class="w-full grid grid-cols-1 l:grid-cols-2 xxlg:grid-cols-4 gap-5 mt-5">
+                    <a href="{% url 'cloudvpshostingplans' %}">
                         <div
-                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white">
+                            class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                             <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
                                 OSICLOUD 1</p>
 
@@ -171,9 +186,11 @@
                                 <p class="text-gray-500">Regular Price: $65.95/month</p>
                             </div>
                         </div>
+                    </a>
 
+                    <a href="{% url 'cloudvpshostingplans' %}">
                         <div
-                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white">
+                            class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                             <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
                                 OSICLOUD 2</p>
 
@@ -184,9 +201,11 @@
                                 <p class="text-gray-500">Regular Price: $76.95/month</p>
                             </div>
                         </div>
+                    </a>
 
+                    <a href="{% url 'cloudvpshostingplans' %}">
                         <div
-                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white">
+                            class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                             <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
                                 OSICLOUD 3</p>
 
@@ -196,9 +215,11 @@
                                 <p class="text-gray-500">Regular Price: $98.95/month</p>
                             </div>
                         </div>
+                    </a>
 
+                    <a href="{% url 'cloudvpshostingplans' %}">
                         <div
-                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white">
+                            class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                             <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
                                 OSICLOUD 4</p>
 
@@ -209,6 +230,7 @@
                                 <p class="text-gray-500">Regular Price: $153.95/month</p>
                             </div>
                         </div>
+                    </a>
                 </div>
             </div>
 
@@ -226,8 +248,9 @@
 
 
                 <div class="w-full grid grid-cols-1 l:grid-cols-2 xxlg:grid-cols-4 gap-5 mt-5">
+                    <a href="{% url 'dedicatedserversplans' %}">
                         <div
-                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white">
+                            class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                             <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
                                 DEDICATED 1</p>
 
@@ -238,9 +261,11 @@
                                 <p class="text-gray-500">Regular Price: $143.95/month</p>
                             </div>
                         </div>
+                    </a>
 
+                    <a href="{% url 'dedicatedserversplans' %}">
                         <div
-                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white">
+                            class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                             <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
                                 DEDICATED 2
                             </p>
@@ -252,9 +277,11 @@
                                 <p class="text-gray-500">Regular Price: $184.95/month</p>
                             </div>
                         </div>
+                    </a>
 
+                    <a href="{% url 'dedicatedserversplans' %}">
                         <div
-                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white">
+                            class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                             <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
                                 DEDICATED 3</p>
 
@@ -265,9 +292,11 @@
                                 <p class="text-gray-500">Regular Price: $252.95/month</p>
                             </div>
                         </div>
+                    </a>
 
+                    <a href="{% url 'dedicatedserversplans' %}">
                         <div
-                        class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white">
+                            class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-md bg-white hover:scale-105 duration-300">
                             <p class="text-secondosiblue uppercase font-poppinsBold text-xl xll:text-2xl text-center">
                                 DEDICATED 4</p>
 
@@ -278,6 +307,7 @@
                                 <p class="text-gray-500">Regular Price: $374.95/month</p>
                             </div>
                         </div>
+                    </a>
                 </div>
             </div>
         </div>

osinaweb/osinacore/templates/customer_main.html

@@ -188,17 +188,9 @@
 
                     <!-- USER PROFILE DROPDOWN -->
                     <div class="w-full h-fit bg-secondosiblue px-5 flex flex-col hidden" id="mobileUserProfileDropdown">
-                        <a href="{% url 'signout' %}" class="w-full">
-                            <div class="w-full py-3 flex items-center gap-2 text-white text-[16px] border-b border-white border-opacity-10">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
-                                </svg>    
-                                <p>Logout</p>
-                            </div>
-                        </a>
                         <a href="{% url 'userprofile' %}" class="">
                             <div
-                                class="w-full py-3 flex items-center gap-2 text-white cursor-pointer">
+                                class="w-full py-3 flex items-center gap-2 text-white cursor-pointer border-b border-white border-opacity-10">
                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-[25px] text-white" fill="none">
                                     <path d="M6.57757 15.4816C5.1628 16.324 1.45336 18.0441 3.71266 20.1966C4.81631 21.248 6.04549 22 7.59087 22H16.4091C17.9545 22 19.1837 21.248 20.2873 20.1966C22.5466 18.0441 18.8372 16.324 17.4224 15.4816C14.1048 13.5061 9.89519 13.5061 6.57757 15.4816Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                     <path d="M16.5 6.5C16.5 8.98528 14.4853 11 12 11C9.51472 11 7.5 8.98528 7.5 6.5C7.5 4.01472 9.51472 2 12 2C14.4853 2 16.5 4.01472 16.5 6.5Z" stroke="currentColor" stroke-width="1.5" />
@@ -206,6 +198,14 @@
                                 <p>User Profile</p>
                             </div>
                         </a>
+                        <a href="{% url 'signout' %}" class="w-full">
+                            <div class="w-full py-3 flex items-center gap-2 text-white text-[16px]">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
+                                </svg>    
+                                <p>Logout</p>
+                            </div>
+                        </a>
                     </div>
                 </div>
 
@@ -392,23 +392,24 @@
                     <!-- USER PROFILE DROPDOWN -->
                     <div class="w-[250px] h-fit bg-osiblue bg-opacity-70 rounded-md shadow-md px-3 absolute right-0 mt-3 flex flex-col"
                         style="display: none;" id="userProfileDropdown">
-                        <a href="{% url 'signout' %}" class="w-full">
+                        <a href="{% url 'userprofile' %}" class="">
                             <div
                                 class="w-full py-3 flex items-center gap-2 text-white hover:text-osiblue duration-300 cursor-pointer border-b border-white border-opacity-10">
-                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
-                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-[25px] text-white" fill="none">
+                                    <path d="M6.57757 15.4816C5.1628 16.324 1.45336 18.0441 3.71266 20.1966C4.81631 21.248 6.04549 22 7.59087 22H16.4091C17.9545 22 19.1837 21.248 20.2873 20.1966C22.5466 18.0441 18.8372 16.324 17.4224 15.4816C14.1048 13.5061 9.89519 13.5061 6.57757 15.4816Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                                    <path d="M16.5 6.5C16.5 8.98528 14.4853 11 12 11C9.51472 11 7.5 8.98528 7.5 6.5C7.5 4.01472 9.51472 2 12 2C14.4853 2 16.5 4.01472 16.5 6.5Z" stroke="currentColor" stroke-width="1.5" />
                                 </svg>                                 
-                                <p>Logout</p>
+                                <p>User Profile</p>
                             </div>
                         </a>
-                        <a href="{% url 'userprofile' %}" class="">
+
+                        <a href="{% url 'signout' %}" class="w-full">
                             <div
                                 class="w-full py-3 flex items-center gap-2 text-white hover:text-osiblue duration-300 cursor-pointer">
-                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-[25px] text-white" fill="none">
-                                    <path d="M6.57757 15.4816C5.1628 16.324 1.45336 18.0441 3.71266 20.1966C4.81631 21.248 6.04549 22 7.59087 22H16.4091C17.9545 22 19.1837 21.248 20.2873 20.1966C22.5466 18.0441 18.8372 16.324 17.4224 15.4816C14.1048 13.5061 9.89519 13.5061 6.57757 15.4816Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-                                    <path d="M16.5 6.5C16.5 8.98528 14.4853 11 12 11C9.51472 11 7.5 8.98528 7.5 6.5C7.5 4.01472 9.51472 2 12 2C14.4853 2 16.5 4.01472 16.5 6.5Z" stroke="currentColor" stroke-width="1.5" />
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[25px] text-white">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5.636 5.636a9 9 0 1 0 12.728 0M12 3v9" />
                                 </svg>                                  
-                                <p>User Profile</p>
+                                <p>Logout</p>
                             </div>
                         </a>
                     </div>

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

@@ -27,7 +27,8 @@
     <div class="w-full h-fit flex justify-end items-center bg-gray-100 shadow-md rounded-md px-3 py-3 mt-3">
         <div class="w-full md:w-fit flex flex-col md:flex-row justify-end items-center gap-3">
             <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 editCustomerStatusButton" data-modal-url="{% url 'editcustomerstatusmodal' %}">Update
+                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 editCustomerStatusButton"
+                data-modal-url="{% url 'editcustomerstatusmodal' %}">Update
                 Status</button>
 
             <a href="{% url 'addproject' %}" class="w-full md:w-fit">
@@ -117,7 +118,7 @@
 
 
     <!-- BUSINESS -->
-    <div class="mt-5 relative">
+    <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">Businesses</p>
@@ -307,6 +308,126 @@
     </div>
 
 
+    <!-- PROJECTS -->
+    <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">Projects</p>
+            </div>
+
+            <a href="{% url 'addproject' %}" class="h-full">
+                <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">
+                    <i class="fa fa-plus"></i>
+                </button>
+            </a>
+        </div>
+
+        <div class="grid grid-cols-1 l:grid-cols-2 gap-3 mt-3">
+            {% for project in customer_projects %}
+            <a href="{% url 'detailed-project' project.project_id %}">
+                <div class="w-full h-fit bg-white rounded-md shadow-md p-3 projectContainer">
+                    <div class="w-full bg-white h-fit rounded-md border border-gray-200">
+                        <div class="w-full px-5 pt-4 pb-1 flex flex-col gap-1 justify-center items-center text-center text-white rounded-t-md text-[17px] s:text-[20px] bg-opacity-70 relative 
+                            {% if project.projectstatus_set.all.last.status == 'Completed' %}bg-green-700{% endif %}
+                            {% if project.projectstatus_set.all.last.status == 'Cancelled' %}bg-red-500{% endif %}
+                            {% if project.projectstatus_set.all.last.status == 'In Progress' %}bg-orange-500{% endif %}
+                            {% if project.projectstatus_set.all.last.status == 'Pending' %}bg-yellow-500{% endif %}">
+                            <p>{{project.name}}</p>
+                            <p id="projectId" class="hidden">{{project.id}}</p>
+
+                            <div
+                                class="w-full flex justify-between items-center gap-3 text-white text-[12px] opacity-80">
+                                <p>{{project.start_date|date:'d-m-Y' }}</p>
+                                <p>{{project.end_date|date:'d-m-Y' }}</p>
+                            </div>
+                        </div>
+
+
+                        <div class="w-full flex flex-col justify-between">
+                            <!-- Details -->
+                            <div class="w-full flex flex-col gap-3 p-5">
+                                <div class="w-full flex justify-start items-center gap-2">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                        stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-secondosiblue">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122" />
+                                    </svg>
+
+                                    <p class="text-secondosiblue"><span class="font-poppinsBold">{{open_tasks}}</span>
+                                        Open
+                                        {% if project.open_tasks == 1 %} Task {% else %} Tasks {% endif %}</p>
+                                </div>
+
+                                <div class="w-full flex justify-start items-center gap-2">
+                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+                                        class="w-6 h-6 text-secondosiblue" color="#000000" fill="none">
+                                        <path
+                                            d="M2.46433 9.34375C2.21579 9.34375 1.98899 9.14229 2.00041 8.87895C2.06733 7.33687 2.25481 6.33298 2.78008 5.53884C3.08228 5.08196 3.45765 4.68459 3.88923 4.36468C5.05575 3.5 6.70139 3.5 9.99266 3.5H14.0074C17.2986 3.5 18.9443 3.5 20.1108 4.36468C20.5424 4.68459 20.9177 5.08196 21.2199 5.53884C21.7452 6.33289 21.9327 7.33665 21.9996 8.87843C22.011 9.14208 21.7839 9.34375 21.5351 9.34375C20.1493 9.34375 19.0259 10.533 19.0259 12C19.0259 13.467 20.1493 14.6562 21.5351 14.6562C21.7839 14.6562 22.011 14.8579 21.9996 15.1216C21.9327 16.6634 21.7452 17.6671 21.2199 18.4612C20.9177 18.918 20.5424 19.3154 20.1108 19.6353C18.9443 20.5 17.2986 20.5 14.0074 20.5H9.99266C6.70139 20.5 5.05575 20.5 3.88923 19.6353C3.45765 19.3154 3.08228 18.918 2.78008 18.4612C2.25481 17.667 2.06733 16.6631 2.00041 15.1211C1.98899 14.8577 2.21579 14.6562 2.46433 14.6562C3.85012 14.6562 4.97352 13.467 4.97352 12C4.97352 10.533 3.85012 9.34375 2.46433 9.34375Z"
+                                            stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
+                                        <path d="M9 3.5L9 20.5" stroke="currentColor" stroke-width="1.5"
+                                            stroke-linecap="round" stroke-linejoin="round" />
+                                    </svg>
+                                    <p class="text-secondosiblue"><span
+                                            class="font-poppinsBold">{{project.ticket_set.all.count}}</span> Open
+                                        {% if project.ticket_set.all.count == 1 %} Ticket {% else %} Tickets {% endif %}
+                                    </p>
+                                </div>
+
+
+
+                                <div class="w-full flex justify-start items-center gap-2">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                        stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-secondosiblue">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                            d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                                    </svg>
+
+                                    <p class="text-secondosiblue">Total Time: <span
+                                            class="font-poppinsBold">{{total_time_worked.hours}}hr
+                                            {{total_time_worked.minutes}}min
+                                            {{total_time_worked.seconds}}sec</span>
+                                    </p>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </a>
+            {% endfor %}
+        </div>
+    </div>
+
+
+    <!-- SUBSCRIPTIONS -->
+    <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">Subscriptions</p>
+            </div>
+
+        </div>
+
+        <div class="grid grid-cols-1 s:grid-cols-2 l:grid-cols-3 gap-3 mt-3">
+            <div
+                class="flex flex-col justify-center items-center shadow-md rounded-md cursor-pointer hover:scale-105 transition-transform duration-300 relative">
+                <div
+                    class="w-full py-8 px-3 bg-gray-50 flex justify-center items-center rounded-t-md relative h-[130px]">
+                    <img src="{% static 'images/ositcom_logos/osicardblue.png' %}" class="w-[80%] h-auto">
+
+                </div>
+                <div class="w-full  bg-white border border-gray-100 shadow-md flex justify-start items-center p-3">
+                    <p class="text-secondosiblue text-base">Expires:{% if subscription.end_at %} <span
+                            class="font-semibold">{{subscription.end_at}} {% else %} <span class="font-semibold">No
+                                Expiry {% endif %}</span>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
     <button
         class="w-full text-base px-3 py-2 bg-red-500 text-white outline-none border border-red-500 rounded-md cursor-pointer hover:bg-white hover:text-red-500 duration-300 mt-5 deleteCustomerButton"
         data-modal-url="{% url 'deletecustomermodal' customer.id %}">Delete
@@ -314,9 +435,6 @@
 </div>
 
 
-<!---------------------- JS SCRIPTS -------------------->
-
-<!-- THE SCRIPT FOR THE EPICS BAR -->
-<script type="text/javascript" src='{% static "js/epics.js" %}'></script>
+<!---------------------- JS SCRIPTS ------------------
 
 {% endblock content %}

osinaweb/osinacore/templates/index.html

@@ -19,10 +19,11 @@
                             {% if pinned.project.projectstatus_set.all.last.status == 'In Progress' %}bg-orange-500{% endif %}
                             {% if pinned.project.projectstatus_set.all.last.status == 'Pending' %}bg-yellow-500{% endif %}">
                             <p>{{pinned.project.name}}</p>
+                            <p id="projectId" class="hidden">{{pinned.project.id}}</p>
 
                             <div class="w-full flex justify-between items-center gap-3 text-white text-[12px] opacity-80">
-                                <p>{{ pinned.project.start_date|date:'d-m-Y' }}</p>
-                                <p>{{ pinned.project.end_date|date:'d-m-Y' }}</p>
+                                <p class="startDate">{{ pinned.project.start_date|date:'d-m-Y' }}</p>
+                                <p class="endDate">{{ pinned.project.end_date|date:'d-m-Y' }}</p>
                             </div>
 
                                 <div class="absolute top-3 right-3 cursor-pointer z-20" id="unpinProject">
@@ -450,4 +451,7 @@
 </div>
 
 
+    <!---------------------- JS SCRIPTS -------------------->
+    <script type="module" src='{% static "js/projects/calculate-all-projects-time.js" %}'></script>
+
 {% endblock content %}

osinaweb/osinacore/templates/listing_pages/projects.html

@@ -78,18 +78,14 @@
             class="w-full h-fit bg-white rounded-md shadow-md p-3 projectContainer">
             <p id="projectId" class="hidden">{{project.id}}</p>
 
-            <p class="hidden startDate">{{project.start_date}}</p>
-            <p class="hidden endDate">{{project.end_date}}</p>
-
-
             <div class="w-full bg-white h-fit rounded-md border border-gray-200">
                 <a href="{% url 'detailed-project' project.project_id %}">
                     <div class="w-full px-5 pt-4 pb-1 bg-orange-500 flex flex-col gap-1 justify-center items-center text-center text-white rounded-t-md text-[17px] s:text-[20px] bg-opacity-70 hover:bg-opacity-100 duration-300 relative">
                         <p>{{project.name}}</p>
 
                         <div class="w-full flex justify-between items-center gap-3 text-white text-[12px] opacity-80">
-                            <p>{{project.start_date}}</p>
-                            <p>{{project.end_date}}</p>
+                            <p class="startDate">{{project.start_date}}</p>
+                            <p class="endDate">{{project.end_date}}</p>
                         </div>
 
                         <div class="absolute top-3 right-3 cursor-pointer" id="pinProject">

osinaweb/osinacore/templates/projects-by-status.html

@@ -4,9 +4,6 @@
 <div class="w-full h-fit bg-white rounded-md shadow-md p-3 projectContainer">
     <p id="projectId" class="hidden">{{project.id}}</p>
 
-    <p class="hidden startDate">{{project.start_date}}</p>
-    <p class="hidden endDate">{{project.end_date}}</p>
-
     <div class="w-full bg-white h-fit rounded-md border border-gray-200">
         <a href="{% url 'detailed-project' project.project_id %}">
             <div class="w-full pt-4 pb-1 px-5 flex flex-col gap-1 justify-center items-center text-center {% if project.projectstatus_set.all.last.status == 'Completed' %}bg-green-700{% endif %}
@@ -16,8 +13,8 @@
                 <p>{{project.name}}</p>
 
                 <div class="w-full flex justify-between items-center gap-3 text-white text-[12px] opacity-80">
-                    <p>{{project.start_date}}</p>
-                    <p>{{project.end_date}}</p>
+                    <p class="startDate">{{project.start_date}}</p>
+                    <p class="endDate">{{project.end_date}}</p>
                 </div>
 
                 <div class="absolute top-3 right-3 cursor-pointer" id="pinProject">

osinaweb/osinacore/views.py

@@ -549,10 +549,13 @@ def tags(request):
 @staff_login_required
 def customerdetails(request, customer_id):
     customer = get_object_or_404(CustomerProfile, customer_id=customer_id)
+    customer_projects = Project.objects.filter(customer=customer).order_by('-id')
+
     context = {      
         'customer' : customer,
-
+        'customer_projects'  : customer_projects,
     }
+
     return render(request, 'details_templates/customer-details.html', context)
 
 

osinaweb/static/dist/output.css

@@ -894,14 +894,14 @@ video {
   z-index: 50;
 }
 
-.col-span-2 {
-  grid-column: span 2 / span 2;
-}
-
 .col-span-1 {
   grid-column: span 1 / span 1;
 }
 
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
 .m-auto {
   margin: auto;
 }
@@ -4054,10 +4054,6 @@ video {
     width: 300px;
   }
 
-  .xlg1\:w-\[70\%\] {
-    width: 70%;
-  }
-
   .xlg1\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }