New changes.

main
nataly 1 year ago
parent f6247c300d
commit e6824e7913

Binary file not shown.

@ -925,10 +925,6 @@ video {
width: 20%; width: 20%;
} }
.w-\[200px\] {
width: 200px;
}
.w-\[220px\] { .w-\[220px\] {
width: 220px; width: 220px;
} }
@ -949,10 +945,6 @@ video {
width: 25px; width: 25px;
} }
.w-\[270px\] {
width: 270px;
}
.w-\[3\%\] { .w-\[3\%\] {
width: 3%; width: 3%;
} }
@ -1058,6 +1050,10 @@ video {
width: 100%; width: 100%;
} }
.min-w-full {
min-width: 100%;
}
.max-w-2xl { .max-w-2xl {
max-width: 42rem; max-width: 42rem;
} }
@ -1198,6 +1194,17 @@ video {
row-gap: 0.5rem; row-gap: 0.5rem;
} }
.divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-divide-opacity));
}
.overflow-hidden { .overflow-hidden {
overflow: hidden; overflow: hidden;
} }
@ -1325,6 +1332,11 @@ video {
border-color: rgb(21 128 61 / var(--tw-border-opacity)); border-color: rgb(21 128 61 / var(--tw-border-opacity));
} }
.border-orange-500 {
--tw-border-opacity: 1;
border-color: rgb(249 115 22 / var(--tw-border-opacity));
}
.border-orange-700 { .border-orange-700 {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(194 65 12 / var(--tw-border-opacity)); border-color: rgb(194 65 12 / var(--tw-border-opacity));
@ -1405,6 +1417,11 @@ video {
background-color: rgb(156 163 175 / var(--tw-bg-opacity)); background-color: rgb(156 163 175 / var(--tw-bg-opacity));
} }
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.bg-gray-500 { .bg-gray-500 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(107 114 128 / var(--tw-bg-opacity)); background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@ -1733,6 +1750,10 @@ video {
text-transform: uppercase; text-transform: uppercase;
} }
.leading-8 {
line-height: 2rem;
}
.text-blue-500 { .text-blue-500 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity)); color: rgb(59 130 246 / var(--tw-text-opacity));

@ -18,7 +18,7 @@
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500"> class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
<option value="" selected disabled>Clients</option> <option value="" selected disabled>Clients</option>
{% for customer in customers %} {% for customer in customers %}
<option value="{{customer.user.username}}">{{customer.first_name}} {{customer.last_name}}</option> <option value="{{customer.user.username}}">{{customer.user.first_name}} {{customer.user.last_name}}</option>
{% endfor %} {% endfor %}
</select> </select>

@ -43,7 +43,7 @@
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500"> class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
<option value="" selected disabled>Assigned To</option> <option value="" selected disabled>Assigned To</option>
{% for staff in staffs %} {% for staff in staffs %}
<option value="{{staff.id}}">{{staff.first_name}} {{staff.last_name}}</option> <option value="{{staff.id}}">{{staff.user.first_name}} {{staff.user.last_name}}</option>
{% endfor %} {% endfor %}
</select> </select>

@ -128,13 +128,13 @@
<div class="w-full flex flex-col gap-4 mt-5"> <div class="w-full flex flex-col gap-4 mt-5">
<div> <div>
<p class="text-gray-500 text-xl">Client: <span <p class="text-gray-500 text-xl">Client: <span
class="text-slate-800 text-xl font-semibold">{{project.customer.first_name}} class="text-slate-800 text-xl font-semibold">{{project.customer.user.first_name}}
{{project.customer.last_name}}</span></p> {{project.customer.user.last_name}}</span></p>
</div> </div>
<div> <div>
<p class="text-gray-500 text-xl">Project Manager: <span <p class="text-gray-500 text-xl">Project Manager: <span
class="text-slate-800 text-xl font-semibold">{{project.manager.first_name}} class="text-slate-800 text-xl font-semibold">{{project.manager.user.first_name}}
{{project.manager.last_name}}</span></p> {{project.manager.last_name}}</span></p>
</div> </div>
@ -143,7 +143,7 @@
<p class="text-gray-500 text-xl">Member(s): <p class="text-gray-500 text-xl">Member(s):
{% for member in project.members.all %} {% for member in project.members.all %}
<span class="text-slate-800 text-xl font-semibold"> <span class="text-slate-800 text-xl font-semibold">
{{member.first_name}} {{member.last_name}} {% if not forloop.last %}, {% endif %} {{member.user.first_name}} {{member.user.last_name}} {% if not forloop.last %}, {% endif %}
{% endfor %}</span> {% endfor %}</span>
</p> </p>
</div> </div>

