New changes.

osinaweb/customercore/templates/details_templates/inner-customer-ticket.html

@@ -12,9 +12,17 @@
 <div class="w-full px-5 s:px-9 flex flex-col gap-3">
     <div class="w-full bg-white rounded-md h-fit shadow-md p-5">
         <div class="w-full h-fit flex flex-col gap-2 bg-gray-100 shadow-md rounded-md px-3 py-3">
+            <div class="w-full flex flex-col s:flex-row justify-between items-start s:items-center gap-3 mb-4 s:mb-0">
                 <p class="text-secondosiblue text-[20px]">Ticket <span
                         class="font-semibold">#{{ticket.ticket_number}}</span></p>
 
+                <button
+                    class="w-full s:w-fit px-3 py-2 bg-red-500 border border-red-500 text-white cursor-pointer duration-300 hover:bg-white hover:text-red-500 rounded-md">
+                    Close Ticket
+                </button>
+            </div>
+
+
 
             {% if last_ticket_status.status == 'Open' %}
             <div class="flex justify-start items-center gap-1">
@@ -51,7 +59,8 @@
                         <path stroke-linecap="round" stroke-linejoin="round"
                             d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
                     </svg>
-                    <a href="https://osina.ositcom.com/{{file.file_path}}" target="_blank" class="text-sm">{{ file.file_path | cut:"static/images/uploaded_ticket_files/" }}{% if not forloop.last %}, {% endif %}</a>
+                    <a href="https://osina.ositcom.com/{{file.file_path}}" target="_blank" class="text-sm">
+                        {{ file.file_path | cut:"static/images/uploaded_ticket_files/" }}{% if not forloop.last %}, {% endif %}</a>
                 </div>
                 {% endfor %}
             </div>
@@ -125,7 +134,9 @@
                                     <path stroke-linecap="round" stroke-linejoin="round"
                                         d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
                                 </svg>
-                                    <a href="https://osina.ositcom.com/{{file.file_path}}" target="_blank">{{ file.file_path | cut:"static/images/uploaded_ticket_files/" }}{% if not forloop.last %}, {% endif %}</a>
+                                <a href="https://osina.ositcom.com/{{file.file_path}}" target="_blank">
+                                    {{ file.file_path | cut:"static/images/uploaded_ticket_files/" }}{% if not forloop.last %}, {% endif %}
+                                </a>
                             </div>
                             {% endfor %}
                         </div>

osinaweb/osinacore/edit/urls.py

@@ -20,6 +20,8 @@ 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('edit-ticket-status', views.edit_ticket_status_modal, name='edit-ticket-status-modal'),
+
 
 
     #Mark Points

osinaweb/osinacore/edit/views.py

@@ -421,6 +421,14 @@ def edit_tag(request, tag_id):
  return render(request, 'edit_templates/edit-tag.html', {'tag': tag})
 
 
+@staff_login_required
+def edit_ticket_status_modal(request, *args, **kwargs):
+    
+    context = {
+
+    }
+    
+    return render(request, 'edit_templates/edit-ticket-status-modal.html', context)
 
 
 

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

@@ -12,13 +12,20 @@
 
 <div class="w-full xxlg1:w-[75%] bg-white h-fit rounded-md shadow-md p-5">
     <div class="w-full h-fit flex flex-col gap-2 bg-gray-100 shadow-md rounded-md px-3 py-3">
-        <div class="w-full flex justify-between items-center gap-3">
+        <div class="w-full flex flex-col md:flex-row justify-between items-start md:items-center gap-3 mb-5 md:mb-0">
             <p class="text-secondosiblue text-[20px]">Ticket <span class="font-semibold">#{{ticket.ticket_number}}</span></p>
 
-            <button class="px-3 py-2 bg-osiblue border border-osiblue text-white cursor-pointer duration-300 hover:bg-white hover:text-osiblue rounded-md">
+
+            <div class="w-full s:w-fit flex flex-col s:flex-row justify-end items-center gap-2">
+                <button class="w-full s:w-fit px-3 py-2 bg-osiblue border border-osiblue text-white cursor-pointer duration-300 hover:bg-white hover:text-osiblue rounded-md updateTicketStatusButton" data-modal-url="{% url 'edit-ticket-status-modal' %}">
+                    Update Status
+                </button>
+    
+                <button class="w-full s:w-fit px-3 py-2 bg-osiblue border border-osiblue text-white cursor-pointer duration-300 hover:bg-white hover:text-osiblue rounded-md">
                     Add Task
                 </button>
             </div>
+        </div>
 
 
 

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

