New changes.

osinaweb/osinacore/views.py

@@ -13,6 +13,7 @@ from django.http import JsonResponse
 from .models import Task, Epic
 
 
+
 # Pages views
 
 def signin(request):
@@ -282,10 +283,32 @@ def detailed_task(request, task_id):
 
     return render(request, 'task-details.html', context)
 
+@login_required
+def project_types(request):
+
+    context = {
+
+
+    }
+    return render(request, 'project-types.html', context)
 
+@login_required
+def references(request):
+
+    context = {
+
+
+    }
+    return render(request, 'references.html', context)
+
+@login_required
+def tags(request):
 
+    context = {
 
 
+    }
+    return render(request, 'tags.html', context)
 
 
 
@@ -361,6 +384,30 @@ def update_status_modal(request, *args, **kwargs):
     }
     return render(request, 'update-status-modal.html', context)
 
+def add_projecttype_modal(request, *args, **kwargs):
+    context = {
+
+    }
+    return render(request, 'addprojecttype-modal.html', context)
+
+def add_reference_modal(request, *args, **kwargs):
+    context = {
+
+    }
+    return render(request, 'addreference-modal.html', context)
+
+def add_tag_modal(request, *args, **kwargs):
+    context = {
+
+    }
+    return render(request, 'addtag-modal.html', context)
+
+def add_business_modal(request, *args, **kwargs):
+    context = {
+
+    }
+    return render(request, 'addbusiness-modal.html', context)
+
 
 
 
@@ -577,10 +624,36 @@ def save_business(request):
         phone_number = phone_number,
         )
         business.save()
+    
+    return render(request, 'add-business.html') 
+
+@login_required
+def save_business_modal(request):
+    if request.method == 'POST':
+        name = request.POST.get('name')
+        email= request.POST.get('email')
+        financial_number = request.POST.get('financial_number')
+        phone_number = request.POST.get('phone_number')
+        vat = request.POST.get('vat')
+        commercial_registration = request.POST.get('commercial_registration')
+        website = request.POST.get('website')
+        business_type = request.POST.get('business_type')
+        logo = request.POST.get('logo')
 
+        business = Business(
+        name = name,
+        email = email,
+        financial_number = financial_number,
+        vat = vat,
+        commercial_registration = commercial_registration,
+        website = website,
+        business_type = business_type,
+        logo = logo,
+        phone_number = phone_number,
+        )
+        business.save()
 
-       
-    return render(request, 'add-business.html') 
+    return render(request, 'addbusiness-modal.html') 
 
 
 def save_customer(request):

osinaweb/osinaweb/urls.py

