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

resources/js/Pages/Calendar.vue

@@ -1,20 +1,17 @@
 <script setup lang="ts">
 import AppLayout from '@/Layouts/AppLayout.vue';
-import { useQuery, useQueryClient } from '@tanstack/vue-query';
+import { useTimeEntriesCalendarQuery } from '@/utils/useTimeEntriesCalendarQuery';
+import { useTimeEntriesMutations } from '@/utils/useTimeEntriesMutations';
+import { computed, ref } from 'vue';
+import { useQueryClient } from '@tanstack/vue-query';
 import {
-    api,
     type Client,
     type CreateClientBody,
     type CreateProjectBody,
     type Project,
-    type TimeEntryResponse,
 } from '@/packages/api/src';
-import { getCurrentOrganizationId, getCurrentMembershipId } from '@/utils/useUser';
-import { computed, ref } from 'vue';
-import { getDayJsInstance } from '@/packages/ui/src/utils/time';
 import { TimeEntryCalendar } from '@/packages/ui/src';
 import { isAllowedToPerformPremiumAction } from '@/utils/billing';
-import { useTimeEntriesStore } from '@/utils/useTimeEntries';
 import { useTagsStore } from '@/utils/useTags';
 import { useProjectsQuery } from '@/utils/useProjectsQuery';
 import { useClientsQuery } from '@/utils/useClientsQuery';
@@ -22,71 +19,41 @@ import { useTasksQuery } from '@/utils/useTasksQuery';
 import { useTagsQuery } from '@/utils/useTagsQuery';
 import { useProjectsStore } from '@/utils/useProjects';
 import { useClientsStore } from '@/utils/useClients';
-import { getUserTimezone } from '@/packages/ui/src/utils/settings';
 import { getOrganizationCurrencyString } from '@/utils/money';
 import { canCreateProjects } from '@/utils/permissions';
 
 const calendarStart = ref<Date | undefined>(undefined);
 const calendarEnd = ref<Date | undefined>(undefined);
 
-const enableCalendarQuery = computed(() => {
-    return !!getCurrentOrganizationId() && !!calendarStart.value && !!calendarEnd.value;
-});
-
-// Calculate expanded date range to include previous and next periods with timezone transformations
-const expandedDateRange = computed(() => {
-    if (!calendarStart.value || !calendarEnd.value) {
-        return { start: null, end: null };
-    }
-
-    const dayjs = getDayJsInstance();
-    const duration = dayjs(calendarEnd.value).diff(dayjs(calendarStart.value), 'milliseconds');
-
-    // Calculate previous period
-    const previousStart = dayjs(calendarStart.value).subtract(duration, 'milliseconds');
-    // Calculate next period
-    const nextEnd = dayjs(calendarEnd.value).add(duration, 'milliseconds');
-
-    // Apply timezone transformations
-    const formattedStart = previousStart.utc().tz(getUserTimezone(), true).utc().format();
-    const formattedEnd = nextEnd.utc().tz(getUserTimezone(), true).utc().format();
-
-    return {
-        start: formattedStart,
-        end: formattedEnd,
-    };
-});
-
-const { data: timeEntryResponse, isLoading: timeEntriesLoading } = useQuery<TimeEntryResponse>({
-    queryKey: computed(() => [
-        'timeEntry',
-        'calendar',
-        {
-            start: expandedDateRange.value.start,
-            end: expandedDateRange.value.end,
-            organization: getCurrentOrganizationId(),
-        },
-    ]),
-    enabled: enableCalendarQuery,
-    placeholderData: (previousData) => previousData,
-    queryFn: () =>
-        api.getTimeEntries({
-            params: {
-                organization: getCurrentOrganizationId() || '',
-            },
-            queries: {
-                start: expandedDateRange.value.start!,
-                end: expandedDateRange.value.end!,
-                member_id: getCurrentMembershipId(),
-            },
-        }),
-});
+const { data: timeEntryResponse, isLoading: timeEntriesLoading } = useTimeEntriesCalendarQuery(
+    calendarStart,
+    calendarEnd
+);
 
 const currentTimeEntries = computed(() => {
     return timeEntryResponse?.value?.data || [];
 });
 