@@ -0,0 +1,41 @@
+{% 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">Update Ticket 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="Open">Open</option>
+            <option value="Working On">Working On</option>
+            <option value="Closed">Closed</option>
+        </select>
+
+
+        <div class="w-full">
+            <input required name="date" type="date" id="date" name="date"
+                class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4">
+        </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/osinacore/templates/index.html

@@ -7,7 +7,6 @@
     <!-- PINNED PROJECTS -->
     {% if pinned_projects_with_time %}
         <div class="w-full grid grid-cols-1 md:grid-cols-2 gap-5">
-
             {% for pinned in pinned_projects_with_time %}
             <a href="{% url 'detailed-project' pinned.project.project_id %}">
                 <div class="w-full h-fit bg-white rounded-md shadow-md p-3 projectContainer">
@@ -22,8 +21,8 @@
                             <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 class="startDate">{{ pinned.project.start_date|date:'d-m-Y' }}</p>
-                                <p class="endDate">{{ pinned.project.end_date|date:'d-m-Y' }}</p>
+                                <p class="startDate">{{ pinned.project.start_date|date:'Y-m-d' }}</p>
+                                <p class="endDate">{{ pinned.project.end_date|date:'Y-m-d' }}</p>
                             </div>
 
                             <div class="absolute top-3 right-3 cursor-pointer z-20" id="unpinProject">
@@ -103,8 +102,6 @@
                 </div>
             </a>
             {% endfor %}
-
-
         </div>
     {% endif %}
 
@@ -452,7 +449,7 @@
 
 
 <!---------------------- JS SCRIPTS -------------------->
-    <script type="module" src='{% static "js/projects/calculate-all-projects-time.js" %}'></script>
+<script type="text/javascript" src='{% static "js/projects/calculate-all-pinned-projects-time.js" %}'></script>
     
 
 {% endblock content %}

osinaweb/static/dist/output.css

@@ -3605,11 +3605,6 @@ video {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -3728,6 +3723,10 @@ video {
 }
 
 @media (min-width: 650px) {
+  .s\:mb-0 {
+    margin-bottom: 0px;
+  }
+
   .s\:mt-10 {
     margin-top: 2.5rem;
   }
@@ -3837,6 +3836,10 @@ video {
     flex-direction: row;
   }
 
+  .s\:items-center {
+    align-items: center;
+  }
+
   .s\:justify-end {
     justify-content: flex-end;
   }
@@ -3909,6 +3912,10 @@ video {
 }
 
 @media (min-width: 798px) {
+  .md\:mb-0 {
+    margin-bottom: 0px;
+  }
+
   .md\:block {
     display: block;
   }
@@ -3946,6 +3953,10 @@ video {
     flex-direction: row;
   }
 
+  .md\:items-center {
+    align-items: center;
+  }
+
   .md\:text-3xl {
     font-size: 1.875rem;
     line-height: 2.25rem;

osinaweb/static/js/pop-modals.js

@@ -83,6 +83,9 @@ function initializeModalButtons() {
     addButtonClickListener("editCustomerStatusButton", "400px", "160px");
     addButtonClickListener("addProjectMemberModal", "400px", "280px");
 
+    addButtonClickListener("updateTicketStatusButton", "400px", "220px");
+    
+
     // DELETE BUTTONS
     addButtonClickListener("deleteCustomerButton", "400px", "140px");
     addButtonClickListener("deleteBusinessButton", "400px", "140px");

osinaweb/static/js/projects/calculate-all-pinned-projects-time.js

@@ -0,0 +1,44 @@
+document.addEventListener("DOMContentLoaded", function() {
+
+    // Function to calculate progress and update progress bar
+    function calculateProgress(startDate, endDate, progressBar) {
+        const currentDate = new Date();
+        if (endDate <= currentDate) {
+            progressBar.style.width = "100%";
+            progressBar.classList.add('bg-red-500');
+        } else if (startDate > currentDate) {
+            progressBar.style.width = "0%";
+        } else {
+            const passedTime = currentDate - startDate;
+            const totalDuration = endDate - startDate;
+            const percentage = (passedTime / totalDuration) * 100;
+            progressBar.style.width = percentage + "%";
+
+            if (percentage <= 50) {
+                progressBar.classList.add('bg-green-700');
+            } else if (percentage <= 80) {
+                progressBar.classList.add('bg-yellow-400');
+            } else if (percentage <= 100) {
+                progressBar.classList.add('bg-red-500');
+            }
+        }
+    }
+
+    function updateAllProjectProgress() {
+        const projectContainers = document.querySelectorAll(".projectContainer");
+
+        projectContainers.forEach(projectContainer => {
+            const startDateElement = projectContainer.querySelector(".startDate");
+            const endDateElement = projectContainer.querySelector(".endDate");
+
+            const progressBar = projectContainer.querySelector(".progressBar");
+
+            const startDate = new Date(startDateElement.textContent);
+            const endDate = new Date(endDateElement.textContent);
+
+            calculateProgress(startDate, endDate, progressBar);
+        });
+    }
+
+    updateAllProjectProgress();
+});

osinaweb/static/js/projects/projects-filtering.js

@@ -24,10 +24,10 @@ document.addEventListener('DOMContentLoaded', function () {
                     initializeModalButtons();
                     updateAllProjectProgress();
                 })
-                .catch(error => console.error('Error:', error));
-
+                .catch(error => {
+                    console.error('Error:', error);
                     projectLoader.classList.add('hidden');
-
+                });
         } else {
             fetch('/projects/status/' + selectedStatus + '/')
                 .then(response => response.text())
@@ -38,7 +38,10 @@ document.addEventListener('DOMContentLoaded', function () {
                     initializeModalButtons();
                     updateAllProjectProgress();
                 })
-                .catch(error => console.error('Error:', error));
+                .catch(error => {
+                    console.error('Error:', error);
+                    projectLoader.classList.add('hidden');
+                });
         }
     });
 });