@@ -42,6 +42,9 @@ urlpatterns = [
     path('createtask/<str:project_id>/', views.createtask_project, name='createtaskproject'),
     path('createtaskepic/', views.createtask_epic, name='createtaskepic'),
     path('taskdetails/<str:task_id>/', views.detailed_task, name='detailed-task'),
+    path('projecttypes/', views.project_types, name='projecttypes'),
+    path('references/', views.references, name='references'),
+    path('tags/', views.tags, name='tags'),
 
     path("fetch_related_tasks/", views.fetch_related_tasks, name="fetch_related_tasks"),
 
@@ -57,6 +60,10 @@ urlpatterns = [
     path('addtime/', views.add_time_modal, name='addtime'),
     path('timeline/', views.timeline_modal, name='timeline'),
     path('deletetask/', views.delete_task_modal, name='deletetask'),
+    path('addprojecttype/', views.add_projecttype_modal, name='addprojecttype'),
+    path('addreference/', views.add_reference_modal, name='addreference'),
+    path('addtag/', views.add_tag_modal, name='addtag'),
+    path('addbusinesscustomer/', views.add_business_modal, name='addbusinesscustomer'),
 
     # Save Urls
     path('save_note/', views.save_note, name='save_note'),
@@ -64,6 +71,7 @@ urlpatterns = [
     path('save_epic/', views.save_epic, name='save_epic'),
     path('save_task/', views.save_task, name='save_task'),
     path('save_business/', views.save_business, name='save_business'),
+    path('save_business_modal/', views.save_business_modal, name='save_business_modal'),
     path('save_customer/', views.save_customer, name='save_customer'),
     path('save_status/', views.save_status, name='save_status'),
 ]

osinaweb/static/dist/output.css

@@ -840,6 +840,10 @@ video {
   height: 70px;
 }
 
+.h-\[80px\] {
+  height: 80px;
+}
+
 .h-fit {
   height: -moz-fit-content;
   height: fit-content;
@@ -993,8 +997,8 @@ video {
   width: 55%;
 }
 
-.w-\[55px\] {
-  width: 55px;
+.w-\[60\%\] {
+  width: 60%;
 }
 
 .w-\[60px\] {
@@ -1009,6 +1013,10 @@ video {
   width: 80%;
 }
 
+.w-\[80px\] {
+  width: 80px;
+}
+
 .w-\[95\%\] {
   width: 95%;
 }
@@ -1489,6 +1497,11 @@ video {
   padding-right: 1.25rem;
 }
 
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
 .px-8 {
   padding-left: 2rem;
   padding-right: 2rem;

osinaweb/static/js/pop-modals.js

@@ -1,5 +1,5 @@
 document.addEventListener("DOMContentLoaded", function () {
-
+    // Function to open a modal with dimensions
     function openModalWithDimensions(url, width, height) {
         const modalUrl = url;
         openModal(modalUrl);
@@ -9,6 +9,7 @@ document.addEventListener("DOMContentLoaded", function () {
         iframe.style.width = width;
     }
 
+    // Function to open a modal
     function openModal(url) {
         const modalContainer = document.getElementById("popUpModal");
         const iframe = document.getElementById("popupModalFrame");
@@ -19,6 +20,7 @@ document.addEventListener("DOMContentLoaded", function () {
         modalContainer.style.display = "flex";
     }
 
+    // Function to close the modal
     function closeModal() {
         const modalContainer = document.getElementById("popUpModal");
         const iframe = document.getElementById("popupModalFrame");
@@ -29,27 +31,32 @@ document.addEventListener("DOMContentLoaded", function () {
         modalContainer.style.display = "none";
     }
 
-    function addButtonClickListener(buttonId, width, height) {
-        const button = document.getElementById(buttonId);
-        if (button) {
+    // Function to add a click listener to buttons by class name
+    function addButtonClickListener(className, width, height) {
+        const buttons = document.querySelectorAll(`.${className}`);
+        buttons.forEach(button => {
             button.addEventListener("click", () => {
                 const modalUrl = button.getAttribute("data-modal-url");
                 openModalWithDimensions(modalUrl, width, height);
             });
-        }
+        });
     }
 
-    // Add button click listeners with dimensions
+    // Add button click listeners with dimensions for specific class names
     addButtonClickListener("addStatusButton", "450px", "200px");
     addButtonClickListener("addNoteButton", "400px", "225px");
-    addButtonClickListener("addFileButton", "500px", "320px");
-    addButtonClickListener("addCredentialsButton", "500px", "300px");
     addButtonClickListener("updateStatusButton", "fit-content", "160px");
     addButtonClickListener("showPointsButton", "600px", "450px");
     addButtonClickListener("addPointButton", "500px", "225px");
     addButtonClickListener("timelineButton", "600px", "450px");
     addButtonClickListener("addTimeButton", "300px", "270px");
     addButtonClickListener("deleteTaskButton", "fit-content", "130px");
+    addButtonClickListener("addFileButton", "500px", "320px");
+    addButtonClickListener("addCredentialsButton", "500px", "300px");
+    addButtonClickListener("addProjectTypeButton", "fit-content", "160px");
+    addButtonClickListener("addReferenceButton", "fit-content", "160px");
+    addButtonClickListener("addTagButton", "fit-content", "160px");
+    addButtonClickListener("addBusinessButton", "550px", "500px");
 
     const closeButton = document.getElementById("closeModalButton");
     closeButton.addEventListener("click", () => {
@@ -62,7 +69,4 @@ document.addEventListener("DOMContentLoaded", function () {
             closeModal();
         }
     });
-
-    // TO RELOAD THE TOP WINDOW AFTER ADDING
-    // window.top.location.reload();
 });

osinaweb/templates/add-business.html

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

osinaweb/templates/add-customer.html

@@ -2,7 +2,6 @@
 {%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">
@@ -26,7 +25,7 @@
 
                 <input name="personal_website" type="text" placeholder="Personal Website"
                     class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
-                <select name="status" 
+                <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="" selected disabled>Status</option>
@@ -35,7 +34,7 @@
                     <option value="Terminated">Terminated</option>
                 </select>
 
-                <select name="reference" 
+                <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="" selected disabled>Reference</option>
@@ -58,21 +57,22 @@
                     </h1>
 
                     <div class="w-full flex justify-end items-center px-3 py-2">
-                        <a href="{% url 'addbusiness' %}">
-                            <button type="button" class="w-fit py-1 px-3 bg-white rounded-md outline-none text-blue-500 border border-blue-500 text-xl cursor-pointer hover:bg-blue-500 hover:text-white">
-                                Add Business
-                            </button>
-                        </a>
+                        <button type="button"
+                            class="w-fit py-1 px-3 bg-white rounded-md outline-none text-blue-500 border border-blue-500 text-xl cursor-pointer hover:bg-blue-500 hover:text-white addBusinessButton"
+                            data-modal-url="{% url 'addbusinesscustomer' %}">
+                            Add Business
+                        </button>
+                    </div>
+
+                    <div class="w-full mt-2">
+                        <select name="business"
+                            class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                            <option value="" selected disabled>Business Name</option>
+                            {% for business in businesses %}
+                            <option value="{{business.id}}">{{business.name}}</option>
+                            {% endfor %}
+                        </select>
                     </div>
-                  <div class="w-full mt-2">
-                    <select name="business" class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
-                    <option value="" selected disabled>Business Name</option>
-                    {% for  business in businesses %}
-                    <option value="{{business.id}}">{{business.name}}</option>
-                    {% endfor %}
-                    </select>
-                 
-                  </div>
                 </div>
 
 
@@ -90,8 +90,9 @@
                     });
 
                 </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>
+
+                <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>
 
                 <div class="w-full flex justify-center items-center mt-3">
                     <button type="submit"
@@ -102,7 +103,7 @@
         </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">

osinaweb/templates/add-user.html

@@ -5,21 +5,21 @@
 
 <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">
-            Add User
-        </h1>
+        <div class="flex justify-center items-center gap-4">
+            <h1 class="text-3xl text-slate-800 text-center font-semibold">
+                Add Staff
+            </h1>
+            <!-- <div class="w-[80px] h-[80px] rounded-full border border-gray-200" id="image-container">
+                <img src="{% static 'images/avatar.svg' %}" alt="" srcset="" id="" class="rounded-full w-full h-full">
+            </div> -->
+        </div>
+
         <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 type="text" placeholder="Username"
-                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
-
-                <input type="password" placeholder="Password"
-                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
-
-                <input type="password" placeholder="Password Confirmation"
-                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+                <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">
@@ -28,25 +28,54 @@
                             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"></i></label>
-
+                                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 -->
+                <input type="text" placeholder="Username"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <input type="password" placeholder="Password"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <input type="password" placeholder="Password Confirmation"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <!-- 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 fileNames = Array.from(selectedFiles).map(file => file.name).join(', ');
-                            fileNameSpan.textContent = fileNames;
+                            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 Documents (PDF, docx)';
+                            fileNameSpan.textContent = 'Upload Profile Picture';
+                            imageContainer.innerHTML = ''; // Clear the container if no file is selected
                         }
                     });
+
+
                 </script>
 
                 <select id=""
@@ -58,6 +87,9 @@
 
                 </select>
 
+                <input type="text" placeholder="Position"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
                 <input name="first_name" type="text" placeholder="First Name"
                     class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
 
@@ -67,16 +99,28 @@
                 <input name="email" type="email" placeholder="Email"
                     class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
 
+                <input name="mobile" type="number" placeholder="Mobile Number"
+                    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 type="checkbox" name="" id="">
+                    <p class="text-gray-500">Active</p>
+                </div>
+
+                <div class="w-full flex justify-start items-center gap-2">
+                    <input type="checkbox" name="" id="">
+                    <p class="text-gray-500">Intern</p>
+                </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">Add
-                        User</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>
     </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">

osinaweb/templates/addbusiness-modal.html

@@ -0,0 +1,111 @@
+{% 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>
+    <div id="hiddenContent">
+        <h1 class="text-slate-800 text-2xl font-semibold text-center">Add Business</h1>
+
+        <form method="POST" action="{% url 'save_business_modal' %}" id="addBusinessFormModal">
+            {% 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>
+
+            <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 name="cv" type="file" id="actual-btn" accept="image/*" hidden
+                        multiple />
+                    <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" 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" 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" 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" required>
+
+            <input name="website" type="text" placeholder="Website"
+                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="" selected disabled>Business Type</option>
+                <option value="ASSOCIATIONS">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">Add
+                    Business</button>
+            </div>
+        </form>
+
+    </div>
+
+</body> 
+
+</html>

osinaweb/templates/addprojecttype-modal.html

@@ -0,0 +1,31 @@
+{% 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>
+    <div id="hiddenContent">
+        <h1 class="text-slate-800 text-2xl font-semibold text-center">Add Project Type</h1>
+    
+        <div class="w-full flex justify-center items-center">
+            <input type="text" placeholder="Project Type 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
+                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>
+    </div>
+</body>
+</html>

osinaweb/templates/addreference-modal.html

@@ -0,0 +1,31 @@
+{% 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>
+    <div id="hiddenContent">
+        <h1 class="text-slate-800 text-2xl font-semibold text-center">Add Reference</h1>
+    
+        <div class="w-full flex justify-center items-center">
+            <input type="text" placeholder="Reference 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
+                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>
+    </div>
+</body>
+</html>

osinaweb/templates/addtag-modal.html

@@ -0,0 +1,31 @@
+{% 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>
+    <div id="hiddenContent">
+        <h1 class="text-slate-800 text-2xl font-semibold text-center">Add Tag</h1>
+    
+        <div class="w-full flex justify-center items-center">
+            <input type="text" placeholder="Tag 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
+                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>
+    </div>
+</body>
+</html>

osinaweb/templates/create-project.html

@@ -118,34 +118,6 @@
                 <input required name="end_date" type="date" id="date" name="date"
                     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 required 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">Add
@@ -154,7 +126,7 @@
         </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">

osinaweb/templates/create-task.html

@@ -38,13 +38,6 @@
                 <option value="">Closed</option>
             </select>
 
-            <select 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>Extra</option>
-                <option value="">Yes</option>
-                <option value="">No</option>
-            </select>
-
             <select required 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>Assigned To</option>
@@ -55,6 +48,15 @@
             <textarea 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"></textarea>
 
+            <div class="w-full">
+                <label class="text-gray-500">Extra:</label>
+                <select 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="" selected>No</option>
+                    <option value="">Yes</option>
+                </select>
+            </div>
+
             <div class="w-full">
                 <label class="text-gray-500">Start Date:</label>
                 <input type="date" id="date" name="date"
@@ -103,7 +105,7 @@
         </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">

osinaweb/templates/createtask-epic.html

@@ -33,14 +33,7 @@
                 <option value="">Working On</option>
                 <option value="">Closed</option>
             </select>
-
-            <select 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>Extra</option>
-                <option value="">Yes</option>
-                <option value="">No</option>
-            </select>
-
+            
             <select required 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>Assigned To</option>
@@ -51,6 +44,15 @@
             <textarea 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"></textarea>
 
+            <div class="w-full">
+                <label class="text-gray-500">Extra:</label>
+                <select 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="" selected>No</option>
+                    <option value="">Yes</option>
+                </select>
+            </div>
+
             <div class="w-full">
                 <label class="text-gray-500">Start Date:</label>
                 <input type="date" id="date" name="date"
@@ -99,7 +101,7 @@
         </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">

osinaweb/templates/createtask-project.html

@@ -39,13 +39,6 @@
                 <option value="Closed">Closed</option>
             </select>
 
-            <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">
-                <option value="" selected disabled>Extra</option>
-                <option value="True">Yes</option>
-                <option value="False">No</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="" selected disabled>Assigned To</option>
@@ -57,6 +50,15 @@
             <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"></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"
@@ -105,7 +107,7 @@
         </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">

osinaweb/templates/index.html

@@ -20,8 +20,7 @@
                     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" 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>
@@ -143,32 +142,26 @@
                         <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"
-                            id="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"
-                            id="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"
-                            id="deleteTaskButton" data-modal-url="{% url 'deletetask' %}">Delete</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>
                         <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
-                            id="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"
-                            id="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"
-                            id="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>

osinaweb/templates/main.html

@@ -31,15 +31,50 @@
                     <a href="{% url 'home' %}" class="text-white text-xl">Home</a>
                 </div>
 
-                <div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
-                    <div class="w-full flex justify-start items-center gap-3">
-                        <i class="fa fa-user" style="font-size: 22px; color: white;"></i>
-                        <p class="text-white text-xl">Sales</p>
-                    </div>
-                    <div>
-                        <i class="fa fa-angle-down" style="font-size: 25px; color: white;"></i>
+                    <!-- 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>
-                </div>
 
                 <!-- CUSTOMERS -->
                 <div class="w-full menu-container">
@@ -59,7 +94,6 @@
                         <a href="{% url 'customers' %}">
                             <div
                                 class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
-                                <i class='fa fa-user' style="font-size: 16px;"></i>
                                 <p class="text-white">Customers</p>
                             </div>
                         </a>
@@ -67,7 +101,6 @@
                         <a href="{% url 'businesses' %}">
                             <div
                                 class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
-                                <i class='fas fa-business-time' style="font-size: 16px;"></i>
                                 <p class="text-white">Businesses</p>
                             </div>
                         </a>
@@ -75,8 +108,7 @@
                         <a href="{% url 'users' %}">
                             <div
                                 class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
-                                <i class='fa fa-user' style="font-size: 16px;"></i>
-                                <p class="text-white">Users</p>
+                                <p class="text-white">Staff Profiles</p>
                             </div>
                         </a>
                     </div>
@@ -100,7 +132,6 @@
                         <a href="{% url 'my-projects' %}">
                             <div
                                 class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
-                                <i class='fas fa-project-diagram' style="font-size: 16px;"></i>
                                 <p class="text-white">My Projects</p>
                             </div>
                         </a>
@@ -108,14 +139,12 @@
                         <a href="{% url 'my-tasks' %}">
                             <div
                                 class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px]">
-                                <i class='fas fa-tasks' style="font-size: 19px;"></i>
                                 <p class="text-white">My Tasks</p>
                             </div>
                         </a>
 
                         <a href="tickets.html">
                             <div class="w-full flex justify-start items-center gap-3 text-white py-2 text-[18px]">
-                                <i class='fas fa-ticket-alt'></i>
                                 <p class="text-white">My Tickets</p>
                             </div>
                         </a>
@@ -180,8 +209,7 @@
                                     class="text-slate-700 font-semibold">Working on Osina</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"
-                            id="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>

osinaweb/templates/project-details.html

@@ -236,8 +236,7 @@
                             {%endfor%}
                         </div>
                         <div class="w-full">
-                            <button class="w-full border-b border-gray-300 text-gray-500 py-3 bg-gray-100"
-                                id="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>
@@ -280,8 +279,7 @@
                         </div>
 
                         <div class="w-full">
-                            <button class="w-full border-b border-gray-300 text-gray-500 py-3 bg-gray-100"
-                                id="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>
 

osinaweb/templates/project-types.html

@@ -0,0 +1,252 @@
+{% 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>
+
+<!-- PROJECT TYPES LISTING AND USERS ACTIVITY SECTION -->
+<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
+    <!-- LEFT SIDE / PROJECT TYPES 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">Project Types</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 Project Type"
+                            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 addProjectTypeButton" data-modal-url="{% url 'addprojecttype' %}">Add
+                    Project Type</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">Project Type</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">Development</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>
+                                <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">
+
+
+            <!-- 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='{% static "images/avatar.svg" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Nataly</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</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">Closed - Create the Osina home page</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>
+
+            <!-- 2NT 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='{% static "images/avatar2.png" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Salim</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</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">Closed - Create the Osina home page</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>
+
+            <!-- 3RD 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='{% static "images/avatar3.png" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Emile</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</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">Closed - Create the Osina home page</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>
+
+               
+        </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/references.html

@@ -0,0 +1,258 @@
+{% 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>
+
+<!-- REFERENCES LISTING AND USERS ACTIVITY SECTION -->
+<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
+    <!-- LEFT SIDE / REFERENCES 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">References</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 Reference"
+                            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 addReferenceButton" data-modal-url="{% url 'addreference' %}">Add
+                    Reference</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-[45%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p class="text-slate-800">Reference</p>
+                        </div>
+                        <div class="w-[35%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p class="text-slate-800">Date</p>
+                        </div>
+                        <div class="w-[20%] 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-[45%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">Nat</p>
+                            </div>
+                            <div class="w-[35%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">28-2-2023</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>
+                                <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">
+
+
+            <!-- 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='{% static "images/avatar.svg" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Nataly</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</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">Closed - Create the Osina home page</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>
+
+            <!-- 2NT 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='{% static "images/avatar2.png" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Salim</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</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">Closed - Create the Osina home page</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>
+
+            <!-- 3RD 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='{% static "images/avatar3.png" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Emile</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</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">Closed - Create the Osina home page</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>
+
+               
+        </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/showpoints-modal.html

@@ -59,41 +59,6 @@
                 </div>
             </div>
         </div>
-
-        <!-- <div class="w-full py-2 flex justify-start gap-3 items-center">
-            <input type="checkbox" name="" id="">
-            <p class="text-slate-700 text-base">Fix the LaylNhar 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-700 text-base">Fix the mobile menu dropdown, where you also add the search button.</p>
-        </div>
-
-        <div class="w-full py-2 flex justify-start gap-3 items-center">
-            <input type="checkbox" name="" id="">
-            <p class="text-slate-700 text-base">Add a top header Ositcom banner.</p>
-        </div>
-
-        <div class="w-full py-2 flex justify-start gap-3 items-center">
-            <input type="checkbox" name="" id="">
-            <p class="text-slate-700 text-base">Fix the mobile menu dropdown, where you also add the search button.</p>
-        </div>
-
-        <div class="w-full py-2 flex justify-start gap-3 items-center">
-            <input type="checkbox" name="" id="">
-            <p class="text-slate-700 text-base">Fix the LaylNhar 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-700 text-base">Fix the mobile menu dropdown, where you also add the search button.</p>
-        </div>
-
-        <div class="w-full py-2 flex justify-start gap-3 items-center">
-            <input type="checkbox" name="" id="">
-            <p class="text-slate-700 text-base">Fix the LaylNhar Header</p>
-        </div> -->
     </div>
 </body>
 

osinaweb/templates/tags.html

@@ -0,0 +1,252 @@
+{% 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>
+
+<!-- PROJECT TYPES LISTING AND USERS ACTIVITY SECTION -->
+<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
+    <!-- LEFT SIDE / PROJECT TYPES 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">Tags</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 Tag 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">
+                            <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 addTagButton" data-modal-url="{% url 'addtag' %}">Add
+                    Tag</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">Tag Name</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">Web Development</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>
+                                <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">
+
+
+            <!-- 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='{% static "images/avatar.svg" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Nataly</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</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">Closed - Create the Osina home page</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>
+
+            <!-- 2NT 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='{% static "images/avatar2.png" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Salim</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</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">Closed - Create the Osina home page</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>
+
+            <!-- 3RD 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='{% static "images/avatar3.png" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
+                            </div>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Emile</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</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">Closed - Create the Osina home page</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>
+
+               
+        </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/task-details.html

@@ -56,14 +56,17 @@
             <div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
                 <!-- LEFT SIDE / TASK DETAIL SECTION -->
                 <div class="w-[74.5%] bg-white h-fit rounded-md shadow-md p-5">
-                    <div class="w-full flex justify-between items-center">
-                        <h1 class="text-xl text-slate-800 font-semibold">Task Details - <span class="text-2xl">Start
-                                with Osina main
-                                page</span></h1>
-                        <div class="flex justify-center items-center">
-                            <button class="text-blue-500 text-[25px] outline-none border-none">
-                                <i class="fa fa-edit"></i>
-                            </button>
+                    <div class="w-full bg-green-700 rounded-t-md flex flex-col justify-center items-center py-3">
+                        <h1 class="text-3xl text-white font-semibold">Task Name</h1>
+                    </div>
+                    <div class="w-full h-[70px] flex justify-end items-center bg-gray-100 shadow-md rounded-md px-3 py-1 mt-4">
+                        <div class="flex justify-end items-center gap-3">
+                            <button
+                                class="w-fit text-base px-3 py-2 bg-red-500 text-white outline-none border border-red-500 rounded-md cursor-pointer hover:bg-white hover:text-red-500">Delete
+                                Task</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
+                                Task</button>
                         </div>
                     </div>
                     <div class="w-full flex flex-col gap-4 mt-5">
@@ -110,7 +113,7 @@
 
                         <div>
                             <p class="text-gray-500 text-xl">Points:</p>
-                            <div class="w-full px-4">
+                            <!-- <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>
@@ -130,6 +133,47 @@
                                     <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]">
+                                        <p class="text-slate-800">Fix the LaylNhar Header Lorem ipsum dolor sit amet consectetur,
+                                            adipisicing elit. Mollitia, dolorum. Earum error atÍb dol</p>
+                                    </div>
+                                    <div class="flex justify-end items-center gap-2">
+                                        <button
+                                            class="w-[120px] px-2 py-1 bg-transparent border border-blue-500 rounded-md text-blue-500 hover:bg-blue-500 hover:text-white">Complete</button>
+                                        <button
+                                            class="w-[120px] px-2 py-1 bg-transparent border border-yellow-500 rounded-md text-yellow-500 hover:bg-yellow-500 hover:text-white">Working
+                                            On</button>
+                                    </div>
+                                </div>
+                    
+                                <div class="w-full flex justify-between items-center py-2 border-b border-gray-200">
+                                    <div class="w-[380px]">
+                                        <p class="text-slate-800">Fix the LaylNhar Header</p>
+                                    </div>
+                                    <div class="flex justify-end items-center gap-2">
+                                        <button
+                                            class="w-[120px] px-2 py-1 bg-transparent border border-blue-500 rounded-md text-blue-500 hover:bg-blue-500 hover:text-white">Complete</button>
+                                        <button
+                                            class="w-[120px] px-2 py-1 border border-yellow-500 rounded-md bg-yellow-500 text-white opacity-40"
+                                            disabled>Working On</button>
+                                    </div>
+                                </div>
+                    
+                                <div class="w-full flex justify-between items-center py-2">
+                                    <div class="w-[380px]">
+                                        <p class="text-slate-800 line-through">Fix the LaylNhar Header Lorem ipsum dolor sit amet
+                                            consectetur
+                                            adipisicing elit. Autem sit esse, cupiditate voluptas, dolorem nisi sunt, molestiae eaque neque
+                                            cumque ex amet! Sequi aliquid quos ullam, sapiente iste impedit explicabo?</p>
+                                    </div>
+                                    <div class="w-[150px]">
+                                        <button class="w-full px-2 py-1 bg-blue-500 border border-blue-500 rounded-md text-white opacity-40"
+                                            value="Completed" disabled>Completed</button>
+                                    </div>
+                                </div>
                             </div>
                         </div>
 

osinaweb/templates/user-details.html

@@ -58,16 +58,13 @@
 
     <!-- LEFT SIDE / USER DETAIL SECTION -->
     <div class="w-[74.5%] bg-white h-fit rounded-md shadow-md p-5">
-        <div class="w-full h-[70px] flex justify-between items-center bg-gray-100 shadow-md rounded-md px-3 py-1 mt-4">
-            <div class="flex justify-start items-center gap-2">
-                <div class="w-[55px] h-[55px] bg-slate-600 rounded-full">
-                    <img src='{% static "images/avatar.svg" %}' alt="user-image"
-                        class="w-full h-full object-cover rounded-full">
-                </div>
-                <div>
-                    <p class="text-gray-400 text-xl">Nataly</p>
-                </div>
+        <div class="w-full bg-gray-300 rounded-t-md flex flex-col justify-center items-center py-2 gap-3 mt-[50px]">
+            <div class="w-[100px] h-[100px] rounded-full mt-[-63px] border border-gray-300">
+                <img src="{% static 'images/avatar.svg' %}" alt="" class="w-full h-full object-cover rounded-full">
             </div>
+            <h1 class="text-3xl text-white font-semibold">Nataly Ab</h1>
+        </div>
+        <div class="w-full h-[70px] flex justify-end items-center bg-gray-100 shadow-md rounded-md px-3 py-1 mt-4">
             <div class="flex justify-end items-center gap-3">
                 <button
                     class="w-fit text-base px-3 py-2 bg-red-500 text-white outline-none border border-red-500 rounded-md cursor-pointer hover:bg-white hover:text-red-500">Delete
@@ -93,6 +90,10 @@
                         1</span></p>
             </div>
 
+            <div>
+                <p class="text-gray-500 text-xl">Position: <span class="text-slate-800 text-xl font-semibold">Developer</span></p>
+            </div>
+
             <div>
                 <p class="text-gray-500 text-xl">First Name: <span
                         class="text-slate-800 text-xl font-semibold">Nataly</span></p>
@@ -107,7 +108,18 @@
                 <p class="text-gray-500 text-xl">Email: <span
                         class="text-slate-800 text-xl font-semibold">nataly.aw@ositcom.net</span></p>
             </div>
-
+            <div>
+                <p class="text-gray-500 text-xl">Mobile Number: <span
+                        class="text-slate-800 text-xl font-semibold">71196733</span></p>
+            </div>
+            <div>
+                <p class="text-gray-500 text-xl">Active: <span
+                        class="text-slate-800 text-xl font-semibold">True</span></p>
+            </div>
+            <div>
+                <p class="text-gray-500 text-xl">Intern: <span
+                        class="text-slate-800 text-xl font-semibold">False</span></p>
+            </div>
         </div>
     </div>
 

osinaweb/templates/users.html

@@ -75,7 +75,7 @@
                     <a href="{% url 'adduser' %}">
                         <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
-                            User</button>
+                            Staff</button>
                     </a>
                 </div>
             </div>