@ -81,58 +81,69 @@
</div> </div>
</div> </div>
<div class="mt-5 w-full h-fit">
<div class="w-full border-t border-x border-gray-300 rounded-t-md mt-3">
<!-- HEADER -->
<div class="w-full h-[60px] flex items-center justify-between">
<div class="w-[35%] h-full border-r border-gray-300 flex justify-center items-center">
<p class="text-sm">Name</p>
</div>
<div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
<p class="text-sm">Business Type</p>
</div>
<div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
<p class="text-sm">Financial number</p>
</div>
<div class="w-[15%] h-full flex justify-center items-center">
<p class="text-sm">Actions</p>
</div>
</div>
<!-- BODY --> <div class="overflow-x-auto border border-gray-300 rounded-md mt-5" id="customersContainer">
<div class="w-full border-t border-gray-300"> <table class="min-w-full divide-y">
<!-- ROW --> <!-- TABLE HEADER -->
<thead class="bg-gray-50">
<tr>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Name
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Business Type
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Financial Number
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
Actions
</th>
</tr>
</thead>
<!-- TABLE BODY -->
<tbody class="bg-white divide-y divide-gray-200">
<!-- 1st row -->
{% for business in businesses %} {% for business in businesses %}
<div class="w-full h-[50px] flex justify-between items-center border-b border-gray-300"> <tr>
<div class="w-[35%] h-full border-r border-gray-300 flex justify-center items-center"> <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-sm">{{business.name}}</p> <p class="text-slate-800">{{business.name}}</p>
</div> </td>
<div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
<p class="text-sm">{{business.business_type}}</p> <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
</div> <p class="text-slate-800">{{business.business_type}}</p>
<div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center"> </td>
<p class="text-sm">{{business.financial_number}}</p>
</div> <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<div class="w-[15%] h-full flex justify-center items-center gap-3"> <p class="text-slate-800">{{business.financial_number}}</p>
<a href="{% url 'businessdetails' business.business_id %}"> </td>
<div class="text-[18px] text-blue-500 cursor-pointer">
<i class="fa fa-eye"></i> <td class="px-6 py-4 text-center text-sm">
</div> <div class="flex justify-center items-center gap-3">
</a> <a href="{% url 'businessdetails' business.business_id %}">
<a href="{% url 'editbusiness' %}"> <div class="text-[15px] text-blue-500 cursor-pointer">
<div class="text-[18px] text-blue-500 cursor-pointer"> <i class="fa fa-eye"></i>
<i class="fa fa-edit"></i> </div>
</a>
<a href="{% url 'editbusiness' %}">
<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> </div>
</a>
<div class="text-[18px] text-red-500 cursor-pointer">
<i class="fa fa-trash"></i>
</div> </div>
</div> </td>
</div> </tr>
{% endfor %} {% endfor %}
</tbody>
</div> </table>
</div>
</div> </div>
</div> </div>
</div> </div>

@ -66,7 +66,8 @@
<div class="relative h-fit w-fit flex items-center"> <div class="relative h-fit w-fit flex items-center">
<input type="text" placeholder="Enter Customer Name" <input type="text" placeholder="Enter Customer Name"
class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative"> class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative">
<button class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white"> <button
class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
<i class="fa fa-search"></i> <i class="fa fa-search"></i>
</button> </button>
</div> </div>
@ -80,86 +81,93 @@
</div> </div>
</div> </div>
<div class="mt-5 w-full h-fit"> <div class="overflow-x-auto border border-gray-300 rounded-md mt-5" id="customersContainer">
<div class="w-full border-x border-t border-gray-300 rounded-t-md "> <table class="min-w-full divide-y">
<!-- TABLE HEADER --> <!-- TABLE HEADER -->
<div <thead class="bg-gray-50">
class="w-full flex justify-between items-center h-[60px] border-b border-gray-300 rounded-t-md"> <tr>
<div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center"> <th scope="col"
<p class="text-slate-800">First Name</p> class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
</div> Customer
<div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center"> </th>
<p>Last Name</p> <th scope="col"
</div> class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
<div class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center"> User
<p class="text-slate-800">User</p> </th>
</div> <th scope="col"
<div class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center"> class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
<p class="text-slate-800">Status</p> Status
</div> </th>
<div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center"> <th scope="col"
<p class="text-slate-800">Business</p> class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
</div> Business
<div class="w-[10%] h-full flex justify-center items-center"> </th>
Actions <th scope="col"
</div> class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
</div> Actions
</th>
</tr>
</thead>
<!-- TABLE BODY --> <!-- TABLE BODY -->
<div class="w-full"> <tbody class="bg-white divide-y divide-gray-200">
{% for customer in customers %}
<!-- 1st row --> <!-- 1st row -->
<div class="w-full h-[60px] flex justify-between items-center border-b border-gray-300"> {% for customer in customers %}
<div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center"> <tr>
<p class="text-gray-500">{{customer.user.first_name}}</p> <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
</div> <p class="text-slate-800">{{customer.user.first_name}}
<div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center"> {{customer.user.last_name}}</p>
<p class="text-gray-500">{{customer.user.last_name}}</p> </td>
</div>
<div class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center"> <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-gray-500">{{customer.user.username}}</p> <p class="text-slate-800">{{customer.user.username}}</p>
</div> </td>
{% if customer.status == 'Active' %} {% if customer.status == 'Active' %}
<div <td class="px-6 py-4 text-center text-sm border-r border-gray-300 bg-green-700">
class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-green-700">
<p class="text-white">{{customer.status}}</p> <p class="text-white">{{customer.status}}</p>
</div> </td>
{% endif %} {% endif %}
{% if customer.status == 'Terminated' %} {% if customer.status == 'Terminated' %}
<div <td class="px-6 py-4 text-center text-sm border-r border-gray-300 bg-gray-500">
class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-gray-500">
<p class="text-white">{{customer.status}}</p> <p class="text-white">{{customer.status}}</p>
</div> </td>
{% endif %} {% endif %}
{% if customer.status == 'Suspended' %} {% if customer.status == 'Suspended' %}
<div <td class="px-6 py-4 text-center text-sm border-r border-gray-300 bg-red-500">
class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-red-500">
<p class="text-white">{{customer.status}}</p> <p class="text-white">{{customer.status}}</p>
</div> </td>
{% endif %} {% endif %}
<div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
<p class="text-gray-500">{{customer.business}}</p> <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
</div> <p class="text-slate-800">{{customer.business}}</p>
<div class="w-[10%] h-full flex justify-center items-center gap-3"> </td>
<a href="{% url 'customerdetails' customer.customer_id %}">
<div class="text-[15px] text-blue-500 cursor-pointer"> <td class="px-6 py-4 text-center text-sm">
<i class="fa fa-eye"></i> <div class="w-full flex justify-center items-center gap-3">
</div> <a href="{% url 'customerdetails' customer.customer_id %}">
</a> <div class="text-[15px] text-blue-500 cursor-pointer">
<a href="{% url 'editcustomer' %}"> <i class="fa fa-eye"></i>
<div class="text-[15px] text-blue-500 cursor-pointer"> </div>
<i class="fa fa-edit"></i> </a>
<a href="{% url 'editcustomer' %}">
<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> </div>
</a>
<div class="text-[15px] text-red-500 cursor-pointer">
<i class="fa fa-trash"></i>
</div> </div>
</div> </td>
</div> </tr>
{% endfor %} {% endfor %}
</tbody>
</div> </table>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -168,7 +176,7 @@
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1> <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-full h-fit mt-2" id="activitiesContainer">
{% include 'recent-activities.html' %} {% include 'recent-activities.html' %}
</div> </div>
</div> </div>