-const { createTimeEntry, updateTimeEntry, deleteTimeEntry } = useTimeEntriesStore();
+const {
+    createTimeEntry: createTimeEntryMutation,
+    updateTimeEntry: updateTimeEntryMutation,
+    deleteTimeEntry: deleteTimeEntryMutation,
+} = useTimeEntriesMutations();
+
+// Wrap mutations to match expected Promise<void> return type
+async function createTimeEntry(
+    entry: Omit<import('@/packages/api/src').TimeEntry, 'id' | 'organization_id' | 'user_id'>
+): Promise<void> {
+    await createTimeEntryMutation(entry);
+}
+
+async function updateTimeEntry(entry: import('@/packages/api/src').TimeEntry): Promise<void> {
+    await updateTimeEntryMutation(entry);
+}
+
+async function deleteTimeEntry(timeEntryId: string): Promise<void> {
+    await deleteTimeEntryMutation(timeEntryId);
+}
 
 async function createTag(name: string) {
     return await useTagsStore().createTag(name);
@@ -114,7 +81,7 @@ function onDatesChange({ start, end }: { start: Date; end: Date }) {
 
 function onRefresh() {
     queryClient.invalidateQueries({
-        queryKey: ['timeEntry', 'calendar'],
+        queryKey: ['timeEntries', 'calendar'],
     });
 }
 </script>

resources/js/Pages/ReportingDetailed.vue

@@ -28,7 +28,6 @@ import {
     type CreateProjectBody,
     type Project,
     type TimeEntry,
-    type TimeEntryResponse,
 } from '@/packages/api/src';
 import ReportingFilterBadge from '@/Components/Common/Reporting/ReportingFilterBadge.vue';
 import ProjectMultiselectDropdown from '@/Components/Common/Project/ProjectMultiselectDropdown.vue';
@@ -58,9 +57,8 @@ import {
     PaginationPrev,
     PaginationRoot,
 } from 'radix-vue';
-import { useQuery, useQueryClient } from '@tanstack/vue-query';
+import { useQueryClient } from '@tanstack/vue-query';
 import { getCurrentOrganizationId, getCurrentMembershipId } from '@/utils/useUser';
-import { useTimeEntriesStore } from '@/utils/useTimeEntries';
 import ReportingTabNavbar from '@/Components/Common/Reporting/ReportingTabNavbar.vue';
 import ReportingExportButton from '@/Components/Common/Reporting/ReportingExportButton.vue';
 import type { ExportFormat } from '@/types/reporting';
@@ -69,6 +67,8 @@ import TimeEntryMassActionRow from '@/packages/ui/src/TimeEntry/TimeEntryMassAct
 import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 import { canCreateProjects, canViewAllTimeEntries } from '@/utils/permissions';
 import ReportingExportModal from '@/Components/Common/Reporting/ReportingExportModal.vue';
+import { useTimeEntriesReportQuery } from '@/utils/useTimeEntriesReportQuery';
+import { useTimeEntriesMutations } from '@/utils/useTimeEntriesMutations';
 
 // TimeEntryRoundingType is now defined in ReportingRoundingControls component
 type TimeEntryRoundingType = 'up' | 'down' | 'nearest';
@@ -127,30 +127,32 @@ const currentTimeEntryStore = useCurrentTimeEntryStore();
 const { currentTimeEntry } = storeToRefs(currentTimeEntryStore);
 const { setActiveState, startLiveTimer } = currentTimeEntryStore;
 const { handleApiRequestNotifications } = useNotificationsStore();
-const { createTimeEntry, updateTimeEntry, updateTimeEntries } = useTimeEntriesStore();
+
+const {
+    createTimeEntry,
+    updateTimeEntry,
+    updateTimeEntries: updateTimeEntriesMutation,
+    deleteTimeEntries: deleteTimeEntriesMutation,
+} = useTimeEntriesMutations();
+
+async function updateTimeEntries(
+    ids: string[],
+    changes: Parameters<typeof updateTimeEntriesMutation>[0]['changes']
+) {
+    await updateTimeEntriesMutation({ ids, changes });
+}
 
 const { tags } = useTagsQuery();
 
-const { data: timeEntryResponse } = useQuery<TimeEntryResponse>({
-    queryKey: ['timeEntry', 'detailed-report'],
-    enabled: !!getCurrentOrganizationId(),
-    queryFn: () =>
-        api.getTimeEntries({
-            params: {
-                organization: getCurrentOrganizationId() || '',
-            },
-            queries: { ...getFilterAttributes() },
-        }),
-});
+const filterParams = computed(() => getFilterAttributes());
+const { data: timeEntryResponse } = useTimeEntriesReportQuery(filterParams);
 
 const totalPages = computed(() => {
     return timeEntryResponse?.value?.meta?.total ?? 1;
 });
 
-const timeEntriesStore = useTimeEntriesStore();
-
 async function deleteTimeEntries(timeEntries: TimeEntry[]) {
-    await timeEntriesStore.deleteTimeEntries(timeEntries);
+    await deleteTimeEntriesMutation(timeEntries);
     selectedTimeEntries.value = [];
     await updateFilteredTimeEntries();
 }
@@ -203,7 +205,7 @@ async function startTimeEntryFromExisting(entry: TimeEntry) {
 const queryClient = useQueryClient();
 async function updateFilteredTimeEntries() {
     await queryClient.invalidateQueries({
-        queryKey: ['timeEntry', 'detailed-report'],
+        queryKey: ['timeEntries', 'detailed-report'],
     });
 }
 watch(currentPage, () => {

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>