fix last tracked tasks empty state

resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue

@@ -1,11 +1,37 @@
 <script setup lang="ts">
 import ProjectBadge from '@/Components/Common/Project/ProjectBadge.vue';
 import TimeTrackerStartStop from '@/Components/Common/TimeTrackerStartStop.vue';
+import { useProjectsStore } from '@/utils/useProjects';
+import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
+import dayjs from 'dayjs';
+import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
 
-defineProps<{
+const props = defineProps<{
     title: string;
-    project: string;
+    project_id: string;
+    task_id: string;
 }>();
+
+const { projects } = storeToRefs(useProjectsStore());
+
+const project = computed(() => {
+    return projects.value.find((project) => project.id === props.project_id);
+});
+
+const { currentTimeEntry } = storeToRefs(useCurrentTimeEntryStore());
+const { stopTimer, startTimer } = useCurrentTimeEntryStore();
+
+async function startTaskTimer() {
+    if (currentTimeEntry.value.id) {
+        await stopTimer();
+    }
+    currentTimeEntry.value.project_id = props.project_id;
+    currentTimeEntry.value.task_id = props.task_id;
+    currentTimeEntry.value.start = dayjs().utc().format();
+    await startTimer();
+    useCurrentTimeEntryStore().fetchCurrentTimeEntry();
+}
 </script>
 
 <template>
@@ -14,10 +40,13 @@ defineProps<{
             <p class="font-semibold text-white text-sm pb-1">
                 {{ title }}
             </p>
-            <ProjectBadge :name="project"></ProjectBadge>
+            <ProjectBadge
+                :name="project?.name"
+                :color="project?.color"></ProjectBadge>
         </div>
         <div class="flex items-center justify-center">
-            <TimeTrackerStartStop></TimeTrackerStartStop>
+            <TimeTrackerStartStop
+                @changed="startTaskTimer"></TimeTrackerStartStop>
         </div>
     </div>
 </template>