New changes.

osinaweb/static/dist/output.css

@@ -626,6 +626,10 @@ video {
   visibility: visible;
 }
 
+.invisible {
+  visibility: hidden;
+}
+
 .collapse {
   visibility: collapse;
 }
@@ -655,6 +659,18 @@ video {
   bottom: 0px;
 }
 
+.bottom-10 {
+  bottom: 2.5rem;
+}
+
+.bottom-2 {
+  bottom: 0.5rem;
+}
+
+.bottom-5 {
+  bottom: 1.25rem;
+}
+
 .right-0 {
   right: 0px;
 }
@@ -776,6 +792,10 @@ video {
   display: table;
 }
 
+.grid {
+  display: grid;
+}
+
 .contents {
   display: contents;
 }
@@ -804,10 +824,6 @@ video {
   height: 150px;
 }
 
-.h-\[15px\] {
-  height: 15px;
-}
-
 .h-\[2px\] {
   height: 2px;
 }
@@ -861,6 +877,10 @@ video {
   height: 100vh;
 }
 
+.w-48 {
+  width: 12rem;
+}
+
 .w-\[10\%\] {
   width: 10%;
 }
@@ -893,10 +913,6 @@ video {
   width: 150px;
 }
 
-.w-\[15px\] {
-  width: 15px;
-}
-
 .w-\[16\.33\%\] {
   width: 16.33%;
 }
@@ -909,6 +925,10 @@ video {
   width: 20%;
 }
 
+.w-\[200px\] {
+  width: 200px;
+}
+
 .w-\[220px\] {
   width: 220px;
 }
@@ -1013,6 +1033,10 @@ video {
   width: 74.5%;
 }
 
+.w-\[75\%\] {
+  width: 75%;
+}
+
 .w-\[80\%\] {
   width: 80%;
 }
@@ -1034,6 +1058,26 @@ video {
   width: 100%;
 }
 
+.max-w-2xl {
+  max-width: 42rem;
+}
+
+.max-w-lg {
+  max-width: 32rem;
+}
+
+.max-w-md {
+  max-width: 28rem;
+}
+
+.max-w-sm {
+  max-width: 24rem;
+}
+
+.max-w-xs {
+  max-width: 20rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1074,6 +1118,14 @@ video {
   list-style-type: disc;
 }
 
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -1158,6 +1210,20 @@ video {
   overflow-y: auto;
 }
 
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
 .rounded-full {
   border-radius: 9999px;
 }
@@ -1304,11 +1370,21 @@ video {
   background-color: rgb(147 197 253 / var(--tw-bg-opacity));
 }
 
+.bg-blue-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
+}
+
 .bg-blue-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+}
+
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1448,6 +1524,15 @@ video {
   background-color: rgb(234 179 8 / var(--tw-bg-opacity));
 }
 
+.bg-yellow-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(202 138 4 / var(--tw-bg-opacity));
+}
+
+.bg-opacity-30 {
+  --tw-bg-opacity: 0.3;
+}
+
 .bg-opacity-40 {
   --tw-bg-opacity: 0.4;
 }
@@ -1644,6 +1729,10 @@ video {
   font-weight: 600;
 }
 
+.uppercase {
+  text-transform: uppercase;
+}
+
 .text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
@@ -1717,6 +1806,14 @@ video {
   text-decoration-line: line-through;
 }
 
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-100 {
+  opacity: 1;
+}
+
 .opacity-30 {
   opacity: 0.3;
 }
@@ -1764,6 +1861,12 @@ video {
   transition-duration: 150ms;
 }
 
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .duration-300 {
   transition-duration: 300ms;
 }
@@ -1856,6 +1959,10 @@ video {
   outline-offset: 2px;
 }
 
