new changes.

osinaweb/osinacore/views.py

@@ -83,6 +83,15 @@ def my_tasks(request, *args, **kwargs):
     return render(request, 'tasks.html', context)
 
 
+@login_required
+def customers(request, *args, **kwargs):
+    
+    context = {
+
+    }
+    return render(request, 'customers.html', context)
+
+
 @login_required
 def detailed_project(request, project_id):
     project = get_object_or_404(Project, project_id=project_id)
@@ -121,8 +130,6 @@ def create_project(request):
     'project_types' : project_types,
     'customers' : customers,
 
-
-
     }
     return render(request, 'create-project.html', context)
 
@@ -152,6 +159,34 @@ def createtask_epic(request):
     }
     return render(request, 'createtask-epic.html', context)
 
+@login_required
+def add_customer(request):
+    context = {       
+
+    }
+    return render(request, 'add-customer.html', context)
+
+@login_required
+def customerdetails(request):
+    context = {       
+
+    }
+    return render(request, 'customer-details.html', context)
+
+@login_required
+def addbusiness(request):
+    context = {       
+
+    }
+    return render(request, 'add-business.html', context)
+
+@login_required
+def businessdetails(request):
+    context = {       
+
+    }
+    return render(request, 'business-details.html', context)
+
 
 
 

osinaweb/osinaweb/urls.py

