New changes.

main
nataly 1 year ago
parent f6247c300d
commit e6824e7913

Binary file not shown.

@ -925,10 +925,6 @@ video {
width: 20%;
}
.w-\[200px\] {
width: 200px;
}
.w-\[220px\] {
width: 220px;
}
@ -949,10 +945,6 @@ video {
width: 25px;
}
.w-\[270px\] {
width: 270px;
}
.w-\[3\%\] {
width: 3%;
}
@ -1058,6 +1050,10 @@ video {
width: 100%;
}
.min-w-full {
min-width: 100%;
}
.max-w-2xl {
max-width: 42rem;
}
@ -1198,6 +1194,17 @@ video {
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;
}
@ -1325,6 +1332,11 @@ video {
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 {
--tw-border-opacity: 1;
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));
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.bg-gray-500 {
--tw-bg-opacity: 1;
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@ -1733,6 +1750,10 @@ video {
text-transform: uppercase;
}
.leading-8 {
line-height: 2rem;
}
.text-blue-500 {
--tw-text-opacity: 1;
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">
<option value="" selected disabled>Clients</option>
{% 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 %}
</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">
<option value="" selected disabled>Assigned To</option>
{% 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 %}
</select>

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

@ -81,58 +81,69 @@
</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="w-full border-t border-gray-300">
<!-- ROW -->
<div class="overflow-x-auto border border-gray-300 rounded-md mt-5" id="customersContainer">
<table class="min-w-full divide-y">
<!-- 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 %}
<div class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
<div class="w-[35%] h-full border-r border-gray-300 flex justify-center items-center">
<p class="text-sm">{{business.name}}</p>
</div>
<div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
<p class="text-sm">{{business.business_type}}</p>
</div>
<div class="w-[20%] h-full border-r border-gray-300 flex justify-center items-center">
<p class="text-sm">{{business.financial_number}}</p>
</div>
<div class="w-[15%] h-full flex justify-center items-center gap-3">
<a href="{% url 'businessdetails' business.business_id %}">
<div class="text-[18px] text-blue-500 cursor-pointer">
<i class="fa fa-eye"></i>
</div>
</a>
<a href="{% url 'editbusiness' %}">
<div class="text-[18px] text-blue-500 cursor-pointer">
<i class="fa fa-edit"></i>
<tr>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{business.name}}</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{business.business_type}}</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{business.financial_number}}</p>
</td>
<td class="px-6 py-4 text-center text-sm">
<div class="flex justify-center items-center gap-3">
<a href="{% url 'businessdetails' business.business_id %}">
<div class="text-[15px] text-blue-500 cursor-pointer">
<i class="fa fa-eye"></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>
</a>
<div class="text-[18px] text-red-500 cursor-pointer">
<i class="fa fa-trash"></i>
</div>
</div>
</div>
</td>
</tr>
{% endfor %}
</div>
</div>
</tbody>
</table>
</div>
</div>
</div>

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

@ -89,7 +89,8 @@
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">
<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>
</div>
</div>
@ -98,11 +99,8 @@
<div class="w-full">
<!-- 1st row -->
<div class="w-full h-fit flex justify-between items-center border-b border-gray-300">
<div
class="w-full h-full flex justify-start items-center p-4">
<p class="text-gray-600 font-light">
{{report.text}}
</p>
<div class="w-full h-full p-5 text-gray-500">
{{ report.text|linebreaks }}
</div>
</div>
</div>
@ -111,7 +109,7 @@
{% endfor %}
</div>
</div>
@ -120,7 +118,7 @@
<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>

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

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

@ -65,59 +65,69 @@
<div class="relative h-fit w-fit flex items-center">
<input type="text" placeholder="Enter Reference"
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>
</button>
</div>
</div>
<div>
<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
Reference</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
Reference</button>
</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 -->
<div
class="w-full flex justify-between items-center h-[60px] border-b border-gray-300 rounded-t-md">
<div class="w-[45%] h-full border-r border-gray-300 flex justify-center items-center">
<p class="text-slate-800">Reference</p>
</div>
<div class="w-[35%] h-full border-r border-gray-300 flex justify-center items-center">
<p class="text-slate-800">Date</p>
</div>
<div class="w-[20%] h-full flex justify-center items-center">
Actions
</div>
</div>
<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">
Reference
</th>
<th scope="col"
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
Date
</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 -->
<div class="w-full">
<tbody class="bg-white divide-y divide-gray-200">
<!-- 1st row -->
{% for reference in references %}
<div class="w-full h-[60px] flex justify-between items-center border-b border-gray-300">
<div class="w-[45%] h-full border-r border-gray-300 flex justify-center items-center">
<p class="text-gray-500">{{reference.name}}</p>
</div>
<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>
</div>
<div class="w-[20%] h-full 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>
<tr>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{reference.name}}</p>
</td>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<p class="text-slate-800">{{reference.formatted_date}}</p>
</td>
<td class="px-6 py-4 text-center text-sm">
<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>
</a>
<div class="text-[15px] text-red-500 cursor-pointer">
<i class="fa fa-trash"></i>
</div>
</div>
</div>
</td>
</tr>
{% endfor %}
</div>
</div>
</tbody>
</table>
</div>
</div>
</div>
@ -127,7 +137,7 @@
<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>

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

@ -80,61 +80,66 @@
</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 -->
<div
class="w-full flex justify-between items-center h-[60px] border-b border-gray-300 rounded-t-md">
<div class="w-[40%] h-full border-r border-gray-300 flex justify-center items-center">
<p class="text-slate-800">Full Name</p>
</div>
<div class="w-[40%] h-full border-r border-gray-300 flex justify-center items-center">
<p>Email</p>
</div>
<div class="w-[20%] h-full flex justify-center items-center">
Actions
</div>
</div>
<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">
Email
</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 -->
<div class="w-full">
<tbody class="bg-white divide-y divide-gray-200">
<!-- 1st row -->
{% for staff in staffs %}
<div class="w-full h-[60px] flex justify-between items-center border-b border-gray-300">
<div class="w-[40%] h-full border-r border-gray-300 flex justify-center gap-3 items-center">
<div class="w-[50%] flex justify-end items-center">
<tr>
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<div class="w-full flex flex-col justify-center items-center gap-3">
<div class="w-[50px] h-[50px] bg-slate-600 rounded-full">
<img src='{{staff.image.url}}' alt="user-image"
class="w-full h-full object-cover rounded-full">
</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>
</div>
</div>
<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>
</div>
<div class="w-[20%] h-full 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>
</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' %}">
<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>
</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>
</tr>
{% endfor %}
</div>
</div>
</tbody>
</table>
</div>
</div>
</div>

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

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

@ -291,7 +291,7 @@
</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">
<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>

Loading…
Cancel
Save