+.group:hover .group-hover\:opacity-100 {
+  opacity: 1;
+}
+
 @media (min-width: 798px) {
   .md\:w-\[300px\] {
     width: 300px;

osinaweb/templates/index.html

@@ -43,69 +43,66 @@
 </div>
 
 <!-- TASKS AND USERS ACTIVITY SECTION -->
-<div class="w-full flex justify-between gap-[2.5%] px-10 pb-5">
+<div class="w-full flex justify-between gap-5 px-10 pb-5">
     <!-- LEFT SIDE / TASKS SECTION -->
-    <div class="w-[74.5%]">
-        <!-- TASK FILTERING BAR -->
-        <div class="w-full h-fit bg-white shadow-md rounded-md flex justify-center items-center gap-10 py-5 px-3">
-            <a class="text-xl text-gray-500">Tasks</a>
-            <select name="" id=""
-                class="border border-gray-300 p-2 rounded-md outline-none w-[160px] text-gray-500 h-[40px]">
-                <option value="" disabled selected>Assigned To</option>
-                <option value="">Nataly</option>
-                <option value="">Salim</option>
-                <option value="">Emile</option>
-                <option value="">Arze</option>
-            </select>
-            <select name="" id=""
-                class="border border-gray-300 p-2 rounded-md outline-none w-[160px] text-gray-500 h-[40px]">
-                <option value="" disabled selected>Status</option>
-                <option value="">Open</option>
-                <option value="">Working On</option>
-                <option value="">Closed</option>
-            </select>
-            <div class="relative h-fit w-fit flex items-center">
-                <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>
+    <div class="w-[75%]">
+
 
         <!-- TASKS TABLE -->
         {% for task in tasks %}
-        <div class="w-full h-fit bg-white p-3 rounded-md shadow-md mt-5">
-            <div class="w-full bg-white h-fit rounded-md border border-gray-300">
+        <div class="w-full h-fit bg-white p-3 rounded-md shadow-md mb-5">
+            <div class="w-full bg-white h-fit rounded-md border border-gray-200">
                 <!-- TABLE HEADER -->
-                <div class="w-full flex h-[70px] rounded-t-md">
-                    {% if task.status == 'Open' %}
+                <div class="w-full h-[70px] rounded-t-md grid grid-cols-2">
                     <div
-                        class="w-[55%] flex justify-center items-center border-r border-b border-gray-300 bg-green-700 rounded-tl-md">
-                        <p class="text-xl text-white">{{task.name}}</p>
-                    </div>
-                    {% endif %}
-                    {% if task.status == 'Working On' %}
-                    <div
-                        class="w-[55%] flex justify-center items-center border-r border-b border-gray-300 bg-yellow-400 rounded-tl-md">
-                        <p class="text-xl text-white">{{task.name}}</p>
-                    </div>
-                    {% endif %}
-                    <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
-                        <p class="text-slate-700">{{task.status}}</p>
+                        class="flex justify-center items-center border-r border-b border-gray-200 bg-slate-600 rounded-tl-md text-xl text-white font-semibold">
+                        <p>{{task.name}}</p>
                     </div>
-                    <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
-                        <p class="text-slate-700">{{task.formatted_start_date}}</p>
-                    </div>
-                    <div class="w-[15%] flex justify-center items-center border-b border-gray-300">
-                        <p class="text-slate-700">{{task.formatted_end_date}}</p>
+                    
+                    <div class="grid grid-cols-3">
+                        {% if task.status == 'Open' %}
+                        <div class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-red-500">
+                            <p>{{task.status}}</p>
+                        </div>
+                        {% endif %}
+    
+                        {% if task.status == 'Working On' %}
+                        <div class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-orange-500">
+                            <p>{{task.status}}</p>
+                        </div>
+                        {% endif %}
+    
+                        {% if task.status == 'Open' %}
+                        <div class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-red-500">
+                            <p>{{task.formatted_start_date}}</p>
+                        </div>
+                        {% endif %}
+
+                        {% if task.status == 'Working On' %}
+                        <div class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-orange-500">
+                            <p>{{task.formatted_start_date}}</p>
+                        </div>
+                        {% endif %}
+
+                        {% if task.status == 'Open' %}
+                        <div class="flex justify-center items-center border-b border-gray-200 text-white bg-red-500 rounded-tr-md">
+                            <p>{{task.formatted_end_date}}</p>
+                        </div>
+                        {% endif %}
+
+                        {% if task.status == 'Working On' %}
+                        <div class="flex justify-center items-center border-b border-gray-200 text-white bg-orange-500 rounded-tr-md">
+                            <p>{{task.formatted_end_date}}</p>
+                        </div>
+                        {% endif %}
                     </div>
+
                 </div>
 
                 <!-- TABLE BODY -->
-                <div class="w-full h-fit flex">
+                <div class="w-full h-fit grid grid-cols-2">
                     <!-- LEFT SIDE OF TABLE BODY -->
-                    <div class="w-[55%] h-fit bg-white p-3 rounded-bl-md">
+                    <div class="h-fit bg-white p-3 rounded-bl-md">
                         <!-- 1st row -->
                         <div class="w-full flex flex-col gap-2">
                             <div class="flex justify-start items-center gap-2">
@@ -120,8 +117,8 @@
 
                             <div class="flex justify-start items-center gap-2">
                                 <p class="text-gray-400  text-base">Assigned To:</p>
-                                <p class="text-slate-700 text-base">{{task.assigned_to.first_name}}
-                                    {{task.assigned_to.last_name}}</p>
+                                <p class="text-slate-700 text-base">{{task.assigned_to.user.first_name}}
+                                    {{task.assigned_to.user.last_name}}</p>
                             </div>
 
                             <div class="flex justify-start items-center gap-2">
@@ -141,38 +138,46 @@
                     </div>
 
                     <!-- RIGHT SIDE OF TABLE BODY -->
-                    <div class="w-[45%] h-fit bg-white flex flex-wrap justify-start rounded-br-md">
+                    <div class="h-fit bg-white grid grid-cols-3 rounded-br-md">
                         <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Close</button>
+                            class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500">Close</button>
+                            
                         <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 updateStatusButton"
+                            class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 updateStatusButton"
                             data-modal-url="{% url 'updatestatus' task.task_id %}">Update
                             Status</button>
+
                         <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 addTimeButton"
+                            class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 addTimeButton"
                             data-modal-url="{% url 'addtime' %}">Add
                             Time</button>
+
                         <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white deleteTaskButton"
+                            class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 deleteTaskButton"
                             data-modal-url="{% url 'deletetask' %}">Delete</button>
-                        <a href="{% url 'edittask' %}" class="w-[33.33%]">
+
+                        <a href="{% url 'edittask' %}">
                             <button
-                                class="w-full p-2 border border-gray-200 text-base h-[70px] bg-blue-500 text-white">Edit</button>
+                                class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500">Edit</button>
                         </a>
+
                         <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 showPointsButton"
+                            class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 showPointsButton"
                             data-modal-url="{% url 'showpoints' task.task_id  %}">Show
                             Points</button>
+
                         <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 addPointButton"
+                            class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 addPointButton"
                             data-modal-url="{% url 'addpoint' task.task_id %}">Add
                             Point</button>
-                        <a href="{% url 'detailed-task' task.task_id %}" class="w-[33.33%]">
+
+                        <a href="{% url 'detailed-task' task.task_id %}">
                             <button
-                                class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
+                                class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500">Details</button>
                         </a>
+
                         <button
-                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md timelineButton"
+                            class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 rounded-br-md timelineButton"
                             data-modal-url="{% url 'timeline' %}">Timeline</button>
                     </div>
                 </div>
@@ -183,11 +188,11 @@
     </div>
 
     <!-- RIGHT SIDE / USERS ACTIVITY -->
-    <div class="w-[23%] bg-white h-fit rounded-md shadow-md p-5">
+    <div class="w-[25%] bg-white h-fit rounded-md shadow-md p-5">
         <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
         <div class="w-full h-fit mt-2" id="activitiesContainer">
 
-                {% include 'recent-activities.html' %}
+            {% include 'recent-activities.html' %}
 
         </div>
     </div>

osinaweb/templates/main.html

@@ -20,19 +20,24 @@
             id="fixedSideHeader">
             <!-- Menu Items -->
             <div class="w-full h-fit flex flex-col justify-center items-center px-5">
-                <div class="mb-14 w-full">
-                    <h1 class="text-white text-4xl text-center"><a href="{% url 'home' %}">OSINA</a></h1>
-                </div>
+                <a href="{% url 'home' %}">
+                    <div class="mb-14 w-full">
+                        <h1 class="text-white text-4xl text-center">OSINA</h1>
+                    </div>
+                </a>
+
                 <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>
-                </div>
+                <a href="{% url 'home' %}" class="w-full">
+                    <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>
+                        <p class="text-white text-xl">Home</p>
+                    </div>
+                </a>
 
                 <!-- CUSTOMERS -->
                 {% if user.is_superuser %}
@@ -40,7 +45,7 @@
                     <div
                         class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
                         <div class="w-full flex justify-start items-center gap-3">
-                            <i class="fas fa-users" style="font-size: 22px; color: white;"></i>
+                            <i class="fas fa-users" style="font-size: 20px; color: white;"></i>
                             <p class="text-white text-xl">Accounts</p>
                         </div>
                         <div>
@@ -120,7 +125,7 @@
 
                 <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>
+                        <i class="fas fa-comment-alt" style="font-size: 20px; color: white;"></i>
                         <p class="text-white text-xl">Support</p>
                     </div>
                     <div>
@@ -145,7 +150,7 @@
                     <div
                         class="menuItem w-full flex justify-between items-center border-b border-slate-600 py-3 cursor-pointer">
                         <div class="w-full flex justify-start items-center gap-3">
-                            <i class="fas fa-cogs" style="font-size: 22px; color: white;"></i>
+                            <i class="fas fa-cogs" style="font-size: 20px; color: white;"></i>
                             <p class="text-white text-xl">Utilities</p>
                         </div>
                         <div>
@@ -192,15 +197,19 @@
                     </div>
                 </div>
 
-                <div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
-                    <i class="fa fa-check-square" style="font-size: 22px; color: white;"></i>
-                    <p class="text-white text-xl">Activity</p>
-                </div>
+                <a class="w-full">
+                    <div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
+                        <i class="fa fa-check-square" style="font-size: 22px; color: white;"></i>
+                        <p class="text-white text-xl">Activity</p>
+                    </div>
+                </a>
 
-                <div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
-                    <i class="fa fa-power-off" style="font-size: 22px; color: white;"></i>
-                    <a href="{% url 'signout' %}" class="text-white text-xl">Logout</a>
-                </div>
+                <a href="{% url 'signout' %}" class="w-full">
+                    <div class="w-full flex justify-start items-center gap-3 border-b border-slate-600 py-3">
+                        <i class="fa fa-power-off" style="font-size: 22px; color: white;"></i>
+                        <p class="text-white text-xl">Logout</p>
+                    </div>
+                </a>
             </div>
 
             <!-- Footer -->
@@ -255,11 +264,11 @@
             </div>
 
             <!-- MODULES SECTION -->
-            <div class="w-full h-fit flex justify-between items-center px-10 py-5">
-                <div class="w-[23%] h-[150px] bg-white shadow-md rounded-md p-5">
+            <div class="w-full h-fit grid grid-cols-3 gap-5 px-10 py-5">
+                <div class="h-[150px] bg-white shadow-md rounded-md p-5">
                     <div class="w-full h-full flex flex-col justify-between items-center">
                         <div class="w-full flex justify-between items-center">
-                            <p class="text-[22px] text-slate-800 font-bold">TASKS</p>
+                            <p class="text-[22px] text-slate-800 font-bold uppercase">Tasks</p>
                             <i class="fa fa-tasks" style="font-size: 30px; color: green;"></i>
                         </div>
                         <div
@@ -269,25 +278,11 @@
                     </div>
                 </div>
 
-                <div class="w-[23%] h-[150px] bg-white shadow-md rounded-md p-5">
-                    <div class="w-full h-full flex flex-col justify-between items-center">
-                        <div class="w-full flex justify-between items-center">
-                            <p class="text-[22px] text-slate-800 font-bold">NOTIFICATIONS</p>
-                            <i class="fa fa-bell" style="font-size: 30px; color: orangered;"></i>
-                        </div>
-                        <div
-                            class="w-[60px] h-[60px] bg-white border-2 rounded-full border-orange-700 flex justify-center items-center">
-                            <p class="text-orange-700 text-xl font-semibold">2</p>
-                        </div>
-                    </div>
-
-                </div>
-
-                <div class="w-[23%] h-[150px] bg-white shadow-md rounded-md p-5">
+                <div class="h-[150px] bg-white shadow-md rounded-md p-5">
                     <div class="w-full h-full flex flex-col justify-between items-center">
                         <div class="w-full flex justify-between items-center">
-                            <p class="text-[22px] text-slate-800 font-bold">TICKETS</p>
-                            <i class="fas fa-ticket-alt" style="font-size: 30px; color: cornflowerblue;"></i>
+                            <p class="text-[22px] text-slate-800 font-bold uppercase">Projects</p>
+                            <i class="fas fa-project-diagram" style="font-size: 30px; color: cornflowerblue;"></i>
                         </div>
                         <div
                             class="w-[60px] h-[60px] bg-white border-2 rounded-full border-blue-500 flex justify-center items-center">
@@ -296,17 +291,82 @@
                     </div>
                 </div>
 
-                <div class="w-[23%] h-[150px] bg-white shadow-md rounded-md p-5">
+                <div class="h-[150px] bg-white shadow-md rounded-md p-5 flex flex-col justify-between gap-3">
                     <div class="w-full flex justify-between items-center">
-                        <p class="text-[22px] text-slate-800 font-bold">30 Aug 2023</p>
-                        <!-- <i class="fas fa-comment" style="font-size: 30px; color: salmon;"></i> -->
-                        <img src='{% static "images/clockicon.png" %}' alt="" class="w-[30px] h-[30px]">
+                        <p class="text-[22px] text-slate-800 font-bold uppercase">Connected Users</p>
+                        <i class="fa fa-users" style="font-size: 30px; color: salmon;"></i>
                     </div>
-                    <p class="text-gray-500">12:09:33 PM</p>
-                    <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]">
+                    <div class="flex flex-wrap gap-2">
+                        <div class="relative group">
+                            <div class="absolute w-fit py-2 px-2 bg-black bg-opacity-40 text-white text-sm whitespace-nowrap bottom-10 userName opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                                <p>Salim Elliye</p>
+                            </div>
+                            <div class="w-[35px] h-[35px] rounded-full cursor-pointer userImage">
+                                <img src="{% static 'images/1669023415919.jpeg' %}" alt="User Profile" class="w-full h-full rounded-full object-cover">
+                            </div>
+                        </div>
+
+                        <div class="relative group">
+                            <div class="absolute w-fit py-2 px-2 bg-black bg-opacity-40 text-white text-sm whitespace-nowrap bottom-10 userName opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                                <p>Miryam Elliye</p>
+                            </div>
+                            <div class="w-[35px] h-[35px] rounded-full cursor-pointer userImage">
+                                <img src="{% static 'images/1686063290067.jpeg' %}" alt="User Profile" class="w-full h-full rounded-full object-cover">
+                            </div>
+                        </div>
+                        
+                        <div class="relative group">
+                            <div class="absolute w-fit py-2 px-2 bg-black bg-opacity-40 text-white text-sm whitespace-nowrap bottom-10 userName opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                                <p>Rachel</p>
+                            </div>
+                            <div class="w-[35px] h-[35px] rounded-full cursor-pointer userImage">
+                                <img src="{% static 'images/C2ruP-K3_400x400_3eYEtuD.jpeg' %}" alt="User Profile" class="w-full h-full rounded-full object-cover">
+                            </div>
+                        </div>
+
+                        <div class="relative group">
+                            <div class="absolute w-fit py-2 px-2 bg-black bg-opacity-40 text-white text-sm whitespace-nowrap bottom-10 userName opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                                <p>Nataly Abi Wajeh</p>
+                            </div>
+                            <div class="w-[35px] h-[35px] rounded-full cursor-pointer userImage">
+                                <img src="{% static 'images/WhatsApp_Image_2024-01-02_at_1.31.29_PM_i37PpV4.jpeg' %}" alt="User Profile" class="w-full h-full rounded-full object-cover">
+                            </div>
+                        </div>
+
+                        <div class="relative group">
+                            <div class="absolute w-fit py-2 px-2 bg-black bg-opacity-40 text-white text-sm whitespace-nowrap bottom-10 userName opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                                <p>Salim Elliye</p>
+                            </div>
+                            <div class="w-[35px] h-[35px] rounded-full cursor-pointer userImage">
+                                <img src="{% static 'images/1669023415919.jpeg' %}" alt="User Profile" class="w-full h-full rounded-full object-cover">
+                            </div>
+                        </div>
+
+                        <div class="relative group">
+                            <div class="absolute w-fit py-2 px-2 bg-black bg-opacity-40 text-white text-sm whitespace-nowrap bottom-10 userName opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                                <p>Miryam Elliye</p>
+                            </div>
+                            <div class="w-[35px] h-[35px] rounded-full cursor-pointer userImage">
+                                <img src="{% static 'images/1686063290067.jpeg' %}" alt="User Profile" class="w-full h-full rounded-full object-cover">
+                            </div>
+                        </div>
+                        
+                        <div class="relative group">
+                            <div class="absolute w-fit py-2 px-2 bg-black bg-opacity-40 text-white text-sm whitespace-nowrap bottom-10 userName opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                                <p>Rachel</p>
+                            </div>
+                            <div class="w-[35px] h-[35px] rounded-full cursor-pointer userImage">
+                                <img src="{% static 'images/C2ruP-K3_400x400_3eYEtuD.jpeg' %}" alt="User Profile" class="w-full h-full rounded-full object-cover">
+                            </div>
+                        </div>
+
+                        <div class="relative group">
+                            <div class="absolute w-fit py-2 px-2 bg-black bg-opacity-40 text-white text-sm whitespace-nowrap bottom-10 userName opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                                <p>Nataly Abi Wajeh</p>
+                            </div>
+                            <div class="w-[35px] h-[35px] rounded-full cursor-pointer userImage">
+                                <img src="{% static 'images/WhatsApp_Image_2024-01-02_at_1.31.29_PM_i37PpV4.jpeg' %}" alt="User Profile" class="w-full h-full rounded-full object-cover">
+                            </div>
                         </div>
                     </div>
                 </div>

osinaweb/templates/recent-status.html

@@ -1,7 +1,7 @@
 {% load static %}
 
 <div>
-    <p class="text-sm text-gray-500">Recent Status: <span
+    <p class="text-sm text-gray-500 truncate max-w-2xl">Recent Status: <span
             class="text-slate-700 font-semibold">{{last_status.text}}</span></p>
     <p class="text-sm text-gray-500">Last update:
         {% if last_status.date == current_date %}