emile 1 month ago
parent f2cfe0c791
commit 06ceec9660

@ -6,41 +6,14 @@
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
<style> <style>
.dashboard-container {
display: flex;
flex-direction: column;
height: 100%; /* Adjust based on your header height */
padding: 1rem;
background-color: #f9fafb;
}
.table-container {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
.table-responsive {
flex: 1;
overflow: auto;
}
.compact-table {
width: 100%;
table-layout: fixed;
}
.compact-table th,
.compact-table td {
padding: 0.5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.status-badge { .status-badge {
font-size: 0.75rem; font-size: 0.75rem;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
} }
</style> </style>
<div class="dashboard-container rounded-xl bg-gray-50 shadow-md"> <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"> <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> <h1 class="font-semibold text-xl text-secondosiblue font-poppinsBold ">Projects Dashboard</h1>
</div> </div>
@ -91,27 +64,27 @@
</div> </div>
</form> </form>
<div class="table-container"> <div class="w-full overflow-x-auto border border-gray-300 rounded-md tableContainer">
<div class="table-responsive">
<table class="compact-table"> <table class="w-full divide-y">
<thead class="bg-gray-50"> <thead class="bg-gray-50">
<tr> <tr>
<th class="w-1/6">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">Project</th>
<th class="w-1/6">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">Task</th>
<th class="w-1/6">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">Point</th>
<th class="w-1/6">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">Status</th>
<th class="w-1/6">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">Assigned To</th>
<th class="w-1/6">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">Time Spent</th>
<th class="w-1/6">Last Activity</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> </tr>
</thead> </thead>
<tbody class="bg-white divide-y divide-gray-200"> <tbody class="bg-white divide-y divide-gray-200">
{% for point in points %} {% for point in points %}
<tr class="border border-gray-200 text-center"> <tr class="border border-gray-200 text-center">
<td>{{ point.task.project.name }}</td> <td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ point.task.project.name }}</td>
<td>{{ point.task.name }}</td> <td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ point.task.name }}</td>
<td>{{ point.text|truncatechars:30 }}</td> <td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ point.text|truncatechars:30 }}</td>
<td> <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
<span class="status-badge inline-flex rounded-full <span class="status-badge inline-flex rounded-full
{% if point.status == 'Completed' %}bg-green-100 text-green-800 {% if point.status == 'Completed' %}bg-green-100 text-green-800
{% elif point.status == 'Working On' %}bg-blue-100 text-blue-800 {% elif point.status == 'Working On' %}bg-blue-100 text-blue-800
@ -120,16 +93,16 @@
{{ point.status }} {{ point.status }}
</span> </span>
</td> </td>
<td>{{ 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">{{ point.task.assigned_to.user.first_name }} {{ point.task.assigned_to.user.last_name }}</td>
<td> <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
{% with point.total_activity_time as time %} {% with point.total_activity_time as time %}
{{ time.0 }}h {{ time.1 }}m {{ time.0 }}h {{ time.1 }}m
{% endwith %} {% endwith %}
</td> </td>
<td> <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
{% with point.pointactivity_set.last as last_activity %} {% with point.pointactivity_set.last as last_activity %}
{% if last_activity %} {% if last_activity %}
{{ last_activity.end_time|date:"m/d H:i" }} {{ last_activity.end_time|date:"j F H:i" }}
{% else %} {% else %}
- -
{% endif %} {% endif %}
@ -143,6 +116,8 @@
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</div>
<div class="flex justify-center items-center mt-10"> <div class="flex justify-center items-center mt-10">
<div class="flex"> <div class="flex">
{% if points.has_previous %} {% if points.has_previous %}
@ -168,9 +143,6 @@
{% endif %} {% endif %}
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
<script> <script>

@ -1244,10 +1244,6 @@ video {
width: 0.375rem; width: 0.375rem;
} }
.w-1\/6 {
width: 16.666667%;
}
.w-10 { .w-10 {
width: 2.5rem; width: 2.5rem;
} }

Loading…
Cancel
Save