@ -89,7 +89,8 @@
class="w-full flex justify-between items-center h-[60px] border-b border-gray-300 rounded-t-md"> class="w-full flex justify-between items-center h-[60px] border-b border-gray-300 rounded-t-md">
<div class="w-full h-full flex justify-start items-center px-4"> <div class="w-full h-full flex justify-start items-center px-4">
<p class="text-slate-800 text-xl">Report By <span <p class="text-slate-800 text-xl">Report By <span
class="text-blue-500 font-semibold">{{report.staff.first_name}} {{report.staff.last_name}}</span> On <span class="text-blue-500 font-semibold">{{report.staff.user.first_name}}
{{report.user.staff.last_name}}</span> On <span
class="text-blue-500 font-semibold">{{report.date}}</span></p> class="text-blue-500 font-semibold">{{report.date}}</span></p>
</div> </div>
</div> </div>
@ -98,11 +99,8 @@
<div class="w-full"> <div class="w-full">
<!-- 1st row --> <!-- 1st row -->
<div class="w-full h-fit flex justify-between items-center border-b border-gray-300"> <div class="w-full h-fit flex justify-between items-center border-b border-gray-300">
<div <div class="w-full h-full p-5 text-gray-500">
class="w-full h-full flex justify-start items-center p-4"> {{ report.text|linebreaks }}
<p class="text-gray-600 font-light">
{{report.text}}
</p>
</div> </div>
</div> </div>
</div> </div>
@ -111,7 +109,7 @@
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
@ -120,7 +118,7 @@
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1> <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-full h-fit mt-2" id="activitiesContainer">
{% include 'recent-activities.html' %} {% include 'recent-activities.html' %}
</div> </div>
</div> </div>

@ -77,41 +77,47 @@
</div> </div>
</div> </div>
<div class="mt-5 w-full h-fit"> <div class="overflow-x-auto border border-gray-300 rounded-md mt-5" id="customersContainer">
<div class="w-full border-x border-t border-gray-300 rounded-t-md "> <table class="min-w-full divide-y">
<!-- TABLE HEADER --> <!-- TABLE HEADER -->
<div <thead class="bg-gray-50">
class="w-full flex justify-between items-center h-[60px] border-b border-gray-300 rounded-t-md"> <tr>
<div class="w-[60%] h-full border-r border-gray-300 flex justify-center items-center"> <th scope="col"
<p class="text-slate-800">Project Type</p> class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
</div> Project Type
<div class="w-[40%] h-full flex justify-center items-center"> </th>
Actions <th scope="col"
</div> class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
</div> Actions
</th>
</tr>
</thead>
<!-- TABLE BODY --> <!-- TABLE BODY -->
<div class="w-full"> <tbody class="bg-white divide-y divide-gray-200">
<!-- 1st row --> <!-- 1st row -->
{% for type in projecttypes %} {% for type in projecttypes %}
<div class="w-full h-[60px] flex justify-between items-center border-b border-gray-300"> <tr>
<div class="w-[60%] h-full border-r border-gray-300 flex justify-center items-center"> <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-gray-500">{{type.name}}</p> <p class="text-slate-800">{{type.name}}</p>
</div> </td>
<div class="w-[40%] h-full flex justify-center items-center gap-3">
<a href="{% url 'editprojecttype' type.id %}"> <td class="px-6 py-4 text-center text-sm">
<div class="text-[15px] text-blue-500 cursor-pointer"> <div class="flex justify-center items-center gap-3">
<i class="fa fa-edit"></i> <a href="{% url 'editprojecttype' type.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">
<i class="fa fa-trash"></i>
</div> </div>
</a>
<div class="text-[15px] text-red-500 cursor-pointer">
<i class="fa fa-trash"></i>
</div> </div>
</div> </td>
</div> </tr>
{% endfor %} {% endfor %}
</div> </tbody>
</div> </table>
</div> </div>
</div> </div>
</div> </div>

