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

2026-08-08 08:12:17 +01:00 · 2026-01-14 17:01:45 +01:00
parent 0a6bde8bc6
commit 81d9561656
31 changed files with 723 additions and 437 deletions
--- a/app/Http/Controllers/Api/V1/ChartController.php
+++ b/app/Http/Controllers/Api/V1/ChartController.php
@@ -102,7 +102,7 @@ class ChartController extends Controller
        $this->checkPermission($organization, 'charts:view:own');
        $user = $this->user();

-        $dailyTrackedHours = $dashboardService->getDailyTrackedHours($user, $organization, 60);
+        $dailyTrackedHours = $dashboardService->getDailyTrackedHours($user, $organization, 100);

        return response()->json($dailyTrackedHours);
    }
--- a/e2e/clients.spec.ts
+++ b/e2e/clients.spec.ts
@@ -27,7 +27,7 @@ test('test that creating and deleting a new client via the modal works', async (

    await expect(page.getByTestId('client_table')).toContainText(newClientName);
    const moreButton = page.locator("[aria-label='Actions for Client " + newClientName + "']");
-    moreButton.click();
+    await moreButton.click();
    const deleteButton = page.locator("[aria-label='Delete Client " + newClientName + "']");

    await Promise.all([
--- a/e2e/project-members.spec.ts
+++ b/e2e/project-members.spec.ts
@@ -17,8 +17,16 @@ test('test that updating project member billable rate works for existing time en
    await page.getByRole('button', { name: 'Create Project' }).click();
    await page.getByLabel('Project Name').fill(newProjectName);

-    await page.getByRole('button', { name: 'Create Project' }).click();
-    await expect(page.getByText(newProjectName)).toBeVisible();
+    await Promise.all([
+        page.getByRole('button', { name: 'Create Project' }).click(),
+        page.waitForResponse(
+            (response) =>
+                response.url().includes('/projects') &&
+                response.request().method() === 'POST' &&
+                response.status() === 201
+        ),
+    ]);
+    await expect(page.getByText(newProjectName)).toBeVisible({ timeout: 10000 });

    await page.getByText(newProjectName).click();
    await page.getByRole('button', { name: 'Add Member' }).click();
--- a/e2e/projects.spec.ts
+++ b/e2e/projects.spec.ts
@@ -38,7 +38,7 @@ test('test that creating and deleting a new project via the modal works', async

    await expect(page.getByTestId('project_table')).toContainText(newProjectName);
    const moreButton = page.locator("[aria-label='Actions for Project " + newProjectName + "']");
-    moreButton.click();
+    await moreButton.click();
    const deleteButton = page.locator("[aria-label='Delete Project " + newProjectName + "']");

    await Promise.all([
@@ -79,8 +79,16 @@ test('test that archiving and unarchiving projects works', async ({ page }) => {
    await page.getByRole('button', { name: 'Create Project' }).click();
    await page.getByLabel('Project Name').fill(newProjectName);

-    await page.getByRole('button', { name: 'Create Project' }).click();
-    await expect(page.getByText(newProjectName)).toBeVisible();
+    await Promise.all([
+        page.getByRole('button', { name: 'Create Project' }).click(),
+        page.waitForResponse(
+            (response) =>
+                response.url().includes('/projects') &&
+                response.request().method() === 'POST' &&
+                response.status() === 201
+        ),
+    ]);
+    await expect(page.getByText(newProjectName)).toBeVisible({ timeout: 10000 });

    // Archive the project
    await page.getByRole('row').first().getByRole('button').click();
@@ -118,8 +126,16 @@ test('test that updating billable rate works with existing time entries', async
    await page.getByRole('button', { name: 'Create Project' }).click();
    await page.getByLabel('Project Name').fill(newProjectName);

-    await page.getByRole('button', { name: 'Create Project' }).click();
-    await expect(page.getByText(newProjectName)).toBeVisible();
+    await Promise.all([
+        page.getByRole('button', { name: 'Create Project' }).click(),
+        page.waitForResponse(
+            (response) =>
+                response.url().includes('/projects') &&
+                response.request().method() === 'POST' &&
+                response.status() === 201
+        ),
+    ]);
+    await expect(page.getByText(newProjectName)).toBeVisible({ timeout: 10000 });

    await page.getByRole('row').first().getByRole('button').click();
    await page.getByRole('menuitem').getByText('Edit').first().click();
@@ -224,8 +240,16 @@ test('test that filtering projects by status works', async ({ page }) => {
    // Create a new project
    await page.getByRole('button', { name: 'Create Project' }).click();
    await page.getByLabel('Project Name').fill(newProjectName);
-    await page.getByRole('button', { name: 'Create Project' }).click();
-    await expect(page.getByText(newProjectName)).toBeVisible();
+    await Promise.all([
+        page.getByRole('button', { name: 'Create Project' }).click(),
+        page.waitForResponse(
+            (response) =>
+                response.url().includes('/projects') &&
+                response.request().method() === 'POST' &&
+                response.status() === 201
+        ),
+    ]);
+    await expect(page.getByText(newProjectName)).toBeVisible({ timeout: 10000 });

    // Archive the project
    await page.getByRole('row').first().getByRole('button').click();
--- a/resources/js/Components/Dashboard/ActivityGraphCard.vue
+++ b/resources/js/Components/Dashboard/ActivityGraphCard.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import VChart, { THEME_KEY } from 'vue-echarts';
-import { provide, computed, inject, type ComputedRef } from 'vue';
+import { provide, computed, inject, ref, type ComputedRef } from 'vue';
 import { use } from 'echarts/core';
+import { useElementSize } from '@vueuse/core';
 import DashboardCard from '@/Components/Dashboard/DashboardCard.vue';
 import { BoltIcon } from '@heroicons/vue/20/solid';
 import { HeatmapChart } from 'echarts/charts';
@@ -12,13 +13,13 @@ import {
    VisualMapComponent,
 } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
-import dayjs from 'dayjs';
 import {
    firstDayIndex,
    formatDate,
    formatHumanReadableDuration,
    getDayJsInstance,
 } from '@/packages/ui/src/utils/time';
+import chroma from 'chroma-js';
 import { useCssVariable } from '@/utils/useCssVariable';
 import { useQuery } from '@tanstack/vue-query';
 import { getCurrentOrganizationId } from '@/utils/useUser';
@@ -62,8 +63,44 @@ const max = computed(() => {
 });

 const backgroundColor = useCssVariable('--theme-color-card-background');
-const itemBackgroundColor = useCssVariable('--color-bg-tertiary');
 const borderColor = useCssVariable('--color-border');
+const labelColor = useCssVariable('--color-text-secondary');
+const chartColorRaw = useCssVariable('--theme-color-chart');
+
+const chartEmptyColorRaw = useCssVariable('--color-bg-tertiary');
+const chartEmptyColor = computed(() => {
+    if (!chartEmptyColorRaw.value) return '#2a2c32';
+    return chroma(chartEmptyColorRaw.value).hex();
+});
+const chartColor = computed(() => {
+    if (!chartColorRaw.value) return '#bae6fd';
+    return `rgb(${chartColorRaw.value})`;
+});
+
+// Track chart container size
+const chartContainer = ref<HTMLElement | null>(null);
+const { width: containerWidth } = useElementSize(chartContainer);
+
+// Calculate number of weeks based on available width
+// Rough estimate: 40px per cell + 80px for labels = ~360px for 7 weeks
+const numberOfWeeks = computed(() => {
+    const availableWidth = containerWidth.value || 400;
+    const minCellSize = 25; // Minimum cell size in pixels
+    const labelSpace = 80; // Space for day labels
+    const usableWidth = availableWidth - labelSpace;
+    const maxWeeks = Math.floor(usableWidth / minCellSize);
+    // Clamp between 4 and 12 weeks for reasonable display
+    return Math.max(4, Math.min(12, maxWeeks));
+});
+
+// Calculate date range based on dynamic number of weeks
+const dateRange = computed(() => {
+    const today = getDayJsInstance()();
+    const startOfWeek = today.startOf('week');
+    // Go back (numberOfWeeks - 1) weeks from the start of current week
+    const rangeStart = startOfWeek.subtract(numberOfWeeks.value - 1, 'week');
+    return [today.format('YYYY-MM-DD'), rangeStart.format('YYYY-MM-DD')];
+});

 const option = computed(() => {
    return {
@@ -76,26 +113,30 @@ const option = computed(() => {
            left: 'center',
            top: 'center',
            inRange: {
-                color: [itemBackgroundColor.value, '#2DBE45'],
+                color: [chartEmptyColor.value, chartColor.value],
            },
            show: false,
        },
        calendar: {
-            top: 40,
+            top: 35,
            bottom: 20,
-            left: 40,
-            right: 10,
-            cellSize: [40, 40],
+            left: 35,
+            right: 5,
+            cellSize: 'auto',
+            orient: 'horizontal',
            dayLabel: {
                firstDay: firstDayIndex.value,
+                color: labelColor.value,
+                fontFamily: 'Inter, sans-serif',
+            },
+            monthLabel: {
+                color: labelColor.value,
+                fontFamily: 'Inter, sans-serif',
            },
            splitLine: {
                show: false,
            },
-            range: [
-                dayjs().format('YYYY-MM-DD'),
-                getDayJsInstance()().subtract(50, 'day').startOf('week').format('YYYY-MM-DD'),
-            ],
+            range: dateRange.value,
            itemStyle: {
                color: 'transparent',
                borderWidth: 8,
@@ -144,7 +185,7 @@ const option = computed(() => {
            <div v-if="isLoading" class="flex justify-center items-center h-40">
                <LoadingSpinner />
            </div>
-            <div v-else-if="dailyHoursTracked">
+            <div v-else-if="dailyHoursTracked" ref="chartContainer">
                <v-chart
                    class="chart"
                    :autoresize="true"
--- a/resources/js/Components/Dashboard/DashboardCard.vue
+++ b/resources/js/Components/Dashboard/DashboardCard.vue
@@ -1,7 +1,9 @@
 <template>
-    <section class="flex flex-col">
+    <section class="flex overflow-hidden flex-col gap-1.5">
        <CardTitle :title="title" :icon="icon"></CardTitle>
-        <div class="rounded-lg border border-card-border flex-1 flex items-stretch">
+
+        <div
+            class="flex-1 flex items-stretch rounded-lg bg-card-background border border-card-border">
            <div class="w-full flex flex-col">
                <slot></slot>
            </div>
--- a/resources/js/Components/Dashboard/DayOverviewCardEntry.vue
+++ b/resources/js/Components/Dashboard/DayOverviewCardEntry.vue
@@ -14,17 +14,16 @@ defineProps<{
 </script>

 <template>
-    <div class="px-3.5 py-2 flex justify-between @container border-b border-b-background-separator">
+    <div class="px-3.5 py-2 flex justify-between @container">
        <div class="flex items-center min-w-[70px]">
-            <p class="font-medium text-sm text-text-primary">
+            <p class="text-sm text-text-primary">
                {{ formatHumanReadableDate(date) }}
            </p>
        </div>
        <div class="items-center justify-center flex-1 hidden @2xs:flex">
            <DayOverviewCardChart :history="history"></DayOverviewCardChart>
        </div>
-        <div
-            class="flex text-sm items-center justify-center text-text-secondary min-w-[65px] font-medium">
+        <div class="flex text-sm items-center justify-center text-text-secondary min-w-[65px]">
            {{
                formatHumanReadableDuration(
                    duration,
--- a/resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue
+++ b/resources/js/Components/Dashboard/RecentlyTrackedTasksCard.vue
@@ -3,7 +3,7 @@ import { useQuery } from '@tanstack/vue-query';
 import { computed } from 'vue';
 import RecentlyTrackedTasksCardEntry from '@/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue';
 import DashboardCard from '@/Components/Dashboard/DashboardCard.vue';
-import { CheckCircleIcon } from '@heroicons/vue/20/solid';
+import { CheckCircleIcon } from '@heroicons/vue/24/solid';
 import { PlusCircleIcon } from '@heroicons/vue/24/solid';
 import { getCurrentMembershipId, getCurrentOrganizationId } from '@/utils/useUser';
 import { api } from '@/packages/api/src';
--- a/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue
+++ b/resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue
@@ -45,11 +45,11 @@ async function startTaskTimer() {
 </script>

 <template>
-    <div class="px-3.5 py-2 grid grid-cols-5 border-b border-b-background-separator">
+    <div class="px-3.5 py-2 grid grid-cols-5">
        <div class="col-span-4">
-            <p class="font-medium text-text-primary text-sm pb-1 truncate">
+            <p class="text-text-secondary text-sm pb-1.5 truncate">
                <span v-if="timeEntry.description"> {{ timeEntry.description }}</span>
-                <span v-else class="text-text-tertiary">No description</span>
+                <span v-else>No description</span>
            </p>
            <ProjectBadge size="base" class="min-w-0 max-w-full" :color="project?.color">
                <div class="flex items-center lg:space-x-0.5 min-w-0">
--- a/resources/js/Components/Dashboard/TeamActivityCardEntry.vue
+++ b/resources/js/Components/Dashboard/TeamActivityCardEntry.vue
@@ -7,11 +7,11 @@ defineProps<{
 </script>

 <template>
-    <div class="px-4 py-2 2xl:py-3 border-b border-b-background-separator">
+    <div class="px-3.5 py-2 2xl:py-3">
        <div class="col-span-2">
            <div class="flex justify-between">
                <p
-                    class="font-semibold text-sm min-w-0 overflow-ellipsis overflow-hidden flex-1 text-text-primary">
+                    class="text-xs min-w-0 overflow-ellipsis overflow-hidden flex-1 text-text-secondary">
                    {{ name }}
                </p>
                <div v-if="working" class="flex space-x-1.5 items-center justify-end">
--- a/resources/js/Components/Dashboard/ThisWeekOverview.vue
+++ b/resources/js/Components/Dashboard/ThisWeekOverview.vue
@@ -15,6 +15,7 @@ import { ClockIcon } from '@heroicons/vue/20/solid';
 import CardTitle from '@/packages/ui/src/CardTitle.vue';
 import LinearGradient from 'zrender/lib/graphic/LinearGradient';
 import ProjectsChartCard from '@/Components/Dashboard/ProjectsChartCard.vue';
+import ThisWeekReportingTable from '@/Components/Dashboard/ThisWeekReportingTable.vue';
 import { formatHumanReadableDuration } from '@/packages/ui/src/utils/time';
 import { formatCents } from '@/packages/ui/src/utils/money';
 import { getWeekStart } from '@/packages/ui/src/utils/settings';
@@ -71,6 +72,7 @@ const { data: weeklyProjectOverview } = useQuery({
        });
    },
    enabled: computed(() => !!organizationId.value),
+    staleTime: 1000 * 30, // 30 seconds
 });

 const { data: totalWeeklyTime } = useQuery({
@@ -83,6 +85,7 @@ const { data: totalWeeklyTime } = useQuery({
        });
    },
    enabled: computed(() => !!organizationId.value),
+    staleTime: 1000 * 30, // 30 seconds
 });

 const { data: totalWeeklyBillableTime } = useQuery({
@@ -95,6 +98,7 @@ const { data: totalWeeklyBillableTime } = useQuery({
        });
    },
    enabled: computed(() => !!organizationId.value),
+    staleTime: 1000 * 30, // 30 seconds
 });

 const { data: totalWeeklyBillableAmount } = useQuery({
@@ -107,6 +111,7 @@ const { data: totalWeeklyBillableAmount } = useQuery({
        });
    },
    enabled: computed(() => !!organizationId.value),
+    staleTime: 1000 * 30, // 30 seconds
 });

 const { data: weeklyHistory } = useQuery({
@@ -119,6 +124,7 @@ const { data: weeklyHistory } = useQuery({
        });
    },
    enabled: computed(() => !!organizationId.value),
+    staleTime: 1000 * 30, // 30 seconds
 });

 const seriesData = computed(() => {
@@ -241,6 +247,10 @@ const option = computed(() => {
        <div class="col-span-2 xl:col-span-3">
            <CardTitle title="This Week" class="pb-8" :icon="ClockIcon"></CardTitle>
            <v-chart v-if="weeklyHistory" :autoresize="true" class="chart" :option="option" />
+
+            <div class="mt-6">
+                <ThisWeekReportingTable></ThisWeekReportingTable>
+            </div>
        </div>
        <div class="space-y-6">
            <StatCard
--- a/resources/js/Components/Dashboard/ThisWeekReportingTable.vue
+++ b/resources/js/Components/Dashboard/ThisWeekReportingTable.vue
@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import ReportingRow from '@/Components/Common/Reporting/ReportingRow.vue';
+import ReportingGroupBySelect from '@/Components/Common/Reporting/ReportingGroupBySelect.vue';
+import {
+    formatHumanReadableDuration,
+    getDayJsInstance,
+    getLocalizedDayJs,
+} from '@/packages/ui/src/utils/time';
+import { formatCents } from '@/packages/ui/src/utils/money';
+import { getOrganizationCurrencyString } from '@/utils/money';
+import { type GroupingOption, useReportingStore } from '@/utils/useReporting';
+import { getCurrentMembershipId, getCurrentOrganizationId, getCurrentRole } from '@/utils/useUser';
+import {
+    api,
+    type AggregatedTimeEntries,
+    type AggregatedTimeEntriesQueryParams,
+    type Organization,
+} from '@/packages/api/src';
+import { useQuery } from '@tanstack/vue-query';
+import { useStorage } from '@vueuse/core';
+import { computed, inject, type ComputedRef, watch } from 'vue';
+
+const organization = inject<ComputedRef<Organization>>('organization');
+
+const group = useStorage<GroupingOption>('dashboard-reporting-group', 'project');
+const subGroup = useStorage<GroupingOption>('dashboard-reporting-sub-group', 'task');
+
+const reportingStore = useReportingStore();
+const { groupByOptions, getNameForReportingRowEntry } = reportingStore;
+
+watch(
+    group,
+    () => {
+        if (group.value === subGroup.value) {
+            const fallbackOption = groupByOptions.find((el) => el.value !== group.value);
+            if (fallbackOption?.value) {
+                subGroup.value = fallbackOption.value;
+            }
+        }
+    },
+    { immediate: true }
+);
+
+const organizationId = computed(() => getCurrentOrganizationId());
+
+const weekStartUtc = computed(() => {
+    return getLocalizedDayJs(getDayJsInstance()().format())
+        .startOf('week')
+        .startOf('day')
+        .utc()
+        .format();
+});
+
+const weekEndUtc = computed(() => {
+    return getLocalizedDayJs(getDayJsInstance()().format()).endOf('day').utc().format();
+});
+
+const queryParams = computed<AggregatedTimeEntriesQueryParams>(() => {
+    return {
+        start: weekStartUtc.value,
+        end: weekEndUtc.value,
+        group: group.value,
+        sub_group: subGroup.value,
+        member_id: getCurrentRole() === 'employee' ? getCurrentMembershipId() : undefined,
+    };
+});
+
+const { data: reportingResponse, isLoading } = useQuery({
+    queryKey: [
+        'dashboardThisWeekReporting',
+        organizationId,
+        weekStartUtc,
+        weekEndUtc,
+        group,
+        subGroup,
+    ],
+    queryFn: () => {
+        return api.getAggregatedTimeEntries({
+            params: {
+                organization: organizationId.value!,
+            },
+            queries: queryParams.value,
+        });
+    },
+    enabled: computed(() => !!organizationId.value),
+});
+
+const aggregatedTableTimeEntries = computed<AggregatedTimeEntries | null>(() => {
+    return (reportingResponse.value?.data as AggregatedTimeEntries | undefined) ?? null;
+});
+
+const tableData = computed(() => {
+    return (
+        aggregatedTableTimeEntries.value?.grouped_data?.map((entry) => {
+            return {
+                seconds: entry.seconds,
+                cost: entry.cost,
+                description: getNameForReportingRowEntry(
+                    entry.key,
+                    aggregatedTableTimeEntries.value?.grouped_type ?? null
+                ),
+                grouped_data:
+                    entry.grouped_data?.map((el) => {
+                        return {
+                            seconds: el.seconds,
+                            cost: el.cost,
+                            description: getNameForReportingRowEntry(
+                                el.key,
+                                entry.grouped_type ?? null
+                            ),
+                        };
+                    }) ?? [],
+            };
+        }) ?? []
+    );
+});
+</script>
+
+<template>
+    <div class="rounded-lg bg-card-background border border-card-border">
+        <div
+            class="text-sm flex text-text-primary pt-3 items-center space-x-3 font-medium px-6 border-b border-card-background-separator pb-3">
+            <span>Group by</span>
+            <ReportingGroupBySelect
+                v-model="group"
+                :group-by-options="groupByOptions"></ReportingGroupBySelect>
+            <span>and</span>
+            <ReportingGroupBySelect
+                v-model="subGroup"
+                :group-by-options="
+                    groupByOptions.filter((el) => el.value !== group)
+                "></ReportingGroupBySelect>
+        </div>
+
+        <div class="grid items-center" style="grid-template-columns: 1fr 100px 150px">
+            <div
+                class="contents [&>*]:border-card-background-separator [&>*]:border-b [&>*]:pb-1.5 [&>*]:pt-1 text-text-tertiary text-sm">
+                <div class="pl-6">Name</div>
+                <div class="text-right">Duration</div>
+                <div class="text-right pr-6">Cost</div>
+            </div>
+
+            <div v-if="isLoading" class="flex justify-center py-10 col-span-3 text-text-tertiary">
+                Loading reporting data…
+            </div>
+
+            <template
+                v-else-if="
+                    aggregatedTableTimeEntries?.grouped_data &&
+                    aggregatedTableTimeEntries.grouped_data?.length > 0
+                ">
+                <ReportingRow
+                    v-for="entry in tableData"
+                    :key="entry.description ?? 'none'"
+                    :currency="getOrganizationCurrencyString()"
+                    :entry="entry"></ReportingRow>
+                <div class="contents [&>*]:transition text-text-tertiary [&>*]:h-[50px]">
+                    <div class="flex items-center pl-6 font-medium">
+                        <span>Total</span>
+                    </div>
+                    <div class="justify-end flex items-center font-medium">
+                        {{
+                            formatHumanReadableDuration(
+                                aggregatedTableTimeEntries.seconds,
+                                organization?.interval_format,
+                                organization?.number_format
+                            )
+                        }}
+                    </div>
+                    <div class="justify-end pr-6 flex items-center font-medium">
+                        {{
+                            aggregatedTableTimeEntries.cost
+                                ? formatCents(
+                                      aggregatedTableTimeEntries.cost,
+                                      getOrganizationCurrencyString(),
+                                      organization?.currency_format,
+                                      organization?.currency_symbol,
+                                      organization?.number_format
+                                  )
+                                : '--'
+                        }}
+                    </div>
+                </div>
+            </template>
+
+            <div v-else class="chart flex flex-col items-center justify-center py-12 col-span-3">
+                <p class="text-lg text-text-primary font-medium">No time entries found</p>
+                <p>Try to track some time entries this week</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped></style>
--- a/resources/js/Components/NavLink.vue
+++ b/resources/js/Components/NavLink.vue
@@ -15,7 +15,7 @@ const classes = computed(() => {
 </script>

 <template>
-    <Link :href="href ?? ''" :class="classes" prefetch>
+    <Link :href="href ?? ''" :class="classes" prefetch="mount">
        <slot />
    </Link>
 </template>
--- a/resources/js/Components/TimeTracker.vue
+++ b/resources/js/Components/TimeTracker.vue
@@ -34,10 +34,9 @@ import { getOrganizationCurrencyString } from '@/utils/money';
 import { isAllowedToPerformPremiumAction } from '@/utils/billing';
 import { canCreateProjects } from '@/utils/permissions';
 import { ref } from 'vue';
-import { useTimeEntriesStore } from '@/utils/useTimeEntries';
-import { useMutation, useQueryClient } from '@tanstack/vue-query';
-import { api } from '@/packages/api/src';
 import { useNotificationsStore } from '@/utils/notification';
+import { useTimeEntriesMutations } from '@/utils/useTimeEntriesMutations';
+import { useTimeEntriesInfiniteQuery } from '@/utils/useTimeEntriesInfiniteQuery';

 const page = usePage<{
    auth: {
@@ -62,6 +61,10 @@ const emit = defineEmits<{

 const showManualTimeEntryModal = ref(false);

+const { createTimeEntry: createTimeEntryMutation, deleteTimeEntry } = useTimeEntriesMutations();
+const { data: timeEntriesData } = useTimeEntriesInfiniteQuery();
+const timeEntries = computed(() => timeEntriesData.value?.pages.flatMap((page) => page.data) || []);
+
 watch(isActive, () => {
    if (isActive.value) {
        startLiveTimer();
@@ -113,7 +116,7 @@ async function createTag(tag: string): Promise<Tag | undefined> {
 }

 async function createTimeEntry(timeEntry: Omit<CreateTimeEntryBody, 'member_id'>) {
-    await useTimeEntriesStore().createTimeEntry(timeEntry);
+    await createTimeEntryMutation(timeEntry);
    showManualTimeEntryModal.value = false;
 }

@@ -124,41 +127,19 @@ async function createTimeEntryFromCurrentEntry() {
 }

 const { handleApiRequestNotifications } = useNotificationsStore();
-const queryClient = useQueryClient();
-
-const deleteTimeEntryMutation = useMutation({
-    mutationFn: async (timeEntryId: string) => {
-        const organizationId = getCurrentOrganizationId();
-        if (!organizationId) {
-            throw new Error('No organization selected');
-        }
-        return await api.deleteTimeEntry(undefined, {
-            params: {
-                organization: organizationId,
-                timeEntry: timeEntryId,
-            },
-        });
-    },
-    onSuccess: async () => {
-        await currentTimeEntryStore.fetchCurrentTimeEntry();
-        await useTimeEntriesStore().fetchTimeEntries();
-        queryClient.invalidateQueries({ queryKey: ['timeEntry'] });
-        queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
-    },
-});

 async function discardCurrentTimeEntry() {
    if (currentTimeEntry.value.id) {
        await handleApiRequestNotifications(
-            () => deleteTimeEntryMutation.mutateAsync(currentTimeEntry.value.id),
+            () => deleteTimeEntry(currentTimeEntry.value.id),
            'Time entry discarded successfully',
            'Failed to discard time entry'
        );
+        await currentTimeEntryStore.fetchCurrentTimeEntry();
    }
 }

 const { tags } = useTagsQuery();
-const { timeEntries } = storeToRefs(useTimeEntriesStore());
 </script>

 <template>
@@ -176,7 +157,7 @@ const { timeEntries } = storeToRefs(useTimeEntriesStore());
        :tags
        :clients></TimeEntryCreateModal>
    <CardTitle title="Time Tracker" :icon="ClockIcon"></CardTitle>
-    <div class="relative">
+    <div class="relative pt-1">
        <TimeTrackerRunningInDifferentOrganizationOverlay
            v-if="isRunningInDifferentOrganization"
            @switch-organization="
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -25,7 +25,6 @@ import { computed, onMounted, provide, ref } from 'vue';
 import NotificationContainer from '@/Components/NotificationContainer.vue';
 import { initializeStores } from '@/utils/init';
 import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
-import { useTimeEntriesStore } from '@/utils/useTimeEntries';
 import {
    canManageBilling,
    canUpdateOrganization,
@@ -95,7 +94,6 @@ onMounted(async () => {
            // Only refresh non-migrated stores
            if (isUnloading.value === false) {
                useCurrentTimeEntryStore().fetchCurrentTimeEntry();
-                useTimeEntriesStore().patchTimeEntries();
            }
        }, 100);
    };
--- a/resources/js/Pages/Calendar.vue
+++ b/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>
--- a/resources/js/Pages/ReportingDetailed.vue
+++ b/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, () => {
--- a/resources/js/Pages/Time.vue
+++ b/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>
--- a/resources/js/packages/ui/src/CardTitle.vue
+++ b/resources/js/packages/ui/src/CardTitle.vue
@@ -8,10 +8,9 @@ defineProps<{
 </script>

 <template>
-    <div class="flex w-full items-center justify-between pb-2.5 lg:pb-3">
-        <h3
-            class="text-text-primary font-medium text-sm lg:text-base flex items-center space-x-1.5 lg:space-x-2">
-            <component :is="icon" v-if="icon" class="w-4 lg:w-4 text-icon-default"></component>
+    <div class="flex w-full items-center justify-between py-1.5">
+        <h3 class="text-text-primary font-medium text-sm flex items-center space-x-2">
+            <component :is="icon" v-if="icon" class="w-4 lg:w-4 text-text-tertiary"></component>
            <span>
                {{ title }}
            </span>
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryRowHeading.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryRowHeading.vue
@@ -33,7 +33,7 @@ function selectUnselectAll(value: boolean) {

 <template>
    <div
-        class="bg-background dark:bg-quaternary border-b border-border-primary py-1 text-xs @sm:text-sm">
+        class="bg-background dark:bg-secondary border-b border-border-primary py-1 text-xs @sm:text-sm">
        <MainContainer>
            <div class="flex group justify-between items-center">
                <div class="flex items-center space-x-2">
--- a/resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue
+++ b/resources/js/packages/ui/src/TimeTracker/TimeTrackerControls.vue
@@ -207,7 +207,7 @@ useSelectEvents(
 <template>
    <div class="flex items-center relative @container" data-testid="dashboard_timer">
        <div
-            class="flex flex-col @2xl:flex-row w-full justify-between rounded-lg bg-secondary border-card-border border transition shadow-card">
+            class="flex flex-col @2xl:flex-row w-full justify-between rounded-lg bg-card-background border-card-border border transition shadow-card">
            <div class="flex flex-1 items-center pr-6 relative">
                <input
                    ref="currentTimeEntryDescriptionInput"
--- a/resources/js/packages/ui/src/TimeTracker/TimeTrackerRangeSelector.vue
+++ b/resources/js/packages/ui/src/TimeTracker/TimeTrackerRangeSelector.vue
@@ -154,7 +154,7 @@ function closeAndFocusInput() {
                    v-model="currentTime"
                    placeholder="00:00:00"
                    data-testid="time_entry_time"
-                    class="w-[110px] lg:w-[130px] h-full text-text-primary py-2.5 rounded-lg border-border-secondary border text-center px-4 text-base lg:text-lg font-semibold bg-secondary border-none placeholder-text-tertiary focus:ring-0 transition"
+                    class="w-[110px] lg:w-[130px] h-full text-text-primary py-2.5 rounded-lg border-border-secondary border text-center px-4 text-base lg:text-lg font-semibold bg-card-background border-none placeholder-text-tertiary focus:ring-0 transition"
                    type="text"
                    @focusin="openModalOnTab"
                    @click="openModalOnClick"
--- a/resources/js/packages/ui/styles.css
+++ b/resources/js/packages/ui/styles.css
@@ -14,18 +14,18 @@
@tailwind utilities;

 :root.dark {
-    --color-bg-primary: #101012;
-    --color-bg-secondary: #17181b;
-    --color-bg-tertiary: #2a2c32;
-    --color-bg-quaternary: #141518;
-    --color-bg-background: #090909;
+    --color-bg-primary: oklch(0.14 0.0041 285.97);
+    --color-bg-secondary: oklch(0.18 0.005 285.97);
+    --color-bg-tertiary: oklch(0.22 0.0112 285.97);
+    --color-bg-quaternary: oklch(0.175 0.005 285.97);
+    --color-bg-background: oklch(0.1 0 0);
    --color-text-primary: #ffffff;
    --color-text-secondary: #e3e4e6;
    --color-text-tertiary: #969799;
    --color-text-quaternary: #595a5c;

    --color-border-primary: #191b1f;
-    --color-border-secondary: #23252a;
+    --color-border-secondary: oklch(0.25 0.0098 268.31);
    --color-border-tertiary: #2c2e33;
    --color-border-quaternary: #393b42;
    --color-input-border-active: rgba(255, 255, 255, 0.3);
@@ -33,7 +33,7 @@
    --theme-color-chart: var(--color-accent-200);

    --theme-color-menu-active: var(--color-bg-secondary);
-    --theme-color-card-background: var(--color-bg-primary);
+    --theme-color-card-background: var(--color-bg-secondary);
    --theme-shadow-card: 0 4px 7px 0px rgb(0 0 0 / 15%);
    --theme-shadow-dropdown: 0 4px 7px 0px rgb(0 0 0 / 40%);

--- a/resources/js/utils/init.ts
+++ b/resources/js/utils/init.ts
@@ -1,9 +1,7 @@
 import { useCurrentTimeEntryStore } from '@/utils/useCurrentTimeEntry';
-import { useTimeEntriesStore } from '@/utils/useTimeEntries';

 export function initializeStores() {
    // TanStack Query now handles projects, tasks, tags, clients, and members fetching automatically
    // Only initialize stores that aren't migrated to TanStack Query yet
    useCurrentTimeEntryStore().fetchCurrentTimeEntry();
-    useTimeEntriesStore().patchTimeEntries();
 }
--- a/resources/js/utils/prefetch.ts
+++ b/resources/js/utils/prefetch.ts
@@ -1,6 +1,6 @@
 import type { QueryClient } from '@tanstack/vue-query';
 import { api } from '@/packages/api/src';
-import { getCurrentOrganizationId } from '@/utils/useUser';
+import { getCurrentOrganizationId, getCurrentMembershipId } from '@/utils/useUser';
 import { canViewClients, canViewMembers } from '@/utils/permissions';

 /**
@@ -21,6 +21,7 @@ const routePrefetchers: Record<string, (queryClient: QueryClient) => void> = {
        prefetchTasks(queryClient);
        prefetchTags(queryClient);
        prefetchClients(queryClient);
+        prefetchTimeEntries(queryClient);
    },

    '/calendar': (queryClient) => {
@@ -221,6 +222,28 @@ function prefetchReports(queryClient: QueryClient) {
    });
 }

+function prefetchTimeEntries(queryClient: QueryClient) {
+    const organizationId = getCurrentOrganizationId();
+    const memberId = getCurrentMembershipId();
+    if (!organizationId) return;
+
+    queryClient.prefetchInfiniteQuery({
+        queryKey: ['timeEntries', 'infinite', { organizationId, memberId }],
+        queryFn: async () => {
+            const response = await api.getTimeEntries({
+                params: { organization: organizationId },
+                queries: {
+                    only_full_dates: 'true',
+                    member_id: memberId,
+                },
+            });
+            return response;
+        },
+        initialPageParam: undefined,
+        staleTime: 30000,
+    });
+}
+
 function prefetchProjectMembers(queryClient: QueryClient, projectId: string) {
    const organizationId = getCurrentOrganizationId();
    if (!organizationId || !canViewMembers()) return;
--- a/resources/js/utils/useCurrentTimeEntry.ts
+++ b/resources/js/utils/useCurrentTimeEntry.ts
@@ -10,8 +10,8 @@ import {
    getCurrentUserId,
 } from '@/utils/useUser';
 import { useLocalStorage } from '@vueuse/core';
-import { useTimeEntriesStore } from '@/utils/useTimeEntries';
 import { useNotificationsStore } from '@/utils/notification';
+import { useQueryClient } from '@tanstack/vue-query';

 dayjs.extend(utc);

@@ -32,6 +32,7 @@ const emptyTimeEntry = {
 export const useCurrentTimeEntryStore = defineStore('currentTimeEntry', () => {
    const currentTimeEntry = ref<TimeEntry>(reactive(emptyTimeEntry));
    const { handleApiRequestNotifications } = useNotificationsStore();
+    const queryClient = useQueryClient();

    useLocalStorage('solidtime/current-time-entry', currentTimeEntry, {
        deep: true,
@@ -208,7 +209,7 @@ export const useCurrentTimeEntryStore = defineStore('currentTimeEntry', () => {
            stopLiveTimer();
            await stopTimer();
        }
-        useTimeEntriesStore().fetchTimeEntries();
+        queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
    }

    return {
--- a/resources/js/utils/useTimeEntries.ts
+++ b/resources/js/utils/useTimeEntries.ts
@@ -1,246 +0,0 @@
-import { defineStore } from 'pinia';
-import { getCurrentMembershipId, getCurrentOrganizationId } from '@/utils/useUser';
-
-import { reactive, ref, type Ref } from 'vue';
-import { api } from '@/packages/api/src';
-import type {
-    CreateTimeEntryBody,
-    TimeEntriesQueryParams,
-    TimeEntry,
-    UpdateMultipleTimeEntriesChangeset,
-} from '@/packages/api/src';
-import dayjs from 'dayjs';
-import { useNotificationsStore } from '@/utils/notification';
-import type {} from '@/packages/api/src';
-import { useQueryClient } from '@tanstack/vue-query';
-
-export const useTimeEntriesStore = defineStore(
-    'timeEntries',
-    (): {
-        timeEntries: Ref<TimeEntry[]>;
-        fetchTimeEntries: (queryParams?: TimeEntriesQueryParams) => Promise<void>;
-        updateTimeEntry: (timeEntry: TimeEntry) => Promise<void>;
-        createTimeEntry: (timeEntry: Omit<CreateTimeEntryBody, 'member_id'>) => Promise<void>;
-        deleteTimeEntry: (timeEntryId: string) => Promise<void>;
-        fetchMoreTimeEntries: () => Promise<void>;
-        allTimeEntriesLoaded: Ref<boolean>;
-        updateTimeEntries: (
-            ids: string[],
-            changes: UpdateMultipleTimeEntriesChangeset
-        ) => Promise<void>;
-        deleteTimeEntries: (timeEntries: TimeEntry[]) => Promise<void>;
-        patchTimeEntries: (queryParams?: TimeEntriesQueryParams) => Promise<void>;
-    } => {
-        const timeEntries = ref<TimeEntry[]>(reactive([]));
-
-        const allTimeEntriesLoaded = ref(false);
-        const { handleApiRequestNotifications } = useNotificationsStore();
-
-        const queryClient = useQueryClient();
-
-        async function patchTimeEntries(
-            queryParams: TimeEntriesQueryParams = {
-                only_full_dates: 'true',
-                member_id: getCurrentMembershipId(),
-            }
-        ) {
-            const organizationId = getCurrentOrganizationId();
-
-            if (organizationId) {
-                const timeEntriesResponse = await handleApiRequestNotifications(
-                    () =>
-                        api.getTimeEntries({
-                            params: {
-                                organization: organizationId,
-                            },
-                            queries: queryParams,
-                        }),
-                    undefined,
-                    'Failed to fetch time entries'
-                );
-                if (timeEntriesResponse?.data) {
-                    // insert missing time entries
-                    const missingTimeEntries = timeEntriesResponse.data.filter(
-                        (entry) => !timeEntries.value.find((e) => e.id === entry.id)
-                    );
-                    timeEntries.value = [...missingTimeEntries, ...timeEntries.value];
-                }
-            }
-        }
-
-        async function fetchTimeEntries(
-            queryParams: TimeEntriesQueryParams = {
-                only_full_dates: 'true',
-                member_id: getCurrentMembershipId(),
-            }
-        ) {
-            const organizationId = getCurrentOrganizationId();
-
-            if (organizationId) {
-                const timeEntriesResponse = await handleApiRequestNotifications(
-                    () =>
-                        api.getTimeEntries({
-                            params: {
-                                organization: organizationId,
-                            },
-                            queries: queryParams,
-                        }),
-                    undefined,
-                    'Failed to fetch time entries'
-                );
-                if (timeEntriesResponse?.data) {
-                    timeEntries.value = timeEntriesResponse.data;
-                }
-            }
-        }
-
-        async function fetchMoreTimeEntries() {
-            const organizationId = getCurrentOrganizationId();
-            if (organizationId) {
-                const latestTimeEntry = timeEntries.value[timeEntries.value.length - 1];
-                dayjs(latestTimeEntry.start).utc().format('YYYY-MM-DD');
-
-                const timeEntriesResponse = await handleApiRequestNotifications(
-                    () =>
-                        api.getTimeEntries({
-                            params: {
-                                organization: organizationId,
-                            },
-                            queries: {
-                                only_full_dates: 'true',
-                                member_id: getCurrentMembershipId(),
-                                end: dayjs(latestTimeEntry.start).utc().format(),
-                            },
-                        }),
-                    undefined,
-                    'Failed to fetch time entries'
-                );
-                if (timeEntriesResponse?.data && timeEntriesResponse.data.length > 0) {
-                    timeEntries.value = timeEntries.value.concat(timeEntriesResponse.data);
-                } else {
-                    allTimeEntriesLoaded.value = true;
-                }
-            }
-        }
-
-        async function updateTimeEntries(
-            ids: string[],
-            changes: UpdateMultipleTimeEntriesChangeset
-        ) {
-            const organizationId = getCurrentOrganizationId();
-            if (organizationId) {
-                await handleApiRequestNotifications(
-                    () =>
-                        api.updateMultipleTimeEntries(
-                            {
-                                ids: ids,
-                                changes: changes,
-                            },
-                            {
-                                params: {
-                                    organization: organizationId,
-                                },
-                            }
-                        ),
-                    'Time entries updated successfully',
-                    'Failed to update time entries'
-                );
-            }
-        }
-
-        async function updateTimeEntry(timeEntry: TimeEntry) {
-            const organizationId = getCurrentOrganizationId();
-            if (organizationId) {
-                const response = await handleApiRequestNotifications(
-                    () =>
-                        api.updateTimeEntry(timeEntry, {
-                            params: {
-                                organization: organizationId,
-                                timeEntry: timeEntry.id,
-                            },
-                        }),
-                    'Time entry updated successfully',
-                    'Failed to update time entry'
-                );
-                timeEntries.value = timeEntries.value.map((entry) =>
-                    entry.id === timeEntry.id ? response.data : entry
-                );
-                queryClient.invalidateQueries({ queryKey: ['timeEntry'] });
-            }
-        }
-
-        async function createTimeEntry(timeEntry: Omit<CreateTimeEntryBody, 'member_id'>) {
-            const organizationId = getCurrentOrganizationId();
-            const memberId = getCurrentMembershipId();
-            if (organizationId && memberId !== undefined) {
-                const newTimeEntry = {
-                    ...timeEntry,
-                    member_id: memberId,
-                } as CreateTimeEntryBody;
-                await handleApiRequestNotifications(
-                    () =>
-                        api.createTimeEntry(newTimeEntry, {
-                            params: {
-                                organization: organizationId,
-                            },
-                        }),
-                    'Time entry created successfully',
-                    'Failed to create time entry'
-                );
-                await fetchTimeEntries();
-            }
-        }
-
-        async function deleteTimeEntry(timeEntryId: string) {
-            const organizationId = getCurrentOrganizationId();
-            if (organizationId) {
-                await handleApiRequestNotifications(
-                    () =>
-                        api.deleteTimeEntry(undefined, {
-                            params: {
-                                organization: organizationId,
-                                timeEntry: timeEntryId,
-                            },
-                        }),
-                    'Time entry deleted successfully',
-                    'Failed to delete time entry'
-                );
-                await fetchTimeEntries();
-            }
-        }
-
-        async function deleteTimeEntries(timeEntries: TimeEntry[]) {
-            const organizationId = getCurrentOrganizationId();
-            const timeEntryIds = timeEntries.map((entry) => entry.id);
-            if (organizationId) {
-                await handleApiRequestNotifications(
-                    () =>
-                        api.deleteTimeEntries(undefined, {
-                            queries: {
-                                ids: timeEntryIds,
-                            },
-                            params: {
-                                organization: organizationId,
-                            },
-                        }),
-                    'Time entries deleted successfully',
-                    'Failed to delete time entries'
-                );
-                await fetchTimeEntries();
-            }
-        }
-
-        return {
-            timeEntries,
-            fetchTimeEntries,
-            updateTimeEntry,
-            createTimeEntry,
-            deleteTimeEntry,
-            fetchMoreTimeEntries,
-            allTimeEntriesLoaded,
-            updateTimeEntries,
-            deleteTimeEntries,
-            patchTimeEntries,
-        };
-    }
-);
--- a/resources/js/utils/useTimeEntriesCalendarQuery.ts
+++ b/resources/js/utils/useTimeEntriesCalendarQuery.ts
@@ -0,0 +1,65 @@
+import { useQuery } from '@tanstack/vue-query';
+import { api, type TimeEntryResponse } from '@/packages/api/src';
+import { getCurrentMembershipId, getCurrentOrganizationId } from '@/utils/useUser';
+import { computed, type Ref } from 'vue';
+import { getDayJsInstance } from '@/packages/ui/src/utils/time';
+import { getUserTimezone } from '@/packages/ui/src/utils/settings';
+
+export function useTimeEntriesCalendarQuery(
+    calendarStart: Ref<Date | undefined>,
+    calendarEnd: Ref<Date | 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,
+        };
+    });
+
+    return useQuery<TimeEntryResponse>({
+        queryKey: computed(() => [
+            'timeEntries',
+            '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(),
+                },
+            }),
+        staleTime: 1000 * 30, // 30 seconds
+    });
+}
--- a/resources/js/utils/useTimeEntriesInfiniteQuery.ts
+++ b/resources/js/utils/useTimeEntriesInfiniteQuery.ts
@@ -0,0 +1,51 @@
+import { useInfiniteQuery } from '@tanstack/vue-query';
+import { api } from '@/packages/api/src';
+import { getCurrentMembershipId, getCurrentOrganizationId } from '@/utils/useUser';
+import dayjs from 'dayjs';
+import { computed } from 'vue';
+
+export function useTimeEntriesInfiniteQuery() {
+    const organizationId = computed(() => getCurrentOrganizationId());
+    const memberId = computed(() => getCurrentMembershipId());
+
+    return useInfiniteQuery({
+        queryKey: computed(() => [
+            'timeEntries',
+            'infinite',
+            { organizationId: organizationId.value, memberId: memberId.value },
+        ]),
+        queryFn: async ({ pageParam }) => {
+            const orgId = organizationId.value;
+            if (!orgId) return { data: [] };
+
+            const queries: Record<string, string | undefined> = {
+                only_full_dates: 'true',
+                member_id: memberId.value,
+            };
+
+            if (pageParam) {
+                queries.end = pageParam;
+            }
+
+            const response = await api.getTimeEntries({
+                params: {
+                    organization: orgId,
+                },
+                queries: queries,
+            });
+
+            return response;
+        },
+        initialPageParam: undefined as string | undefined,
+        getNextPageParam: (lastPage) => {
+            if (!lastPage?.data || lastPage.data.length === 0) {
+                return undefined;
+            }
+            const latestTimeEntry = lastPage.data[lastPage.data.length - 1];
+            return dayjs(latestTimeEntry.start).utc().format();
+        },
+        enabled: computed(() => !!organizationId.value),
+        staleTime: 1000 * 30, // 30 seconds
+        gcTime: 1000 * 60 * 10, // 10 minutes
+    });
+}
--- a/resources/js/utils/useTimeEntriesMutations.ts
+++ b/resources/js/utils/useTimeEntriesMutations.ts
@@ -0,0 +1,151 @@
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+import {
+    api,
+    type CreateTimeEntryBody,
+    type TimeEntry,
+    type UpdateMultipleTimeEntriesChangeset,
+} from '@/packages/api/src';
+import { getCurrentMembershipId, getCurrentOrganizationId } from '@/utils/useUser';
+import { useNotificationsStore } from '@/utils/notification';
+
+export function useTimeEntriesMutations() {
+    const queryClient = useQueryClient();
+    const { handleApiRequestNotifications } = useNotificationsStore();
+
+    const { mutateAsync: createTimeEntry } = useMutation({
+        mutationFn: async (timeEntry: Omit<CreateTimeEntryBody, 'member_id'>) => {
+            const organizationId = getCurrentOrganizationId();
+            const memberId = getCurrentMembershipId();
+            if (organizationId && memberId !== undefined) {
+                const newTimeEntry = {
+                    ...timeEntry,
+                    member_id: memberId,
+                } as CreateTimeEntryBody;
+
+                return await handleApiRequestNotifications(
+                    () =>
+                        api.createTimeEntry(newTimeEntry, {
+                            params: {
+                                organization: organizationId,
+                            },
+                        }),
+                    'Time entry created successfully',
+                    'Failed to create time entry'
+                );
+            }
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
+        },
+    });
+
+    const { mutateAsync: updateTimeEntry } = useMutation({
+        mutationFn: async (timeEntry: TimeEntry) => {
+            const organizationId = getCurrentOrganizationId();
+            if (organizationId) {
+                return await handleApiRequestNotifications(
+                    () =>
+                        api.updateTimeEntry(timeEntry, {
+                            params: {
+                                organization: organizationId,
+                                timeEntry: timeEntry.id,
+                            },
+                        }),
+                    'Time entry updated successfully',
+                    'Failed to update time entry'
+                );
+            }
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
+        },
+    });
+
+    const { mutateAsync: updateTimeEntries } = useMutation({
+        mutationFn: async ({
+            ids,
+            changes,
+        }: {
+            ids: string[];
+            changes: UpdateMultipleTimeEntriesChangeset;
+        }) => {
+            const organizationId = getCurrentOrganizationId();
+            if (organizationId) {
+                return await handleApiRequestNotifications(
+                    () =>
+                        api.updateMultipleTimeEntries(
+                            {
+                                ids: ids,
+                                changes: changes,
+                            },
+                            {
+                                params: {
+                                    organization: organizationId,
+                                },
+                            }
+                        ),
+                    'Time entries updated successfully',
+                    'Failed to update time entries'
+                );
+            }
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
+        },
+    });
+
+    const { mutateAsync: deleteTimeEntry } = useMutation({
+        mutationFn: async (timeEntryId: string) => {
+            const organizationId = getCurrentOrganizationId();
+            if (organizationId) {
+                return await handleApiRequestNotifications(
+                    () =>
+                        api.deleteTimeEntry(undefined, {
+                            params: {
+                                organization: organizationId,
+                                timeEntry: timeEntryId,
+                            },
+                        }),
+                    'Time entry deleted successfully',
+                    'Failed to delete time entry'
+                );
+            }
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
+        },
+    });
+
+    const { mutateAsync: deleteTimeEntries } = useMutation({
+        mutationFn: async (timeEntries: TimeEntry[]) => {
+            const organizationId = getCurrentOrganizationId();
+            const timeEntryIds = timeEntries.map((entry) => entry.id);
+            if (organizationId) {
+                return await handleApiRequestNotifications(
+                    () =>
+                        api.deleteTimeEntries(undefined, {
+                            queries: {
+                                ids: timeEntryIds,
+                            },
+                            params: {
+                                organization: organizationId,
+                            },
+                        }),
+                    'Time entries deleted successfully',
+                    'Failed to delete time entries'
+                );
+            }
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['timeEntries'] });
+        },
+    });
+
+    return {
+        createTimeEntry,
+        updateTimeEntry,
+        updateTimeEntries,
+        deleteTimeEntry,
+        deleteTimeEntries,
+    };
+}
--- a/resources/js/utils/useTimeEntriesReportQuery.ts
+++ b/resources/js/utils/useTimeEntriesReportQuery.ts
@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/vue-query';
+import { api, type TimeEntryResponse } from '@/packages/api/src';
+import { getCurrentOrganizationId } from '@/utils/useUser';
+import { computed, type Ref, type ComputedRef, unref } from 'vue';
+
+export function useTimeEntriesReportQuery(
+    filterParams: Ref<Record<string, unknown>> | ComputedRef<Record<string, unknown>>
+) {
+    return useQuery<TimeEntryResponse>({
+        queryKey: computed(() => ['timeEntries', 'detailed-report', unref(filterParams)]),
+        enabled: computed(() => !!getCurrentOrganizationId()),
+        queryFn: () =>
+            api.getTimeEntries({
+                params: {
+                    organization: getCurrentOrganizationId() || '',
+                },
+                queries: { ...unref(filterParams) },
+            }),
+        staleTime: 1000 * 30, // 30 seconds
+    });
+}