New changes.

osinaweb/osinacore/views.py

@@ -260,6 +260,15 @@ def staffdetails(request):
     return render(request, 'staff-details.html', context)
 
 
+@login_required
+def staff_positions(request):
+
+    context = {
+
+
+    }
+    return render(request, 'staff-positions.html', context)
+
 
 @login_required
 def staffs(request):
@@ -420,6 +429,31 @@ def add_business_modal(request, *args, **kwargs):
     }
     return render(request, 'addbusiness-modal.html', context)
 
+def staff_position_modal(request):
+
+    context = {
+
+
+    }
+    return render(request, 'add-staffposition-modal.html', context)
+
+def daily_reports(request):
+
+    context = {
+
+
+    }
+    return render(request, 'daily-reports.html', context)
+
+
+def add_daily_report(request):
+
+    context = {
+
+
+    }
+    return render(request, 'add-daily-report.html', context)
+
 
 
 
@@ -623,7 +657,12 @@ def save_business(request):
         email= request.POST.get('email')
         financial_number = request.POST.get('financial_number')
         phone_number = request.POST.get('phone_number')
+        # vat = request.POST.get('vat')
         vat = request.POST.get('vat')
+        if vat == 'true':
+            vat = True
+        else:
+            vat = False
         commercial_registration = request.POST.get('commercial_registration')
         website = request.POST.get('website')
         business_type = request.POST.get('business_type')
@@ -653,6 +692,10 @@ def save_business_modal(request):
         financial_number = request.POST.get('financial_number')
         phone_number = request.POST.get('phone_number')
         vat = request.POST.get('vat')
+        if vat == 'true':
+            vat = True
+        else:
+            vat = False
         commercial_registration = request.POST.get('commercial_registration')
         website = request.POST.get('website')
         business_type = request.POST.get('business_type')
@@ -850,4 +893,97 @@ def save_tag(request):
         # Reload the parent page
         return HttpResponse('<script>window.top.location.reload();</script>')
     
-    return redirect('tags') 
+    return redirect('tags') 
+
+
+# EDIT TEMPLATES
+
+@login_required
+def edit_project(request, *args, **kwargs):
+    
+    context = {
+
+    }
+    return render(request, 'edit_pages/edit-project.html', context)
+
+
+@login_required
+def edit_epic(request, *args, **kwargs):
+    
+    context = {
+
+    }
+    return render(request, 'edit_pages/edit-epic.html', context)
+
+
+@login_required
+def edit_task(request, *args, **kwargs):
+    
+    context = {
+
+    }
+    return render(request, 'edit_pages/edit-task.html', context)
+
+
+@login_required
+def edit_customer(request, *args, **kwargs):
+    
+    context = {
+
+    }
+    return render(request, 'edit_pages/edit-customer.html', context)
+
+
+@login_required
+def edit_business(request, *args, **kwargs):
+    
+    context = {
+
+    }
+    return render(request, 'edit_pages/edit-business.html', context)
+
+
+@login_required
+def edit_staff(request, *args, **kwargs):
+    
+    context = {
+
+    }
+    return render(request, 'edit_pages/edit-staff.html', context)
+
+
+@login_required
+def edit_staff_position(request):
+
+    context = {
+
+
+    }
+    return render(request, 'edit_pages/edit-staff-position.html', context)
+
+
+@login_required
+def edit_project_type(request, *args, **kwargs):
+    
+    context = {
+
+    }
+    return render(request, 'edit_pages/edit-project-type.html', context)
+
+
+@login_required
+def edit_reference(request, *args, **kwargs):
+    
+    context = {
+
+    }
+    return render(request, 'edit_pages/edit-reference.html', context)
+
+
+@login_required
+def edit_tag(request, *args, **kwargs):
+    
+    context = {
+
+    }
+    return render(request, 'edit_pages/edit-tag.html', context)

osinaweb/osinaweb/urls.py