@ -62,7 +62,7 @@
<!-- PROJECT FILTERING --> <!-- PROJECT FILTERING -->
<div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-between items-center"> <div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-between items-center">
<div class="flex justify-start items-center gap-5"> <div class="flex justify-start items-center gap-3">
<div class="relative h-fit w-fit flex items-center"> <div class="relative h-fit w-fit flex items-center">
<input type="text" placeholder="Enter Project Name" <input type="text" placeholder="Enter Project Name"
class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative"> class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative">
@ -89,86 +89,99 @@
</div> </div>
</div> </div>
<div class="mt-5 w-full h-fit">
<div class="w-full border-x border-t border-gray-300 rounded-t-md "> <div class="overflow-x-auto border border-gray-300 rounded-md mt-5" id="customersContainer">
<table class="min-w-full divide-y">
<!-- TABLE HEADER --> <!-- TABLE HEADER -->
<div <thead class="bg-gray-50">
class="w-full flex justify-between items-center h-[60px] border-b border-gray-300 rounded-t-md"> <tr>
<div class="w-[10%] h-full border-r border-gray-300 flex justify-center items-center"> <th scope="col"
<p class="text-slate-800">#</p> class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
</div> #
<div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center"> </th>
<p>Project</p> <th scope="col"
</div> class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
<div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center"> Project
<p class="text-slate-800">Client</p> </th>
</div> <th scope="col"
<div class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center"> class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
<p class="text-slate-800">Status</p> Client
</div> </th>
<div class="w-[15%] h-full flex justify-center items-center"> <th scope="col"
<p class="text-slate-800">Action</p> class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
</div> Status
</div> </th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
Actions
</th>
</tr>
</thead>
<!-- TABLE BODY --> <!-- TABLE BODY -->
<div class="w-full"> <tbody class="bg-white divide-y divide-gray-200">
<!-- 1st row --> <!-- 1st row -->
{% for project in projects %} {% for project in projects %}
<div class="w-full h-[60px] flex justify-between items-center border-b border-gray-300"> <tr>
<div class="w-[10%] h-full border-r border-gray-300 flex justify-center items-center"> <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-gray-500">{{project.project_id}}</p> <p class="text-slate-800">{{project.project_id}}</p>
</div> </td>
<div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
<p class="text-gray-500">{{project.name}}</p> <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
</div> <p class="text-slate-800">{{project.name}}</p>
<div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center"> </td>
<p class="text-gray-500">{{project.customer}}</p>
</div> <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{project.customer}}</p>
</td>
{% if project.status == 'Completed' %} {% if project.status == 'Completed' %}
<div <td class="px-6 py-4 text-center text-sm border-r border-gray-300 bg-green-700">
class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-green-700">
<p class="text-white">{{project.status}}</p> <p class="text-white">{{project.status}}</p>
</div> </td>
{% endif %} {% endif %}
{% if project.status == 'Cancelled' %} {% if project.status == 'Cancelled' %}
<div <td class="px-6 py-4 text-center text-sm border-r border-gray-300 bg-red-500">
class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-red-500">
<p class="text-white">{{project.status}}</p> <p class="text-white">{{project.status}}</p>
</div> </td>
{% endif %} {% endif %}
{% if project.status == 'Active' %} {% if project.status == 'Active' %}
<div <td class="px-6 py-4 text-center text-sm border-r border-gray-300 bg-orange-500">
class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-orange-500">
<p class="text-white">{{project.status}}</p> <p class="text-white">{{project.status}}</p>
</div> </td>
{% endif %} {% endif %}
{% if project.status == 'Pending' %} {% if project.status == 'Pending' %}
<div <td class="px-6 py-4 text-center text-sm border-r border-gray-300 bg-yellow-400">
class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-yellow-400">
<p class="text-white">{{project.status}}</p> <p class="text-white">{{project.status}}</p>
</div> </td>
{% endif %} {% endif %}
<div class="w-[15%] h-full flex justify-center items-center gap-4">
<a href="{% url 'detailed-project' project.project_id %}"> <td class="px-6 py-4 text-center text-sm">
<div class="text-[18px] text-blue-500 cursor-pointer"> <div class="flex justify-center items-center gap-3">
<i class="fa fa-eye"></i> <a href="{% url 'detailed-project' project.project_id %}">
</div> <div class="text-[15px] text-blue-500 cursor-pointer">
</a> <i class="fa fa-eye"></i>
<a href="{% url 'editproject' %}"> </div>
<div class="text-[18px] text-blue-500 cursor-pointer"> </a>
<i class="fa fa-edit"></i> <a href="{% url 'editproject' %}">
<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> </div>
</a>
<div class="text-[18px] text-red-500 cursor-pointer">
<i class="fa fa-trash"></i>
</div> </div>
</div> </td>
</div> </tr>
{% endfor %} {% endfor %}
</tbody>
</div> </table>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -178,7 +191,7 @@
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1> <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-full h-fit mt-2" id="activitiesContainer">
{% include 'recent-activities.html' %} {% include 'recent-activities.html' %}
</div> </div>
</div> </div>

