You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
181 lines
8.4 KiB
HTML
181 lines
8.4 KiB
HTML
{% extends "dashboard-main.html" %}
|
|
{% load static %}
|
|
{% block content %}
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
|
|
|
|
<style>
|
|
|
|
.status-badge {
|
|
font-size: 0.75rem;
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
</style>
|
|
|
|
<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
|
|
<div class="flex flex-row gap-3 justify-between items-center mb-4">
|
|
<h1 class="font-semibold text-xl text-secondosiblue font-poppinsBold ">Projects Dashboard</h1>
|
|
</div>
|
|
|
|
<form method="get" id="filter-form" class="mb-4 font-poppins ">
|
|
<div class="w-full flex flex-col gap-4 font-poppins ">
|
|
<div class="flex flex-col lg:flex-row w-full gap-4 font-poppins ">
|
|
<div class="flex-1 flex flex-col">
|
|
<label class="mb-1 text-secondosiblue font-semibold cursor-pointer">Date Range</label>
|
|
<div class="flex flex-col lg:flex-row gap-2">
|
|
<input name="start_date" id="start-date" type="date"
|
|
value="{{ start_date }}"
|
|
class="border rounded-md outline-none focus:border-primary p-2">
|
|
|
|
<input name="end_date" id="end-date" type="date"
|
|
value="{{ end_date }}"
|
|
class="border rounded-md outline-none focus:border-primary p-2">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 flex flex-col">
|
|
<label class="mb-1 text-secondosiblue font-semibold cursor-pointer">Projects</label>
|
|
<select name="projects" id="projects" class="rounded-md" multiple>
|
|
{% for project in projects %}
|
|
<option value="{{ project.id }}"
|
|
{% if project.id in selected_projects %}selected{% endif %}>
|
|
{{ project.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex-1 flex flex-col">
|
|
<label class="text-secondosiblue font-semibold cursor-pointer mb-1">Staff</label>
|
|
<select name="staff" id="staff" class="rounded-md" multiple>
|
|
{% for staff in staffs %}
|
|
<option value="{{ staff.id }}"
|
|
{% if staff.id in selected_staff %}selected{% endif %}>
|
|
{{ staff.user.first_name }} {{ staff.user.last_name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="self-start bg-primary text-white px-4 py-2 rounded-md">
|
|
Apply Filters
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="w-full overflow-x-auto border border-gray-300 rounded-md tableContainer">
|
|
|
|
<table class="w-full divide-y">
|
|
<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</th>
|
|
<th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Task</th>
|
|
<th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Point</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">Assigned To</th>
|
|
<th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Time Spent</th>
|
|
<th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Last Activity</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
{% for point in points %}
|
|
<tr class="border border-gray-200 text-center">
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ point.task.project.name }}</td>
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ point.task.name }}</td>
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ point.text|truncatechars:30 }}</td>
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
<span class="status-badge inline-flex rounded-full
|
|
{% if point.status == 'Completed' %}bg-green-100 text-green-800
|
|
{% elif point.status == 'Working On' %}bg-blue-100 text-blue-800
|
|
{% elif point.status == 'Paused' %}bg-yellow-100 text-yellow-800
|
|
{% else %}bg-red-100 text-red-800{% endif %}">
|
|
{{ point.status }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ point.task.assigned_to.user.first_name }} {{ point.task.assigned_to.user.last_name }}</td>
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
{% with point.total_activity_time as time %}
|
|
{{ time.0 }}h {{ time.1 }}m
|
|
{% endwith %}
|
|
</td>
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">
|
|
{% with point.pointactivity_set.last as last_activity %}
|
|
{% if last_activity %}
|
|
{{ last_activity.end_time|date:"j F H:i" }}
|
|
{% else %}
|
|
-
|
|
{% endif %}
|
|
{% endwith %}
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="7" class="text-center py-4">No points found with the current filters</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
<div class="flex justify-center items-center mt-10">
|
|
<div class="flex">
|
|
{% if points.has_previous %}
|
|
<a href="?page={{ points.previous_page_number }}" class="w-[40px] h-[40px] rounded-l-md border border-gray-200 flex justify-center items-center text-secondosiblue p-1 cursor-pointer hover:bg-gray-100 duration-300">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
|
|
</svg>
|
|
</a>
|
|
{% endif %}
|
|
{% for num in page_range %}
|
|
<a href="?page={{ num }}" class="w-[40px] h-[40px] border border-gray-200 flex justify-center items-center text-secondosiblue p-1 cursor-pointer hover:bg-gray-100 duration-300 {% if points.number == num %} bg-gray-200 {% endif %}">
|
|
<p>{{ num }}</p>
|
|
</a>
|
|
{% endfor %}
|
|
{% if points.has_next %}
|
|
<a href="?page={{ points.next_page_number }}" class="w-[40px] h-[40px] rounded-r-md border border-gray-200 flex justify-center items-center text-secondosiblue p-1 cursor-pointer hover:bg-gray-100 duration-300">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
|
|
</svg>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize TomSelect for Projects
|
|
new TomSelect('#projects', {
|
|
create: false,
|
|
sortField: 'text',
|
|
plugins: ['remove_button'],
|
|
onChange: function() {
|
|
document.getElementById('filter-form').submit();
|
|
}
|
|
});
|
|
|
|
// Initialize TomSelect for Staff
|
|
new TomSelect('#staff', {
|
|
create: false,
|
|
sortField: 'text',
|
|
plugins: ['remove_button'],
|
|
onChange: function() {
|
|
document.getElementById('filter-form').submit();
|
|
}
|
|
});
|
|
|
|
// Submit form when date changes
|
|
document.getElementById('start-date').addEventListener('change', function() {
|
|
document.getElementById('filter-form').submit();
|
|
});
|
|
|
|
document.getElementById('end-date').addEventListener('change', function() {
|
|
document.getElementById('filter-form').submit();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
{% endblock content %} |