|
|
@ -2,6 +2,7 @@
|
|
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
@ -16,110 +17,43 @@
|
|
|
|
<div id="hiddenContent">
|
|
|
|
<div id="hiddenContent">
|
|
|
|
<h1 class="text-secondosiblue text-2xl font-semibold text-center mb-2">Timeline</h1>
|
|
|
|
<h1 class="text-secondosiblue text-2xl font-semibold text-center mb-2">Timeline</h1>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="w-full border-t border-x border-gray-300 rounded-t-md">
|
|
|
|
<div class="overflow-x-auto border border-gray-300 rounded-md mt-5">
|
|
|
|
<!-- HEADER -->
|
|
|
|
<table class="min-w-full divide-y">
|
|
|
|
<div class="w-full h-[60px] flex items-center justify-between">
|
|
|
|
<thead>
|
|
|
|
<div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
|
|
|
|
<tr>
|
|
|
|
<p class="text-sm">Task Time: <span class="text-sm text-gray-500">560 minutes</span></p>
|
|
|
|
<th scope="col"
|
|
|
|
</div>
|
|
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercase bg-gray-100 border-r border-gray-300 whitespace-nowrap">
|
|
|
|
<div class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
|
|
|
|
Date</th>
|
|
|
|
<p class="text-sm">User</p>
|
|
|
|
<th scope="col"
|
|
|
|
</div>
|
|
|
|
class="px-6 py-3 text-sm font-medium text-gray-500 uppercasen bg-gray-100 whitespace-nowrap">
|
|
|
|
<div class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
|
|
|
|
Total Time Worked</th>
|
|
|
|
<p class="text-sm">Date</p>
|
|
|
|
</tr>
|
|
|
|
</div>
|
|
|
|
</thead>
|
|
|
|
<div class="w-[20%] h-full flex justify-center items-center">
|
|
|
|
<tbody class="divide-y divide-gray-200">
|
|
|
|
<p class="text-sm">Total Time</p>
|
|
|
|
{% for date, total_hours, total_minutes, total_seconds in formatted_totals %}
|
|
|
|
</div>
|
|
|
|
<tr>
|
|
|
|
</div>
|
|
|
|
<td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ date }}</td>
|
|
|
|
|
|
|
|
<td class="px-6 py-4 text-center text-sm"> <p>
|
|
|
|
<!-- BODY -->
|
|
|
|
{% if total_hours == 1 %}
|
|
|
|
<div class="w-full border-t border-gray-300">
|
|
|
|
{{ total_hours }}hr,
|
|
|
|
<!-- 1ST ROW -->
|
|
|
|
{% else %}
|
|
|
|
<div class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
|
|
|
|
{{ total_hours }}hrs,
|
|
|
|
<div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
|
|
|
|
{% endif %}
|
|
|
|
<button
|
|
|
|
{% if total_minutes == 1 %}
|
|
|
|
class="w-fit py-1 px-3 bg-red-500 border border-red-500 text-white text-base rounded-md">Delete</button>
|
|
|
|
{{ total_minutes }}min,
|
|
|
|
</div>
|
|
|
|
{% else %}
|
|
|
|
<div class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
|
|
|
|
{{ total_minutes }}mins,
|
|
|
|
<p class="text-sm">Nataly</p>
|
|
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
{% if total_seconds == 1 %}
|
|
|
|
<div class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
|
|
|
|
{{ total_seconds }}sec
|
|
|
|
<p class="text-sm">6-9-2023</p>
|
|
|
|
{% else %}
|
|
|
|
</div>
|
|
|
|
{{ total_seconds }}secs
|
|
|
|
<div class="w-[20%] h-full flex justify-center items-center">
|
|
|
|
{% endif %}
|
|
|
|
<p class="text-sm">360 minutes</p>
|
|
|
|
</p></td>
|
|
|
|
</div>
|
|
|
|
</tr>
|
|
|
|
</div>
|
|
|
|
{% endfor %}
|
|
|
|
|
|
|
|
</tbody>
|
|
|
|
<!-- 2ND ROW -->
|
|
|
|
</table>
|
|
|
|
<div class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
|
|
|
|
|
|
|
|
<div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
|
|
|
class="w-fit py-1 px-3 bg-red-500 border border-red-500 text-white text-base rounded-md">Delete</button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
|
|
|
|
|
|
|
|
<p class="text-sm">Salim</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
|
|
|
|
|
|
|
|
<p class="text-sm">12-9-2023</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="w-[20%] h-full flex justify-center items-center">
|
|
|
|
|
|
|
|
<p class="text-sm">200 minutes</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 3RD ROWS -->
|
|
|
|
|
|
|
|
<div class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
|
|
|
|
|
|
|
|
<div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
|
|
|
class="w-fit py-1 px-3 bg-red-500 border border-red-500 text-white text-base rounded-md">Delete</button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
|
|
|
|
|
|
|
|
<p class="text-sm">Salim</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
|
|
|
|
|
|
|
|
<p class="text-sm">12-9-2023</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="w-[20%] h-full flex justify-center items-center">
|
|
|
|
|
|
|
|
<p class="text-sm">200 minutes</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 4TH ROW -->
|
|
|
|
|
|
|
|
<div class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
|
|
|
|
|
|
|
|
<div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
|
|
|
class="w-fit py-1 px-3 bg-red-500 border border-red-500 text-white text-base rounded-md">Delete</button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
|
|
|
|
|
|
|
|
<p class="text-sm">Reine</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
|
|
|
|
|
|
|
|
<p class="text-sm">12-9-2023</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="w-[20%] h-full flex justify-center items-center">
|
|
|
|
|
|
|
|
<p class="text-sm">200 minutes</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 5TH ROW -->
|
|
|
|
|
|
|
|
<div class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
|
|
|
|
|
|
|
|
<div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
|
|
|
class="w-fit py-1 px-3 bg-red-500 border border-red-500 text-white text-base rounded-md">Delete</button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
|
|
|
|
|
|
|
|
<p class="text-sm">Nataly</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="w-[25%] h-full border-r border-gray-300 flex justify-center items-center">
|
|
|
|
|
|
|
|
<p class="text-sm">12-9-2023</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="w-[20%] h-full flex justify-center items-center">
|
|
|
|
|
|
|
|
<p class="text-sm">200 minutes</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</body>
|
|
|
|