@ -65,59 +65,69 @@
<div class="relative h-fit w-fit flex items-center"> <div class="relative h-fit w-fit flex items-center">
<input type="text" placeholder="Enter Reference" <input type="text" placeholder="Enter Reference"
class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative"> class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative">
<button class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white"> <button
class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
<i class="fa fa-search"></i> <i class="fa fa-search"></i>
</button> </button>
</div> </div>
</div> </div>
<div> <div>
<button <button
class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500 addReferenceButton" data-modal-url="{% url 'addreference' %}">Add class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500 addReferenceButton"
Reference</button> data-modal-url="{% url 'addreference' %}">Add
Reference</button>
</div> </div>
</div> </div>
<div class="mt-5 w-full h-fit"> <div class="overflow-x-auto border border-gray-300 rounded-md mt-5" id="customersContainer">
<div class="w-full border-x border-t border-gray-300 rounded-t-md "> <table class="min-w-full divide-y">
<!-- TABLE HEADER --> <!-- TABLE HEADER -->
<div <thead class="bg-gray-50">
class="w-full flex justify-between items-center h-[60px] border-b border-gray-300 rounded-t-md"> <tr>
<div class="w-[45%] h-full border-r border-gray-300 flex justify-center items-center"> <th scope="col"
<p class="text-slate-800">Reference</p> class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
</div> Reference
<div class="w-[35%] h-full border-r border-gray-300 flex justify-center items-center"> </th>
<p class="text-slate-800">Date</p> <th scope="col"
</div> class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
<div class="w-[20%] h-full flex justify-center items-center"> Date
Actions </th>
</div> <th scope="col"
</div> class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
Actions
</th>
</tr>
</thead>
<!-- TABLE BODY --> <!-- TABLE BODY -->
<div class="w-full"> <tbody class="bg-white divide-y divide-gray-200">
<!-- 1st row --> <!-- 1st row -->
{% for reference in references %} {% for reference in references %}
<div class="w-full h-[60px] flex justify-between items-center border-b border-gray-300"> <tr>
<div class="w-[45%] h-full border-r border-gray-300 flex justify-center items-center"> <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-gray-500">{{reference.name}}</p> <p class="text-slate-800">{{reference.name}}</p>
</div> </td>
<div class="w-[35%] h-full border-r border-gray-300 flex justify-center items-center">
<p class="text-gray-500">{{reference.formatted_date}}</p> <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
</div> <p class="text-slate-800">{{reference.formatted_date}}</p>
<div class="w-[20%] h-full flex justify-center items-center gap-3"> </td>
<a href="{% url 'editreference' reference.id %}">
<div class="text-[15px] text-blue-500 cursor-pointer"> <td class="px-6 py-4 text-center text-sm">
<i class="fa fa-edit"></i> <div class="flex justify-center items-center gap-3">
<a href="{% url 'editreference' reference.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">
<i class="fa fa-trash"></i>
</div> </div>
</a>
<div class="text-[15px] text-red-500 cursor-pointer">
<i class="fa fa-trash"></i>
</div> </div>
</div> </td>
</div> </tr>
{% endfor %} {% endfor %}
</div> </tbody>
</div> </table>
</div> </div>
</div> </div>
</div> </div>
@ -127,7 +137,7 @@
<h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1> <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-full h-fit mt-2" id="activitiesContainer">
{% include 'recent-activities.html' %} {% include 'recent-activities.html' %}
</div> </div>
</div> </div>

