add time overview page

resources/js/Components/Dashboard/DayOverviewCardEntry.vue

@@ -1,36 +1,22 @@
 <script setup lang="ts">
-import dayjs from 'dayjs';
-
 defineProps<{
     date: string;
     duration: number;
 }>();
-import relativeTime from 'dayjs/plugin/relativeTime';
-import isToday from 'dayjs/plugin/isToday';
-import isYesterday from 'dayjs/plugin/isYesterday';
-import { formatHumanReadableDuration } from '@/utils/time';
-
-dayjs.extend(relativeTime);
-dayjs.extend(isToday);
-dayjs.extend(isYesterday);
-function dayFormat(date: string) {
-    if (dayjs(date).isToday()) {
-        return 'Today';
-    } else if (dayjs(date).isYesterday()) {
-        return 'Yesterday';
-    }
-    return dayjs(date).fromNow();
-}
+import {
+    formatHumanReadableDate,
+    formatHumanReadableDuration,
+} from '@/utils/time';
 </script>
 
 <template>
-    <div class="px-4 py-1.5 grid grid-cols-3">
+    <div class="px-3.5 py-2 flex @container">
         <div class="flex items-center">
             <p class="font-semibold text-sm text-white">
-                {{ dayFormat(date) }}
+                {{ formatHumanReadableDate(date) }}
             </p>
         </div>
-        <div class="flex items-center justify-center">
+        <div class="items-center justify-center flex-1 flex">
             <svg
                 class="w-20 opacity-70 transition hover:opacity-100"
                 viewBox="0 0 42 10"
@@ -96,7 +82,8 @@ function dayFormat(date: string) {
                     fill-opacity="0.9" />
             </svg>
         </div>
-        <div class="flex items-center justify-center text-muted font-semibold">
+        <div
+            class="flex text-sm items-center justify-center text-muted font-semibold">
             {{ formatHumanReadableDuration(duration) }}
         </div>
     </div>

resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import ProjectBadge from '@/Components/common/ProjectBadge.vue';
-import TimeTrackerStartStop from '@/Components/common/TimeTrackerStartStop.vue';
+import ProjectBadge from '@/Components/Common/Project/ProjectBadge.vue';
+import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
 
 defineProps<{
     title: string;
@@ -9,7 +9,7 @@ defineProps<{
 </script>
 
 <template>
-    <div class="px-4 py-2 grid grid-cols-5">
+    <div class="px-3.5 py-2 grid grid-cols-5">
         <div class="col-span-4">
             <p class="font-semibold text-white text-sm pb-1">
                 {{ title }}

resources/js/Components/Dashboard/TeamActivityCardEntry.vue

@@ -7,25 +7,31 @@ defineProps<{
 </script>
 
 <template>
-    <div class="px-4 py-3 grid grid-cols-3">
+    <div class="px-4 py-2 2xl:py-3">
         <div class="col-span-2">
-            <p class="font-semibold text-sm text-white">
-                {{ name }}
-            </p>
+            <div class="flex justify-between">
+                <p class="font-semibold text-sm text-white">
+                    {{ name }}
+                </p>
+                <div
+                    v-if="working"
+                    class="flex space-x-1.5 items-center justify-end">
+                    <span
+                        class="relative flex h-3 w-3 justify-center items-center">
+                        <span
+                            class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"></span>
+                        <span
+                            class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+                    </span>
+                    <span
+                        class="text-green-500 font-medium text-sm block pb-0.5">
+                        working
+                    </span>
+                </div>
+            </div>
             <div class="text-muted text-sm font-medium">
                 {{ description }}
             </div>
         </div>
-        <div v-if="working" class="flex space-x-1.5 items-center justify-end">
-            <span class="relative flex h-3 w-3 justify-center items-center">
-                <span
-                    class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"></span>
-                <span
-                    class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
-            </span>
-            <span class="text-green-500 font-medium text-sm block pb-0.5">
-                working
-            </span>
-        </div>
     </div>
 </template>

resources/js/Components/Dashboard/ThisWeekOverview.vue

@@ -10,9 +10,9 @@ import {
 } from 'echarts/components';
 import VChart, { THEME_KEY } from 'vue-echarts';
 import { provide, ref } from 'vue';
-import StatCard from '@/Components/common/StatCard.vue';
+import StatCard from '@/Components/Common/StatCard.vue';
 import { ClockIcon } from '@heroicons/vue/20/solid';
-import CardTitle from '@/Components/common/CardTitle.vue';
+import CardTitle from '@/Components/Common/CardTitle.vue';
 import LinearGradient from 'zrender/lib/graphic/LinearGradient';
 import ProjectsChartCard from '@/Components/Dashboard/ProjectsChartCard.vue';
 import { formatHumanReadableDuration } from '@/utils/time';
@@ -130,7 +130,7 @@ const option = ref({
 </script>
 
 <template>
-    <div class="grid gap-x-6 xl:gap-x-8 grid-cols-4">
+    <div class="grid gap-x-6 xl:gap-x-6 grid-cols-4">
         <div class="col-span-3">
             <CardTitle
                 title="This Week"