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,26 +192,182 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
{% 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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
<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-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">
{% include 'recent-activities.html' %}
{% include 'recent-activities.html' %}
</div>
</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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
{% else %}
<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">
{% include 'recent-activities.html' %}
{% include 'recent-activities.html' %}
</div>
</div>
{% endif %}
</div>
{% endif %}
</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>
@ -281,25 +282,182 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
{% 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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
<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-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">
{% include 'recent-activities.html' %}
{% include 'recent-activities.html' %}
</div>
</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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
{% else %}
<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">
{% include 'recent-activities.html' %}
{% include 'recent-activities.html' %}
</div>
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>

@ -297,43 +297,45 @@
<!-- 1st row -->
{% if project.projectrequirement_set.all %}
{% for requirement in project.projectrequirement_set.all %}
<tr>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{requirement.content}}</p>
</td>
<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>
{% endfor %}
{%else%}
<p class="text-slate-800">None</p>
{% endif %}
</td>
<td class="px-6 py-4 text-center text-sm">
<div class="w-full flex justify-center items-center gap-3">
<a href="{% url 'createuserstorytask' requirement.id %}">
<button
class="w-fit py-2 px-3 bg-green-700 border border-green-700 text-white rounded-md cursor-pointer hover:bg-white hover:text-green-700">Add
Task</button>
</a>
<a href="">
<div class="text-[15px] text-blue-500 cursor-pointer">
<i class="fa fa-edit"></i>
</div>
</a>
<div class="text-[15px] text-red-500 cursor-pointer">
<i class="fa fa-trash"></i>
<tr>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{requirement.content}}</p>
</td>
<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>
{% endfor %}
{%else%}
<p class="text-slate-800">None</p>
{% endif %}
</td>
<td class="px-6 py-4 text-center text-sm">
<div class="w-full flex justify-center items-center gap-3">
<a href="{% url 'createuserstorytask' requirement.id %}">
<button
class="w-fit py-2 px-3 bg-green-700 border border-green-700 text-white rounded-md cursor-pointer hover:bg-white hover:text-green-700">Add
Task</button>
</a>
<a href="">
<div class="text-[15px] text-blue-500 cursor-pointer">
<i class="fa fa-edit"></i>
</div>
</a>
<div class="text-[15px] text-red-500 cursor-pointer">
<i class="fa fa-trash"></i>
</div>
</td>
</tr>
</div>
</td>
</tr>
{% endfor %}
{% else %}
<tr>
@ -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,26 +638,182 @@
<!-- RIGHT SIDE / USERS ACTIVITY -->
{% 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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
<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>
{% include 'recent-activities.html' %}
<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-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">
{% include 'recent-activities.html' %}
</div>
</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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
{% else %}
<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">
{% include 'recent-activities.html' %}
{% include 'recent-activities.html' %}
</div>
</div>
{% endif %}
</div>
{% endif %}
</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>
@ -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,25 +173,182 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
{% 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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
<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>
{% include 'recent-activities.html' %}
<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-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">
{% include 'recent-activities.html' %}
</div>
</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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
{% else %}
<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">
{% include 'recent-activities.html' %}
{% include 'recent-activities.html' %}
</div>
</div>
{% endif %}
</div>
{% endif %}
</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>
@ -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
@ -313,14 +315,14 @@
<div class="px-3">
<p class="text-white uppercase font-bold">Timline</p>
</div>
<button
class="h-full rounded-tr-md px-4 bg-gray-300 text-slate-700 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center addTimeButton"
data-modal-url="{% url 'addtime' %}">
<i class="fa fa-plus"></i>
</button>
</div>
<div class="overflow-x-auto border border-gray-300 rounded-b-md">
<table class="min-w-full divide-y">
<!-- TABLE HEADER -->
@ -344,16 +346,16 @@
</th>
</tr>
</thead>
<!-- TABLE BODY -->
<tbody class="bg-white divide-y divide-gray-200">
<!-- 1st row -->
<tr>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<button
class="w-fit py-1 px-3 bg-red-500 border border-red-500 text-white text-base rounded-md">Delete</button>
class="w-fit py-1 px-3 bg-red-500 border border-red-500 text-white text-base rounded-md">Delete</button>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<a class="text-slate-800">Nataly</a>
</td>
@ -361,7 +363,7 @@
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<a class="text-slate-800">6-9-2023</a>
</td>
<td class="px-6 py-4 text-center text-sm">
<a class="text-slate-800">50min</a>
</td>
@ -413,25 +415,181 @@
<!-- RIGHT SIDE / USERS ACTIVITY -->
{% 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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
<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-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">
{% include 'recent-activities.html' %}
{% include 'recent-activities.html' %}
</div>
</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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
{% else %}
<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">
{% include 'recent-activities.html' %}
{% include 'recent-activities.html' %}
</div>
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>

@ -544,30 +544,185 @@
</table>
</div>
</div> -->
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
{% 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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
{% include 'recent-activities.html' %}
<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>
</div>
{% else %}
<div class="hidden xxlg1:block w-[25%] 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">
{% include 'recent-activities.html' %}
{% if latest_statuses_time_ago %}
<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">
{% include 'recent-activities.html' %}
</div>
</div>
{% else %}
<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">
{% include 'recent-activities.html' %}
</div>
</div>
{% endif %}
</div>
{% endif %}
</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,20 +114,23 @@
<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
Business Type</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
Business Type</button>
</div>
</div>
@ -176,27 +180,183 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
{% 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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
<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>
{% include 'recent-activities.html' %}
<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-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">
{% include 'recent-activities.html' %}
</div>
</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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
{% else %}
<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">
{% include 'recent-activities.html' %}
{% include 'recent-activities.html' %}
</div>
</div>
{% endif %}
</div>
{% endif %}
</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">
<p class="text-slate-800">{{business.name}}</p>
<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,25 +215,182 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
{% 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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
<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>
{% include 'recent-activities.html' %}
<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-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">
{% include 'recent-activities.html' %}
</div>
</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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
{% else %}
<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">
{% include 'recent-activities.html' %}
{% include 'recent-activities.html' %}
</div>
</div>
{% endif %}
</div>
{% endif %}
</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,25 +228,183 @@
<!-- RIGHT SIDE / USERS ACTIVITY -->
{% 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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
<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-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">
{% include 'recent-activities.html' %}
{% include 'recent-activities.html' %}
</div>
</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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
{% else %}
<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">
{% include 'recent-activities.html' %}
{% include 'recent-activities.html' %}
</div>
</div>
{% endif %}
</div>
{% endif %}
</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,25 +176,182 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
{% 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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
<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>
{% include 'recent-activities.html' %}
<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-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">
{% include 'recent-activities.html' %}
</div>
</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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
{% else %}
<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">
{% include 'recent-activities.html' %}
{% include 'recent-activities.html' %}
</div>
</div>
{% endif %}
</div>
{% endif %}
</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,25 +149,183 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
{% 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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
<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-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">
{% include 'recent-activities.html' %}
{% include 'recent-activities.html' %}
</div>
</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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
{% else %}
<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">
{% include 'recent-activities.html' %}
{% include 'recent-activities.html' %}
</div>
</div>
{% endif %}
</div>
{% endif %}
</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,20 +114,23 @@
<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
Project Type</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
Project Type</button>
</div>
</div>
@ -176,25 +180,182 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
{% 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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
<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>
{% include 'recent-activities.html' %}
<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-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">
{% include 'recent-activities.html' %}
</div>
</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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
{% else %}
<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">
{% include 'recent-activities.html' %}
{% include 'recent-activities.html' %}
</div>
</div>
{% endif %}
</div>
{% endif %}
</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,26 +240,182 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
{% 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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
<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>
{% include 'recent-activities.html' %}
<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-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">
{% include 'recent-activities.html' %}
</div>
</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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
{% else %}
<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">
{% include 'recent-activities.html' %}
{% include 'recent-activities.html' %}
</div>
</div>
{% endif %}
</div>
{% endif %}
</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,25 +187,182 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
{% 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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
<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>
{% include 'recent-activities.html' %}
<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-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">
{% include 'recent-activities.html' %}
</div>
</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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
{% else %}
<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">
{% include 'recent-activities.html' %}
{% include 'recent-activities.html' %}
</div>
</div>
{% endif %}
</div>
{% endif %}
</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,25 +181,182 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
{% 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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
<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>
{% include 'recent-activities.html' %}
<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-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">
{% include 'recent-activities.html' %}
</div>
</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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
{% else %}
<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">
{% include 'recent-activities.html' %}
{% include 'recent-activities.html' %}
</div>
</div>
{% endif %}
</div>
{% endif %}
</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,25 +239,182 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
{% 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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
<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-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">
{% include 'recent-activities.html' %}
{% include 'recent-activities.html' %}
</div>
</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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
{% else %}
<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">
{% include 'recent-activities.html' %}
{% include 'recent-activities.html' %}
</div>
</div>
{% endif %}
</div>
{% endif %}
</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,25 +180,182 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
{% 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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
<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>
{% include 'recent-activities.html' %}
<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-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">
{% include 'recent-activities.html' %}
</div>
</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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
{% else %}
<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">
{% include 'recent-activities.html' %}
{% include 'recent-activities.html' %}
</div>
</div>
{% endif %}
</div>
{% endif %}
</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,25 +497,182 @@
</div>
<!-- RIGHT SIDE / USERS ACTIVITY -->
{% 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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
<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>
{% include 'recent-activities.html' %}
<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-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">
{% include 'recent-activities.html' %}
</div>
</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">
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
<div class="w-full h-fit mt-2" id="activitiesContainer">
{% else %}
<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">
{% include 'recent-activities.html' %}
{% include 'recent-activities.html' %}
</div>
</div>
{% endif %}
</div>
{% endif %}
</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>
<p class="text-[22px] text-slate-800 font-bold uppercase">Tickets</p>
<img src="{% static 'images/ticket.png' %}" class="w-[35px]">
</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
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>
</div>
</div>
{% block content %}

@ -22,31 +22,98 @@
{% 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-[380px]">
<p class="text-slate-800">{{point.text}}</p>
</div>
<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"
class="w-[120px] px-2 py-1 bg-transparent border border-yellow-500 rounded-md text-yellow-500 hover:bg-yellow-500 hover:text-white">Working
On</button>
</form>
<form method="post" action="{% url 'mark_point_completed' point.id task.id %}">
{% csrf_token %}
<button type="submit"
class="w-[120px] px-2 py-1 bg-transparent border border-blue-500 rounded-md text-blue-500 hover:bg-blue-500 hover:text-white">Complete</button>
</form>
<form method="post" action="{% url 'deletepointmodal' point.id task.id %}">
{% csrf_token %}
<button type="submit"
class="w-fit px-2 py-1 bg-white border border-red-500 rounded-md text-red-500 hover:bg-red-500 hover:text-white cursor-pointer">
<i class="fa fa-trash"></i>
<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">
<form method="post" action="{% url 'mark_point_working_on' point.id task.id %}">
{% csrf_token %}
<button type="submit"
class="w-[120px] px-2 py-1 bg-transparent border border-yellow-500 rounded-md text-yellow-500 hover:bg-yellow-500 hover:text-white">Working
On</button>
</form>
<form method="post" action="{% url 'mark_point_completed' point.id task.id %}">
{% csrf_token %}
<button type="submit"
class="w-[120px] px-2 py-1 bg-transparent border border-blue-500 rounded-md text-blue-500 hover:bg-blue-500 hover:text-white">Complete</button>
</form>
<form method="post" action="{% url 'deletepointmodal' point.id task.id %}">
{% csrf_token %}
<button type="submit"
class="w-fit px-2 py-1 bg-white border border-red-500 rounded-md text-red-500 hover:bg-red-500 hover:text-white cursor-pointer">
<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>
</form>
<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