@ -80,41 +80,47 @@
</div> </div>
</div> </div>
<div class="mt-5 w-full h-fit"> <div class="overflow-x-auto border border-gray-300 rounded-md mt-5" id="customersContainer">
<div class="w-full border-x border-t border-gray-300 rounded-t-md "> <table class="min-w-full divide-y">
<!-- TABLE HEADER --> <!-- TABLE HEADER -->
<div <thead class="bg-gray-50">
class="w-full flex justify-between items-center h-[60px] border-b border-gray-300 rounded-t-md"> <tr>
<div class="w-[60%] h-full border-r border-gray-300 flex justify-center items-center"> <th scope="col"
<p class="text-slate-800">Position</p> class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
</div> Position
<div class="w-[40%] h-full flex justify-center items-center"> </th>
Actions <th scope="col"
</div> class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
</div> Actions
</th>
</tr>
</thead>
<!-- TABLE BODY --> <!-- TABLE BODY -->
<div class="w-full"> <tbody class="bg-white divide-y divide-gray-200">
<!-- 1st row --> <!-- 1st row -->
{% for position in staffpositions %} {% for position in staffpositions %}
<div class="w-full h-[60px] flex justify-between items-center border-b border-gray-300"> <tr>
<div class="w-[60%] h-full border-r border-gray-300 flex justify-center items-center"> <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-gray-500">{{position.name}}</p> <p class="text-slate-800">{{position.name}}</p>
</div> </td>
<div class="w-[40%] h-full flex justify-center items-center gap-3">
<a href="{% url 'editstaffposition' %}"> <td class="px-6 py-4 text-center text-sm">
<div class="text-[15px] text-blue-500 cursor-pointer"> <div class="flex justify-center items-center gap-3">
<i class="fa fa-edit"></i> <a href="{% url 'editstaffposition' %}">
<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> </div>
</a>
<div class="text-[15px] text-red-500 cursor-pointer">
<i class="fa fa-trash"></i>
</div> </div>
</div> </td>
</div> </tr>
{% endfor %} {% endfor %}
</div> </tbody>
</div> </table>
</div> </div>
</div> </div>
</div> </div>

@ -80,61 +80,66 @@
</div> </div>
</div> </div>
<div class="mt-5 w-full h-fit"> <div class="overflow-x-auto border border-gray-300 rounded-md mt-5" id="customersContainer">
<div class="w-full border-x border-t border-gray-300 rounded-t-md "> <table class="min-w-full divide-y">
<!-- TABLE HEADER --> <!-- TABLE HEADER -->
<div <thead class="bg-gray-50">
class="w-full flex justify-between items-center h-[60px] border-b border-gray-300 rounded-t-md"> <tr>
<div class="w-[40%] h-full border-r border-gray-300 flex justify-center items-center"> <th scope="col"
<p class="text-slate-800">Full Name</p> class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
</div> Name
<div class="w-[40%] h-full border-r border-gray-300 flex justify-center items-center"> </th>
<p>Email</p> <th scope="col"
</div> class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
<div class="w-[20%] h-full flex justify-center items-center"> Email
Actions </th>
</div> <th scope="col"
</div> class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
Actions
</th>
</tr>
</thead>
<!-- TABLE BODY --> <!-- TABLE BODY -->
<div class="w-full"> <tbody class="bg-white divide-y divide-gray-200">
<!-- 1st row --> <!-- 1st row -->
{% for staff in staffs %} {% for staff in staffs %}
<div class="w-full h-[60px] flex justify-between items-center border-b border-gray-300"> <tr>
<div class="w-[40%] h-full border-r border-gray-300 flex justify-center gap-3 items-center"> <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<div class="w-[50%] flex justify-end items-center"> <div class="w-full flex flex-col justify-center items-center gap-3">
<div class="w-[50px] h-[50px] bg-slate-600 rounded-full"> <div class="w-[50px] h-[50px] bg-slate-600 rounded-full">
<img src='{{staff.image.url}}' alt="user-image" <img src='{{staff.image.url}}' alt="user-image"
class="w-full h-full object-cover rounded-full"> class="w-full h-full object-cover rounded-full">
</div> </div>
</div>
<div class="w-[50%] flex justify-start items-center">
<p class="text-gray-500">{{staff.user.first_name}} {{staff.user.last_name}}</p> <p class="text-gray-500">{{staff.user.first_name}} {{staff.user.last_name}}</p>
</div> </div>
</div> </td>
<div class="w-[40%] h-full border-r border-gray-300 flex justify-center items-center">
<p class="text-gray-500">{{staff.user.email}}</p> <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
</div> <p class="text-slate-800">{{staff.user.email}}</p>
<div class="w-[20%] h-full flex justify-center items-center gap-3"> </td>
<a href="{% url 'userdetails' staff.staff_id %}">
<div class="text-[15px] text-blue-500 cursor-pointer"> <td class="px-6 py-4 text-center text-sm">
<i class="fa fa-eye"></i> <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' %}">
<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> </div>
</a>
<a href="{% url 'editstaff' %}">
<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> </div>
</div> </td>
</div> </tr>
{% endfor %} {% endfor %}
</div> </tbody>
</div> </table>
</div> </div>
</div> </div>
</div> </div>

