refactor timeentries queries and mutations, improve activitygraph, add dashboard reporting table

resources/js/Pages/Time.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import AppLayout from '@/Layouts/AppLayout.vue';
 import TimeTracker from '@/Components/TimeTracker.vue';
-import { onMounted, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import MainContainer from '@/packages/ui/src/MainContainer.vue';
-import { useTimeEntriesStore } from '@/utils/useTimeEntries';
 import { storeToRefs } from 'pinia';
 import type {
     CreateClientBody,
@@ -30,17 +29,23 @@ import { canCreateProjects } from '@/utils/permissions';
 import { useTagsStore } from '@/utils/useTags';
 import { useProjectsStore } from '@/utils/useProjects';
 import { useClientsStore } from '@/utils/useClients';
+import { useTimeEntriesInfiniteQuery } from '@/utils/useTimeEntriesInfiniteQuery';
+import { useTimeEntriesMutations } from '@/utils/useTimeEntriesMutations';
 
-const timeEntriesStore = useTimeEntriesStore();
-const { timeEntries, allTimeEntriesLoaded } = storeToRefs(timeEntriesStore);
-const { updateTimeEntry, fetchTimeEntries, createTimeEntry } = useTimeEntriesStore();
+const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useTimeEntriesInfiniteQuery();
+const {
+    createTimeEntry: createTimeEntryMutation,
+    updateTimeEntry,
+    updateTimeEntries: updateTimeEntriesMutation,
+    deleteTimeEntries: deleteTimeEntriesMutation,
+} = useTimeEntriesMutations();
+
+const timeEntries = computed(() => data.value?.pages.flatMap((page) => page.data) || []);
 
 async function updateTimeEntries(ids: string[], changes: UpdateMultipleTimeEntriesChangeset) {
-    await useTimeEntriesStore().updateTimeEntries(ids, changes);
-    fetchTimeEntries();
+    await updateTimeEntriesMutation({ ids, changes });
 }
 
-const loading = ref(false);
 const loadMoreContainer = ref<HTMLDivElement | null>(null);
 const isLoadMoreVisible = useElementVisibility(loadMoreContainer);
 const currentTimeEntryStore = useCurrentTimeEntryStore();
@@ -51,27 +56,20 @@ async function startTimeEntry(timeEntry: Omit<CreateTimeEntryBody, 'member_id'>)
     if (currentTimeEntry.value.id) {
         await setActiveState(false);
     }
-    await createTimeEntry(timeEntry);
-    fetchTimeEntries();
+    await createTimeEntryMutation(timeEntry);
     useCurrentTimeEntryStore().fetchCurrentTimeEntry();
 }
 
-function deleteTimeEntries(timeEntries: TimeEntry[]) {
-    useTimeEntriesStore().deleteTimeEntries(timeEntries);
-    fetchTimeEntries();
+async function deleteTimeEntries(timeEntries: TimeEntry[]) {
+    await deleteTimeEntriesMutation(timeEntries);
 }
 
 watch(isLoadMoreVisible, async (isVisible) => {
-    if (isVisible && timeEntries.value.length > 0 && !allTimeEntriesLoaded.value) {
-        loading.value = true;
-        await timeEntriesStore.fetchMoreTimeEntries();
+    if (isVisible && hasNextPage.value) {
+        await fetchNextPage();
     }
 });
 
-onMounted(async () => {
-    await timeEntriesStore.fetchTimeEntries();
-});
-
 const { projects } = useProjectsQuery();
 const { tasks } = useTasksQuery();
 const { clients } = useClientsQuery();
@@ -92,7 +90,6 @@ const selectedTimeEntries = ref([] as TimeEntry[]);
 
 async function clearSelectionAndState() {
     selectedTimeEntries.value = [];
-    await fetchTimeEntries();
 }
 
 function deleteSelected() {
@@ -155,13 +152,13 @@ function deleteSelected() {
         </div>
         <div ref="loadMoreContainer">
             <div
-                v-if="loading && !allTimeEntriesLoaded"
+                v-if="isFetchingNextPage"
                 class="flex justify-center items-center py-5 text-text-primary font-medium">
                 <LoadingSpinner></LoadingSpinner>
                 <span> Loading more time entries... </span>
             </div>
             <div
-                v-else-if="allTimeEntriesLoaded"
+                v-else-if="!hasNextPage"
                 class="flex justify-center items-center py-5 text-text-secondary font-medium">
                 All time entries are loaded!
             </div>