@@ -26,6 +26,11 @@ urlpatterns = [
     path('', login_required(views.home), name='home'),
     path('my-projects/', login_required(views.my_projects), name='my-projects'),
     path('my-tasks/', login_required(views.my_tasks), name='my-tasks'),
+    path('customers/', views.customers, name='customers'),
+    path('addcustomer/', views.add_customer, name='addcustomer'),
+    path('customerdetails/', views.customerdetails, name='customerdetails'),
+    path('addbusiness/', views.addbusiness, name='addbusiness'),
+    path('businessdetails/', views.businessdetails, name='businessdetails'),
     path('detailedproject/<str:project_id>/', views.detailed_project, name='detailed-project'),
     path('createproject/', views.create_project, name='createproject'),
     path('createepic/<str:project_id>/', views.create_epic, name='createepic'),

osinaweb/static/dist/output.css

@@ -646,10 +646,18 @@ video {
   position: relative;
 }
 
+.right-0 {
+  right: 0px;
+}
+
 .right-10 {
   right: 2.5rem;
 }
 
+.right-2 {
+  right: 0.5rem;
+}
+
 .right-3 {
   right: 0.75rem;
 }
@@ -671,10 +679,18 @@ video {
   margin-right: auto;
 }
 
+.mb-0 {
+  margin-bottom: 0px;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
 
+.mb-14 {
+  margin-bottom: 3.5rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -779,10 +795,6 @@ video {
   height: 30px;
 }
 
-.h-\[350px\] {
-  height: 350px;
-}
-
 .h-\[35px\] {
   height: 35px;
 }
@@ -795,14 +807,6 @@ video {
   height: 45px;
 }
 
-.h-\[48px\] {
-  height: 48px;
-}
-
-.h-\[500px\] {
-  height: 500px;
-}
-
 .h-\[50px\] {
   height: 50px;
 }
@@ -819,10 +823,6 @@ video {
   height: 70px;
 }
 
-.h-\[800px\] {
-  height: 800px;
-}
-
 .h-fit {
   height: -moz-fit-content;
   height: fit-content;
@@ -844,6 +844,10 @@ video {
   width: 100%;
 }
 
+.w-\[100px\] {
+  width: 100px;
+}
+
 .w-\[14\%\] {
   width: 14%;
 }
@@ -892,6 +896,10 @@ video {
   width: 25px;
 }
 
+.w-\[270px\] {
+  width: 270px;
+}
+
 .w-\[3\%\] {
   width: 3%;
 }
@@ -912,6 +920,10 @@ video {
   width: 33.33%;
 }
 
+.w-\[35\%\] {
+  width: 35%;
+}
+
 .w-\[35px\] {
   width: 35px;
 }
@@ -932,10 +944,6 @@ video {
   width: 45px;
 }
 
-.w-\[48px\] {
-  width: 48px;
-}
-
 .w-\[5\%\] {
   width: 5%;
 }
@@ -968,6 +976,14 @@ video {
   width: 74.5%;
 }
 
+.w-\[80\%\] {
+  width: 80%;
+}
+
+.w-\[90px\] {
+  width: 90px;
+}
+
 .w-\[95\%\] {
   width: 95%;
 }
@@ -985,6 +1001,10 @@ video {
   flex: 1 1 0%;
 }
 
+.flex-grow {
+  flex-grow: 1;
+}
+
 .border-collapse {
   border-collapse: collapse;
 }
@@ -1029,6 +1049,10 @@ video {
   align-items: flex-start;
 }
 
+.items-end {
+  align-items: flex-end;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1259,6 +1283,11 @@ video {
   background-color: rgb(156 163 175 / var(--tw-bg-opacity));
 }
 
+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+}
+
 .bg-green-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(187 247 208 / var(--tw-bg-opacity));
@@ -1299,6 +1328,11 @@ video {
   background-color: rgb(254 202 202 / var(--tw-bg-opacity));
 }
 
+.bg-red-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
+}
+
 .bg-red-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(248 113 113 / var(--tw-bg-opacity));
@@ -1314,6 +1348,16 @@ video {
   background-color: rgb(203 213 225 / var(--tw-bg-opacity));
 }
 
+.bg-slate-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(148 163 184 / var(--tw-bg-opacity));
+}
+
+.bg-slate-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(100 116 139 / var(--tw-bg-opacity));
+}
+
 .bg-slate-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(71 85 105 / var(--tw-bg-opacity));
@@ -1450,6 +1494,14 @@ video {
   padding-left: 1.25rem;
 }
 
+.pt-3 {
+  padding-top: 0.75rem;
+}
+
+.pt-9 {
+  padding-top: 2.25rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1469,6 +1521,10 @@ video {
   line-height: 2.5rem;
 }
 
+.text-\[15px\] {
+  font-size: 15px;
+}
+
 .text-\[18px\] {
   font-size: 18px;
 }
@@ -1539,6 +1595,11 @@ video {
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
 .text-green-700 {
   --tw-text-opacity: 1;
   color: rgb(21 128 61 / var(--tw-text-opacity));

osinaweb/static/js/side-bar.js

@@ -43,15 +43,19 @@ document.addEventListener('DOMContentLoaded', function () {
 
 
 // SCRIPT FOR THE SIDEBAR MENU ITEMS
-const menuItem = document.querySelector('.menuItem');
+const menuContainers = document.querySelectorAll('.menu-container');
-const menuDropdownItems = document.querySelector('.menuDropdownItems');
-const angleDown = document.querySelector('.angleDown');
-const angleUp = document.querySelector('.angleUp');
 
-menuItem.addEventListener('click', function () {
+// Add click event listeners to each menu container
-    menuDropdownItems.classList.toggle('hidden');
+menuContainers.forEach((menuContainer) => {
+  const menuItem = menuContainer.querySelector('.menuItem');
+  const menuDropdownItems = menuContainer.querySelector('.menuDropdownItems');
+  const angleDown = menuItem.querySelector('.angleDown');
+  const angleUp = menuItem.querySelector('.angleUp');
 
+  menuItem.addEventListener('click', function () {
+    menuDropdownItems.classList.toggle('hidden');
     angleDown.style.display = angleDown.style.display === 'none' ? 'inline' : 'none';
     angleUp.style.display = angleUp.style.display === 'none' ? 'inline' : 'none';
+  });
 });
 

osinaweb/templates/add-business.html

@@ -0,0 +1,100 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+
+<!-- IN THIS TASK FORM THE TASK DOESN'T BELONG NEITHER TO APROJECT OR EPIC, WE REAHC THIS FORM FROM THE TASKS.HTML -->
+
+<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 Business
+        </h1>
+        <form>
+            <div class="w-full flex flex-col gap-3 justify-center items-center mt-5">
+                <input type="text" placeholder="Name"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <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="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 type="email" placeholder="Email"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <input type="number" placeholder="Financial 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" required>
+                    <label class="text-slate-800">Vat</label>
+                </div>
+
+                <input type="number" placeholder="Commercial registration"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <input type="number" placeholder="Mobile Number"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <input type="text" placeholder="Website"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
+
+
+                <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>Business Type</option>
+                    <option value="">Healthcare</option>
+                    <option value="">Associations</option>
+                    <option value="">Education</option>
+                    <option value="">Non-profit</option>
+                </select>
+
+                <div class="w-full flex justify-center items-center mt-3">
+                    <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
+                        Business</button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>
+
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" id="popUpModal">
+    <div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
+        <button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
+            id="closeModalButton">
+            <i class="fa fa-close"></i>
+        </button>
+        <iframe id="popupModalFrame" frameborder="0"></iframe>
+    </div>
+</div>
+
+<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
+</div>
+
+{% endblock content %}

osinaweb/templates/add-customer.html

@@ -0,0 +1,186 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+
+<!-- IN THIS TASK FORM THE TASK DOESN'T BELONG NEITHER TO APROJECT OR EPIC, WE REAHC THIS FORM FROM THE TASKS.HTML -->
+
+<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 Customer
+        </h1>
+        <form>
+            <div class="w-full flex flex-col gap-3 justify-center items-center mt-5">
+                <!-- <select id=""
+                    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>User</option>
+                    <option value="">Not a User</option>
+                    <option value="">Emile</option>
+                    <option value="">Salim</option>
+                </select> -->
+
+                <input type="text" placeholder="First Name"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <input type="text" placeholder="Last Name"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <input type="email" placeholder="Email"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <input type="number" placeholder="Mobile Number"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md" required>
+
+                <input type="text" placeholder="Personal Website"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
+
+                <select id=""
+                    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>
+                    <option value="">Active</option>
+                    <option value="">Suspended</option>
+                    <option value="">Terminated</option>
+                </select>
+
+                <select id=""
+                    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>
+                    <option value="">Nataly</option>
+                </select>
+
+                <select id="businessTypeSelect"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                    <option value="" selected disabled>Type</option>
+                    <option value="business">Business</option>
+                    <option value="personal">Personal</option>
+                </select>
+
+                <div class="w-[80%] mx-auto border border-gray-300 rounded-md py-5 px-3 bg-white hidden"
+                    id="addBusinessContainer">
+                    <h1 class="text-3xl text-slate-800 text-center font-semibold">
+                        Add Business
+                    </h1>
+
+                    <div class="w-full mt-2">
+                        <form>
+                            <input 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 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 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 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 type="checkbox" required>
+                                <label class="text-slate-800">Vat</label>
+                            </div>
+
+                            <input type="number" placeholder="Commercial registration"
+                                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4"
+                                required>
+
+                            <input 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 type="text" placeholder="Website"
+                                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4">
+
+
+                            <select 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="">Healthcare</option>
+                                <option value="">Associations</option>
+                                <option value="">Education</option>
+                                <option value="">Non-profit</option>
+                            </select>
+
+                            <div class="w-full flex justify-center items-center mt-3">
+                                <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
+                                    Business</button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+
+
+                <script>
+                    const businessTypeSelect = document.getElementById('businessTypeSelect');
+                    const addBusinessContainer = document.getElementById('addBusinessContainer');
+
+                    businessTypeSelect.addEventListener('change', function () {
+                        if (businessTypeSelect.value === 'business') {
+                            addBusinessContainer.style.display = 'block';
+                            addBusinessContainer.scrollIntoView({ behavior: 'smooth' });
+                        } else {
+                            addBusinessContainer.style.display = 'none';
+                        }
+                    });
+
+                </script>
+
+                <div class="w-full flex justify-center items-center mt-3">
+                    <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
+                        Customer</button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>
+
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" id="popUpModal">
+    <div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
+        <button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
+            id="closeModalButton">
+            <i class="fa fa-close"></i>
+        </button>
+        <iframe id="popupModalFrame" frameborder="0"></iframe>
+    </div>
+</div>
+
+<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
+</div>
+
+{% endblock content %}

osinaweb/templates/business-details.html

@@ -0,0 +1,249 @@
+{% extends "main.html" %}
+{%load static%}
+{% block title %}My Projects{% endblock %}
+{% block content %}
+<!-- NOTES SECTION -->
+<div class="w-full h-fit flex justify-between items-center px-10 pb-5">
+    <div class="relative w-full h-fit bg-white shadow-md rounded-md p-5">
+        <div class="w-full flex justify-between items-center">
+            <div>
+                <p class="text-base text-gray-500">Recent Note:</p>
+                <p class="text-slate-700">Send an Email to Salim.</p>
+            </div>
+            <div class="flex justify-end items-center gap-4">
+                <button
+                    class="w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
+                    id="showNotesButton">Show
+                    Notes</button>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
+                    id="addNoteButton">
+                    <i class="fa fa-plus"></i>
+                </button>
+            </div>
+        </div>
+
+        <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
+        <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
+            id="notesContainer">
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
+                <p class="text-base text-slate-800">Send an Email to Salim.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Contact the client.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- CUSTOMER DETAIL AND USERS ACTIVITY SECTION -->
+<div class="w-full flex items-stretch 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 bg-gray-300 rounded-t-md flex justify-center items-center py-2 gap-3">
+            <div class="w-[100px] h-[100px] bg-red-300">
+                <img src="{% static 'images/logo-social.png' %}" alt="" class="w-full h-full object-cover">
+            </div>
+            <h1 class="text-3xl text-white font-semibold">Emile Ellye - Ositcom</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
+                    Business</button>
+                <button
+                    class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Edit
+                    Business</button>
+            </div>
+        </div>
+        <div class="w-full flex flex-col gap-4 mt-5">
+            <div>
+                <p class="text-gray-500 text-xl">Name: <span
+                        class="text-slate-800 text-xl font-semibold">Ositcom</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Email: <span
+                        class="text-slate-800 text-xl font-semibold">info@ositcom.com</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">VAT: <span
+                        class="text-slate-800 text-xl font-semibold">Checked</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Commercial Registration: <span
+                        class="text-slate-800 text-xl font-semibold">2022</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Phone Number: <span
+                        class="text-green-700 text-xl font-semibold">78987678</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Website: <span
+                        class="text-green-700 text-xl font-semibold">ositcom.com</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Business Type: <span
+                        class="text-green-700 text-xl font-semibold">Association</span></p>
+            </div>
+        </div>
+    </div>
+    <!-- RIGHT SIDE / USERS ACTIVITY -->
+    <div class="w-[23%] bg-white flex-1 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-[300px] 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>
+
+<!-- THE SCRIPT FOR THE EPICS BAR -->
+<script type="text/javascript" src='{% static "js/epics.js" %}'></script>
+{% endblock content %}

osinaweb/templates/create-project.html

@@ -33,7 +33,8 @@
             </select>
 
             <select required name="members" id=""
-                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                class="w-full h-[100px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500"
+                multiple>
                 <option value="" selected disabled>Member(s)</option>
                 {% for staff in staffs %}
                 <option value="{{staff.user.username}}">{{staff.first_name}} {{staff.last_name}}</option>
@@ -49,8 +50,9 @@
                 <option value="Cancelled">Cancelled</option>
             </select>
 
-            <select required name="project_type" id=""
+            <select required name="members" id=""
-                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                class="w-full h-[100px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500"
+                multiple>
                 <option value="" selected disabled>Project Type</option>
                 {%for type in project_types %}
                 <option value="{{type.id}}">{{type.name}}</option>

osinaweb/templates/customer-details.html

@@ -0,0 +1,336 @@
+{% extends "main.html" %}
+{%load static%}
+{% block title %}My Projects{% endblock %}
+{% block content %}
+<!-- NOTES SECTION -->
+<div class="w-full h-fit flex justify-between items-center px-10 pb-5">
+    <div class="relative w-full h-fit bg-white shadow-md rounded-md p-5">
+        <div class="w-full flex justify-between items-center">
+            <div>
+                <p class="text-base text-gray-500">Recent Note:</p>
+                <p class="text-slate-700">Send an Email to Salim.</p>
+            </div>
+            <div class="flex justify-end items-center gap-4">
+                <button
+                    class="w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
+                    id="showNotesButton">Show
+                    Notes</button>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
+                    id="addNoteButton">
+                    <i class="fa fa-plus"></i>
+                </button>
+            </div>
+        </div>
+
+        <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
+        <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
+            id="notesContainer">
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
+                <p class="text-base text-slate-800">Send an Email to Salim.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Contact the client.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- CUSTOMER DETAIL AND USERS ACTIVITY SECTION -->
+<div class="w-full flex items-stretch 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 bg-gray-300 rounded-t-md flex flex-col justify-center items-center py-2">
+            <h1 class="text-3xl text-white font-semibold">Emile Elliye</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
+                    Customer</button>
+                <button
+                    class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Edit
+                    Customer</button>
+            </div>
+        </div>
+        <div class="w-full flex flex-col gap-4 mt-5">
+            <div>
+                <p class="text-gray-500 text-xl">First Name: <span
+                        class="text-slate-800 text-xl font-semibold">Emile</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Last Name: <span
+                        class="text-slate-800 text-xl font-semibold">Ellye</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Email: <span
+                        class="text-slate-800 text-xl font-semibold">emile.e@ositcom.com</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Personal Website: <span
+                        class="text-slate-800 text-xl font-semibold">www.ositcom.com</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Status: <span
+                        class="text-green-700 text-xl font-semibold">Active</span></p>
+            </div>
+
+            <div>
+                <p class="text-gray-500 text-xl">Reference: <span
+                        class="text-green-700 text-xl font-semibold">Salim</span></p>
+            </div>
+        </div>
+
+
+        <!-- BUSINESS -->
+        <div class="mt-4">
+            <p class="text-gray-500 text-xl">Business:</p>
+            <div class="w-full px-4">
+                <div class="w-full border-t border-x border-gray-300 rounded-t-md mt-3">
+                    <!-- HEADER -->
+                    <div class="w-full h-[60px] flex items-center justify-between">
+                        <div class="w-[35%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p class="text-sm">Name</p>
+                        </div>
+                        <div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p class="text-sm">Business Type</p>
+                        </div>
+                        <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p class="text-sm">Financial number</p>
+                        </div>
+                        <div class="w-[15%] h-full flex justify-center items-center">
+                            <p class="text-sm">Actions</p>
+                        </div>
+                    </div>
+
+                    <!-- BODY -->
+                    <div class="w-full border-t border-gray-300">
+                        <!-- ROW -->
+                        <div class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
+                            <div class="w-[35%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-sm">Ositcom</p>
+                            </div>
+                            <div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-sm">Associations</p>
+                            </div>
+                            <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-sm">2567776</p>
+                            </div>
+                            <div class="w-[15%] h-full flex justify-center items-center gap-3">
+                                <a href="{% url 'businessdetails' %}">
+                                    <div class="text-[18px] text-blue-500 cursor-pointer">
+                                        <i class="fa fa-eye"></i>
+                                    </div>
+                                </a>
+                                <div class="text-[18px] text-blue-500 cursor-pointer">
+                                    <i class="fa fa-edit"></i>
+                                </div>
+                                <div class="text-[18px] text-red-500 cursor-pointer">
+                                    <i class="fa fa-trash"></i>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="w-full">
+                            <a href="{% url 'addbusiness' %}">
+                                <button class="w-full border-b border-gray-300 text-gray-500 py-3 bg-gray-100">ADD
+                                    BUISNESS</button>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- RIGHT SIDE / USERS ACTIVITY -->
+    <div class="w-[23%] bg-white flex-1 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-[300px] 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>
+
+            <!-- 4TH 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>
+        </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>
+
+<!-- THE SCRIPT FOR THE EPICS BAR -->
+<script type="text/javascript" src='{% static "js/epics.js" %}'></script>
+{% endblock content %}

osinaweb/templates/customers.html

@@ -0,0 +1,516 @@
+{% extends "main.html" %}
+{%load static%}
+{% block title %}My Projects{% endblock %}
+{% block content %}
+<!-- NOTES SECTION -->
+<div class="w-full h-fit flex justify-between items-center px-10 pb-5">
+    <div class="relative w-full h-fit bg-white shadow-md rounded-md p-5">
+        <div class="w-full flex justify-between items-center">
+            <div>
+                <p class="text-base text-gray-500">Recent Note:</p>
+                <p class="text-slate-700">Send an Email to Salim.</p>
+            </div>
+            <div class="flex justify-end items-center gap-4">
+                <button
+                    class="w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
+                    id="showNotesButton">Show
+                    Notes</button>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
+                    id="addNoteButton">
+                    <i class="fa fa-plus"></i>
+                </button>
+            </div>
+        </div>
+
+        <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
+        <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
+            id="notesContainer">
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
+                <p class="text-base text-slate-800">Send an Email to Salim.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Contact the client.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- PROJECTS AND USERS ACTIVITY SECTION -->
+<div class="w-full flex items-stretch justify-between gap-[2.5%] px-10 pb-5">
+    <!-- LEFT SIDE / PROJECTS 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">Customers</h1>
+
+            <!-- PROJECT 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 Customer 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>
+                    <a href="{% url 'addcustomer' %}">
+                        <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
+                            Customer</button>
+                    </a>
+                </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-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p class="text-slate-800">First Name</p>
+                        </div>
+                        <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p>Last Name</p>
+                        </div>
+                        <div class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p class="text-slate-800">User</p>
+                        </div>
+                        <div class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p class="text-slate-800">Status</p>
+                        </div>
+                        <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p class="text-slate-800">Business</p>
+                        </div>
+                        <div class="w-[10%] 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-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">Nataly</p>
+                            </div>
+                            <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">Abi Wajeh</p>
+                            </div>
+                            <div class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">nataly.aw</p>
+                            </div>
+                            <div
+                                class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-green-700">
+                                <p class="text-white">Active</p>
+                            </div>
+                            <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">Business</p>
+                            </div>
+                            <div class="w-[10%] h-full flex justify-center items-center gap-3">
+                                <a href="{% url 'customerdetails' %}">
+                                    <div class="text-[15px] text-blue-500 cursor-pointer">
+                                        <i class="fa fa-eye"></i>
+                                    </div>
+                                </a>
+                                <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>
+
+                        <!-- 2nd row -->
+                        <div class="w-full h-[60px] flex justify-between items-center border-b border-gray-300">
+                            <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">Rachel</p>
+                            </div>
+                            <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">Hanna</p>
+                            </div>
+                            <div class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">-</p>
+                            </div>
+                            <div
+                                class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-gray-500">
+                                <p class="text-white">Terminated</p>
+                            </div>
+                            <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">-</p>
+                            </div>
+                            <div class="w-[10%] h-full flex justify-center items-center gap-3">
+                                <a>
+                                    <div class="text-[15px] text-blue-500 cursor-pointer">
+                                        <i class="fa fa-eye"></i>
+                                    </div>
+                                </a>
+                                <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>
+
+                        <!-- 3rd row -->
+                        <div class="w-full h-[60px] flex justify-between items-center border-b border-gray-300">
+                            <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">Aya</p>
+                            </div>
+                            <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">Rifai</p>
+                            </div>
+                            <div class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">aya.rf</p>
+                            </div>
+                            <div
+                                class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-red-500">
+                                <p class="text-white">Suspended</p>
+                            </div>
+                            <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">-</p>
+                            </div>
+                            <div class="w-[10%] h-full flex justify-center items-center gap-3">
+                                <a>
+                                    <div class="text-[15px] text-blue-500 cursor-pointer">
+                                        <i class="fa fa-eye"></i>
+                                    </div>
+                                </a>
+                                <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>
+
+                        <!-- 4th row -->
+                        <div class="w-full h-[60px] flex justify-between items-center border-b border-gray-300">
+                            <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">Emile</p>
+                            </div>
+                            <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">Elliye</p>
+                            </div>
+                            <div class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">salim.e</p>
+                            </div>
+                            <div
+                                class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-green-700">
+                                <p class="text-white">Active</p>
+                            </div>
+                            <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">Business</p>
+                            </div>
+                            <div class="w-[10%] h-full flex justify-center items-center gap-3">
+                                <a>
+                                    <div class="text-[15px] text-blue-500 cursor-pointer">
+                                        <i class="fa fa-eye"></i>
+                                    </div>
+                                </a>
+                                <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>
+
+                        <!-- 5th row -->
+                        <div class="w-full h-[60px] flex justify-between items-center border-b border-gray-300">
+                            <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">Emilio</p>
+                            </div>
+                            <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">Emilio</p>
+                            </div>
+                            <div class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">-</p>
+                            </div>
+                            <div
+                                class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-gray-500">
+                                <p class="text-white">Terminated</p>
+                            </div>
+                            <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">Cars and Classics</p>
+                            </div>
+                            <div class="w-[10%] h-full flex justify-center items-center gap-3">
+                                <a>
+                                    <div class="text-[15px] text-blue-500 cursor-pointer">
+                                        <i class="fa fa-eye"></i>
+                                    </div>
+                                </a>
+                                <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>
+
+                        <!-- 6th row -->
+                        <div class="w-full h-[60px] flex justify-between items-center border-b border-gray-300">
+                            <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">Arze</p>
+                            </div>
+                            <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">Elliye</p>
+                            </div>
+                            <div class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">Arze.e</p>
+                            </div>
+                            <div
+                                class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-green-700">
+                                <p class="text-white">Active</p>
+                            </div>
+                            <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">-</p>
+                            </div>
+                            <div class="w-[10%] h-full flex justify-center items-center gap-3">
+                                <a>
+                                    <div class="text-[15px] text-blue-500 cursor-pointer">
+                                        <i class="fa fa-eye"></i>
+                                    </div>
+                                </a>
+                                <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>
+
+                        <!-- 7th row -->
+                        <div class="w-full h-[60px] flex justify-between items-center border-b border-gray-300">
+                            <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">Reine</p>
+                            </div>
+                            <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">Habshy</p>
+                            </div>
+                            <div class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">reine.h</p>
+                            </div>
+                            <div
+                                class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-red-500">
+                                <p class="text-white">Suspended</p>
+                            </div>
+                            <div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">-</p>
+                            </div>
+                            <div class="w-[10%] h-full flex justify-center items-center gap-3">
+                                <a>
+                                    <div class="text-[15px] text-blue-500 cursor-pointer">
+                                        <i class="fa fa-eye"></i>
+                                    </div>
+                                </a>
+                                <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 flex-1 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-[300px] 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>
+
+            <!-- 4TH 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>
+        </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/index.html

@@ -58,8 +58,13 @@
                 <option value="">Working On</option>
                 <option value="">Closed</option>
             </select>
-            <input type="text" placeholder="Project"
+            <div class="relative h-fit w-fit flex items-center">
-                class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[220px] h-[40px]">
+                <input type="text" placeholder="Project"
+                    class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[270px] 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>
 
         <!-- TASKS TABLE -->

osinaweb/templates/login.html

@@ -19,7 +19,7 @@
         <div class="w-full flex justify-center items-center mt-[5%]">
             <h1 class="text-[50px] text-slate-800 font-semibold">OSINA</h1>
         </div>
-        <div class="w-[500px] h-[350px] rounded-md bg-white shadow-lg mt-5 flex flex-col items-center-center p-3">
+        <div class="w-[500px] h-fit rounded-md bg-white shadow-lg mt-5 flex flex-col items-center-center pt-3 pb-5 px-3">
             <h1 class="text-blue-500 text-[25px] text-center font-light mt-2">Login To Dashboard</h1>
             <form class="w-full mt-5"  method="post" action="{% url 'signin' %}">
                 {% csrf_token %}

osinaweb/templates/main.html

@@ -9,21 +9,23 @@
     <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>
+<body class="bg-gray-200">
     <div class="w-full flex">
         <!-- FIXED SIDE NAVBAR -->
-        <div class="fixed h-screen w-[300px] bg-slate-700 px-5 py-9" id="fixedSideHeader">
+        <div class="fixed h-screen w-[300px] bg-slate-700 pt-9 flex flex-col justify-between" id="fixedSideHeader">
-            <h1 class="text-white text-4xl text-center"><a href="{% url 'home' %}">OSINA</a></h1>
             <!-- Menu Items -->
-            <div class="w-full h-fit flex flex-col justify-center items-center mt-14">
+            <div class="w-full h-fit flex flex-col justify-center items-center px-5">
+                <div class="mb-14 w-full">
+                    <h1 class="text-white text-4xl text-center"><a href="{% url 'home' %}">OSINA</a></h1>
+                </div>
                 <div class="mb-5 w-full relative">
                     <input type="text" placeholder="Search..."
                         class="border border-gray-500 rounded-md py-2 px-3 bg-transparent w-full outline-none text-white">
                     <i class="fa fa-search absolute right-3 top-3 text-gray-500" style="font-size: 20px;"></i>
                 </div>
+
                 <div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
                     <i class="fa fa-home" style="font-size: 22px; color: white;"></i>
                     <a href="{% url 'home' %}" class="text-white text-xl">Home</a>
@@ -39,27 +41,33 @@
                     </div>
                 </div>
 
-                <div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
+                <!-- CUSTOMERS -->
-                    <div class="w-full flex justify-start items-center gap-3">
+                <div class="w-full menu-container">
-                        <i class="fa fa-list" style="font-size: 22px; color: white;"></i>
+                    <div
-                        <p class="text-white text-xl">Accounts</p>
+                        class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
-                    </div>
+                        <div class="w-full flex justify-start items-center gap-3">
-                    <div>
+                            <i class="fa fa-list" style="font-size: 22px; color: white;"></i>
-                        <i class="fa fa-angle-down" style="font-size: 25px; color: white;"></i>
+                            <p class="text-white text-xl">Accounts</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>
 
-                <div class="w-full flex justify-between items-center border-b border-slate-600 py-3">
+                    <div class="menuDropdownItems w-full h-fit p-3 hidden duration-300">
-                    <div class="w-full flex justify-start items-center gap-3">
+                        <a href="{% url 'customers' %}">
-                        <i class="fas fa-comment-alt" style="font-size: 22px; color: white;"></i>
+                            <div
-                        <p class="text-white text-xl">Support</p>
+                                class="w-full flex justify-start items-center gap-3 text-white border-b border-slate-600 py-2 text-[18px] cursor-pointer">
-                    </div>
+                                <i class='fa fa-user' style="font-size: 16px;"></i>
-                    <div>
+                                <p class="text-white">Customers</p>
-                        <i class="fa fa-angle-down" style="font-size: 25px; color: white;"></i>
+                            </div>
+                        </a>
                     </div>
                 </div>
 
-                <div class="w-full">
+                <!-- MY WORK DROPDOWN -->
+                <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">
@@ -98,6 +106,16 @@
                     </div>
                 </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="fas fa-comment-alt" style="font-size: 22px; color: white;"></i>
+                        <p class="text-white text-xl">Support</p>
+                    </div>
+                    <div>
+                        <i class="fa fa-angle-down" style="font-size: 25px; color: white;"></i>
+                    </div>
+                </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-euro" style="font-size: 22px; color: white;"></i>
@@ -118,6 +136,15 @@
                     <a href="{% url 'signout' %}" class="text-white text-xl">Logout</a>
                 </div>
             </div>
+
+            <!-- Footer -->
+            <div class="w-full h-fit bg-slate-800 flex flex-col items-center justify-center gap-2 py-2">
+                <div class="w-full flex flex-col justify-center items-center">
+                    <!-- <img src="{% static 'images/footer-logo.png' %}" alt="Ositcom Web Development in Lebanon" class="w-[90px] h-[50px]"> -->
+                    <p class="text-gray-500 font-light text-sm">Powered By Ositcom</p>
+                    <p class="text-gray-500 font-light text-sm">Copyrights © 2023 All Rights Reserved</p>
+                </div>
+            </div>
         </div>
 
         <!-- SCROLL PART -->
@@ -212,23 +239,23 @@
                     <div>
                         <div class="flex justify-start items-center gap-2">
                             <p>Available</p>
-                            <img  src='{% static "images/yes.png" %}'  alt="" class="w-[15px] h-[15px]">
+                            <img src='{% static "images/yes.png" %}' alt="" class="w-[15px] h-[15px]">
                         </div>
                     </div>
                 </div>
 
-          
-      
-        </div>
 
-    {% block content %}
-    replace me
-    {% endblock content %}
 
-    <!---------------------- JS SCRIPTS -------------------->
+            </div>
-    <!-- SIDE BAR SCRIPT -->
+
-    <script type="text/javascript" src='{% static "js/side-bar.js" %}'></script>
+            {% block content %}
-   
+            replace me
+            {% endblock content %}
+
+            <!---------------------- JS SCRIPTS -------------------->
+            <!-- SIDE BAR SCRIPT -->
+            <script type="text/javascript" src='{% static "js/side-bar.js" %}'></script>
+
 </body>
 
 </html>

osinaweb/templates/projects.html

@@ -57,14 +57,19 @@
 <div class="w-full flex items-stretch justify-between gap-[2.5%] px-10 pb-5">
     <!-- LEFT SIDE / PROJECTS SECTION -->
     <div class="w-[74.5%]">
-        <div class="w-full h-[800px] bg-white rounded-md shadow-md p-5">
+        <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
             <h1 class="text-slate-800 text-[30px] font-semibold">My Projects</h1>
 
             <!-- PROJECT 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">
-                    <input type="text" placeholder="Enter Project Name"
+                    <div class="relative h-fit w-fit flex items-center">
-                        class="w-[300px] h-[40px] py-2 px-3 border border-gray-300 rounded-md outline-none">
+                        <input type="text" placeholder="Enter Project Name"
+                            class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative">
+                        <button class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
+                            <i class="fa fa-search"></i>
+                        </button>
+                    </div>
 
                     <select name="" id=""
                         class="border border-gray-300 p-2 rounded-md outline-none w-[160px] text-gray-500 h-[40px]">
@@ -83,7 +88,7 @@
                 </div>
             </div>
 
-            <div class="mt-5 w-full h-[500px]">
+            <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

osinaweb/templates/tasks.html

@@ -56,14 +56,20 @@
 <div class="w-full flex items-stretch justify-between gap-[2.5%] px-10 pb-5">
     <!-- LEFT SIDE / PROJECTS SECTION -->
     <div class="w-[74.5%]">
-        <div class="w-full h-[800px] bg-white rounded-md shadow-md p-5">
+        <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
             <h1 class="text-slate-800 text-[30px] font-semibold">My Tasks</h1>
 
-            <!-- PROJECT FILTERING -->
+            <!-- TASK 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">
-                    <input type="text" placeholder="Enter Project Name"
+                    <div class="relative h-fit w-fit flex items-center">
-                        class="w-[300px] h-[40px] py-2 px-3 border border-gray-300 rounded-md outline-none">
+                        <input type="text" placeholder="Enter Project Name"
+                            class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative">
+                        <button
+                            class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
+                            <i class="fa fa-search"></i>
+                        </button>
+                    </div>
 
                     <select name="" id=""
                         class="border border-gray-300 p-2 rounded-md outline-none w-[160px] text-gray-500 h-[40px]">