@ -77,41 +77,47 @@
</div> </div>
</div> </div>
<div class="mt-5 w-full h-fit"> <div class="overflow-x-auto border border-gray-300 rounded-md mt-5" id="customersContainer">
<div class="w-full border-x border-t border-gray-300 rounded-t-md "> <table class="min-w-full divide-y">
<!-- TABLE HEADER --> <!-- TABLE HEADER -->
<div <thead class="bg-gray-50">
class="w-full flex justify-between items-center h-[60px] border-b border-gray-300 rounded-t-md"> <tr>
<div class="w-[60%] h-full border-r border-gray-300 flex justify-center items-center"> <th scope="col"
<p class="text-slate-800">Tag Name</p> class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
</div> Tag Name
<div class="w-[40%] h-full flex justify-center items-center"> </th>
Actions <th scope="col"
</div> class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
</div> Actions
</th>
</tr>
</thead>
<!-- TABLE BODY --> <!-- TABLE BODY -->
<div class="w-full"> <tbody class="bg-white divide-y divide-gray-200">
<!-- 1st row --> <!-- 1st row -->
{% for tag in tags %} {% for tag in tags %}
<div class="w-full h-[60px] flex justify-between items-center border-b border-gray-300"> <tr>
<div class="w-[60%] h-full border-r border-gray-300 flex justify-center items-center"> <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-gray-500">{{tag.name}}</p> <p class="text-slate-800">{{tag.name}}</p>
</div> </td>
<div class="w-[40%] h-full flex justify-center items-center gap-3">
<a href="{% url 'edittag' tag.id %}"> <td class="px-6 py-4 text-center text-sm">
<div class="text-[15px] text-blue-500 cursor-pointer"> <div class="flex justify-center items-center gap-3">
<i class="fa fa-edit"></i> <a href="{% url 'edittag' tag.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">
<i class="fa fa-trash"></i>
</div> </div>
</a>
<div class="text-[15px] text-red-500 cursor-pointer">
<i class="fa fa-trash"></i>
</div> </div>
</div> </td>
</div> </tr>
{% endfor %} {% endfor %}
</div> </tbody>
</div> </table>
</div> </div>
</div> </div>
</div> </div>