@@ -37,6 +37,7 @@ urlpatterns = [
     path('addstaff/', views.addstaff, name='adduser'),
     path('staffdetails/', views.staffdetails, name='userdetails'),
     path('staffs/', views.staffs, name='users'),
+    path('staffpositions/', views.staff_positions, name='staffpositions'),
     path('projectdetails/<str:project_id>/', views.detailed_project, name='detailed-project'),
     path('createproject/', views.create_project, name='createproject'),
     path('createepic/<str:project_id>/', views.create_epic, name='createepic'),
@@ -47,6 +48,8 @@ urlpatterns = [
     path('projecttypes/', views.project_types, name='projecttypes'),
     path('references/', views.references, name='references'),
     path('tags/', views.tags, name='tags'),
+    path('dailyreports/', views.daily_reports, name='dailyreports'),
+    path('adddailyreport/', views.add_daily_report, name='adddailyreport'),
 
 
 
@@ -69,6 +72,7 @@ urlpatterns = [
     path('addreference/', views.add_reference_modal, name='addreference'),
     path('addtag/', views.add_tag_modal, name='addtag'),
     path('addbusinesscustomer/', views.add_business_modal, name='addbusinesscustomer'),
+    path('addstaffposition/', views.staff_position_modal, name='addstaffposition'),
 
 
     # Save Urls
@@ -84,6 +88,18 @@ urlpatterns = [
     path('save_projecttype/', views.save_projecttype, name='save_projecttype'),
     path('save_reference/', views.save_reference, name='save_reference'),
     path('save_tag/', views.save_tag, name='save_tag'),
+
+    # Edit Templates
+    path('editproject/', views.edit_project, name='editproject'),
+    path('editepic/', views.edit_epic, name='editepic'),
+    path('edittask/', views.edit_task, name='edittask'),
+    path('editcustomer/', views.edit_customer, name='editcustomer'),
+    path('editbusiness/', views.edit_business, name='editbusiness'),
+    path('editstaff/', views.edit_staff, name='editstaff'),
+    path('editprojecttype/', views.edit_project_type, name='editprojecttype'),
+    path('editreference/', views.edit_reference, name='editreference'),
+    path('edittag/', views.edit_tag, name='edittag'),
+    path('editstaffposition/', views.edit_staff_position, name='editstaffposition'),
    
 ]
 

osinaweb/static/dist/output.css

@@ -1138,10 +1138,6 @@ video {
   gap: 2.5%;
 }
 
-.gap-\[3\%\] {
-  gap: 3%;
-}
-
 .gap-y-2 {
   row-gap: 0.5rem;
 }
@@ -1464,6 +1460,10 @@ video {
   padding: 0.75rem;
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
 .p-5 {
   padding: 1.25rem;
 }

osinaweb/static/js/epics.js

@@ -1,6 +1,7 @@
 const epicSelect = document.getElementById('epicSelect');
 const epicDetails = document.getElementById('epicDetails');
 const epicRelatedTasks = document.getElementById('epicRelatedTasks');
+const editEpicButton = document.getElementById('editEpicButton');
 const createTaskButton = document.getElementById('createTaskButton');
 const createStoryButton = document.getElementById('createStoryButton');
 
@@ -11,6 +12,10 @@ epicSelect.addEventListener('change', function () {
 
         epicRelatedTasks.classList.remove('hidden');
 
+        editEpicButton.classList.remove('cursor-not-allowed', 'opacity-30');
+        editEpicButton.classList.add('cursor-pointer');
+        editEpicButton.removeAttribute('disabled');
+
         createTaskButton.classList.remove('cursor-not-allowed', 'opacity-30');
         createTaskButton.classList.add('cursor-pointer');
         createTaskButton.removeAttribute('disabled');
@@ -24,6 +29,9 @@ epicSelect.addEventListener('change', function () {
 
         epicRelatedTasks.classList.add('hidden');
 
+        editEpicButton.classList.add('cursor-not-allowed', 'opacity-30');
+        editEpicButton.setAttribute('disabled', true);
+
         createTaskButton.classList.add('cursor-not-allowed', 'opacity-30');
         createTaskButton.setAttribute('disabled', true);
 

osinaweb/static/js/pop-modals.js

@@ -57,6 +57,7 @@ document.addEventListener("DOMContentLoaded", function () {
     addButtonClickListener("addReferenceButton", "fit-content", "230px");
     addButtonClickListener("addTagButton", "fit-content", "160px");
     addButtonClickListener("addBusinessButton", "550px", "500px");
+    addButtonClickListener("addStaffPositionButton", "fit-content", "160px");
 
     const closeButton = document.getElementById("closeModalButton");
     closeButton.addEventListener("click", () => {

osinaweb/templates/add-business.html

@@ -7,6 +7,9 @@
         <h1 class="text-3xl text-slate-800 text-center font-semibold">
             Add Business
         </h1>
+
+
+
         <form method="POST" action="{% url 'save_business' %}" enctype="multipart/form-data">
             {% csrf_token %}
             <input name="name" type="text" placeholder="Name"
@@ -50,18 +53,18 @@
                 class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4"
                 required>
 
+
             <div class="w-full flex justify-start items-center gap-2 mt-4">
-                <input name="vat"type="checkbox" id="vatCheckbox" onchange="updateVatValue(this.checked)" required>
+                <input name="vat" type="checkbox" id="vatCheckbox" onchange="updateVatValue(this.checked)">
                 <label class="text-slate-800">Vat</label>
             </div>
           
- 
-            
+
             <script>
-            function updateVatValue(checked) {
-              const vatInput = document.querySelector('input[name="vat"]');
-              vatInput.value = checked ? 'True' : 'False';
-            }
+                function updateVatValue(checked) {
+                    const vatInput = document.querySelector('input[name="vat"]');
+                    vatInput.value = checked ? "true" : "false";
+                }
             </script>
 
             <input name="commercial_registration" type="commercial_registration" placeholder="Commercial registration"

osinaweb/templates/add-customer.html

@@ -107,7 +107,8 @@
         <!-- THE "ADD BUSINESS" FORM THAT APPEARS WHEN CLICKING ON THE ADD BUSINESS BUTTON -->
         <div class="w-full p-3 rounded-md border border-gray-300 mt-5 hidden" id="addBusinessFormContainer">
             <h1 class="text-3xl text-slate-800 text-center font-semibold">Add Business</h1>
-            <form method="POST" action="{% url 'save_business_modal' %}" id="addBusinessFormModal" enctype="multipart/form-data">
+            <form method="POST" action="{% url 'save_business_modal' %}" id="addBusinessFormModal"
+                enctype="multipart/form-data">
                 {% csrf_token %}
                 <input name="name" type="text" placeholder="Name"
                     class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4" required>
@@ -148,14 +149,15 @@
                     class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4" required>
 
                 <div class="w-full flex justify-start items-center gap-2 mt-4">
-                    <input name="vat" type="checkbox" id="vatCheckbox" onchange="updateVatValue(this.checked)" required>
+                    <input name="vat" type="checkbox" id="vatCheckbox" onchange="updateVatValue(this.checked)">
                     <label class="text-slate-800">Vat</label>
                 </div>
 
+
                 <script>
                     function updateVatValue(checked) {
                         const vatInput = document.querySelector('input[name="vat"]');
-                        vatInput.value = checked ? 'True' : 'False';
+                        vatInput.value = checked ? "true" : "false";
                     }
                 </script>
 

osinaweb/templates/add-daily-report.html

@@ -0,0 +1,38 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+
+<div class="w-full px-10 mb-4">
+    <div class="w-full bg-white h-fit shadow-md rounded-md p-5">
+        <h1 class="text-3xl text-slate-800 text-center font-semibold">
+            Add Daily Report
+        </h1>
+        <form class="mx-auto w-full flex flex-col gap-3 justify-center items-center mt-5" method="POST">
+
+            <textarea required name="" type="text" placeholder="Write Your Report Here" rows="10" cols="5"
+                class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none"></textarea>
+
+            <div class="w-full flex justify-center items-center mt-3">
+                <button type="submit"
+                    class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-xl cursor-pointer hover:bg-white hover:text-blue-500">Add</button>
+            </div>
+        </form>
+    </div>
+</div>
+</div>
+
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" 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>
+</div>
+
+{% endblock content %}

osinaweb/templates/add-staff.html

@@ -18,12 +18,13 @@
             {% csrf_token %}
             <div class="w-full flex flex-col gap-3 justify-center items-center mt-5">
                 <div class="w-[100px] h-[100px] rounded-full border border-gray-200" id="image-container">
-                    <img src="{% static 'images/default-user.png' %}" alt="" srcset="" id="" class="rounded-full w-full h-full">
+                    <img src="{% static 'images/default-user.png' %}" alt="" srcset="" id=""
+                        class="rounded-full w-full h-full">
                 </div>
 
                 <div class="inbox-box border border-gray-300 py-1 px-3 w-full rounded-md">
                     <div class="flex items-center justify-between">
-                        <input name="image" type="file" id="actual-btn"  hidden />
+                        <input name="image" type="file" id="actual-btn" accept="image/*" hidden />
                         <span id="file-name" class="text-gray-500 text-base focus:outline-none outline-none">Upload
                             Profile Picture</span>
                         <label for="actual-btn"
@@ -83,38 +84,48 @@
                 <input name="mobile_number" type="number" placeholder="Mobile Number"
                     class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
 
-                <input name="position" type="text" placeholder="Position"
-                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+                <!-- <input name="position" type="text" placeholder="Position"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required> -->
+
+                <select name="" id=""
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                    <option value="" selected disabled>Position</option>
+                    <option value="developer">Developer</option>
+                    <option value="graphic">Graphic Designer</option>
+                </select>
+
+                <div class="w-full flex justify-start items-center gap-2">
+                    <input name="active" type="checkbox" id="activeCheckbox"
+                        onchange="updateCheckbox('activeCheckbox')">
+                    <p class="text-gray-500">Active</p>
+                </div>
+
+                <div class="w-full flex justify-start items-center gap-2">
+                    <input name="intern" type="checkbox" id="internCheckbox"
+                        onchange="updateCheckbox('internCheckbox')">
+                    <p class="text-gray-500">Intern</p>
+                </div>
+
+                <script>
+                    function updateCheckbox(checkboxId) {
+                        const checkbox = document.getElementById(checkboxId);
+                        const inputName = checkbox.getAttribute('name');
+                        const inputValue = checkbox.checked ? 'True' : 'False';
+
+                        // Set the input field value based on checkbox state
+                        const inputField = document.querySelector(`input[name="${inputName}"]`);
+                        inputField.value = inputValue;
+                    }
+                </script>
+
 
-                    <div class="w-full flex justify-start items-center gap-2">
-                        <input name="active" type="checkbox" id="activeCheckbox" onchange="updateCheckbox('activeCheckbox')">
-                        <p class="text-gray-500">Active</p>
-                    </div>
-                    
-                    <div class="w-full flex justify-start items-center gap-2">
-                        <input name="intern" type="checkbox" id="internCheckbox" onchange="updateCheckbox('internCheckbox')">
-                        <p class="text-gray-500">Intern</p>
-                    </div>
-                    
-                    <script>
-                        function updateCheckbox(checkboxId) {
-                            const checkbox = document.getElementById(checkboxId);
-                            const inputName = checkbox.getAttribute('name');
-                            const inputValue = checkbox.checked ? 'True' : 'False';
-                    
-                            // Set the input field value based on checkbox state
-                            const inputField = document.querySelector(`input[name="${inputName}"]`);
-                            inputField.value = inputValue;
-                        }
-                    </script>
-                    
-                
                 <input name="password" type="password" placeholder="Password"
-                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
 
                 <div class="w-full flex justify-center items-center mt-3">
                     <button type="submit"
-                        class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-xl cursor-pointer hover:bg-white hover:text-blue-500">Add Staff</button>
+                        class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-xl cursor-pointer hover:bg-white hover:text-blue-500">Add
+                        Staff</button>
                 </div>
             </div>
         </form>

osinaweb/templates/add-staffposition-modal.html

@@ -0,0 +1,32 @@
+{% 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>
+    <form id="hiddenContent" method="POST">
+        {% csrf_token %}
+        <h1 class="text-slate-800 text-2xl font-semibold text-center">Add Staff Position</h1>
+    
+        <div class="w-full flex justify-center items-center">
+            <input name="name" type="text" placeholder="Position Name"
+            class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4"
+            required>
+        </div>
+    
+        <div class="w-full flex justify-center items-center mt-4">
+            <button type="submit"
+                class="w-fit bg-blue-500 border border-blue-500 rounded-md text-white text-xl px-3 py-2 hover:bg-white hover:text-blue-500">Add</button>
+        </div>
+    </form>
+</body>
+</html>

osinaweb/templates/addfile-modal.html

@@ -19,9 +19,9 @@
         <h1 class="text-slate-800 text-2xl font-semibold text-center">Add File</h1>
 
         <form>
-            <p class="hidden text-blue-500 font-light" id="successMessage">
+            <!-- <p class="hidden text-blue-500 font-light" id="successMessage">
                 Your file has been successfully uploaded. You can either add another file or close the modal.
-            </p>
+            </p> -->
 
             <div class="w-full flex justify-center items-center">
                 <input type="text" placeholder="File Name"
@@ -51,7 +51,7 @@
         </form>
     </div>
 
-    <script>
+    <!-- <script>
         const successMessage = document.getElementById('successMessage');
         const addfileclose = document.getElementById('addfileclose');
         const form = document.querySelector('form');
@@ -68,7 +68,7 @@
         });
 
 
-    </script>
+    </script> -->
 
     <!-- WHEN THE USER CHOOSE A FILE THE NAME OF THE FILE WILL APPEAR IN THE SPAN -->
     <script>

osinaweb/templates/business-details.html

@@ -68,9 +68,11 @@
                 <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">Delete
                     Business</button>
-                <button
-                    class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Edit
-                    Business</button>
+                <a href="{% url 'editbusiness' %}">
+                    <button
+                        class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Edit
+                        Business</button>
+                </a>
             </div>
         </div>
         <div class="w-full flex flex-col gap-4 mt-5">

osinaweb/templates/businesses.html

@@ -118,9 +118,11 @@
                                         <i class="fa fa-eye"></i>
                                     </div>
                                 </a>
-                                <div class="text-[18px] text-blue-500 cursor-pointer">
-                                    <i class="fa fa-edit"></i>
-                                </div>
+                                <a href="{% url 'editbusiness' %}">
+                                    <div class="text-[18px] text-blue-500 cursor-pointer">
+                                        <i class="fa fa-edit"></i>
+                                    </div>
+                                </a>
                                 <div class="text-[18px] text-red-500 cursor-pointer">
                                     <i class="fa fa-trash"></i>
                                 </div>

osinaweb/templates/customer-details.html

@@ -80,9 +80,11 @@
                 <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">Delete
                     Customer</button>
-                <button
-                    class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Edit
-                    Customer</button>
+                <a href="{% url 'editcustomer' %}">
+                    <button
+                        class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Edit
+                        Customer</button>
+                </a>
             </div>
         </div>
         <div class="w-full flex flex-col gap-4 mt-5">
@@ -139,8 +141,6 @@
 
 
         <!-- BUSINESS -->
-
-        {% if customer.business %}
         <div class="mt-4">
             <p class="text-gray-500 text-xl">Business:</p>
             <div class="w-full px-4">
@@ -163,6 +163,7 @@
 
                     <!-- BODY -->
                     <div class="w-full border-t border-gray-300">
+                        {% if customer.business %}
                         <!-- ROW -->
                         <div class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
                             <div class="w-[35%] h-full border-r border-gray-300 flex justify-center items-center">
@@ -180,14 +181,17 @@
                                         <i class="fa fa-eye"></i>
                                     </div>
                                 </a>
-                                <div class="text-[18px] text-blue-500 cursor-pointer">
-                                    <i class="fa fa-edit"></i>
-                                </div>
+                                <a href="{% url 'editbusiness' %}">
+                                    <div class="text-[18px] text-blue-500 cursor-pointer">
+                                        <i class="fa fa-edit"></i>
+                                    </div>
+                                </a>
                                 <div class="text-[18px] text-red-500 cursor-pointer">
                                     <i class="fa fa-trash"></i>
                                 </div>
                             </div>
                         </div>
+                        {% endif %}
                     </div>
                     <div class="w-full">
                         <a href="{% url 'addbusiness' %}">
@@ -197,7 +201,6 @@
                 </div>
             </div>
         </div>
-        {% endif %}
 
     </div>
     <!-- RIGHT SIDE / USERS ACTIVITY -->

osinaweb/templates/customers.html

@@ -146,9 +146,11 @@
                                         <i class="fa fa-eye"></i>
                                     </div>
                                 </a>
-                                <div class="text-[15px] text-blue-500 cursor-pointer">
-                                    <i class="fa fa-edit"></i>
-                                </div>
+                                <a href="{% url 'editcustomer' %}">
+                                    <div class="text-[15px] text-blue-500 cursor-pointer">
+                                        <i class="fa fa-edit"></i>
+                                    </div>
+                                </a>
                                 <div class="text-[15px] text-red-500 cursor-pointer">
                                     <i class="fa fa-trash"></i>
                                 </div>

osinaweb/templates/daily-reports.html

@@ -0,0 +1,221 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+<!-- NOTES SECTION -->
+<div class="w-full h-fit flex justify-between items-center px-10 pb-5">
+    <div class="relative w-full h-fit bg-white shadow-md rounded-md p-5">
+        <div class="w-full flex justify-between items-center">
+            <div>
+                <p class="text-base text-gray-500">Recent Note:</p>
+                <p class="text-slate-700">Send an Email to Salim.</p>
+            </div>
+            <div class="flex justify-end items-center gap-4">
+                <button
+                    class="w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
+                    id="showNotesButton">Show
+                    Notes</button>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
+                    id="addNoteButton">
+                    <i class="fa fa-plus"></i>
+                </button>
+            </div>
+        </div>
+
+        <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
+        <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
+            id="notesContainer">
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
+                <p class="text-base text-slate-800">Send an Email to Salim.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Contact the client.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- DAILY REPORTS USERS ACTIVITY SECTION -->
+<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
+    <!-- LEFT SIDE / USERS SECTION -->
+    <div class="w-[74.5%]">
+        <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
+            <h1 class="text-slate-800 text-[30px] font-semibold">Daily Report</h1>
+
+            <!-- FILTERING -->
+            <div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-between items-center">
+                <div class="flex justify-start items-center gap-5">
+                    <div class="relative h-fit w-fit flex items-center">
+                        <input type="text" placeholder="Enter Staff Username"
+                            class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative">
+                        <button
+                            class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
+                            <i class="fa fa-search"></i>
+                        </button>
+                    </div>
+                </div>
+                <div>
+                    <a href="{% url 'adddailyreport' %}">
+                        <button
+                            class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Add
+                            Daily Report</button>
+                    </a>
+                </div>
+            </div>
+
+            <!-- DAILY REPORTS -->
+            <div class="mt-5 w-full h-fit">
+                <div class="w-full border-x border-t border-gray-300 rounded-t-md ">
+                    <!-- TABLE HEADER -->
+                    <div
+                        class="w-full flex justify-between items-center h-[60px] border-b border-gray-300 rounded-t-md">
+                        <div class="w-full h-full flex justify-start items-center px-4">
+                            <p class="text-slate-800 text-xl">Report By <span
+                                    class="text-blue-500 font-semibold">Nataly.aw</span> On <span
+                                    class="text-blue-500 font-semibold">22-9-2023</span></p>
+                        </div>
+                    </div>
+
+                    <!-- TABLE BODY -->
+                    <div class="w-full">
+                        <!-- 1st row -->
+                        <div class="w-full h-fit flex justify-between items-center border-b border-gray-300">
+                            <div
+                                class="w-full h-full flex justify-start items-center p-4">
+                                <p class="text-gray-600 font-light">
+                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni possimus esse ipsa
+                                    repellat quia velit ducimus temporibus omnis quibusdam inventore ea, consequuntur
+                                    exercitationem molestias. Repellat architecto a laboriosam debitis natus?
+                                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Autem amet dicta
+                                    repudiandae possimus? Natus, possimus quae numquam nostrum corporis quidem vitae
+                                    necessitatibus perferendis tempore. Praesentium, omnis? Animi non enim sint!
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="mt-5 w-full h-fit">
+                <div class="w-full border-x border-t border-gray-300 rounded-t-md ">
+                    <!-- TABLE HEADER -->
+                    <div
+                        class="w-full flex justify-between items-center h-[60px] border-b border-gray-300 rounded-t-md">
+                        <div class="w-full h-full flex justify-start items-center px-4">
+                            <p class="text-slate-800 text-xl">Report By <span
+                                    class="text-blue-500 font-semibold">Aya.rf</span> On <span
+                                    class="text-blue-500 font-semibold">25-9-2023</span></p>
+                        </div>
+                    </div>
+
+                    <!-- TABLE BODY -->
+                    <div class="w-full">
+                        <!-- 1st row -->
+                        <div class="w-full h-fit flex justify-between items-center border-b border-gray-300">
+                            <div
+                                class="w-full h-full flex justify-start items-center p-4">
+                                <p class="text-gray-600 font-light">
+                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni possimus esse ipsa
+                                    repellat quia velit ducimus temporibus omnis quibusdam inventore ea, consequuntur
+                                    exercitationem molestias. Repellat architecto a laboriosam debitis natus?
+                                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Autem amet dicta
+                                    repudiandae possimus? Natus, possimus quae numquam nostrum corporis quidem vitae
+                                    necessitatibus perferendis tempore. Praesentium, omnis? Animi non enim sint!
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- RIGHT SIDE / USERS ACTIVITY -->
+    <div class="w-[23%] bg-white h-fit rounded-md shadow-md p-5">
+        <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
+        <div class="w-full h-fit mt-2">
+
+
+            {% for latest in latest_statuses %}
+            <!-- 1ST ROW -->
+            <div class="w-full flex flex-col py-3">
+                <div class="w-full flex flex-col justify-center items-start gap-2">
+                    <div class="w-full flex justify-between items-center gap-2">
+                        <div class="flex justify-start gap-2">
+                            <div class="w-[45px] h-[45px] rounded-full">
+                                <img src='{{latest.staff.image.url}}' alt="user profile"
+                                    class="w-full h-full object-cover rounded-full">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">{{latest.staff.first_name}}
+                                    {{latest.staff.last_name}}</h1>
+                                <p class="text-sm text-gray-500">{{latest.time}}</p>
+                            </div>
+                        </div>
+                        <div class="cursor-pointer">
+                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
+                        </div>
+                    </div>
+
+                    <!-- Status -->
+                    <div class="w-full">
+                        <p class="text-sm text-gray-500">{{latest.text}}</p>
+                    </div>
+
+                    <!-- Add comment section -->
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
+                        <input type="text" placeholder="Add Comment..."
+                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
+                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
+                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+
+
+        </div>
+    </div>
+</div>
+
+</div>
+
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" 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>
+</div>
+
+<!---------------------- JS SCRIPTS -------------------->
+
+<!-- TO SHOW ALL THE ADDED NOTES BY THE USER WHEN CLICKING ON THE SHOW NOTES BUTTON -->
+<script type="text/javascript" src='{% static "js/show-notes.js" %}'></script>
+
+{% endblock content %}

osinaweb/templates/edit_pages/edit-business.html

@@ -0,0 +1,124 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+
+<div class="w-full px-10 mb-4">
+    <div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
+        <h1 class="text-3xl text-slate-800 text-center font-semibold">
+            Edit Business
+        </h1>
+
+        <form method="POST" action="{% url 'save_business' %}" enctype="multipart/form-data">
+            {% csrf_token %}
+            <input name="name" type="text" placeholder="Name"
+            class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4"
+            value="Business1"
+            required>
+
+            <div class="inbox-box border border-gray-300 py-1 px-3 w-full rounded-md mt-4">
+                <div class="flex items-center justify-between">
+                    <input name="logo" required type="file" id="actual-btn" accept="image/*" hidden/>
+                    <span id="file-name"
+                        class="text-gray-500 text-base focus:outline-none outline-none">Upload Business
+                        Logo</span>
+                    <label for="actual-btn"
+                        class="bg-transparent text-gray-500 border border-white px-4 py-2 h-14 cursor-pointer flex items-center"><i
+                            class="fa fa-upload"></i></label>
+
+                </div>
+            </div>
+
+            <!-- WHEN THE USER CHOOSE A FILE THE NAME OF THE FILE WILL APPEAR IN THE SPAN -->
+            <script>
+                const fileInput = document.getElementById('actual-btn');
+                const fileNameSpan = document.getElementById('file-name');
+
+                fileInput.addEventListener('change', (event) => {
+                    const selectedFiles = event.target.files;
+                    if (selectedFiles.length > 0) {
+                        const fileNames = Array.from(selectedFiles).map(file => file.name).join(', ');
+                        fileNameSpan.textContent = fileNames;
+                    } else {
+                        fileNameSpan.textContent = 'Upload Documents (PDF, docx)';
+                    }
+                });
+            </script>
+
+            <input name="email" type="email" placeholder="Email"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4"
+                value="nataly.aw@ositcom.net"
+                required>
+
+            <input name="financial_number" type="number" placeholder="Financial Number"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4"
+                value="111"
+                required>
+
+            <div class="w-full flex justify-start items-center gap-2 mt-4">
+                <input name="vat"type="checkbox" id="vatCheckbox" onchange="updateVatValue(this.checked)" required>
+                <label class="text-slate-800">Vat</label>
+            </div>
+          
+ 
+            
+            <script>
+            function updateVatValue(checked) {
+              const vatInput = document.querySelector('input[name="vat"]');
+              vatInput.value = checked ? 'True' : 'False';
+            }
+            </script>
+
+            <input name="commercial_registration" type="commercial_registration" placeholder="Commercial registration"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4"
+                value="111"
+                required>
+
+            <input name="phone_number" type="number" placeholder="Mobile Number"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4"
+                value="111"
+                required>
+
+            <input name="website" type="text" placeholder="Website"
+                value="wwww.google.com"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4">
+
+
+            <select name="business_type" id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-4">
+                <option value="" disabled>Business Type</option>
+                <option value="ASSOCIATIONS" selected>Associations</option>
+                <option value="HEALTHCARE">Healthcare</option>
+                <option value="LUXURY">Luxury</option>
+                <option value="MANUFACTURING">Manufacturing</option>
+                <option value="NON-PROFIT">Non-Profit</option>
+                <option value="Education">Education</option>
+                <option value="ENTERTAINMENT">Entertainment</option>
+                <option value="LOGISTICS">Logistics</option>
+                <option value="RETAIL">Retail</option>
+                <option value="AUTOMOTIVE">Automotive</option>
+            </select>
+
+            <div class="w-full flex justify-center items-center mt-3">
+                <button type="submit"
+                    class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-xl cursor-pointer hover:bg-white hover:text-blue-500">Save</button>
+            </div>
+        </form>
+
+    </div>
+</div>
+</div>
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" 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>
+</div>
+
+{% endblock content %}

osinaweb/templates/edit_pages/edit-customer.html

@@ -0,0 +1,124 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+
+<div class="w-full px-10 mb-4">
+    <div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
+        <h1 class="text-3xl text-slate-800 text-center font-semibold">
+            Edit Customer
+        </h1>
+
+        <form method="POST" action="{% url 'save_customer' %}">
+            {% csrf_token %}
+            <div class="w-full flex flex-col gap-3 justify-center items-center mt-5">
+
+                <input name="first_name" type="text" placeholder="First Name"
+                value="Salim"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <input name="last_name" type="text" placeholder="Last Name"
+                value="Elliye"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <input name="email" type="email" placeholder="Email"
+                value="salim@ositcom.net"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <input name="mobile_number" type="number" placeholder="Mobile Number"
+                value="71197823"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <input name="personal_website" type="url" placeholder="Personal Website"
+                value="www.google.com"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
+                
+                <select name="status"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500"
+                    required>
+                    <option value="" disabled>Status</option>
+                    <option value="Active" selected>Active</option>
+                    <option value="Suspended">Suspended</option>
+                    <option value="Terminated">Terminated</option>
+                </select>
+
+                <select name="reference"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500"
+                    required>
+                    <option value="" disabled>Reference</option>
+                    <option value="" selected>Reference 1</option>
+                    {% for reference in references %}
+                    <option value="{{reference.id}}">{{reference.name}}</option>
+                    {% endfor %}
+                </select>
+
+                <select id="businessTypeSelect"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                    <option value="" disabled>Type</option>
+                    <option value="business" selected>Business</option>
+                    <option value="personal">Personal</option>
+                </select>
+
+                <div class="w-[80%] mx-auto border border-gray-300 rounded-md py-5 px-3 bg-white hidden"
+                    id="addBusinessContainer">
+                    <h1 class="text-3xl text-slate-800 text-center font-semibold">
+                        Select Business
+                    </h1>
+
+                    <div class="w-full mt-2">
+                        <select name="business" id="businessSelect"
+                            class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                            <option value="" disabled>Business Name</option>
+                            <option value="" selected>Business1</option>
+                            {% for business in businesses %}
+                            <option value="{{business.id}}">{{business.name}}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                </div>
+
+
+                <!-- MAKE THE "ADDBUSINESSCONTAINER" VISIBLE WHEN CHOOSING THE CUSTOMER TYPE AS BUSINESS  -->
+                <script>
+                    const businessTypeSelect = document.getElementById('businessTypeSelect');
+                    const addBusinessContainer = document.getElementById('addBusinessContainer');
+
+                    businessTypeSelect.addEventListener('change', function () {
+                        if (businessTypeSelect.value === 'business') {
+                            addBusinessContainer.style.display = 'block';
+                            addBusinessContainer.scrollIntoView({ behavior: 'smooth' });
+                        } else {
+                            addBusinessContainer.style.display = 'none';
+                        }
+                    });
+
+                </script>
+
+                <input name="password" type="password" placeholder="Password"
+                value="1234567"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <div class="w-full flex justify-center items-center mt-3">
+                    <button type="submit"
+                        class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-xl cursor-pointer hover:bg-white hover:text-blue-500">Save</button>
+                </div>
+            </div>
+        </form>
+
+    </div>
+</div>
+</div>
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" 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>
+</div>
+
+{% endblock content %}

osinaweb/templates/edit_pages/edit-epic.html

@@ -0,0 +1,69 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+
+<div class="w-full px-10 mb-4">
+    <div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
+        <h1 class="text-3xl text-slate-800 text-center font-semibold">
+            Edit Epic
+        </h1>
+
+        <form class="mx-auto w-full flex flex-col gap-3 justify-center items-center mt-5" method="POST" action="{% url 'save_epic' %}">
+            {% csrf_token %}
+            <input required name="title" type="text" placeholder="Epic Name"
+            value="Epic 1"
+            class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
+
+            <select required name="project" id="project" class="hidden w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option value="{{ project.id }}" selected>{{ project.name }}</option>
+            </select>
+                
+
+            <textarea required name="description" type="text" placeholder="Epic Description" rows="5" cols="5"
+                class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non eos nostrum explicabo assumenda totam magnam asperiores enim atque recusandae, eaque repudiandae optio nemo, ducimus, doloremque praesentium sunt! Ipsum, repellat hic.
+            </textarea>
+
+            <select required name="status" id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option value="" disabled>Select Status</option>
+                <option value="Open" selected>Open</option>
+                <option value="Closed">Closed</option>
+            </select>
+
+            <div class="w-full">
+                <label class="text-gray-500">Start Date:</label>
+                <input required name="start_date" type="date" id="date" name="date"
+                value="2023-09-22"
+                class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
+            </div>
+
+            <div class="w-full">
+                <label class="text-gray-500">End Date:</label>
+                <input required name="end_date" type="date" id="date" name="date"
+                value="2023-09-22"
+                class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
+            </div>
+
+            <div class="w-full flex justify-center items-center mt-3">
+                <button type="submit"
+                    class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-xl cursor-pointer hover:bg-white hover:text-blue-500">Save</button>
+            </div>
+        </form>
+    </div>
+</div>
+</div>
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" 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>
+</div>
+
+{% endblock content %}

osinaweb/templates/edit_pages/edit-project-type.html

@@ -0,0 +1,44 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+
+<div class="w-full px-10 mb-4">
+    <div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
+        <h1 class="text-3xl text-slate-800 text-center font-semibold">
+            Edit Project Type
+        </h1>
+
+        <form id="hiddenContent"  method="POST" action="{% url 'save_projecttype' %}">
+            {% csrf_token %}
+    
+            <div class="w-full flex justify-center items-center">
+                <input name="name" type="text" placeholder="Project Type Name"
+                value="name1"
+                class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4"
+                required>
+            </div>
+        
+            <div class="w-full flex justify-center items-center mt-4">
+                <button type="submit"
+                    class="w-fit bg-blue-500 border border-blue-500 rounded-md text-white text-xl px-3 py-2 hover:bg-white hover:text-blue-500">Save</button>
+            </div>
+        </form>
+
+    </div>
+</div>
+</div>
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" 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>
+</div>
+
+{% endblock content %}

osinaweb/templates/edit_pages/edit-project.html

@@ -0,0 +1,152 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+
+<div class="w-full px-10 mb-4">
+    <div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
+        <h1 class="text-3xl text-slate-800 text-center font-semibold">
+            Edit Project
+        </h1>
+
+        <form class="w-full flex flex-col gap-3 justify-center items-center mt-5" method="POST"
+            action="{% url 'save_project' %}">
+            {% csrf_token %}
+            <input required name="name" type="text" placeholder="Project Name"
+            value="Winabig"
+            class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
+
+            <select required name="customer" id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option value="" disabled>Clients</option>
+                <option value="" selected>Nataly</option>
+                {% for customer in customers %}
+                <option value="{{customer.user.username}}">{{customer.first_name}} {{customer.last_name}}</option>
+                {% endfor %}
+            </select>
+
+            <select required name="manager" id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option value="" disabled>Project Manager</option>
+                <option value="" selected>Emile</option>
+                {% for staff in staffs %}
+                <option value="{{staff.user.username}}">{{staff.first_name}} {{staff.last_name}}</option>
+                {% endfor %}
+            </select>
+
+            <select required name="members" id=""
+                class="w-full h-[100px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500"
+                multiple>
+                <option value="" disabled>Member(s)</option>
+                <option value="" selected>Salim</option>
+                {% for staff in staffs %}
+                <option value="{{staff.user.username}}">{{staff.first_name}} {{staff.last_name}}</option>
+                {% endfor %}
+            </select>
+
+            <select required name="status" id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option value="" disabled>Status</option>
+                <option value="Pending">Pending</option>
+                <option value="Active" selected>Active</option>
+                <option value="Completed">Completed</option>
+                <option value="Cancelled">Cancelled</option>
+            </select>
+
+            <select required name="members" id=""
+                class="w-full h-[100px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500"
+                multiple>
+                <option value="" disabled>Project Type</option>
+                <option value="" selected>Development</option>
+                {%for type in project_types %}
+                <option value="{{type.id}}">{{type.name}}</option>
+                {% endfor %}
+            </select>
+
+            <textarea required name="details" type="text" placeholder="Project Details" rows="5" cols="5"
+                class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum magnam ea temporibus commodi aspernatur culpa totam similique voluptate veritatis? Odit, excepturi? Itaque suscipit libero iure corrupti consequatur soluta expedita quod?
+            </textarea>
+
+            <div class="w-full p-3 border border-gray-300 mt-4 rounded-md">
+                <div class="w-full mt-2" id="addReqContainer">
+                    <input name="requirements" type="text" placeholder="Requirement"
+                    value="One"
+                    class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none">
+                </div>
+
+                <!-- THE CLONED CONTAINER  -->
+                <div class="mt-2 hidden" id="addReqContainerTemplate">
+                    <div class="w-full flex flex-col gap-2">
+                        <input name="requirements" type="text" placeholder="Requirement"
+                            class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none">
+                        <button
+                            class="w-full h-[55px] rounded-md bg-gray-300 border-none outline-none shadow-md text-white text-xl cursor-pointer py-2"
+                            id="removeReqButton" type="button">
+                            <i class="fa fa-minus"></i>
+                        </button>
+                    </div>
+                </div>
+
+                <button
+                    class="w-full h-[55px] rounded-md bg-gray-400 border-none outline-none shadow-md text-white text-xl cursor-pointer py-2 mt-2"
+                    id="addReqButton" type="button">
+                    <i class="fa fa-plus"></i>
+                </button>
+            </div>
+
+            <script>
+                const addReqButton = document.getElementById("addReqButton");
+                const addReqContainerTemplate = document.getElementById("addReqContainerTemplate");
+                const addReqContainer = document.getElementById("addReqContainer");
+
+                addReqButton.addEventListener("click", function () {
+                    // Clone the template and remove the "hidden" class
+                    const newContainer = addReqContainerTemplate.cloneNode(true);
+                    newContainer.classList.remove("hidden");
+
+                    // Add an event listener to the new container's remove button
+                    const removeReqButton = newContainer.querySelector("#removeReqButton");
+                    removeReqButton.addEventListener("click", function () {
+                        // Remove the clicked container when the remove button is clicked
+                        newContainer.remove();
+                    });
+
+                    addReqContainer.appendChild(newContainer);
+                });
+            </script>
+
+            <div class="w-full">
+                <label class="text-gray-500">Start Date:</label>
+                <input required name="start_date" type="date" id="date" name="date"
+                value="2023-09-22"
+                class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
+            </div>
+
+            <div class="w-full">
+                <label class="text-gray-500">End Date:</label>
+                <input required name="end_date" type="date" id="date" name="date"
+                value="2023-10-22"
+                class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
+            </div>
+            <div class="w-full flex justify-center items-center mt-3">
+                <button type="submit"
+                class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-xl cursor-pointer hover:bg-white hover:text-blue-500">Save</button>
+            </div>
+        </form>
+    </div>
+</div>
+</div>
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" 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>
+</div>
+
+{% endblock content %}

osinaweb/templates/edit_pages/edit-reference.html

@@ -0,0 +1,48 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+
+<div class="w-full px-10 mb-4">
+    <div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
+        <h1 class="text-3xl text-slate-800 text-center font-semibold">
+            Edit Reference
+        </h1>
+
+        <form id="hiddenContent" method="POST" action="{% url 'save_reference' %}">
+            {% csrf_token %}
+        
+            <div class="w-full flex flex-col  justify-center items-center">
+                <input name="name" type="text" placeholder="Reference Name"
+                value="Reference 1"
+                class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4"
+                required>
+
+                <input name="date" type="date" id="date" 
+                value="2023-09-22"
+                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-blue-500 border border-blue-500 rounded-md text-white text-xl px-3 py-2 hover:bg-white hover:text-blue-500">Save</button>
+            </div>
+        </form>
+
+    </div>
+</div>
+</div>
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" 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>
+</div>
+
+{% endblock content %}

osinaweb/templates/edit_pages/edit-staff-position.html

@@ -0,0 +1,43 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+
+<div class="w-full px-10 mb-4">
+    <div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
+        <h1 class="text-3xl text-slate-800 text-center font-semibold">
+            Edit Staff Position
+        </h1>
+
+        <form id="hiddenContent" method="POST">
+            {% csrf_token %}
+            <div class="w-full flex justify-center items-center">
+                <input name="name" type="text" placeholder="Staff Position Name"
+                value="one"
+                class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4"
+                required>
+            </div>
+        
+            <div class="w-full flex justify-center items-center mt-4">
+                <button type="submit"
+                    class="w-fit bg-blue-500 border border-blue-500 rounded-md text-white text-xl px-3 py-2 hover:bg-white hover:text-blue-500">Save</button>
+            </div>
+        </form>
+
+    </div>
+</div>
+</div>
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" 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>
+</div>
+
+{% endblock content %}

osinaweb/templates/edit_pages/edit-staff.html

@@ -0,0 +1,139 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+
+<div class="w-full px-10 mb-4">
+    <div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
+        <h1 class="text-3xl text-slate-800 text-center font-semibold">
+            Edit Staff
+        </h1>
+
+        <form method="POST" action="{% url 'save_staff' %}" enctype="multipart/form-data">
+            {% csrf_token %}
+            <div class="w-full flex flex-col gap-3 justify-center items-center mt-5">
+                <div class="w-[100px] h-[100px] rounded-full border border-gray-200" id="image-container">
+                    <img src="{% static 'images/default-user.png' %}" alt="" srcset="" id="" class="rounded-full w-full h-full">
+                </div>
+
+                <div class="inbox-box border border-gray-300 py-1 px-3 w-full rounded-md">
+                    <div class="flex items-center justify-between">
+                        <input name="image" type="file" id="actual-btn" accept="image/*" hidden />
+                        <span id="file-name" class="text-gray-500 text-base focus:outline-none outline-none">Upload
+                            Profile Picture</span>
+                        <label for="actual-btn"
+                            class="bg-transparent text-gray-500 border border-white px-4 py-2 h-14 cursor-pointer flex items-center"><i
+                                class="fa fa-upload" style="font-size: 20px;"></i></label>
+                    </div>
+                </div>
+
+
+
+                <!-- WHEN THE USER CHOOSE A FILE THE NAME OF THE FILE WILL APPEAR IN THE SPAN AND THE UPLOADED IMAGE WILL APPEAR IN THE USER PROFILE IMAGE CONTAINER -->
+                <script>
+                    const fileInput = document.getElementById('actual-btn');
+                    const fileNameSpan = document.getElementById('file-name');
+                    const imageContainer = document.getElementById('image-container');
+
+                    fileInput.addEventListener('change', (event) => {
+                        const selectedFiles = event.target.files;
+                        if (selectedFiles.length > 0) {
+                            const file = selectedFiles[0];
+                            const fileReader = new FileReader();
+
+                            fileReader.onload = function () {
+                                const imgElement = document.createElement('img');
+                                imgElement.src = fileReader.result;
+                                imgElement.alt = 'Uploaded Image';
+                                imgElement.classList.add('w-full', 'h-full', 'rounded-full', 'object-cover');
+
+                                // Clear any previous images and append the new one
+                                imageContainer.innerHTML = '';
+                                imageContainer.appendChild(imgElement);
+
+                                // Update the text in the file input
+                                fileNameSpan.textContent = file.name;
+                            };
+
+                            // Read the selected file as a data URL
+                            fileReader.readAsDataURL(file);
+                        } else {
+                            fileNameSpan.textContent = 'Upload Profile Picture';
+                            imageContainer.innerHTML = ''; // Clear the container if no file is selected
+                        }
+                    });
+
+
+                </script>
+
+                <input name="first_name" type="text" placeholder="First Name"
+                    value="Nataly"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <input name="last_name" type="text" placeholder="Last Name"
+                    value="Ab"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <input name="email" type="email" placeholder="Email"
+                    value="nataly.aw@ositcom.com"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <input name="mobile_number" type="number" placeholder="Mobile Number"
+                    value="71196733"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <input name="position" type="text" placeholder="Position"
+                    value="Developer"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                    <div class="w-full flex justify-start items-center gap-2">
+                        <input name="active" type="checkbox" id="activeCheckbox" onchange="updateCheckbox('activeCheckbox')">
+                        <p class="text-gray-500">Active</p>
+                    </div>
+                    
+                    <div class="w-full flex justify-start items-center gap-2">
+                        <input name="intern" type="checkbox" id="internCheckbox" onchange="updateCheckbox('internCheckbox')">
+                        <p class="text-gray-500">Intern</p>
+                    </div>
+                    
+                    <script>
+                        function updateCheckbox(checkboxId) {
+                            const checkbox = document.getElementById(checkboxId);
+                            const inputName = checkbox.getAttribute('name');
+                            const inputValue = checkbox.checked ? 'True' : 'False';
+                    
+                            // Set the input field value based on checkbox state
+                            const inputField = document.querySelector(`input[name="${inputName}"]`);
+                            inputField.value = inputValue;
+                        }
+                    </script>
+                    
+                
+                <input name="password" type="password" placeholder="Password"
+                value="12345677"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <div class="w-full flex justify-center items-center mt-3">
+                    <button type="submit"
+                        class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-xl cursor-pointer hover:bg-white hover:text-blue-500">Save</button>
+                </div>
+            </div>
+        </form>
+
+    </div>
+</div>
+</div>
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" 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>
+</div>
+
+{% endblock content %}

osinaweb/templates/edit_pages/edit-tag.html

@@ -0,0 +1,44 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+
+<div class="w-full px-10 mb-4">
+    <div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
+        <h1 class="text-3xl text-slate-800 text-center font-semibold">
+            Edit Tag
+        </h1>
+
+        <form id="hiddenContent" method="POST" action="{% url 'save_tag' %}">
+            {% csrf_token %}
+        
+            <div class="w-full flex justify-center items-center">
+                <input name="name" type="text" placeholder="Tag Name"
+                value="Tag1"
+                class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4"
+                required>
+            </div>
+        
+            <div class="w-full flex justify-center items-center mt-4">
+                <button type="submit"
+                    class="w-fit bg-blue-500 border border-blue-500 rounded-md text-white text-xl px-3 py-2 hover:bg-white hover:text-blue-500">Save</button>
+            </div>
+        </form>
+
+    </div>
+</div>
+</div>
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" 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>
+</div>
+
+{% endblock content %}

osinaweb/templates/edit_pages/edit-task.html

@@ -0,0 +1,128 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+
+<div class="w-full px-10 mb-4">
+    <div class="w-full h-full shadow-md rounded-md mt-5 py-5 px-3 bg-white">
+        <h1 class="text-3xl text-slate-800 text-center font-semibold">
+            Edit Task
+        </h1>
+
+        <form class="w-full flex flex-col gap-3 justify-center items-center mt-5" method="POST"
+            action="{% url 'save_task' %}">
+            {% csrf_token %}
+            <input required name="name" type="text" placeholder="Task Name"
+            value="Task1"
+            class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
+
+            <select required name="project" id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option disabled>Select Project</option>
+                <option selected>Winabig</option>
+                <option value="{{project.id}}">{{project.name}}</option>
+            </select>
+
+            <select required name="epic" id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option value="" disabled>Select Epic</option>
+                <option value="" selected>Epic1</option>
+                {% for epic in epics_of_my_project %}
+                <option value="{{epic.id}}">{{epic.title}}</option>
+                {% endfor %}
+            </select>
+
+            <select required name="status" id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option value="" disabled>Status</option>
+                <option value="Open" selected>Open</option>
+                <option value="Working On">Working On</option>
+                <option value="Closed">Closed</option>
+            </select>
+
+            <select name="assigned_to" required id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option value="" disabled>Assigned To</option>
+                <option value="" selected>Nataly</option>
+                {% for staff in staffs %}
+                <option value="{{staff.id}}">{{staff.first_name}} {{staff.last_name}}</option>
+                {% endfor %}
+            </select>
+
+            <textarea required name="description" type="text" placeholder="Task Description" rows="5" cols="5"
+                class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab laboriosam cum temporibus itaque vel atque, obcaecati voluptates porro dolorem, magnam quidem nemo corrupti ullam dicta excepturi pariatur inventore voluptatem beatae!
+            </textarea>
+
+            <div class="w-full">
+                <label class="text-gray-500">Extra:</label>
+                <select required name="extra" id=""
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-1">
+                    <option value="True">Yes</option>
+                    <option value="False" selected>No</option>
+                </select>
+            </div>
+
+            <div class="w-full">
+                <label class="text-gray-500">Start Date:</label>
+                <input required name="start_date" type="date" id="date" name="date"
+                value="2023-09-22"
+                class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
+            </div>
+
+            <div class="w-full">
+                <label class="text-gray-500">End Date:</label>
+                <input required name="end_date" type="date" id="date" name="date"
+                value="2023-09-22"
+                class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
+            </div>
+
+            <div class="inbox-box border border-gray-300 py-1 px-3 w-full rounded-md">
+                <div class="flex items-center justify-between">
+                    <input name="cv" type="file" id="actual-btn" accept=".pdf,.docx" hidden multiple />
+                    <span id="file-name" class="text-gray-500 text-base focus:outline-none outline-none">Upload
+                        Document(s)</span>
+                    <label for="actual-btn"
+                        class="bg-transparent text-gray-500 border border-white py-2 h-14 cursor-pointer flex items-center"><i
+                            class="fa fa-upload"></i></label>
+
+                </div>
+            </div>
+
+            <!-- WHEN THE USER CHOOSE A FILE THE NAME OF THE FILE WILL APPEAR IN THE SPAN -->
+            <script>
+                const fileInput = document.getElementById('actual-btn');
+                const fileNameSpan = document.getElementById('file-name');
+
+                fileInput.addEventListener('change', (event) => {
+                    const selectedFiles = event.target.files;
+                    if (selectedFiles.length > 0) {
+                        const fileNames = Array.from(selectedFiles).map(file => file.name).join(', ');
+                        fileNameSpan.textContent = fileNames;
+                    } else {
+                        fileNameSpan.textContent = 'Upload Documents (PDF, docx)';
+                    }
+                });
+            </script>
+
+            <div class="w-full flex justify-center items-center mt-3">
+                <button type="submit"
+                    class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-xl cursor-pointer hover:bg-white hover:text-blue-500">Save</button>
+            </div>
+        </form>
+    </div>
+</div>
+</div>
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" 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>
+</div>
+
+{% endblock content %}

osinaweb/templates/index.html

@@ -8,7 +8,8 @@
             <div>
                 <p class="text-base text-gray-500">Recent Note:</p>
                 <div class="flex justify-start items-center gap-2">
-                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full" style="background-color: {{ last_note_color }};">
+                    <div class="w-[13px] h-[13px] bg-red-200 rounded-full"
+                        style="background-color: {{ last_note_color }};">
 
                     </div>
                     <p class="text-slate-700">{{recent_note.text}}</p>
@@ -20,7 +21,8 @@
                     id="showNotesButton">Show
                     Notes</button>
                 <button
-                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addNoteButton" data-modal-url="{% url 'addnote' %}">
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addNoteButton"
+                    data-modal-url="{% url 'addnote' %}">
                     <i class="fa fa-plus"></i>
                 </button>
             </div>
@@ -118,7 +120,8 @@
 
                             <div class="flex justify-start items-center gap-2">
                                 <p class="text-gray-400  text-base">Assigned To:</p>
-                                <p class="text-slate-700 text-base">{{task.assigned_to.first_name}} {{task.assigned_to.last_name}}</p>
+                                <p class="text-slate-700 text-base">{{task.assigned_to.first_name}}
+                                    {{task.assigned_to.last_name}}</p>
                             </div>
 
                             <div class="flex justify-start items-center gap-2">
@@ -142,26 +145,35 @@
                         <button
                             class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Close</button>
                         <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 updateStatusButton" data-modal-url="{% url 'updatestatus' %}">Update
+                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 updateStatusButton"
+                            data-modal-url="{% url 'updatestatus' %}">Update
                             Status</button>
                         <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 addTimeButton" data-modal-url="{% url 'addtime' %}">Add
+                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 addTimeButton"
+                            data-modal-url="{% url 'addtime' %}">Add
                             Time</button>
-                        <button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white deleteTaskButton" data-modal-url="{% url 'deletetask' %}">Delete</button>
                         <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-blue-500 text-white">Update</button>
+                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white deleteTaskButton"
+                            data-modal-url="{% url 'deletetask' %}">Delete</button>
+                        <a href="{% url 'edittask' %}" class="w-[33.33%]">
+                            <button
+                                class="w-full p-2 border border-gray-200 text-base h-[70px] bg-blue-500 text-white">Edit</button>
+                        </a>
                         <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 showPointsButton" data-modal-url="{% url 'showpoints' %}">Show
+                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 showPointsButton"
+                            data-modal-url="{% url 'showpoints' %}">Show
                             Points</button>
                         <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 addPointButton" data-modal-url="{% url 'addpoint' %}">Add
+                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 addPointButton"
+                            data-modal-url="{% url 'addpoint' %}">Add
                             Point</button>
                         <a href="{% url 'detailed-task' task.task_id %}" class="w-[33.33%]">
                             <button
                                 class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
                         </a>
                         <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md timelineButton" data-modal-url="{% url 'timeline' %}">Timeline</button>
+                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md timelineButton"
+                            data-modal-url="{% url 'timeline' %}">Timeline</button>
                     </div>
                 </div>
             </div>
@@ -187,7 +199,8 @@
                                     class="w-full h-full object-cover rounded-full">
                             </div>
                             <div class="flex flex-col">
-                                <h1 class="text-sm text-slate-700 font-semibold">{{latest.staff.first_name}} {{latest.staff.last_name}}</h1>
+                                <h1 class="text-sm text-slate-700 font-semibold">{{latest.staff.first_name}}
+                                    {{latest.staff.last_name}}</h1>
                                 <p class="text-sm text-gray-500">{{latest.time}}</p>
                             </div>
                         </div>

osinaweb/templates/main.html

@@ -14,7 +14,8 @@
 <body class="bg-gray-200">
     <div class="w-full flex">
         <!-- FIXED SIDE NAVBAR -->
-        <div class="fixed h-screen w-[300px] bg-slate-700 pt-9 flex flex-col justify-between flex-grow overflow-y-auto fixedSideHeader" id="fixedSideHeader">
+        <div class="fixed h-screen w-[300px] bg-slate-700 pt-9 flex flex-col justify-between flex-grow overflow-y-auto fixedSideHeader"
+            id="fixedSideHeader">
             <!-- Menu Items -->
             <div class="w-full h-fit flex flex-col justify-center items-center px-5">
                 <div class="mb-14 w-full">
@@ -31,51 +32,6 @@
                     <a href="{% url 'home' %}" class="text-white text-xl">Home</a>
                 </div>
 
-                    <!-- UTILS -->
-                    <div class="w-full menu-container">
-                        <div
-                            class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
-                            <div class="w-full flex justify-start items-center gap-3">
-                                <i class="fas fa-cogs" style="font-size: 22px; color: white;"></i>
-                                <p class="text-white text-xl">Utilities</p>
-                            </div>
-                            <div>
-                                <i class="angleDown fa fa-angle-down" style="font-size: 25px; color: white;"></i>
-                                <i class="angleUp fa fa-angle-up" style="font-size: 25px; color: white; display: none;"></i>
-                            </div>
-                        </div>
-    
-                        <div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
-                            <a href="{% url 'projecttypes' %}">
-                                <div
-                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
-                                    <p class="text-white">Project Types</p>
-                                </div>
-                            </a>
-    
-                            <a href="{% url 'references' %}">
-                                <div
-                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
-                                    <p class="text-white">References</p>
-                                </div>
-                            </a>
-    
-                            <a href="{% url 'tags' %}">
-                                <div
-                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
-                                    <p class="text-white">Tags</p>
-                                </div>
-                            </a>
-
-                            <a>
-                                <div
-                                    class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
-                                    <p class="text-white">Countries</p>
-                                </div>
-                            </a>
-                        </div>
-                    </div>
-
                 <!-- CUSTOMERS -->
                 <div class="w-full menu-container">
                     <div
@@ -143,11 +99,17 @@
                             </div>
                         </a>
 
-                        <a href="tickets.html">
-                            <div class="w-full flex justify-start items-center gap-3 text-white py-2 text-[18px]">
+                        <a>
+                            <div class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px]">
                                 <p class="text-white">My Tickets</p>
                             </div>
                         </a>
+
+                        <a href="{% url 'dailyreports' %}">
+                            <div class="w-full flex justify-start items-center gap-3 text-white py-2 text-[18px]">
+                                <p class="text-white">Daily Reports</p>
+                            </div>
+                        </a>
                     </div>
                 </div>
 
@@ -171,6 +133,58 @@
                     </div>
                 </div>
 
+                <!-- UTILITIES -->
+                <div class="w-full menu-container">
+                    <div
+                        class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
+                        <div class="w-full flex justify-start items-center gap-3">
+                            <i class="fas fa-cogs" style="font-size: 22px; color: white;"></i>
+                            <p class="text-white text-xl">Utilities</p>
+                        </div>
+                        <div>
+                            <i class="angleDown fa fa-angle-down" style="font-size: 25px; color: white;"></i>
+                            <i class="angleUp fa fa-angle-up" style="font-size: 25px; color: white; display: none;"></i>
+                        </div>
+                    </div>
+
+                    <div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
+                        <a href="{% url 'projecttypes' %}">
+                            <div
+                                class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
+                                <p class="text-white">Project Types</p>
+                            </div>
+                        </a>
+
+                        <a href="{% url 'references' %}">
+                            <div
+                                class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
+                                <p class="text-white">References</p>
+                            </div>
+                        </a>
+
+                        <a href="{% url 'tags' %}">
+                            <div
+                                class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
+                                <p class="text-white">Tags</p>
+                            </div>
+                        </a>
+
+                        <a href="{% url 'staffpositions' %}">
+                            <div
+                                class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
+                                <p class="text-white">Staff Positions</p>
+                            </div>
+                        </a>
+
+                        <a>
+                            <div
+                                class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
+                                <p class="text-white">Countries</p>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+
                 <div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
                     <i class="fa fa-check-square" style="font-size: 22px; color: white;"></i>
                     <p class="text-white text-xl">Activity</p>
@@ -183,7 +197,8 @@
             </div>
 
             <!-- Footer -->
-            <div class="w-[300px] h-fit bg-slate-800 flex flex-col items-center justify-center gap-2 py-2 fixed bottom-0 inset-x-0">
+            <div
+                class="w-[300px] h-fit bg-slate-800 flex flex-col items-center justify-center gap-2 py-2 fixed bottom-0 inset-x-0">
                 <div class="w-full flex flex-col justify-center items-center">
                     <p class="text-gray-500 font-light text-sm">Powered By Ositcom</p>
                     <p class="text-gray-500 font-light text-sm">Copyrights © 2023 All Rights Reserved</p>
@@ -209,7 +224,8 @@
                                     class="text-slate-700 font-semibold">{{last_status.text}}</span></p>
                         </div>
                         <button
-                            class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addStatusButton" data-modal-url="{% url 'addstatus' %}">
+                            class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addStatusButton"
+                            data-modal-url="{% url 'addstatus' %}">
                             <i class="fa fa-plus"></i>
                         </button>
                     </div>
@@ -218,7 +234,8 @@
                 <div>
                     <div class="w-fit flex justify-between items-center gap-3">
                         <div class="flex justify-center items-center gap-2">
-                            <p class="text-gray-400">{{request.user.staffprofile.first_name}} {{request.user.staffprofile.last_name}}</p>
+                            <p class="text-gray-400">{{request.user.staffprofile.first_name}}
+                                {{request.user.staffprofile.last_name}}</p>
                             <i class="fa fa-angle-down" style="color: grey;"></i>
                         </div>
 

osinaweb/templates/project-details.html

@@ -111,9 +111,11 @@
                 <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">Delete
                     Project</button>
-                <button
-                    class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Edit
-                    Project</button>
+                <a href="{% url 'editproject' %}">
+                    <button
+                        class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Edit
+                        Project</button>
+                </a>
             </div>
         </div>
         <div class="w-full flex flex-col gap-4 mt-5">
@@ -236,7 +238,8 @@
                             {%endfor%}
                         </div>
                         <div class="w-full">
-                            <button class="w-full border-b border-gray-300 text-gray-500 py-3 bg-gray-100 addFileButton" data-modal-url="{% url 'addfile' %}">ADD FILE</button>
+                            <button class="w-full border-b border-gray-300 text-gray-500 py-3 bg-gray-100 addFileButton"
+                                data-modal-url="{% url 'addfile' %}">ADD FILE</button>
                         </div>
                     </div>
                 </div>
@@ -279,7 +282,9 @@
                         </div>
 
                         <div class="w-full">
-                            <button class="w-full border-b border-gray-300 text-gray-500 py-3 bg-gray-100 addCredentialsButton" data-modal-url="{% url 'addcredentials' %}">ADD
+                            <button
+                                class="w-full border-b border-gray-300 text-gray-500 py-3 bg-gray-100 addCredentialsButton"
+                                data-modal-url="{% url 'addcredentials' %}">ADD
                                 CREDENTIALS</button>
                         </div>
 
@@ -320,8 +325,8 @@
                             </select>
                         </form>
                     </div>
-                    <div class="w-full flex justify-end gap-[3%] pl-5">
-                        <div class="w-[50%] justify-start items-center gap-2 hidden" id="epicDetails">
+                    <div class="w-fit flex flex-col items-center gap-2">
+                        <div class="w-fit justify-start items-center gap-2 hidden" id="epicDetails">
                             <p class="text-gray-500 font-light">Start Date: <span id="startDate"
                                     class="text-slate-800"></span>
                             </p>
@@ -329,12 +334,18 @@
                                     class="text-slate-800"></span>
                             </p>
                         </div>
-                        <div class="w-[50%] flex justify-end items-center gap-2">
+                        <div class="w-fit flex justify-end items-center gap-2">
                             <a href="{% url 'createepic' project.project_id %}">
                                 <button
                                     class="w-fit bg-blue-500 border border-blue-500 text-white text-base py-2 px-3 rounded-md hover:bg-transparent hover:text-blue-500 duration-300">Create
                                     Epic</button>
                             </a>
+                            <a href="{% url 'editepic' %}">
+                                <button id="editEpicButton"
+                                    class="w-fit bg-blue-500 border border-blue-500 text-white text-base py-2 px-3 rounded-md cursor-not-allowed opacity-30 duration-300 epicButtons"
+                                    disabled>Edit
+                                    Epic</button>
+                            </a>
                             <a href="{% url 'createtaskepic' %}">
                                 <button id="createTaskButton"
                                     class="w-fit bg-blue-500 border border-blue-500 text-white text-base py-2 px-3 rounded-md cursor-not-allowed opacity-30 duration-300 epicButtons"
@@ -369,7 +380,7 @@
 
             </div>
 
-                
+
             <div class="w-full px-4 hidden" id="epicRelatedTasks">
             </div>
 
@@ -377,17 +388,17 @@
                 document.addEventListener("DOMContentLoaded", function () {
                     var epicSelect = document.getElementById("epicSelect");
                     var epicRelatedTasks = document.getElementById("epicRelatedTasks");
-        
+
                     epicSelect.addEventListener("change", function () {
                         // Get the selected option element
                         var selectedOption = epicSelect.options[epicSelect.selectedIndex];
-        
+
                         // Check if an option other than the default "EPICS" is selected
                         if (selectedOption.value !== "") {
                             // Get the data attributes (start-date and end-date) from the selected option
                             var startDate = selectedOption.getAttribute("data-start-date");
                             var endDate = selectedOption.getAttribute("data-end-date");
-        
+
                             // Fetch related tasks based on the selected epic ID
                             fetchTasks(selectedOption.value, startDate, endDate);
                         } else {
@@ -395,7 +406,7 @@
                             epicRelatedTasks.style.display = "none";
                         }
                     });
-        
+
                     // Function to fetch and display related tasks
                     function fetchTasks(epicId, startDate, endDate) {
                         // Send an AJAX request to fetch related tasks
@@ -406,7 +417,7 @@
                             .then(function (data) {
                                 // Build the HTML for the related tasks
                                 var tasksHtml = buildTasksHtml(data.tasks);
-        
+
                                 // Update the content of the epicRelatedTasks container with the fetched tasks
                                 epicRelatedTasks.innerHTML = tasksHtml;
                                 epicRelatedTasks.style.display = "block";
@@ -415,89 +426,89 @@
                                 console.error("Error fetching tasks:", error);
                             });
                     }
-        
+
                     // Function to build the HTML for related tasks
                     function buildTasksHtml(tasks) {
                         // Initialize the HTML with the table header
                         var html = '<p class="text-gray-500 text-xl">Related Tasks: </p>';
                         html += '<div class="w-full bg-white h-fit rounded-md border border-gray-300 mt-3 flex flex-col gap-4 p-3">';
-        
+
                         // Build HTML for each task
                         tasks.forEach(function (task) {
                             // TABLE HEADER
                             html += '<div class="w-full h-fit border border gray-300 rounded-t-md">';
-                                html += '<div class="w-full flex h-[70px] rounded-t-md border-b border-gray-300">';
-                                    if (task.status == 'Open') {
-                                        html += '<div class="w-[55%] flex justify-center items-center border-r border-gray-300 bg-green-700 rounded-tl-md">';
-                                    } else if (task.status == 'Working On') {
-                                        html += '<div class="w-[55%] flex justify-center items-center border-r border-gray-300 bg-yellow-400 rounded-tl-md">';
-                                    } else {
-                                        html += '<div class="w-[55%] flex justify-center items-center border-r border-gray-300">';
-                                    }
-        
-                                    html += '<p class="text-xl text-white">' + task.name + '</p>';
-                                    html += '</div>';
-                
-                                    html += '<div class="w-[15%] flex justify-center items-center border-r border-gray-300">';
-                                    html += '<p class="text-slate-700">' + task.status + '</p>';
-                                    html += '</div>';
-                
-                                    html += '<div class="w-[15%] flex justify-center items-center border-r border-gray-300">';
-                                    html += '<p class="text-slate-700">' + task.start_date + '</p>';
-                                    html += '</div>';
-                
-                                    html += '<div class="w-[15%] flex justify-center items-center border-gray-300">';
-                                    html += '<p class="text-slate-700">' + task.end_date + '</p>';
-                                    html += '</div>';
-                
-                                html += '</div>';
-        
-                                // TABLE BODY
-                                html += '<div class="w-full h-fit flex">';
-                                    // Left side of the table
-                                    html += '<div class="w-[55%] h-fit bg-white p-3 rounded-bl-md">';
-                                        html += '<div class="w-full flex flex-col gap-2">';
-                                            html += '<div class="flex justify-start items-center gap-2">';
-                                                html += '<p class="text-gray-400  text-base"> Assigned To:</p>';
-                                                html += '<p class="text-slate-800  text-base"> nataly </p>';
-                                            html += '</div>';
-
-                                            html += '<div class="flex justify-start items-center gap-2">';
-                                                html += '<p class="text-gray-400  text-base">Files:</p>';
-                                                html += '<p class="text-slate-800  text-base"> pdf, docx </p>';
-                                            html += '</div>';
-
-                                            html += '<div class="flex justify-start items-center gap-2">';
-                                                html += '<p class="text-gray-400  text-base">Tags:</p>';
-                                                html += '<p class="text-slate-800  text-base"> tasg test </p>';
-                                            html += '</div>';
-
-                                            html += '<div class="flex justify-start items-center gap-2">';
-                                                html += '<p class="text-gray-400  text-base">Extra:</p>';
-                                                html += '<p class="text-slate-800  text-base">' + task.extra + '</p>';
-                                            html += '</div>';
-                                        html += '</div>';
-                                    html += '</div>';
-
-                                    // Right Side
-                                    html += '<div class="w-[45%] h-fit bg-white flex flex-wrap justify-start rounded-br-md">';
-                                        html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Close</button>';
-                                        html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Update Status</button>';
-                                        html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Add Time</button>';
-                                        html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white">Delete</button>';
-                                        html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-blue-500 text-white">Update</button>';
-                                        html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Show Points</button>';
-                                        html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Add Point</button>';
-                                        html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>';
-                                        html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md">Timelines</button>';
-                                    html += '</div>';
-            
-                                html += '</div>';
+                            html += '<div class="w-full flex h-[70px] rounded-t-md border-b border-gray-300">';
+                            if (task.status == 'Open') {
+                                html += '<div class="w-[55%] flex justify-center items-center border-r border-gray-300 bg-green-700 rounded-tl-md">';
+                            } else if (task.status == 'Working On') {
+                                html += '<div class="w-[55%] flex justify-center items-center border-r border-gray-300 bg-yellow-400 rounded-tl-md">';
+                            } else {
+                                html += '<div class="w-[55%] flex justify-center items-center border-r border-gray-300">';
+                            }
+
+                            html += '<p class="text-xl text-white">' + task.name + '</p>';
+                            html += '</div>';
+
+                            html += '<div class="w-[15%] flex justify-center items-center border-r border-gray-300">';
+                            html += '<p class="text-slate-700">' + task.status + '</p>';
+                            html += '</div>';
+
+                            html += '<div class="w-[15%] flex justify-center items-center border-r border-gray-300">';
+                            html += '<p class="text-slate-700">' + task.start_date + '</p>';
+                            html += '</div>';
+
+                            html += '<div class="w-[15%] flex justify-center items-center border-gray-300">';
+                            html += '<p class="text-slate-700">' + task.end_date + '</p>';
+                            html += '</div>';
+
+                            html += '</div>';
+
+                            // TABLE BODY
+                            html += '<div class="w-full h-fit flex">';
+                            // Left side of the table
+                            html += '<div class="w-[55%] h-fit bg-white p-3 rounded-bl-md">';
+                            html += '<div class="w-full flex flex-col gap-2">';
+                            html += '<div class="flex justify-start items-center gap-2">';
+                            html += '<p class="text-gray-400  text-base"> Assigned To:</p>';
+                            html += '<p class="text-slate-800  text-base"> nataly </p>';
+                            html += '</div>';
+
+                            html += '<div class="flex justify-start items-center gap-2">';
+                            html += '<p class="text-gray-400  text-base">Files:</p>';
+                            html += '<p class="text-slate-800  text-base"> pdf, docx </p>';
+                            html += '</div>';
+
+                            html += '<div class="flex justify-start items-center gap-2">';
+                            html += '<p class="text-gray-400  text-base">Tags:</p>';
+                            html += '<p class="text-slate-800  text-base"> tasg test </p>';
+                            html += '</div>';
+
+                            html += '<div class="flex justify-start items-center gap-2">';
+                            html += '<p class="text-gray-400  text-base">Extra:</p>';
+                            html += '<p class="text-slate-800  text-base">' + task.extra + '</p>';
+                            html += '</div>';
+                            html += '</div>';
+                            html += '</div>';
+
+                            // Right Side
+                            html += '<div class="w-[45%] h-fit bg-white flex flex-wrap justify-start rounded-br-md">';
+                            html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Close</button>';
+                            html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Update Status</button>';
+                            html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Add Time</button>';
+                            html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white">Delete</button>';
+                            html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-blue-500 text-white">Update</button>';
+                            html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Show Points</button>';
+                            html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Add Point</button>';
+                            html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>';
+                            html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md">Timelines</button>';
+                            html += '</div>';
+
+                            html += '</div>';
                             html += '</div>';
                         });
-        
+
                         html += '</div>';
-        
+
                         return html;
                     }
                 });
@@ -522,7 +533,8 @@
                                     class="w-full h-full object-cover rounded-full">
                             </div>
                             <div class="flex flex-col">
-                                <h1 class="text-sm text-slate-700 font-semibold">{{latest.staff.first_name}} {{latest.staff.last_name}}</h1>
+                                <h1 class="text-sm text-slate-700 font-semibold">{{latest.staff.first_name}}
+                                    {{latest.staff.last_name}}</h1>
                                 <p class="text-sm text-gray-500">{{latest.time}}</p>
                             </div>
                         </div>

osinaweb/templates/project-types.html

@@ -99,9 +99,11 @@
                                 <p class="text-gray-500">{{type.name}}</p>
                             </div>
                             <div class="w-[40%] h-full flex justify-center items-center gap-3">
-                                <div class="text-[15px] text-blue-500 cursor-pointer">
-                                    <i class="fa fa-edit"></i>
-                                </div>
+                                <a href="{% url 'editprojecttype' %}">
+                                    <div class="text-[15px] text-blue-500 cursor-pointer">
+                                        <i class="fa fa-edit"></i>
+                                    </div>
+                                </a>
                                 <div class="text-[15px] text-red-500 cursor-pointer">
                                     <i class="fa fa-trash"></i>
                                 </div>

osinaweb/templates/projects.html

@@ -66,7 +66,8 @@
                     <div class="relative h-fit w-fit flex items-center">
                         <input type="text" placeholder="Enter Project Name"
                             class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative">
-                        <button class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
+                        <button
+                            class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
                             <i class="fa fa-search"></i>
                         </button>
                     </div>
@@ -106,12 +107,6 @@
                             <p class="text-slate-800">Status</p>
                         </div>
                         <div class="w-[15%] h-full flex justify-center items-center">
-                            <!-- <div>
-                                            <i class="fa fa-eye"></i>
-                                        </div>
-                                        <div>
-                                            <i class="fa fa-trash"></i>
-                                        </div> -->
                             <p class="text-slate-800">Action</p>
                         </div>
                     </div>
@@ -160,9 +155,11 @@
                                         <i class="fa fa-eye"></i>
                                     </div>
                                 </a>
-                                <div class="text-[18px] text-blue-500 cursor-pointer">
-                                    <i class="fa fa-edit"></i>
-                                </div>
+                                <a href="{% url 'editproject' %}">
+                                    <div class="text-[18px] text-blue-500 cursor-pointer">
+                                        <i class="fa fa-edit"></i>
+                                    </div>
+                                </a>
                                 <div class="text-[18px] text-red-500 cursor-pointer">
                                     <i class="fa fa-trash"></i>
                                 </div>
@@ -193,7 +190,8 @@
                                     class="w-full h-full object-cover rounded-full">
                             </div>
                             <div class="flex flex-col">
-                                <h1 class="text-sm text-slate-700 font-semibold">{{latest.staff.first_name}} {{latest.staff.last_name}}</h1>
+                                <h1 class="text-sm text-slate-700 font-semibold">{{latest.staff.first_name}}
+                                    {{latest.staff.last_name}}</h1>
                                 <p class="text-sm text-gray-500">{{latest.time}}</p>
                             </div>
                         </div>

osinaweb/templates/references.html

@@ -105,9 +105,11 @@
                                 <p class="text-gray-500">{{reference.formatted_date}}</p>
                             </div>
                             <div class="w-[20%] h-full flex justify-center items-center gap-3">
-                                <div class="text-[15px] text-blue-500 cursor-pointer">
-                                    <i class="fa fa-edit"></i>
-                                </div>
+                                <a href="{% url 'editreference' %}">
+                                    <div class="text-[15px] text-blue-500 cursor-pointer">
+                                        <i class="fa fa-edit"></i>
+                                    </div>
+                                </a>
                                 <div class="text-[15px] text-red-500 cursor-pointer">
                                     <i class="fa fa-trash"></i>
                                 </div>

osinaweb/templates/staff-details.html

@@ -69,9 +69,11 @@
                 <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">Delete
                     User</button>
-                <button
-                    class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Edit
-                    User</button>
+                <a href="{% url 'editstaff' %}">
+                    <button
+                        class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Edit
+                        User</button>
+                </a>
             </div>
         </div>
         <div class="w-full flex flex-col gap-4 mt-5">

osinaweb/templates/staff-positions.html

@@ -0,0 +1,196 @@
+{% extends "main.html" %}
+{%load static%}
+{% block title %}My Projects{% endblock %}
+{% block content %}
+<!-- NOTES SECTION -->
+<div class="w-full h-fit flex justify-between items-center px-10 pb-5">
+    <div class="relative w-full h-fit bg-white shadow-md rounded-md p-5">
+        <div class="w-full flex justify-between items-center">
+            <div>
+                <p class="text-base text-gray-500">Recent Note:</p>
+                <p class="text-slate-700">Send an Email to Salim.</p>
+            </div>
+            <div class="flex justify-end items-center gap-4">
+                <button
+                    class="w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
+                    id="showNotesButton">Show
+                    Notes</button>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
+                    id="addNoteButton">
+                    <i class="fa fa-plus"></i>
+                </button>
+            </div>
+        </div>
+
+        <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
+        <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
+            id="notesContainer">
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
+                <p class="text-base text-slate-800">Send an Email to Salim.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Contact the client.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- USERS AND USERS ACTIVITY SECTION -->
+<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
+    <!-- LEFT SIDE / USERS SECTION -->
+    <div class="w-[74.5%]">
+        <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
+            <h1 class="text-slate-800 text-[30px] font-semibold">Staff Positions</h1>
+
+            <!-- FILTERING -->
+            <div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-between items-center">
+                <div class="flex justify-start items-center gap-5">
+                    <div class="relative h-fit w-fit flex items-center">
+                        <input type="text" placeholder="Enter Position"
+                            class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative">
+                        <button
+                            class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
+                            <i class="fa fa-search"></i>
+                        </button>
+                    </div>
+                </div>
+                <div>
+                    <button
+                        class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500 addStaffPositionButton"
+                        data-modal-url="{% url 'addstaffposition' %}">Add
+                        Staff Position</button>
+                </div>
+            </div>
+
+            <div class="mt-5 w-full h-fit">
+                <div class="w-full border-x border-t border-gray-300 rounded-t-md ">
+                    <!-- TABLE HEADER -->
+                    <div
+                        class="w-full flex justify-between items-center h-[60px] border-b border-gray-300 rounded-t-md">
+                        <div class="w-[60%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p class="text-slate-800">Position</p>
+                        </div>
+                        <div class="w-[40%] h-full flex justify-center items-center">
+                            Actions
+                        </div>
+                    </div>
+
+                    <!-- TABLE BODY -->
+                    <div class="w-full">
+                        <!-- 1st row -->
+
+                        <div class="w-full h-[60px] flex justify-between items-center border-b border-gray-300">
+                            <div class="w-[60%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">Developer</p>
+                            </div>
+                            <div class="w-[40%] h-full flex justify-center items-center gap-3">
+                                <a>
+                                    <div class="text-[15px] text-blue-500 cursor-pointer">
+                                        <i class="fa fa-eye"></i>
+                                    </div>
+                                </a>
+                                <a href="{% url 'editstaffposition' %}">
+                                    <div class="text-[15px] text-blue-500 cursor-pointer">
+                                        <i class="fa fa-edit"></i>
+                                    </div>
+                                </a>
+                                <div class="text-[15px] text-red-500 cursor-pointer">
+                                    <i class="fa fa-trash"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- RIGHT SIDE / USERS ACTIVITY -->
+    <div class="w-[23%] bg-white h-fit rounded-md shadow-md p-5">
+        <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
+        <div class="w-full h-fit mt-2">
+
+
+            {% for latest in latest_statuses %}
+            <!-- 1ST ROW -->
+            <div class="w-full flex flex-col py-3">
+                <div class="w-full flex flex-col justify-center items-start gap-2">
+                    <div class="w-full flex justify-between items-center gap-2">
+                        <div class="flex justify-start gap-2">
+                            <div class="w-[45px] h-[45px] rounded-full">
+                                <img src='{{latest.staff.image.url}}' alt="user profile"
+                                    class="w-full h-full object-cover rounded-full">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">{{latest.staff.first_name}}
+                                    {{latest.staff.last_name}}</h1>
+                                <p class="text-sm text-gray-500">{{latest.time}}</p>
+                            </div>
+                        </div>
+                        <div class="cursor-pointer">
+                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
+                        </div>
+                    </div>
+
+                    <!-- Status -->
+                    <div class="w-full">
+                        <p class="text-sm text-gray-500">{{latest.text}}</p>
+                    </div>
+
+                    <!-- Add comment section -->
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
+                        <input type="text" placeholder="Add Comment..."
+                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
+                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
+                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+
+
+        </div>
+    </div>
+</div>
+
+</div>
+
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" 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>
+</div>
+
+<!---------------------- JS SCRIPTS -------------------->
+
+<!-- TO SHOW ALL THE ADDED NOTES BY THE USER WHEN CLICKING ON THE SHOW NOTES BUTTON -->
+<script type="text/javascript" src='{% static "js/show-notes.js" %}'></script>
+
+{% endblock content %}

osinaweb/templates/staffs.html

@@ -122,9 +122,11 @@
                                         <i class="fa fa-eye"></i>
                                     </div>
                                 </a>
-                                <div class="text-[15px] text-blue-500 cursor-pointer">
-                                    <i class="fa fa-edit"></i>
-                                </div>
+                                <a href="{% url 'editstaff' %}">
+                                    <div class="text-[15px] text-blue-500 cursor-pointer">
+                                        <i class="fa fa-edit"></i>
+                                    </div>
+                                </a>
                                 <div class="text-[15px] text-red-500 cursor-pointer">
                                     <i class="fa fa-trash"></i>
                                 </div>

osinaweb/templates/tags.html

@@ -99,9 +99,11 @@
                                 <p class="text-gray-500">{{tag.name}}</p>
                             </div>
                             <div class="w-[40%] h-full flex justify-center items-center gap-3">
-                                <div class="text-[15px] text-blue-500 cursor-pointer">
-                                    <i class="fa fa-edit"></i>
-                                </div>
+                                <a href="{% url 'edittag' %}">
+                                    <div class="text-[15px] text-blue-500 cursor-pointer">
+                                        <i class="fa fa-edit"></i>
+                                    </div>
+                                </a>
                                 <div class="text-[15px] text-red-500 cursor-pointer">
                                     <i class="fa fa-trash"></i>
                                 </div>

osinaweb/templates/task-details.html

@@ -64,9 +64,11 @@
                             <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">Delete
                                 Task</button>
+                        <a href="{% url 'edittask' %}">
                             <button
                                 class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Edit
                                 Task</button>
+                            </a>
                         </div>
                     </div>
                     <div class="w-full flex flex-col gap-4 mt-5">
@@ -113,27 +115,6 @@
 
                         <div>
                             <p class="text-gray-500 text-xl">Points:</p>
-                            <!-- <div class="w-full px-4">
-                                <div class="w-full py-2 flex justify-start gap-3 items-center">
-                                    <input type="checkbox" name="" id="">
-                                    <p class="text-slate-800 text-base">Create dynamic pop modal</p>
-                                </div>
-
-                                <div class="w-full py-2 flex justify-start gap-3 items-center">
-                                    <input type="checkbox" name="" id="">
-                                    <p class="text-slate-800 text-base">Add recent status to the header</p>
-                                </div>
-
-                                <div class="w-full py-2 flex justify-start gap-3 items-center">
-                                    <input type="checkbox" name="" id="">
-                                    <p class="text-slate-800 text-base">Add notes section</p>
-                                </div>
-
-                                <div class="w-full py-2 flex justify-start gap-3 items-center">
-                                    <input type="checkbox" name="" id="">
-                                    <p class="text-slate-800 text-base">Create user activity section</p>
-                                </div>
-                            </div> -->
                             <div class="w-full px-4">
                                 <div class="w-full flex justify-between items-center py-2 border-b border-gray-200">
                                     <div class="w-[380px]">
@@ -175,6 +156,11 @@
                                     </div>
                                 </div>
                             </div>
+
+                            <div class="w-full px-4">
+                                <button class="w-full text-gray-500 py-3 bg-gray-100 addPointButton" data-modal-url="{% url 'addpoint' %}">ADD POINT</button>
+                                </button>
+                            </div>
                         </div>
 
                         <div>
@@ -287,6 +273,9 @@
                                             </div>
                                         </div>
                                     </div>
+                                    <div class="w-full">
+                                        <button class="w-full border-b border-gray-300 text-gray-500 py-3 bg-gray-100 addTimeButton" data-modal-url="{% url 'addtime' %}">ADD TIMELINE</button>
+                                    </div>
                                 </div>
                             </div>
                         </div>