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,6 @@ import os
 from osinacore.decorators import *
 from django.core.files.base import ContentFile
 from django.db.models import Q
-from weasyprint import HTML, CSS
 
 
 @staff_login_required
@@ -211,116 +210,7 @@ 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/input.css

@@ -15,6 +15,14 @@
     background: #5a5a5a00;
 }
 
+.rtl {
+    direction: rtl;
+}
+
+.ltr {
+    direction: ltr;
+}
+
 
 /* SCROLL BAR OF REACTION DETAILS POPUP */
 .reactionDetails::-webkit-scrollbar {

osinaweb/osinacore/add/urls.py

@@ -5,7 +5,6 @@ from . import views
 urlpatterns = [  
 
     path('status/', views.add_status_modal, name='addstatusmodal'),
-
     path('customer/', views.add_customer, name='addcustomer'),
     path('business/', views.add_business, name='addbusiness'),
     path('staff/', views.add_staff, name='adduser'),
@@ -18,6 +17,7 @@ urlpatterns = [
     path('task/<str:project_id>/', views.add_task, name='addprojecttask'),
     path('task/<str:project_id>/<int:requirement_id>/', views.add_task, name='adduserstorytask'),
     path('point/<str:task_id>/', views.add_point_modal, name='addpointmodal'),
+    path('taskpoint/<str:task_id>/', views.save_point_modal, name='savepointmodal'),
     path('epic/<str:project_id>/', views.add_epic, name='addepic'),
     path('note/', views.add_note_modal, name='addnotemodal'),
     path('dailyreport/', views.add_daily_report, name='adddailyreport'),
@@ -30,5 +30,5 @@ urlpatterns = [
     path('reaction/<int:status_id>/<str:emoji>/', views.add_reaction, name='add_reaction'),
     path('ticket/<int:customer_id>/', views.add_ticket, name='addticket'),
     path('ticketupdate/<int:ticket_id>/', views.add_ticket_update, name='addticketupdate'),
-
+    path('add_project_momber', views.add_project_member_modal, name='addprojectmembermodal'),
 ]

osinaweb/osinacore/add/views.py

@@ -284,6 +284,15 @@ def add_credential_modal(request, *args, **kwargs):
     return render(request, 'add_templates/add-credentials-modal.html', context) 
 
 
+@staff_login_required
+def add_project_member_modal(request, *args, **kwargs):
+
+    context = {
+
+    }
+    return render(request, 'add_templates/add-project-member-modal.html', context) 
+
+
 
 
 @staff_login_required
@@ -389,6 +398,25 @@ def add_point_modal(request, task_id):
 
 
 
+@staff_login_required
+def save_point_modal(request, task_id):
+    task = get_object_or_404(Task, task_id=task_id)
+    if request.method == 'POST':
+        text = request.POST.get('text')
+        point = Point(
+        text = text,
+        task = task,
+        status='Not Completed'
+        )
+        point.save()
+        return JsonResponse({'success': True, 'message': 'Point saved successfully.'})
+    
+    context = {
+        'task' : task,
+
+    }
+    return render(request, 'add_templates/add-point-modal.html', context)
+
 
 
 @staff_login_required

osinaweb/osinacore/edit/urls.py

@@ -5,6 +5,7 @@ from . import views
 urlpatterns = [  
 
     path('customer/<str:customer_id>/', views.edit_customer, name='editcustomer'),
+    path('customerstatus', views.edit_customer_status_modal, name='editcustomerstatusmodal'),
     path('business/<str:business_id>/', views.edit_business, name='editbusiness'),
     path('staff/<str:staff_id>/', views.edit_staff, name='editstaff'),
     path('project/<str:project_id>/', views.edit_project, name='editproject'),

osinaweb/osinacore/edit/views.py

@@ -43,6 +43,14 @@ def edit_customer(request, customer_id):
     }
     return render(request, 'edit_templates/edit-customer.html', context)
 
+@staff_login_required
+def edit_customer_status_modal(request):
+
+    context = {
+
+    }
+
+    return render(request, 'edit_templates/edit-customer-status-modal.html', context) 
 
 
 

osinaweb/osinacore/templates/add_templates/add-point-modal.html

@@ -14,28 +14,45 @@
 </head>
 
 <body class="font-poppinsLight">
-    <form id="hiddenContent"  method="POST" action="{% url 'addpointmodal' task.task_id %}">
+    <form id="addPointModal"  method="POST" action="{% url 'addpointmodal' task.task_id %}">
         {% csrf_token %}
         <h1 class="text-secondosiblue text-2xl font-semibold text-center">Add Point</h1>
         <div class="w-full flex justify-center items-center">
             <input name="text" type="text" placeholder="Type your point here..."
-                class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4" id="pointInput"
-                >
+                class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4" required id="pointInput">
         </div>
 
-        <!-- THE WARNING MESSAGE THAT APPEARS WHEN THE USER CLICKS ON THE ADD BUTTON WITH AN EMPTY INPUT FIELD -->
-        <p class="text-red-500 font-light mt-2" id="AlertPointMessage">
-
-        </p>
-
-        <div class="w-full flex justify-center items-center mt-4 gap-4">
+        <div class="w-full flex justify-end items-center mt-4 gap-2">
+            <button
+                class="w-fit bg-osiblue border border-osiblue rounded-md text-white px-5 py-1 hover:bg-white hover:text-osiblue duration-300"
+                id="savePointButton">Save</button>
             <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"
-                id="addPointsFormButton">Save</button>
+                class="w-fit bg-osiblue border border-osiblue rounded-md text-white px-5 py-1 hover:bg-white hover:text-osiblue duration-300">Save and Continue</button>
         </div>
 
 
     </form>
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script>
+        $(document).ready(function() {
+            $('#savePointButton').on('click', function(e) {
+                e.preventDefault();
+                var form = $('#addPointModal');
+                $.ajax({
+                    type: form.attr('method'),
+                    url: form.attr('action'),
+                    data: form.serialize(),
+                    success: function(response) {
+                        window.parent.location.reload();
+                    },
+                    error: function(xhr, status, error) {
+                        alert('An error occurred while saving the point.');
+                    }
+                });
+            });
+        });
+    </script>
 </body>
 
 </html>

osinaweb/osinacore/templates/add_templates/add-project-member-modal.html

@@ -0,0 +1,36 @@
+{% 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 method="POST">
+        {% csrf_token %}
+        <h1 class="text-secondosiblue text-2xl font-semibold text-center">Add Member</h1>
+
+        <div class="w-full flex flex-col gap-1">
+            <label class="text-gray-500">Staffs:</label>
+            <select required multiple name="" type="text"
+                class="w-full h-[100px] p-3 border border-gray-300 rounded-md bg-transparent outline-none">
+                <option>Member1</option>
+                <option>Member2</option>
+            </select>
+        </div>
+        <div class="w-full flex justify-center items-center mt-6">
+            <button type="submit"
+                class="w-fit h-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>
+</body>
+
+</html>

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

@@ -27,7 +27,7 @@
     <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">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">

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

@@ -7,7 +7,7 @@
 
 <div class="w-full xxlg1:w-[74.5%] bg-white h-fit rounded-md shadow-md p-5">
 
-    <div class="w-full rounded-md flex flex-col justify-center items-center py-2
+    <div class="w-full rounded-md flex flex-col justify-center items-center py-2 bg-gray-400
     {% 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 %}
@@ -17,18 +17,6 @@
     </div>
 
 
-    <div class="w-full rounded-b-md flex xll:hidden items-center">
-        <button
-            class="w-[50%] text-base px-3 py-2 bg-red-500 text-white outline-none border border-red-500 rounded-bl-md cursor-pointer hover:bg-white hover:text-red-500 duration-300 deleteProjectButton"
-            data-modal-url="{% url 'deleteprojectmodal' project.id %}">Delete
-            Project</button>
-        <a href="{% url 'editproject' project.project_id %}" class="w-[50%]">
-            <button
-                class="w-full text-base px-3 py-2 bg-fifthosiblue text-white outline-none border border-fifthosiblue rounded-br-md cursor-pointer hover:bg-white hover:text-fifthosiblue duration-300">Edit
-                Project</button>
-        </a>
-    </div>
-
     <p id="projectId" class="hidden">{{project.id}}</p>
 
     <!-- PROJECT PROGRESS BAR -->
@@ -43,9 +31,8 @@
         </div>
     </div>
 
-    <div
-        class="w-full h-fit md:h-[70px] flex justify-between items-center bg-gray-100 shadow-md rounded-md px-3 py-3 md:py-1 mt-4">
-        <div class="w-full md:w-fit flex flex-col md:flex-row justify-start items-center gap-3">
+    <div class="w-full h-fit flex justify-between items-center bg-gray-100 shadow-md rounded-md px-3 py-3 mt-4">
+        <div class="w-full md:w-fit flex flex-col md:flex-row flex-wrap justify-start items-center gap-3">
             <button data-modal-url="{% url 'editprojectstatusmodal' project.id %}"
                 class="w-full md:w-fit text-base px-3 py-2 bg-transparent text-osiblue outline-none border border-osiblue duration-300 rounded-md cursor-pointer hover:bg-osiblue hover:text-white editProjectStatusButton">
                 Update Status
@@ -64,15 +51,9 @@
             <button
                 class="w-full md:w-fit text-base px-3 py-2 bg-transparent text-osiblue outline-none border border-osiblue duration-300 rounded-md cursor-pointer hover:bg-osiblue hover:text-white">Create
                 Story</button>
-        </div>
-        <div class="hidden xll:flex justify-end items-center gap-3">
-            <button
-                class="w-fit 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 deleteProjectButton"
-                data-modal-url="{% url 'deleteprojectmodal' project.id %}">Delete
-                Project</button>
-            <a href="{% url 'editproject' project.project_id %}">
+            <a href="{% url 'editproject' project.project_id %}" class="w-full md:w-fit">
                 <button
-                    class="w-fit text-base px-3 py-2 bg-fifthosiblue text-white outline-none border border-fifthosiblue rounded-md cursor-pointer hover:bg-white hover:text-fifthosiblue duration-300">Edit
+                    class="w-full md:w-fit text-base px-3 py-2 bg-transparent text-osiblue outline-none border border-osiblue duration-300 rounded-md cursor-pointer hover:bg-osiblue hover:text-white">Edit
                     Project</button>
             </a>
         </div>
@@ -89,8 +70,8 @@
         <!-- PROJECT MANAGER -->
         <div>
             <p class="text-gray-500 text-xl">Project Manager:</p>
-            <div class="w-fit flex justify-start items-center gap-1 px-9 py-3 bg-gray-100 rounded-md shadow-md mt-2">
-                <div class="w-[50px] h-[50px] rounded-full bg-white">
+            <div class="w-fit flex justify-start items-center gap-1 px-5 py-3 bg-gray-100 rounded-md shadow-md mt-2">
+                <div class="w-[40px] h-[40px] rounded-full bg-white">
                     {% if project.manager.image %}
                     <img src="{{project.manager.image.url}}" class="w-full h-full rounded-full object-cover">
                     {% else %}
@@ -104,14 +85,25 @@
         </div>
 
         <!-- MEMBERS -->
-        <div>
-            <p class="text-gray-500 text-xl">Member(s):</p>
-            <div class="w-full flex justify-start items-center gap-3 flex-wrap mt-2">
+        <div class="w-full mt-5">
+            <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">Members</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 addProjectMemberModal" data-modal-url="{% url 'addprojectmembermodal' %}">
+                    <i class="fa fa-plus"></i>
+                </button>
+            </div>
+
+            <div class="w-full flex justify-start items-center gap-3 flex-wrap mt-3">
                 {% for member in members %}
                 <div
-                    class="w-fit flex flex-col justify-center items-center gap-3 px-9 py-3 bg-gray-100 rounded-md shadow-md">
+                    class="w-fit flex flex-col gap-2 px-5 py-3 bg-gray-100 rounded-md shadow-md">
                     <div class="flex justify-start items-center gap-1">
-                        <div class="w-[50px] h-[50px] rounded-full bg-white">
+                        <div class="w-[40px] h-[40px] rounded-full bg-white">
                             {% if member.image %}
                             <img src="{{member.image.url}}" class="w-full h-full rounded-full object-cover">
                             {% else %}
@@ -125,7 +117,9 @@
                     </div>
 
                     {% if request.user.is_superuser %}
-                    <p class="text-secondosiblue font-poppinsBold text-sm">Working Hours: {{member.total_time_worked_hours}}hr {{member.total_time_worked_minutes}}min {{member.total_time_worked_seconds}}sec</p>
+                    <p class="text-secondosiblue text-sm">Working Hours:
+                        {{member.total_time_worked_hours}}hr {{member.total_time_worked_minutes}}min
+                        {{member.total_time_worked_seconds}}sec</p>
                     {% endif %}
                 </div>
                 {% endfor %}
@@ -133,7 +127,7 @@
         </div>
 
         <!-- TYPE -->
-        <div>
+        <div class="w-full mt-5">
             <p class="text-gray-500 text-xl">Type:
                 {% for type in project.project_type.all %}
                 <span class="text-secondosiblue text-xl font-semibold">
@@ -489,6 +483,12 @@
 
         </div>
     </div>
+
+    <button
+        class="w-full mt-5 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 deleteProjectButton"
+        data-modal-url="{% url 'deleteprojectmodal' project.id %}">Delete
+        Project</button>
+
 </div>
 
 

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

@@ -166,9 +166,91 @@
 
 
             <div class="w-full flex flex-col gap-3">
-                <textarea name="description" rows="8"
-                    class="w-full bg-white px-3 py-3 border border-gray-200 rounded-md outline-none text-gray-500 resize-none"
+                <div>
+                    <div class="flex justify-start items-center gap-3 px-5 py-3 rounded-t-md bg-gray-200">
+                        <div id="boldBtn" class="cursor-pointer hover:text-secondosiblue duration-300" title="Bold">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5" color="#000000"
+                                fill="none">
+                                <path fill-rule="evenodd" clip-rule="evenodd"
+                                    d="M5 6C5 4.58579 5 3.87868 5.43934 3.43934C5.87868 3 6.58579 3 8 3H12.5789C15.0206 3 17 5.01472 17 7.5C17 9.98528 15.0206 12 12.5789 12H5V6Z"
+                                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                                <path
+                                    d="M12.4286 12H13.6667C16.0599 12 18 14.0147 18 16.5C18 18.9853 16.0599 21 13.6667 21H8C6.58579 21 5.87868 21 5.43934 20.5607C5 20.1213 5 19.4142 5 18V12"
+                                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                            </svg>
+                        </div>
+
+                        <div id="italicBtn" class="cursor-pointer hover:text-secondosiblue duration-300" title="Italic">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5" color="#000000"
+                                fill="none">
+                                <path d="M12 4H19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+                                <path d="M8 20L16 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+                                <path d="M5 20H12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+                            </svg>
+                        </div>
+
+                        <div id="listBtn" class="cursor-pointer hover:text-secondosiblue duration-300" title="List">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5" color="#000000"
+                                fill="none">
+                                <path d="M8 5L20 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+                                <path d="M4 5H4.00898" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                                <path d="M4 12H4.00898" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                                <path d="M4 19H4.00898" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                                <path d="M8 12L20 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+                                <path d="M8 19L20 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+                            </svg>
+                        </div>
+
+                        <div id="rtlButton" class="cursor-pointer hover:text-secondosiblue duration-300"
+                            title="Right To Left">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5" color="#000000"
+                                fill="none">
+                                <path d="M15 3.5H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                                <path d="M15 9.5H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                                <path d="M3 15.5H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                                <path d="M3 21.5H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                                <path
+                                    d="M3.58579 9.91421C4.17157 10.5 5.11438 10.5 7 10.5C8.88562 10.5 9.82843 10.5 10.4142 9.91421C11 9.32843 11 8.38562 11 6.5C11 4.61438 11 3.67157 10.4142 3.08579C9.82843 2.5 8.88562 2.5 7 2.5C5.11438 2.5 4.17157 2.5 3.58579 3.08579C3 3.67157 3 4.61438 3 6.5C3 8.38562 3 9.32843 3.58579 9.91421Z"
+                                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                            </svg>
+                        </div>
+
+                        <div id="ltrButton" class="cursor-pointer hover:text-secondosiblue duration-300"
+                            title="Left To Right">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5" color="#000000"
+                                fill="none">
+                                <path d="M3 3.5H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                                <path d="M3 9.5H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                                <path d="M3 15.5H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                                <path d="M3 21.5H21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                                <path
+                                    d="M13.5858 9.91421C14.1716 10.5 15.1144 10.5 17 10.5C18.8856 10.5 19.8284 10.5 20.4142 9.91421C21 9.32843 21 8.38562 21 6.5C21 4.61438 21 3.67157 20.4142 3.08579C19.8284 2.5 18.8856 2.5 17 2.5C15.1144 2.5 14.1716 2.5 13.5858 3.08579C13 3.67157 13 4.61438 13 6.5C13 8.38562 13 9.32843 13.5858 9.91421Z"
+                                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                            </svg>
+                        </div>
+
+                    </div>
+
+                    <textarea name="description" rows="8" id="textEditor"
+                        class="w-full bg-white px-3 py-3 border border-gray-200 rounded-b-md outline-none text-gray-500 resize-none"
                         placeholder="Add Comment..." required></textarea>
+                </div>
+
 
                 <div class="w-full flex flex-col s:flex-row justify-end items-center gap-3">
                     <div
@@ -192,21 +274,15 @@
                         Send
                     </button>
                 </div>
-
             </div>
-
         </form>
     </div>
-
 </div>
 
 
 <!---------------------- JS SCRIPTS -------------------->
 
-<script>
-    CKEDITOR.replace('description');
-</script>
-
 <script type="text/javascript" src="{% static 'js/customer_dashboard/ticket-details.js' %}"></script>
+<script type="text/javascript" src="{% static 'js/customer_dashboard/text-editor.js' %}"></script>
 
 {% endblock %}

osinaweb/osinacore/templates/edit_templates/edit-customer-status-modal.html

@@ -19,10 +19,10 @@
         <h1 class="text-secondosiblue text-2xl font-semibold text-center">Update Customer Status</h1>
 
         <select name="status" id="" class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4">
-            <option value="Completed">Completed</option>
-            <option value="In Progress">In Progress</option>
             <option value="Pending">Pending</option>
-            <option value="Cancelled">Cancelled</option>
+            <option value="Active">Active</option>
+            <option value="Suspended">Suspended</option>
+            <option value="Terminated">Terminated</option>
         </select>
 
 

osinaweb/osinacore/templates/listing_pages/customers.html

@@ -69,7 +69,8 @@
                             <p class="text-secondosiblue">{{customer.user.username}}</p>
                         </td>
 
-                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300 {% if customer.status == 'Active' %}bg-green-700{% endif %}   {% if customer.status == 'Terminated' %}bg-gray-500{% endif %}  {% if customer.status == 'Suspended' %}bg-red-500{% endif %}">
+                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300 hover:bg-opacity-50 duration-300 cursor-pointer editCustomerStatusButton {% if customer.status == 'Active' %}bg-green-700{% endif %}   {% if customer.status == 'Terminated' %}bg-gray-500{% endif %}  {% if customer.status == 'Suspended' %}bg-red-500{% endif %}"
+                            data-modal-url="{% url 'editcustomerstatusmodal' %}">
                             <p class="text-white">{{customer.status}}</p>
                         </td>
 
@@ -87,25 +88,35 @@
                             <div class="w-full flex justify-center items-center gap-3">
                                 <a href="{% url 'customerdetails' customer.customer_id  %}">
                                     <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="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+                                        <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="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+                                            <path stroke-linecap="round" stroke-linejoin="round"
+                                                d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                                         </svg>
                                     </div>
                                 </a>
 
                                 <a href="{% url 'editcustomer' customer.customer_id %}">
                                     <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 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 class="cursor-pointer deleteCustomerButton"
                                     data-modal-url="{% url 'deletecustomermodal' customer.id %}">
-                                    <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 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>

osinaweb/osinacore/templates/listing_pages/projects.html

@@ -66,7 +66,7 @@
 
 
             <div class="w-full bg-white h-fit rounded-md border border-gray-200">
-                <div class="w-full px-5 py-5 {% if project.projectstatus_set.all.last.status == 'Completed' %}bg-green-700{% endif %}
+                <div class="w-full px-5 py-5 bg-gray-400 {% 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 %}
@@ -124,8 +124,8 @@
                             <a href="{% url 'editproject' project.project_id %}"
                                 class="p-3 text-base bg-gray-50 border-b s:border-b-0 border-r-0 s:border-r border-gray-200 text-secondosiblue flex justify-center items-center">Edit</a>
 
-                            <button class="p-3 text-base bg-gray-50 text-secondosiblue deleteProjectButton"
-                                data-modal-url="{% url 'deleteprojectmodal' project.id %}">Delete</button>
+                            <button class="p-3 text-base bg-gray-50 text-secondosiblue editProjectStatusButton"
+                                data-modal-url="{% url 'editprojectstatusmodal' project.id %}">Update Status</button>
                         </div>
                     </div>
 
@@ -230,8 +230,8 @@
                             <a href="{% url 'editproject' project.project_id %}"
                                 class="p-3 text-base bg-gray-50 border-b s:border-b-0 border-r-0 s:border-r border-gray-200 text-secondosiblue flex justify-center items-center">Edit</a>
 
-                            <button class="p-3 text-base bg-gray-50 text-secondosiblue deleteProjectButton"
-                                data-modal-url="{% url 'deleteprojectmodal' project.id %}">Delete</button>
+                                <button class="p-3 text-base bg-gray-50 text-secondosiblue editProjectStatusButton"
+                                data-modal-url="{% url 'editprojectstatusmodal' project.id %}">Update Status</button>
                         </div>
                     </div>
 

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

@@ -1,7 +1,6 @@
 {% load static %}
 
 {% for project in filtered_projects %}
-
 <div class="w-full h-fit bg-white rounded-md shadow-md p-3 projectContainer">
     <p id="projectId" class="hidden">{{project.id}}</p>
 
@@ -56,8 +55,8 @@
                     <a href="{% url 'editproject' project.project_id %}"
                         class="p-3 text-base bg-gray-50 border-b s:border-b-0 border-r-0 s:border-r border-gray-200 text-secondosiblue flex justify-center items-center">Edit</a>
 
-                    <button class="p-3 text-base bg-gray-50 text-secondosiblue deleteProjectButton"
-                        data-modal-url="{% url 'deleteprojectmodal' project.id %}">Delete</button>
+                    <button class="p-3 text-base bg-gray-50 text-secondosiblue editProjectStatusButton"
+                        data-modal-url="{% url 'editprojectstatusmodal' project.id %}">Update Status</button>
                 </div>
             </div>
 
@@ -93,5 +92,18 @@
         </div>
     </div>
 </div>
-
 {% endfor %}
+
+
+<!-- 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>

osinaweb/static/dist/output.css

@@ -3081,6 +3081,14 @@ video {
   background: #5a5a5a00;
 }
 
+.rtl {
+  direction: rtl;
+}
+
+.ltr {
+  direction: ltr;
+}
+
 /* SCROLL BAR OF REACTION DETAILS POPUP */
 
 .reactionDetails::-webkit-scrollbar {
@@ -3418,6 +3426,10 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-opacity-50:hover {
+  --tw-bg-opacity: 0.5;
+}
+
 .hover\:bg-opacity-60:hover {
   --tw-bg-opacity: 0.6;
 }
@@ -3694,10 +3706,6 @@ video {
     display: none;
   }
 
-  .md\:h-\[70px\] {
-    height: 70px;
-  }
-
   .md\:w-\[250px\] {
     width: 250px;
   }
@@ -3723,11 +3731,6 @@ video {
     flex-direction: row;
   }
 
-  .md\:py-1 {
-    padding-top: 0.25rem;
-    padding-bottom: 0.25rem;
-  }
-
   .md\:text-3xl {
     font-size: 1.875rem;
     line-height: 2.25rem;
@@ -3956,14 +3959,6 @@ video {
 }
 
 @media (min-width: 1600px) {
-  .xll\:flex {
-    display: flex;
-  }
-
-  .xll\:hidden {
-    display: none;
-  }
-
   .xll\:w-\[550px\] {
     width: 550px;
   }

osinaweb/static/js/pop-modals.js

@@ -73,8 +73,8 @@ document.addEventListener("DOMContentLoaded", function () {
     addButtonClickListener("addPaymentMethodButton", "500px", "400px");
     addButtonClickListener("updateOrderStatusButton", "400px", "160px");
     addButtonClickListener("editProjectStatusButton", "400px", "220px");
-    
-    
+    addButtonClickListener("editCustomerStatusButton", "400px", "160px");
+    addButtonClickListener("addProjectMemberModal", "400px", "230px");
     
 
 

osinaweb/static/js/text-editor.js

@@ -0,0 +1,11 @@
+document.getElementById('rtlButton').addEventListener('click', function() {
+    const editor = document.getElementById('textEditor');
+    editor.classList.remove('ltr');
+    editor.classList.add('rtl');
+});
+
+document.getElementById('ltrButton').addEventListener('click', function() {
+    const editor = document.getElementById('textEditor');
+    editor.classList.remove('rtl');
+    editor.classList.add('ltr');
+});