@ -61,7 +61,7 @@
<!-- TASK FILTERING --> <!-- TASK FILTERING -->
<div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-between items-center"> <div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-between items-center">
<div class="flex justify-start items-center gap-5"> <div class="flex justify-start items-center gap-3">
<div class="relative h-fit w-fit flex items-center"> <div class="relative h-fit w-fit flex items-center">
<input type="text" placeholder="Enter Project Name" <input type="text" placeholder="Enter Project Name"
class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative"> class="py-2 px-3 border border-gray-300 rounded-md outline-none w-[300px] h-[40px] relative">
@ -102,44 +102,79 @@
<!-- TASKS TABLE --> <!-- TASKS TABLE -->
{% for task in my_tasks %} {% for task in my_tasks %}
<div class="w-full h-fit bg-white p-3 rounded-md shadow-md mt-5"> {% for task in my_tasks %}
<div class="w-full bg-white h-fit rounded-md border border-gray-300"> <div class="w-full h-fit bg-white p-3 rounded-md shadow-md mb-5">
<div class="w-full bg-white h-fit rounded-md border border-gray-200">
<!-- TABLE HEADER --> <!-- TABLE HEADER -->
<div class="w-full flex h-[70px] rounded-t-md"> <div class="w-full h-[70px] rounded-t-md grid grid-cols-2">
{% if task.status == 'Open' %}
<div
class="w-[55%] flex justify-center items-center border-r border-b border-gray-300 bg-green-700 rounded-tl-md">
<p class="text-xl text-white">{{task.name}}</p>
</div>
{% endif %}
{% if task.status == 'Working On' %}
<div
class="w-[55%] flex justify-center items-center border-r border-b border-gray-300 bg-yellow-400 rounded-tl-md">
<p class="text-xl text-white">{{task.name}}</p>
</div>
{% endif %}
{% if task.status == 'Closed' %}
<div <div
class="w-[55%] flex justify-center items-center border-r border-b border-gray-300 bg-red-500 rounded-tl-md"> class="flex justify-center items-center border-r border-b border-gray-200 bg-slate-600 rounded-tl-md text-xl text-white font-semibold">
<p class="text-xl text-white">{{task.name}}</p> <p>{{task.name}}</p>
</div>
{% endif %}
<div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
<p class="text-slate-700">{{task.status}}</p>
</div> </div>
<div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
<p class="text-slate-700">{{task.formatted_start_date}}</p> <div class="grid grid-cols-3">
</div> {% if task.status == 'Closed' %}
<div class="w-[15%] flex justify-center items-center border-b border-gray-300"> <div class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-green-700">
<p class="text-slate-700">{{task.formatted_end_date}}</p> <p>{{task.status}}</p>
</div>
{% endif %}
{% if task.status == 'Open' %}
<div class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-red-500">
<p>{{task.status}}</p>
</div>
{% endif %}
{% if task.status == 'Working On' %}
<div class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-orange-500">
<p>{{task.status}}</p>
</div>
{% endif %}
{% if task.status == 'Closed' %}
<div class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-green-700">
<p>{{task.formatted_start_date}}</p>
</div>
{% endif %}
{% if task.status == 'Open' %}
<div class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-red-500">
<p>{{task.formatted_start_date}}</p>
</div>
{% endif %}
{% if task.status == 'Working On' %}
<div class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-orange-500">
<p>{{task.formatted_start_date}}</p>
</div>
{% endif %}
{% if task.status == 'Closed' %}
<div class="flex justify-center items-center border-r border-b border-gray-200 text-white bg-green-700">
<p>{{task.formatted_end_date}}</p>
</div>
{% endif %}
{% if task.status == 'Open' %}
<div class="flex justify-center items-center border-b border-gray-200 text-white bg-red-500 rounded-tr-md">
<p>{{task.formatted_end_date}}</p>
</div>
{% endif %}
{% if task.status == 'Working On' %}
<div class="flex justify-center items-center border-b border-gray-200 text-white bg-orange-500 rounded-tr-md">
<p>{{task.formatted_end_date}}</p>
</div>
{% endif %}
</div> </div>
</div> </div>
<!-- TABLE BODY --> <!-- TABLE BODY -->
<div class="w-full h-fit flex"> <div class="w-full h-fit grid grid-cols-2">
<!-- LEFT SIDE OF TABLE BODY --> <!-- LEFT SIDE OF TABLE BODY -->
<div class="w-[55%] h-fit bg-white p-3 rounded-bl-md"> <div class="h-fit bg-white p-3 rounded-bl-md">
<!-- 1st row --> <!-- 1st row -->
<div class="w-full flex flex-col gap-2"> <div class="w-full flex flex-col gap-2">
<div class="flex justify-start items-center gap-2"> <div class="flex justify-start items-center gap-2">
@ -154,8 +189,8 @@
<div class="flex justify-start items-center gap-2"> <div class="flex justify-start items-center gap-2">
<p class="text-gray-400 text-base">Assigned To:</p> <p class="text-gray-400 text-base">Assigned To:</p>
<p class="text-slate-700 text-base">{{task.assigned_to.first_name}} <p class="text-slate-700 text-base">{{task.assigned_to.user.first_name}}
{{task.assigned_to.last_name}}</p> {{task.assigned_to.user.last_name}}</p>
</div> </div>
<div class="flex justify-start items-center gap-2"> <div class="flex justify-start items-center gap-2">
@ -175,44 +210,53 @@
</div> </div>
<!-- RIGHT SIDE OF TABLE BODY --> <!-- RIGHT SIDE OF TABLE BODY -->
<div class="w-[45%] h-fit bg-white flex flex-wrap justify-start rounded-br-md"> <div class="h-fit bg-white grid grid-cols-3 rounded-br-md">
<button <button
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Close</button> class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500">Close</button>
<button <button
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 updateStatusButton" class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 updateStatusButton"
data-modal-url="{% url 'updatestatus' task.task_id %}">Update data-modal-url="{% url 'updatestatus' task.task_id %}">Update
Status</button> Status</button>
<button <button
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 addTimeButton" class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 addTimeButton"
data-modal-url="{% url 'addtime' %}">Add data-modal-url="{% url 'addtime' %}">Add
Time</button> Time</button>
<button <button
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white deleteTaskButton" class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 deleteTaskButton"
data-modal-url="{% url 'deletetask' %}">Delete</button> data-modal-url="{% url 'deletetask' %}">Delete</button>
<a href="{% url 'edittask' %}" class="w-[33.33%]">
<a href="{% url 'edittask' %}">
<button <button
class="w-full p-2 border border-gray-200 text-base h-[70px] bg-blue-500 text-white">Edit</button> class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500">Edit</button>
</a> </a>
<button <button
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 showPointsButton" class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 showPointsButton"
data-modal-url="{% url 'showpoints' task.task_id %}">Show data-modal-url="{% url 'showpoints' task.task_id %}">Show
Points</button> Points</button>
<button <button
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 addPointButton" class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 addPointButton"
data-modal-url="{% url 'addpoint' task.task_id %}">Add data-modal-url="{% url 'addpoint' task.task_id %}">Add
Point</button> Point</button>
<a href="{% url 'detailed-task' task.task_id %}" class="w-[33.33%]">
<a href="{% url 'detailed-task' task.task_id %}">
<button <button
class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button> class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500">Details</button>
</a> </a>
<button <button
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md timelineButton" class="p-2 border border-gray-200 text-base h-[70px] bg-gray-100 text-gray-500 rounded-br-md timelineButton"
data-modal-url="{% url 'timeline' %}">Timeline</button> data-modal-url="{% url 'timeline' %}">Timeline</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
{% endfor %}
</div> </div>

@ -291,7 +291,7 @@
</div> </div>
</div> </div>
<div class="h-[150px] bg-white shadow-md rounded-md p-5 flex flex-col justify-between gap-3"> <div class="h-[150px] bg-white shadow-md rounded-md p-5 flex flex-col gap-3">
<div class="w-full flex justify-between items-center"> <div class="w-full flex justify-between items-center">
<p class="text-[22px] text-slate-800 font-bold uppercase">Connected Users</p> <p class="text-[22px] text-slate-800 font-bold uppercase">Connected Users</p>
<i class="fa fa-users" style="font-size: 30px; color: salmon;"></i> <i class="fa fa-users" style="font-size: 30px; color: salmon;"></i>

Loading…
Cancel
Save