New changes.

main
nataly 1 year ago
parent 098ce2b72c
commit a52f83a8d2

Binary file not shown.

@ -1129,6 +1129,10 @@ video {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-default {
cursor: default;
}
.cursor-not-allowed {
cursor: not-allowed;
}
@ -1423,6 +1427,11 @@ video {
border-color: rgb(21 128 61 / var(--tw-border-opacity));
}
.border-orange-400 {
--tw-border-opacity: 1;
border-color: rgb(251 146 60 / var(--tw-border-opacity));
}
.border-orange-500 {
--tw-border-opacity: 1;
border-color: rgb(249 115 22 / var(--tw-border-opacity));
@ -1666,6 +1675,10 @@ video {
background-color: rgb(202 138 4 / var(--tw-bg-opacity));
}
.bg-opacity-20 {
--tw-bg-opacity: 0.2;
}
.bg-opacity-30 {
--tw-bg-opacity: 0.3;
}
@ -1999,6 +2012,11 @@ video {
color: rgb(21 128 61 / var(--tw-text-opacity));
}
.text-orange-400 {
--tw-text-opacity: 1;
color: rgb(251 146 60 / var(--tw-text-opacity));
}
.text-orange-500 {
--tw-text-opacity: 1;
color: rgb(249 115 22 / var(--tw-text-opacity));
@ -2065,6 +2083,10 @@ video {
opacity: 1;
}
.opacity-20 {
opacity: 0.2;
}
.opacity-30 {
opacity: 0.3;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

@ -143,6 +143,11 @@
class="text-slate-800 text-xl font-semibold">{{business.email}}</span></p>
</div>
<div>
<p class="text-gray-500 text-xl">Financial Number: <span
class="text-slate-800 text-xl font-semibold">{{business.financial_number}}</span></p>
</div>
<div>
<p class="text-gray-500 text-xl">VAT: <span
class="text-slate-800 text-xl font-semibold">{{business.vat}}</span>
@ -187,9 +192,163 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[25%] hidden xxlg1:flex flex-col gap-3">
<div class="w-full hidden xxlg1:block bg-white shadow-md rounded-md p-5 cursor-pointer">
<div class="w-full h-full flex flex-col gap-3 items-center">
<div class="w-full flex justify-center items-center">
<p class="text-[22px] text-slate-700 font-bold uppercase text-center"><span
class="text-green-700">14</span>
Connected User</p>
</div>
<div class="w-full flex flex-wrap gap-2">
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
</div>
</div>
</div>
{% if latest_statuses_time_ago %}
<div
class="hidden xxlg1:block w-[25%] bg-white h-[1283px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
class="hidden xxlg1:block w-full bg-white h-[1283px] overflow-y-auto overflow-hidden 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">
@ -198,7 +357,8 @@
</div>
</div>
{% else %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[305px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[305px] overflow-y-auto overflow-hidden 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">
@ -209,6 +369,7 @@
{% endif %}
</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">

@ -22,7 +22,8 @@
onclick="closeModal()">
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512">
<path
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" fill="grey"/>
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"
fill="grey" />
</svg>
</div>
</div>
@ -281,8 +282,163 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[25%] hidden xxlg1:flex flex-col gap-3">
<div class="w-full hidden xxlg1:block bg-white shadow-md rounded-md p-5 cursor-pointer">
<div class="w-full h-full flex flex-col gap-3 items-center">
<div class="w-full flex justify-center items-center">
<p class="text-[22px] text-slate-700 font-bold uppercase text-center"><span
class="text-green-700">14</span>
Connected User</p>
</div>
<div class="w-full flex flex-wrap gap-2">
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
</div>
</div>
</div>
{% if latest_statuses_time_ago %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[1283px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[1283px] overflow-y-auto overflow-hidden 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">
@ -291,7 +447,8 @@
</div>
</div>
{% else %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[305px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[305px] overflow-y-auto overflow-hidden 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">
@ -302,6 +459,7 @@
{% endif %}
</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">

@ -305,7 +305,9 @@
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
{% if requirement.task_set.all %}
{% for task in requirement.task_set.all %}
<a class="text-blue-500 underline" href="{% url 'detailed-task' task.task_id %}">{{task.name}} <i class="fas fa-angle-double-right"></i></a>
<a class="text-blue-500 underline"
href="{% url 'detailed-task' task.task_id %}">{{task.name}} <i
class="fas fa-angle-double-right"></i></a>
{% endfor %}
{%else%}
<p class="text-slate-800">None</p>
@ -540,7 +542,8 @@
<td class="px-6 py-4 text-center text-sm">
<button
class="w-full py-2 px-3 bg-transparent border border-gray-500 text-gray-500 cursor-pointer rounded-md deleteProjectNoteButton" data-modal-url="{% url 'deleteprojectnotemodal' note.id %}">Delete</button>
class="w-full py-2 px-3 bg-transparent border border-gray-500 text-gray-500 cursor-pointer rounded-md deleteProjectNoteButton"
data-modal-url="{% url 'deleteprojectnotemodal' note.id %}">Delete</button>
</td>
</tr>
{% endfor %}
@ -635,9 +638,163 @@
<!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[25%] hidden xxlg1:flex flex-col gap-3">
<div class="w-full hidden xxlg1:block bg-white shadow-md rounded-md p-5 cursor-pointer">
<div class="w-full h-full flex flex-col gap-3 items-center">
<div class="w-full flex justify-center items-center">
<p class="text-[22px] text-slate-700 font-bold uppercase text-center"><span
class="text-green-700">14</span>
Connected User</p>
</div>
<div class="w-full flex flex-wrap gap-2">
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
</div>
</div>
</div>
{% if latest_statuses_time_ago %}
<div
class="hidden xxlg1:block w-[25%] bg-white h-[1283px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
class="hidden xxlg1:block w-full bg-white h-[1283px] overflow-y-auto overflow-hidden 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">
@ -646,7 +803,8 @@
</div>
</div>
{% else %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[305px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[305px] overflow-y-auto overflow-hidden 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">
@ -657,6 +815,7 @@
{% endif %}
</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">

@ -22,7 +22,8 @@
onclick="closeModal()">
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512">
<path
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" fill="grey"/>
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"
fill="grey" />
</svg>
</div>
</div>
@ -119,7 +120,8 @@
<div class="w-full h-fit flex justify-end items-center bg-gray-100 shadow-md rounded-md px-3 py-3 mt-4">
<div class="w-full s:w-fit flex flex-col s:flex-row justify-end items-center gap-3">
<button
class="w-full s: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 deleteStaffButton" data-modal-url="{% url 'deletestaffmodal' staff.id %}" >Delete
class="w-full s: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 deleteStaffButton"
data-modal-url="{% url 'deletestaffmodal' staff.id %}">Delete
User</button>
<a href="{% url 'editstaff' staff.staff_id %}" class="w-full s:w-fit">
<button
@ -171,8 +173,163 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[25%] hidden xxlg1:flex flex-col gap-3">
<div class="w-full hidden xxlg1:block bg-white shadow-md rounded-md p-5 cursor-pointer">
<div class="w-full h-full flex flex-col gap-3 items-center">
<div class="w-full flex justify-center items-center">
<p class="text-[22px] text-slate-700 font-bold uppercase text-center"><span
class="text-green-700">14</span>
Connected User</p>
</div>
<div class="w-full flex flex-wrap gap-2">
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
</div>
</div>
</div>
{% if latest_statuses_time_ago %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[1283px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[1283px] overflow-y-auto overflow-hidden 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">
@ -181,7 +338,8 @@
</div>
</div>
{% else %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[305px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[305px] overflow-y-auto overflow-hidden 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">
@ -192,6 +350,7 @@
{% endif %}
</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">

@ -21,7 +21,8 @@
onclick="closeModal()">
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512">
<path
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" fill="grey"/>
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"
fill="grey" />
</svg>
</div>
</div>
@ -127,7 +128,8 @@
<div class="w-full h-fit flex justify-end items-center bg-gray-100 shadow-md rounded-md px-3 py-3 mt-4">
<div class="w-full s:w-fit flex flex-col s:flex-row justify-end items-center gap-3">
<button
class="w-full s: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 deleteTaskButton" data-modal-url="{% url 'deletetaskmodal' task.id %}">Delete
class="w-full s: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 deleteTaskButton"
data-modal-url="{% url 'deletetaskmodal' task.id %}">Delete
Task</button>
<a href="{% url 'edittask' task.task_id %}" class="w-full s:w-fit">
<button
@ -413,8 +415,162 @@
<!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[25%] hidden xxlg1:flex flex-col gap-3">
<div class="w-full hidden xxlg1:block bg-white shadow-md rounded-md p-5 cursor-pointer">
<div class="w-full h-full flex flex-col gap-3 items-center">
<div class="w-full flex justify-center items-center">
<p class="text-[22px] text-slate-700 font-bold uppercase text-center"><span
class="text-green-700">14</span>
Connected User</p>
</div>
<div class="w-full flex flex-wrap gap-2">
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
</div>
</div>
</div>
{% if latest_statuses_time_ago %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[1283px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[1283px] overflow-y-auto overflow-hidden 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">
@ -423,7 +579,8 @@
</div>
</div>
{% else %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[305px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[305px] overflow-y-auto overflow-hidden 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">
@ -434,6 +591,7 @@
{% endif %}
</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">

@ -544,13 +544,166 @@
</table>
</div>
</div> -->
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[25%] hidden xxlg1:flex flex-col gap-3">
<div class="w-full hidden xxlg1:block bg-white shadow-md rounded-md p-5 cursor-pointer">
<div class="w-full h-full flex flex-col gap-3 items-center">
<div class="w-full flex justify-center items-center">
<p class="text-[22px] text-slate-700 font-bold uppercase text-center"><span class="text-green-700">14</span>
Connected User</p>
</div>
<div class="w-full flex flex-wrap gap-2">
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
</div>
</div>
</div>
{% if latest_statuses_time_ago %}
<div
class="hidden xxlg1:block w-[25%] bg-white h-[1283px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
class="hidden xxlg1:block w-full bg-white h-[1283px] overflow-y-auto overflow-hidden 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">
@ -559,7 +712,7 @@
</div>
</div>
{% else %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[305px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div class="hidden xxlg1:block w-full bg-white h-[305px] overflow-y-auto overflow-hidden 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">
@ -572,6 +725,8 @@
</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">

@ -21,7 +21,8 @@
onclick="closeModal()">
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512">
<path
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" fill="grey"/>
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"
fill="grey" />
</svg>
</div>
</div>
@ -113,19 +114,22 @@
<h1 class="text-slate-800 text-[30px] font-semibold">Businness Types</h1>
<!-- FILTERING -->
<div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
<div
class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
<div class="w-full s:w-fit flex justify-start items-center gap-5">
<div class="relative h-fit w-full s:w-fit flex items-center">
<input type="text" placeholder="Enter Business Type"
class="py-2 px-3 border border-gray-300 rounded-md outline-none w-full s:w-[300px] h-[40px] relative">
<button class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
<button
class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<div class="w-full s:w-fit">
<button
class="w-full s: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 addBusinessTypeButton" data-modal-url="{% url 'addbusinesstype' %}">Add
class="w-full s: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 addBusinessTypeButton"
data-modal-url="{% url 'addbusinesstype' %}">Add
Business Type</button>
</div>
</div>
@ -176,8 +180,163 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[25%] hidden xxlg1:flex flex-col gap-3">
<div class="w-full hidden xxlg1:block bg-white shadow-md rounded-md p-5 cursor-pointer">
<div class="w-full h-full flex flex-col gap-3 items-center">
<div class="w-full flex justify-center items-center">
<p class="text-[22px] text-slate-700 font-bold uppercase text-center"><span
class="text-green-700">14</span>
Connected User</p>
</div>
<div class="w-full flex flex-wrap gap-2">
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
</div>
</div>
</div>
{% if latest_statuses_time_ago %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[1283px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[1283px] overflow-y-auto overflow-hidden 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">
@ -186,7 +345,8 @@
</div>
</div>
{% else %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[305px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[305px] overflow-y-auto overflow-hidden 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">
@ -196,7 +356,7 @@
</div>
{% endif %}
</div>
</div>
</div>
<!-- POPUP MODAL -->

@ -22,7 +22,8 @@
onclick="closeModal()">
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512">
<path
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" fill="grey"/>
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"
fill="grey" />
</svg>
</div>
</div>
@ -114,7 +115,8 @@
<h1 class="text-slate-800 text-[30px] font-semibold">Businesses</h1>
<!-- FILTERING -->
<div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
<div
class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
<div class="w-full s:w-fit flex justify-start items-center gap-5">
<div class="relative h-fit w-full s:w-fit flex items-center">
<input type="text" placeholder="Enter Business Name"
@ -165,7 +167,13 @@
{% for business in businesses %}
<tr>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<div class="w-full flex flex-col justify-center items-center gap-3">
<div class="w-[50px] h-[50px] bg-slate-600 rounded-full">
<img src='{{business.logo.url}}' alt="Business Logo"
class="w-full h-full object-cover rounded-full">
</div>
<p class="text-slate-800">{{business.name}}</p>
</div>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
@ -192,7 +200,8 @@
<i class="fa fa-edit"></i>
</div>
</a>
<div class="text-[15px] text-red-500 cursor-pointer deleteBusinessButton" data-modal-url="{% url 'deletebusinessmodal' business.id %}">
<div class="text-[15px] text-red-500 cursor-pointer deleteBusinessButton"
data-modal-url="{% url 'deletebusinessmodal' business.id %}">
<i class="fa fa-trash"></i>
</div>
</div>
@ -206,8 +215,163 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[25%] hidden xxlg1:flex flex-col gap-3">
<div class="w-full hidden xxlg1:block bg-white shadow-md rounded-md p-5 cursor-pointer">
<div class="w-full h-full flex flex-col gap-3 items-center">
<div class="w-full flex justify-center items-center">
<p class="text-[22px] text-slate-700 font-bold uppercase text-center"><span
class="text-green-700">14</span>
Connected User</p>
</div>
<div class="w-full flex flex-wrap gap-2">
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
</div>
</div>
</div>
{% if latest_statuses_time_ago %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[1283px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[1283px] overflow-y-auto overflow-hidden 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">
@ -216,7 +380,8 @@
</div>
</div>
{% else %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[305px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[305px] overflow-y-auto overflow-hidden 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">
@ -226,6 +391,7 @@
</div>
{% endif %}
</div>
</div>
</div>

@ -21,7 +21,8 @@
onclick="closeModal()">
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512">
<path
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" fill="grey"/>
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"
fill="grey" />
</svg>
</div>
</div>
@ -112,7 +113,8 @@
<h1 class="text-slate-800 text-[30px] font-semibold">Customers</h1>
<!-- FILTERING -->
<div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
<div
class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
<div class="w-full s:w-fit flex justify-start items-center gap-5">
<div class="relative h-fit w-full s:w-fit flex items-center">
<input type="text" placeholder="Enter Customer Name"
@ -210,7 +212,8 @@
</div>
</a>
<div class="text-[15px] text-red-500 cursor-pointer deleteCustomerButton" data-modal-url="{% url 'deletecustomermodal' customer.id %}">
<div class="text-[15px] text-red-500 cursor-pointer deleteCustomerButton"
data-modal-url="{% url 'deletecustomermodal' customer.id %}">
<i class="fa fa-trash"></i>
</div>
</div>
@ -225,8 +228,164 @@
<!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[25%] hidden xxlg1:flex flex-col gap-3">
<div class="w-full hidden xxlg1:block bg-white shadow-md rounded-md p-5 cursor-pointer">
<div class="w-full h-full flex flex-col gap-3 items-center">
<div class="w-full flex justify-center items-center">
<p class="text-[22px] text-slate-700 font-bold uppercase text-center"><span
class="text-green-700">14</span>
Connected User</p>
</div>
<div class="w-full flex flex-wrap gap-2">
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
</div>
</div>
</div>
{% if latest_statuses_time_ago %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[1283px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[1283px] overflow-y-auto overflow-hidden 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">
@ -235,7 +394,8 @@
</div>
</div>
{% else %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[305px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[305px] overflow-y-auto overflow-hidden 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">
@ -245,6 +405,7 @@
</div>
{% endif %}
</div>
</div>
</div>

@ -21,7 +21,8 @@
onclick="closeModal()">
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512">
<path
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" fill="grey"/>
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"
fill="grey" />
</svg>
</div>
</div>
@ -175,8 +176,163 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[25%] hidden xxlg1:flex flex-col gap-3">
<div class="w-full hidden xxlg1:block bg-white shadow-md rounded-md p-5 cursor-pointer">
<div class="w-full h-full flex flex-col gap-3 items-center">
<div class="w-full flex justify-center items-center">
<p class="text-[22px] text-slate-700 font-bold uppercase text-center"><span
class="text-green-700">14</span>
Connected User</p>
</div>
<div class="w-full flex flex-wrap gap-2">
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
</div>
</div>
</div>
{% if latest_statuses_time_ago %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[1283px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[1283px] overflow-y-auto overflow-hidden 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">
@ -185,7 +341,8 @@
</div>
</div>
{% else %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[305px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[305px] overflow-y-auto overflow-hidden 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">
@ -195,6 +352,7 @@
</div>
{% endif %}
</div>
</div>
</div>

@ -21,7 +21,8 @@
onclick="closeModal()">
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512">
<path
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" fill="grey"/>
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"
fill="grey" />
</svg>
</div>
</div>
@ -128,8 +129,8 @@
style="background-color: {{note.color}}">
<p class="text-sm text-gray-500">{{ note.date|date:"F j, Y" }}</p>
<button
class="w-[30px] h-[30px] bg-white shadow-md rounded-md p-2 flex justify-center items-center cursor-pointer hover:scale-105 duration-300 transition-transform deleteNoteButton" data-modal-url="{% url 'deletenotemodal' note.id %}"
style="color: {{note.color}};">
class="w-[30px] h-[30px] bg-white shadow-md rounded-md p-2 flex justify-center items-center cursor-pointer hover:scale-105 duration-300 transition-transform deleteNoteButton"
data-modal-url="{% url 'deletenotemodal' note.id %}" style="color: {{note.color}};">
<i class="fa fa-trash"></i>
</button>
</div>
@ -148,8 +149,164 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[25%] hidden xxlg1:flex flex-col gap-3">
<div class="w-full hidden xxlg1:block bg-white shadow-md rounded-md p-5 cursor-pointer">
<div class="w-full h-full flex flex-col gap-3 items-center">
<div class="w-full flex justify-center items-center">
<p class="text-[22px] text-slate-700 font-bold uppercase text-center"><span
class="text-green-700">14</span>
Connected User</p>
</div>
<div class="w-full flex flex-wrap gap-2">
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
</div>
</div>
</div>
{% if latest_statuses_time_ago %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[1283px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[1283px] overflow-y-auto overflow-hidden 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">
@ -158,7 +315,8 @@
</div>
</div>
{% else %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[305px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[305px] overflow-y-auto overflow-hidden 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">
@ -168,6 +326,7 @@
</div>
{% endif %}
</div>
</div>
</div>

@ -21,7 +21,8 @@
onclick="closeModal()">
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512">
<path
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" fill="grey"/>
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"
fill="grey" />
</svg>
</div>
</div>
@ -113,19 +114,22 @@
<h1 class="text-slate-800 text-[30px] font-semibold">Project Types</h1>
<!-- FILTERING -->
<div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
<div
class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
<div class="w-full s:w-fit flex justify-start items-center gap-5">
<div class="relative h-fit w-full s:w-fit flex items-center">
<input type="text" placeholder="Enter Project Type"
class="py-2 px-3 border border-gray-300 rounded-md outline-none w-full s:w-[300px] h-[40px] relative">
<button class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
<button
class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<div class="w-full s:w-fit">
<button
class="w-full s:w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500 addProjectTypeButton" data-modal-url="{% url 'addprojecttype' %}">Add
class="w-full s:w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500 addProjectTypeButton"
data-modal-url="{% url 'addprojecttype' %}">Add
Project Type</button>
</div>
</div>
@ -176,8 +180,163 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[25%] hidden xxlg1:flex flex-col gap-3">
<div class="w-full hidden xxlg1:block bg-white shadow-md rounded-md p-5 cursor-pointer">
<div class="w-full h-full flex flex-col gap-3 items-center">
<div class="w-full flex justify-center items-center">
<p class="text-[22px] text-slate-700 font-bold uppercase text-center"><span
class="text-green-700">14</span>
Connected User</p>
</div>
<div class="w-full flex flex-wrap gap-2">
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
</div>
</div>
</div>
{% if latest_statuses_time_ago %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[1283px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[1283px] overflow-y-auto overflow-hidden 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">
@ -186,7 +345,8 @@
</div>
</div>
{% else %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[305px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[305px] overflow-y-auto overflow-hidden 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">
@ -196,6 +356,7 @@
</div>
{% endif %}
</div>
</div>
</div>

@ -178,7 +178,8 @@
<p class="text-slate-800">{{project.name}}</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300" style="background-color: {{ project.recent_note_color }}">
<td class="px-6 py-4 text-center text-sm border-r border-gray-300"
style="background-color: {{ project.recent_note_color }}">
{% if project.recent_note_date %}
<p class="text-gray-500">{{ project.recent_note_text }}</p>
{% else %}
@ -239,9 +240,163 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[25%] hidden xxlg1:flex flex-col gap-3">
<div class="w-full hidden xxlg1:block bg-white shadow-md rounded-md p-5 cursor-pointer">
<div class="w-full h-full flex flex-col gap-3 items-center">
<div class="w-full flex justify-center items-center">
<p class="text-[22px] text-slate-700 font-bold uppercase text-center"><span
class="text-green-700">14</span>
Connected User</p>
</div>
<div class="w-full flex flex-wrap gap-2">
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
</div>
</div>
</div>
{% if latest_statuses_time_ago %}
<div
class="hidden xxlg1:block w-[25%] bg-white h-[1283px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
class="hidden xxlg1:block w-full bg-white h-[1283px] overflow-y-auto overflow-hidden 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">
@ -250,7 +405,8 @@
</div>
</div>
{% else %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[305px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[305px] overflow-y-auto overflow-hidden 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">
@ -260,6 +416,7 @@
</div>
{% endif %}
</div>
</div>
</div>

@ -21,7 +21,8 @@
onclick="closeModal()">
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512">
<path
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" fill="grey"/>
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"
fill="grey" />
</svg>
</div>
</div>
@ -112,7 +113,8 @@
<h1 class="text-slate-800 text-[30px] font-semibold">References</h1>
<!-- FILTERING -->
<div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
<div
class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
<div class="w-full s:w-fit flex justify-start items-center gap-5">
<div class="relative h-fit w-full s:w-fit flex items-center">
<input type="text" placeholder="Enter Reference"
@ -185,8 +187,163 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[25%] hidden xxlg1:flex flex-col gap-3">
<div class="w-full hidden xxlg1:block bg-white shadow-md rounded-md p-5 cursor-pointer">
<div class="w-full h-full flex flex-col gap-3 items-center">
<div class="w-full flex justify-center items-center">
<p class="text-[22px] text-slate-700 font-bold uppercase text-center"><span
class="text-green-700">14</span>
Connected User</p>
</div>
<div class="w-full flex flex-wrap gap-2">
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
</div>
</div>
</div>
{% if latest_statuses_time_ago %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[1283px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[1283px] overflow-y-auto overflow-hidden 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">
@ -195,7 +352,8 @@
</div>
</div>
{% else %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[305px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[305px] overflow-y-auto overflow-hidden 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">
@ -205,6 +363,7 @@
</div>
{% endif %}
</div>
</div>
</div>

@ -22,7 +22,8 @@
onclick="closeModal()">
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512">
<path
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" fill="grey"/>
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"
fill="grey" />
</svg>
</div>
</div>
@ -114,7 +115,8 @@
<h1 class="text-slate-800 text-[30px] font-semibold">Staff Positions</h1>
<!-- FILTERING -->
<div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
<div
class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
<div class="w-full s:w-fit flex justify-start items-center gap-5">
<div class="relative h-fit w-full s:w-fit flex items-center">
<input type="text" placeholder="Enter Position"
@ -179,8 +181,163 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[25%] hidden xxlg1:flex flex-col gap-3">
<div class="w-full hidden xxlg1:block bg-white shadow-md rounded-md p-5 cursor-pointer">
<div class="w-full h-full flex flex-col gap-3 items-center">
<div class="w-full flex justify-center items-center">
<p class="text-[22px] text-slate-700 font-bold uppercase text-center"><span
class="text-green-700">14</span>
Connected User</p>
</div>
<div class="w-full flex flex-wrap gap-2">
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
</div>
</div>
</div>
{% if latest_statuses_time_ago %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[1283px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[1283px] overflow-y-auto overflow-hidden 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">
@ -189,7 +346,8 @@
</div>
</div>
{% else %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[305px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[305px] overflow-y-auto overflow-hidden 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">
@ -199,6 +357,7 @@
</div>
{% endif %}
</div>
</div>
</div>

@ -22,7 +22,8 @@
onclick="closeModal()">
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512">
<path
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" fill="grey"/>
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"
fill="grey" />
</svg>
</div>
</div>
@ -159,14 +160,15 @@
<tbody class="bg-white divide-y divide-gray-200">
<!-- 1st row -->
{% for staff in staffs %}
<tr>
{% if staff.active %}
<tr class="bg-green-700 bg-opacity-20">
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<div class="w-full flex flex-col justify-center items-center gap-3">
<div class="w-[50px] h-[50px] bg-slate-600 rounded-full">
<img src='{{staff.image.url}}' alt="user-image"
class="w-full h-full object-cover rounded-full">
</div>
<p class="text-gray-500">{{staff.user.first_name}} {{staff.user.last_name}}</p>
<p class="text-slate-800">{{staff.user.first_name}} {{staff.user.last_name}}</p>
</div>
</td>
@ -186,12 +188,49 @@
<i class="fa fa-edit"></i>
</div>
</a>
<div class="text-[15px] text-red-500 cursor-pointer deleteStaffButton" data-modal-url="{% url 'deletestaffmodal' staff.id %}">
<div class="text-[15px] text-red-500 cursor-pointer deleteStaffButton"
data-modal-url="{% url 'deletestaffmodal' staff.id %}">
<i class="fa fa-trash"></i>
</div>
</div>
</td>
</tr>
{% else %}
<tr class="bg-red-500 bg-opacity-20">
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<div class="w-full flex flex-col justify-center items-center gap-3">
<div class="w-[50px] h-[50px] bg-slate-600 rounded-full">
<img src='{{staff.image.url}}' alt="user-image"
class="w-full h-full object-cover rounded-full">
</div>
<p class="text-slate-800">{{staff.user.first_name}} {{staff.user.last_name}}</p>
</div>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{staff.user.email}}</p>
</td>
<td class="px-6 py-4 text-center text-sm">
<div class="flex justify-center items-center gap-3">
<a href="{% url 'userdetails' staff.staff_id %}">
<div class="text-[15px] text-blue-500 cursor-pointer">
<i class="fa fa-eye"></i>
</div>
</a>
<a href="{% url 'editstaff' staff.staff_id %}">
<div class="text-[15px] text-blue-500 cursor-pointer">
<i class="fa fa-edit"></i>
</div>
</a>
<div class="text-[15px] text-red-500 cursor-pointer deleteStaffButton"
data-modal-url="{% url 'deletestaffmodal' staff.id %}">
<i class="fa fa-trash"></i>
</div>
</div>
</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
@ -200,8 +239,163 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[25%] hidden xxlg1:flex flex-col gap-3">
<div class="w-full hidden xxlg1:block bg-white shadow-md rounded-md p-5 cursor-pointer">
<div class="w-full h-full flex flex-col gap-3 items-center">
<div class="w-full flex justify-center items-center">
<p class="text-[22px] text-slate-700 font-bold uppercase text-center"><span
class="text-green-700">14</span>
Connected User</p>
</div>
<div class="w-full flex flex-wrap gap-2">
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
</div>
</div>
</div>
{% if latest_statuses_time_ago %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[1283px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[1283px] overflow-y-auto overflow-hidden 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">
@ -210,7 +404,8 @@
</div>
</div>
{% else %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[305px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[305px] overflow-y-auto overflow-hidden 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">
@ -220,6 +415,7 @@
</div>
{% endif %}
</div>
</div>
</div>

@ -21,7 +21,8 @@
onclick="closeModal()">
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512">
<path
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" fill="grey"/>
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"
fill="grey" />
</svg>
</div>
</div>
@ -113,7 +114,8 @@
<h1 class="text-slate-800 text-[30px] font-semibold">Tags</h1>
<!-- FILTERING -->
<div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row gap-3 justify-between items-center">
<div
class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row gap-3 justify-between items-center">
<div class="w-full s:w-fit flex justify-start items-center gap-5">
<div class="relative h-fit w-full s:w-fit flex items-center">
<input type="text" placeholder="Enter Tag Name"
@ -178,8 +180,163 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[25%] hidden xxlg1:flex flex-col gap-3">
<div class="w-full hidden xxlg1:block bg-white shadow-md rounded-md p-5 cursor-pointer">
<div class="w-full h-full flex flex-col gap-3 items-center">
<div class="w-full flex justify-center items-center">
<p class="text-[22px] text-slate-700 font-bold uppercase text-center"><span
class="text-green-700">14</span>
Connected User</p>
</div>
<div class="w-full flex flex-wrap gap-2">
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
</div>
</div>
</div>
{% if latest_statuses_time_ago %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[1283px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[1283px] overflow-y-auto overflow-hidden 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">
@ -188,7 +345,8 @@
</div>
</div>
{% else %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[305px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[305px] overflow-y-auto overflow-hidden 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">
@ -198,6 +356,7 @@
</div>
{% endif %}
</div>
</div>
</div>

@ -20,7 +20,8 @@
onclick="closeModal()">
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512">
<path
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" fill="grey"/>
d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"
fill="grey" />
</svg>
</div>
</div>
@ -496,8 +497,163 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
<div class="w-[25%] hidden xxlg1:flex flex-col gap-3">
<div class="w-full hidden xxlg1:block bg-white shadow-md rounded-md p-5 cursor-pointer">
<div class="w-full h-full flex flex-col gap-3 items-center">
<div class="w-full flex justify-center items-center">
<p class="text-[22px] text-slate-700 font-bold uppercase text-center"><span
class="text-green-700">14</span>
Connected User</p>
</div>
<div class="w-full flex flex-wrap gap-2">
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
</div>
</div>
</div>
{% if latest_statuses_time_ago %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[1283px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[1283px] overflow-y-auto overflow-hidden 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">
@ -506,7 +662,8 @@
</div>
</div>
{% else %}
<div class="hidden xxlg1:block w-[25%] bg-white h-[305px] overflow-y-auto overflow-hidden rounded-md shadow-md p-5">
<div
class="hidden xxlg1:block w-full bg-white h-[305px] overflow-y-auto overflow-hidden 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">
@ -516,6 +673,7 @@
</div>
{% endif %}
</div>
</div>
</div>

@ -8,7 +8,7 @@
<title>{% block title %} Osina {% endblock %}</title>
<link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
@ -340,160 +340,18 @@
</div>
</div>
<div class="bg-white shadow-md rounded-md p-5 cursor-pointer">
<div class="w-full h-full flex flex-col gap-3 items-center">
<div class="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 uppercase"><span class="text-green-700">14</span> Connected</p>
<i class="fa fa-users" style="font-size: 30px; color: green;"></i>
</div>
<div class="w-full flex flex-wrap gap-2">
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
<p class="text-[22px] text-slate-800 font-bold uppercase">Tickets</p>
<img src="{% static 'images/ticket.png' %}" class="w-[35px]">
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
class="w-[60px] h-[60px] bg-white border-2 rounded-full border-red-500 flex justify-center items-center">
<p class="text-red-500 text-xl font-semibold">2</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/avatar3.png' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1669023415919.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
<div class="relative userProfileContainer">
<div
class="w-fit py-2 px-3 bg-gray-700 bg-opacity-60 text-white absolute bottom-10 whitespace-nowrap hidden userName">
<p>Salim Elliye</p>
</div>
<div class="w-[30px] h-[30px] rounded-full userImage">
<img src="{% static 'images/1686063290067.jpeg' %}" alt="User Image"
class="w-full h-full rounded-full object-cover">
</div>
</div>
</div>
</div>
</div>
</div>
{% block content %}

@ -22,11 +22,12 @@
{% for point in points %}
{% if point.status == 'Not Completed' %}
<div class="w-full flex justify-between items-center py-2 border-b border-gray-200">
<div class="w-full flex flex-col gap-1">
<div class="w-full flex justify-between items-end py-2 border-b border-gray-200">
<div class="w-[380px]">
<p class="text-slate-800">{{point.text}}</p>
</div>
<div class="flex justify-end items-center gap-2">
<!-- <div class="flex justify-end items-center gap-2">
<form method="post" action="{% url 'mark_point_working_on' point.id task.id %}">
{% csrf_token %}
<button type="submit"
@ -45,8 +46,74 @@
<i class="fa fa-trash"></i>
</button>
</form>
</div> -->
<div class="flex justify-end items-center gap-2">
<button
class="w-[40px] h-[40px] rounded-full bg-gray-50 shadow-md text-gray-500 border border-gray-100 flex justify-center items-center hover:scale-105 transition-transform duration-300" id="startPointButton">
<i class="fa fa-play"></i>
</button>
<button
class="w-[40px] h-[40px] rounded-full bg-gray-50 shadow-md text-gray-500 border border-gray-100 justify-center items-center hidden hover:scale-105 transition-transform duration-300" id="pausePointButton">
<i class="fa fa-pause"></i>
</button>
<button
class="w-[40px] h-[40px] rounded-full bg-green-700 shadow-md text-white border border-green-700 flex justify-center items-center hover:scale-105 transition-transform duration-300">
<i class="fa fa-check"></i>
</button>
<!-- COMPLETED BUTTON -->
<!-- <button
class="w-[40px] h-[40px] rounded-full bg-green-700 shadow-md text-white border border-green-700 flex justify-center items-center opacity-20 cursor-default">
<i class="fa fa-check"></i>
</button> -->
<form method="post" action="{% url 'deletepointmodal' point.id task.id %}">
{% csrf_token %}
<button type="submit"
class="w-[40px] h-[40px] bg-red-500 border border-red-500 rounded-full text-white flex justify-center items-center shadow-md hover:scale-105 transition-transform duration-300">
<i class="fa fa-trash"></i>
</button>
</form>
</div>
</div>
<div class="w-full">
<p class="text-gray-500 text-sm">Total Time: <span class="font-semibold pointTotalTime text-red-500">0min</span></p>
</div>
</div>
<script>
function setTextColor(color) {
document.querySelector('.pointTotalTime').classList.remove('text-green-700', 'text-red-500');
document.querySelector('.pointTotalTime').classList.add(color);
}
document.getElementById('startPointButton').addEventListener('click', function() {
// Hide the play button
document.getElementById('startPointButton').style.display = 'none';
// Display the pause button
document.getElementById('pausePointButton').style.display = 'block';
// Set the text color to green
setTextColor('text-green-700');
});
document.getElementById('pausePointButton').addEventListener('click', function() {
// Hide the pause button
document.getElementById('pausePointButton').style.display = 'none';
// Display the play button
document.getElementById('startPointButton').style.display = 'block';
// Set the text color to red
setTextColor('text-red-500');
});
</script>
{% endif %}
{% if point.status == 'Completed' %}

Loading…
Cancel
Save