add pagination to client and project table

e2e/clients.spec.ts

@@ -246,7 +246,7 @@ test('test that sorting clients by name and status works', async ({ page, ctx })
 
 test('test that sorting clients by project count works', async ({ page, ctx }) => {
     const clientWithMany = await createClientViaApi(ctx, { name: 'ManyProjects Client' });
-    const clientWithNone = await createClientViaApi(ctx, { name: 'NoProjects Client' });
+    await createClientViaApi(ctx, { name: 'NoProjects Client' });
 
     // Create projects for the first client
     await createProjectViaApi(ctx, { name: 'Proj1', client_id: clientWithMany.id });
@@ -374,3 +374,119 @@ test.describe('Employee Clients Restrictions', () => {
         await expect(employee.page.getByText(clientName)).toBeVisible({ timeout: 10000 });
     });
 });
+
+// ──────────────────────────────────────────────────
+// Pagination Tests
+// ──────────────────────────────────────────────────
+
+test.describe('Clients Pagination', () => {
+    test.describe.configure({ timeout: 30000 });
+
+    test('test that client table paginates when there are more than 15 clients', async ({
+        page,
+        ctx,
+    }) => {
+        // Create 17 clients with zero-padded names so alphabetical sort is predictable.
+        // Page size is 15 → page 1 shows indices 00–14, page 2 shows 15–16.
+        const seed = Math.floor(Math.random() * 100000);
+        const prefix = `PaginationClient ${seed} `;
+        await Promise.all(
+            Array.from({ length: 17 }, (_, i) =>
+                createClientViaApi(ctx, { name: prefix + String(i).padStart(2, '0') })
+            )
+        );
+
+        await goToClientsOverview(page);
+        await clearClientTableState(page);
+        await page.reload();
+
+        // Default sort is name asc; first 15 clients (00–14) on page 1.
+        await expect(page.getByText(prefix + '00')).toBeVisible({ timeout: 10000 });
+        await expect(page.getByRole('button', { name: 'Next Page' })).toBeVisible();
+        // Client 15 should be on page 2, not visible on page 1.
+        await expect(page.getByText(prefix + '15')).not.toBeVisible();
+
+        // Exactly 15 data rows mounted on page 1.
+        await expect(page.getByRole('row')).toHaveCount(15);
+
+        // Navigation to page 2.
+        await page.getByRole('button', { name: 'Next Page' }).click();
+        await expect(page.getByText(prefix + '15')).toBeVisible();
+        await expect(page.getByText(prefix + '00')).not.toBeVisible();
+        // Page 2 contains the remaining 2 clients.
+        await expect(page.getByRole('row')).toHaveCount(2);
+
+        // Back to page 1 via Previous Page.
+        await page.getByRole('button', { name: 'Previous Page' }).click();
+        await expect(page.getByText(prefix + '00')).toBeVisible();
+        await expect(page.getByText(prefix + '15')).not.toBeVisible();
+
+        // First / Last page jumps.
+        await page.getByRole('button', { name: 'Last Page' }).click();
+        await expect(page.getByText(prefix + '15')).toBeVisible();
+        await page.getByRole('button', { name: 'First Page' }).click();
+        await expect(page.getByText(prefix + '00')).toBeVisible();
+        await expect(page.getByText(prefix + '15')).not.toBeVisible();
+
+        // Direct page-number button navigation + selected state.
+        await page.getByRole('button', { name: 'Page 2' }).click();
+        await expect(page.getByText(prefix + '15')).toBeVisible();
+        await expect(page.getByRole('button', { name: 'Page 2' })).toHaveAttribute(
+            'aria-current',
+            'page'
+        );
+    });
+
+    test('test that client pagination is not shown when there are 15 or fewer clients', async ({
+        page,
+        ctx,
+    }) => {
+        await Promise.all(
+            Array.from({ length: 10 }, (_, i) =>
+                createClientViaApi(ctx, {
+                    name: `FewClient ${Math.floor(Math.random() * 100000)} ${i}`,
+                })
+            )
+        );
+
+        await goToClientsOverview(page);
+        await clearClientTableState(page);
+        await page.reload();
+
+        await expect(page.getByTestId('client_table')).toBeVisible();
+        await expect(page.getByRole('button', { name: 'Next Page' })).toHaveCount(0);
+    });
+
+    test('test that changing the sort resets client pagination to page 1', async ({
+        page,
+        ctx,
+    }) => {
+        const seed = Math.floor(Math.random() * 100000);
+        const prefix = `SortPagClient ${seed} `;
+        await Promise.all(
+            Array.from({ length: 17 }, (_, i) =>
+                createClientViaApi(ctx, { name: prefix + String(i).padStart(2, '0') })
+            )
+        );
+
+        await goToClientsOverview(page);
+        await clearClientTableState(page);
+        await page.reload();
+
+        await expect(page.getByText(prefix + '00')).toBeVisible({ timeout: 10000 });
+
+        // Go to page 2.
+        await page.getByRole('button', { name: 'Next Page' }).click();
+        await expect(page.getByText(prefix + '15')).toBeVisible();
+
+        // Sort by name descending.
+        const table = page.getByTestId('client_table');
+        const nameHeader = table.getByText('Name').first();
+        await nameHeader.click();
+
+        // Pagination reset to page 1; desc order → 16, 15 visible, 00 on page 2.
+        await expect(page.getByText(prefix + '16')).toBeVisible();
+        await expect(page.getByText(prefix + '15')).toBeVisible();
+        await expect(page.getByText(prefix + '00')).not.toBeVisible();
+    });
+});

e2e/projects.spec.ts

@@ -1054,3 +1054,119 @@ test.describe('Employee Billable Rate Visibility', () => {
         await expect(projectRow).toContainText('200');
     });
 });
+
+// ──────────────────────────────────────────────────
+// Pagination Tests
+// ──────────────────────────────────────────────────
+
+test.describe('Projects Pagination', () => {
+    test.describe.configure({ timeout: 30000 });
+
+    test('test that project table paginates when there are more than 15 projects', async ({
+        page,
+        ctx,
+    }) => {
+        // Create 17 projects with zero-padded names so alphabetical sort is predictable.
+        // Page size is 15 → page 1 shows indices 00–14, page 2 shows 15–16.
+        const seed = Math.floor(Math.random() * 100000);
+        const prefix = `PaginationProj ${seed} `;
+        await Promise.all(
+            Array.from({ length: 17 }, (_, i) =>
+                createProjectViaApi(ctx, { name: prefix + String(i).padStart(2, '0') })
+            )
+        );
+
+        await goToProjectsOverview(page);
+        await clearProjectTableState(page);
+        await page.reload();
+
+        // Default sort is name asc; first 15 projects (00–14) should be on page 1.
+        await expect(page.getByText(prefix + '00')).toBeVisible({ timeout: 10000 });
+        await expect(page.getByRole('button', { name: 'Next Page' })).toBeVisible();
+        // Project 15 should be on page 2, not visible on page 1.
+        await expect(page.getByText(prefix + '15')).not.toBeVisible();
+
+        // Exactly 15 data rows should be mounted on page 1.
+        await expect(page.getByRole('row')).toHaveCount(15);
+
+        // Go to page 2.
+        await page.getByRole('button', { name: 'Next Page' }).click();
+        await expect(page.getByText(prefix + '15')).toBeVisible();
+        await expect(page.getByText(prefix + '00')).not.toBeVisible();
+        // Page 2 contains the remaining 2 projects (15, 16).
+        await expect(page.getByRole('row')).toHaveCount(2);
+
+        // Return to page 1 via Previous Page.
+        await page.getByRole('button', { name: 'Previous Page' }).click();
+        await expect(page.getByText(prefix + '00')).toBeVisible();
+        await expect(page.getByText(prefix + '15')).not.toBeVisible();
+
+        // Jump to last page then back to first page.
+        await page.getByRole('button', { name: 'Last Page' }).click();
+        await expect(page.getByText(prefix + '15')).toBeVisible();
+        await page.getByRole('button', { name: 'First Page' }).click();
+        await expect(page.getByText(prefix + '00')).toBeVisible();
+        await expect(page.getByText(prefix + '15')).not.toBeVisible();
+
+        // Direct page-number button navigation.
+        await page.getByRole('button', { name: 'Page 2' }).click();
+        await expect(page.getByText(prefix + '15')).toBeVisible();
+        // Page 2 button should be marked as selected.
+        await expect(page.getByRole('button', { name: 'Page 2' })).toHaveAttribute(
+            'aria-current',
+            'page'
+        );
+    });
+
+    test('test that project pagination is not shown when there are 15 or fewer projects', async ({
+        page,
+        ctx,
+    }) => {
+        await Promise.all(
+            Array.from({ length: 10 }, (_, i) =>
+                createProjectViaApi(ctx, {
+                    name: `FewProj ${Math.floor(Math.random() * 100000)} ${i}`,
+                })
+            )
+        );
+
+        await goToProjectsOverview(page);
+        await clearProjectTableState(page);
+        await page.reload();
+
+        await expect(page.getByTestId('project_table')).toBeVisible();
+        await expect(page.getByRole('button', { name: 'Next Page' })).toHaveCount(0);
+    });
+
+    test('test that changing the sort resets pagination to page 1', async ({ page, ctx }) => {
+        const seed = Math.floor(Math.random() * 100000);
+        const prefix = `SortPagProj ${seed} `;
+        await Promise.all(
+            Array.from({ length: 17 }, (_, i) =>
+                createProjectViaApi(ctx, { name: prefix + String(i).padStart(2, '0') })
+            )
+        );
+
+        await goToProjectsOverview(page);
+        await clearProjectTableState(page);
+        await page.reload();
+
+        await expect(page.getByText(prefix + '00')).toBeVisible({ timeout: 10000 });
+
+        // Go to page 2.
+        await page.getByRole('button', { name: 'Next Page' }).click();
+        await expect(page.getByText(prefix + '15')).toBeVisible();
+
+        // Sort by name descending: header click toggles asc → desc.
+        const nameHeader = page
+            .locator('[data-testid="project_table"] .select-none', { hasText: 'Name' })
+            .first();
+        await nameHeader.click();
+
+        // After sorting, pagination resets to page 1; desc order → 16, 15, ... 02 visible.
+        await expect(page.getByText(prefix + '16')).toBeVisible();
+        await expect(page.getByText(prefix + '15')).toBeVisible();
+        // Index 00 should now be on page 2 (last in desc order).
+        await expect(page.getByText(prefix + '00')).not.toBeVisible();
+    });
+});

e2e/reporting-detailed.spec.ts

@@ -717,3 +717,108 @@ test('test that keyboard navigation works in multiselect dropdown', async ({ pag
         page.getByRole('button', { name: 'Projects' }).first().getByText('1')
     ).toBeVisible();
 });
+
+// ──────────────────────────────────────────────────
+// Pagination Tests
+// ──────────────────────────────────────────────────
+
+test.describe('Reporting Detailed Pagination', () => {
+    test('test that detailed reporting paginates when there are more than 15 time entries', async ({
+        page,
+        ctx,
+    }) => {
+        // The detailed report paginates server-side with a page limit of 15.
+        // Create 17 time entries on a single project so we get exactly 2 pages.
+        const seed = Math.floor(Math.random() * 100000);
+        const projectName = `ReportPagProj ${seed}`;
+        const project = await createProjectViaApi(ctx, { name: projectName });
+        const descriptions = Array.from(
+            { length: 17 },
+            (_, i) => `ReportPagEntry ${String(i).padStart(2, '0')} ${seed}`
+        );
+        await Promise.all(
+            descriptions.map((description) =>
+                createTimeEntryViaApi(ctx, {
+                    description,
+                    duration: '30min',
+                    projectId: project.id,
+                })
+            )
+        );
+
+        await goToReportingDetailed(page);
+        await expect(page.getByText(descriptions[0]!).first()).toBeVisible({
+            timeout: 10000,
+        });
+
+        // Pagination nav should be rendered.
+        await expect(page.getByRole('button', { name: 'Next Page' })).toBeVisible();
+
+        // Collect which descriptions are currently visible on page 1.
+        const visiblePage1 = new Set<string>();
+        for (const description of descriptions) {
+            if ((await page.getByText(description).count()) > 0) {
+                visiblePage1.add(description);
+            }
+        }
+        // The page limit is 15 → exactly 15 entries visible on page 1.
+        expect(visiblePage1.size).toBe(15);
+
+        // Go to page 2 and wait for the server fetch.
+        await Promise.all([
+            page.getByRole('button', { name: 'Next Page' }).click(),
+            waitForDetailedReportingUpdate(page),
+        ]);
+
+        const visiblePage2 = new Set<string>();
+        for (const description of descriptions) {
+            if ((await page.getByText(description).count()) > 0) {
+                visiblePage2.add(description);
+            }
+        }
+        // Page 2 should hold the remaining 2 entries, disjoint from page 1.
+        expect(visiblePage2.size).toBe(2);
+        for (const description of visiblePage2) {
+            expect(visiblePage1.has(description)).toBe(false);
+        }
+        // Across both pages, all 17 entries should have been visible.
+        expect(visiblePage1.size + visiblePage2.size).toBe(17);
+
+        // Page 2 button is selected.
+        await expect(page.getByRole('button', { name: 'Page 2' })).toHaveAttribute(
+            'aria-current',
+            'page'
+        );
+
+        // Previous page returns to page 1.
+        await Promise.all([
+            page.getByRole('button', { name: 'Previous Page' }).click(),
+            waitForDetailedReportingUpdate(page),
+        ]);
+        expect((await page.getByText(descriptions[0]!).count()) > 0).toBe(true);
+    });
+
+    test('test that reporting pagination is not shown when there are 15 or fewer time entries', async ({
+        page,
+        ctx,
+    }) => {
+        const seed = Math.floor(Math.random() * 100000);
+        const projectName = `FewEntriesProj ${seed}`;
+        const project = await createProjectViaApi(ctx, { name: projectName });
+        await Promise.all(
+            Array.from({ length: 5 }, (_, i) =>
+                createTimeEntryViaApi(ctx, {
+                    description: `FewEntries ${i} ${seed}`,
+                    duration: '30min',
+                    projectId: project.id,
+                })
+            )
+        );
+
+        await goToReportingDetailed(page);
+        await expect(page.getByText(`FewEntries 0 ${seed}`).first()).toBeVisible({
+            timeout: 10000,
+        });
+        await expect(page.getByRole('button', { name: 'Next Page' })).toHaveCount(0);
+    });
+});

resources/js/Components/Common/Client/ClientTable.vue

@@ -2,11 +2,12 @@
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import { UserCircleIcon } from '@heroicons/vue/24/solid';
 import { PlusIcon } from '@heroicons/vue/16/solid';
-import { type Component, computed, ref } from 'vue';
+import { type Component, computed, ref, watch } from 'vue';
 import { type Client } from '@/packages/api/src';
 import ClientTableRow from '@/Components/Common/Client/ClientTableRow.vue';
 import ClientCreateModal from '@/Components/Common/Client/ClientCreateModal.vue';
 import ClientTableHeading from '@/Components/Common/Client/ClientTableHeading.vue';
+import Pagination from '@/Components/Common/Pagination.vue';
 import { canCreateClients } from '@/utils/permissions';
 import { useProjectsQuery } from '@/utils/useProjectsQuery';
 import {
@@ -100,6 +101,19 @@ const table = useVueTable({
 const sortedClients = computed(() => {
     return table.getRowModel().rows.map((row) => row.original);
 });
+
+// Client-side pagination: the full list is in memory, only one page is mounted at a time.
+const PAGE_SIZE = 15;
+const currentPage = ref(1);
+
+watch([() => props.sortColumn, () => props.sortDirection, () => props.clients], () => {
+    currentPage.value = 1;
+});
+
+const paginatedClients = computed(() => {
+    const start = (currentPage.value - 1) * PAGE_SIZE;
+    return sortedClients.value.slice(start, start + PAGE_SIZE);
+});
 </script>
 
 <template>
@@ -126,10 +140,14 @@ const sortedClients = computed(() => {
                         >Create your First Client
                     </SecondaryButton>
                 </div>
-                <template v-for="client in sortedClients" :key="client.id">
+                <template v-for="client in paginatedClients" :key="client.id">
                     <ClientTableRow :client="client"></ClientTableRow>
                 </template>
             </div>
         </div>
     </div>
+    <Pagination
+        v-model:page="currentPage"
+        :total="sortedClients.length"
+        :items-per-page="PAGE_SIZE"></Pagination>
 </template>

resources/js/Components/Common/Pagination.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import {
+    PaginationEllipsis,
+    PaginationFirst,
+    PaginationLast,
+    PaginationList,
+    PaginationListItem,
+    PaginationNext,
+    PaginationPrev,
+    PaginationRoot,
+} from 'radix-vue';
+import {
+    ChevronDoubleLeftIcon,
+    ChevronDoubleRightIcon,
+    ChevronLeftIcon,
+    ChevronRightIcon,
+    EllipsisHorizontalIcon,
+} from '@heroicons/vue/20/solid';
+import { buttonVariants } from '@/packages/ui/src';
+import { cn } from '@/lib/utils';
+import { computed, watch } from 'vue';
+
+const page = defineModel<number>('page', { default: 1 });
+
+const props = withDefaults(
+    defineProps<{
+        total: number;
+        itemsPerPage?: number;
+        siblingCount?: number;
+        showEdges?: boolean;
+    }>(),
+    {
+        itemsPerPage: 15,
+        siblingCount: 1,
+        showEdges: true,
+    }
+);
+
+const pageCount = computed(() => Math.max(1, Math.ceil(props.total / props.itemsPerPage)));
+
+watch(page, (value) => {
+    if (value > pageCount.value) {
+        page.value = pageCount.value;
+    }
+});
+
+watch(pageCount, (value) => {
+    if (page.value > value) {
+        page.value = value;
+    }
+});
+
+// The shared buttonVariants ghost/outline hover is `bg-white/5`, which is invisible in light
+// mode. Override it with a theme-aware hover that shows in both light and dark mode.
+const hoverClass = 'hover:bg-black/5 dark:hover:bg-white/5';
+const navButtonClass = cn(buttonVariants({ variant: 'ghost', size: 'icon' }), hoverClass);
+
+function pageButtonClass(isActive: boolean): string {
+    return cn(
+        buttonVariants({ variant: isActive ? 'outline' : 'ghost', size: 'icon' }),
+        hoverClass
+    );
+}
+</script>
+
+<template>
+    <PaginationRoot
+        v-if="pageCount > 1"
+        v-model:page="page"
+        :total="props.total"
+        :items-per-page="props.itemsPerPage"
+        :sibling-count="props.siblingCount"
+        :show-edges="props.showEdges"
+        class="mx-auto flex w-full justify-center py-8">
+        <PaginationList v-slot="{ items }" class="flex items-center gap-1">
+            <PaginationFirst :class="navButtonClass">
+                <ChevronDoubleLeftIcon class="size-4" />
+            </PaginationFirst>
+            <PaginationPrev :class="navButtonClass">
+                <ChevronLeftIcon class="size-4" />
+            </PaginationPrev>
+            <template v-for="(item, index) in items" :key="index">
+                <PaginationListItem
+                    v-if="item.type === 'page'"
+                    :value="item.value"
+                    :class="pageButtonClass(item.value === page)">
+                    {{ item.value }}
+                </PaginationListItem>
+                <PaginationEllipsis
+                    v-else
+                    :index="index"
+                    class="flex size-9 items-center justify-center text-text-tertiary">
+                    <EllipsisHorizontalIcon class="size-4" />
+                </PaginationEllipsis>
+            </template>
+            <PaginationNext :class="navButtonClass">
+                <ChevronRightIcon class="size-4" />
+            </PaginationNext>
+            <PaginationLast :class="navButtonClass">
+                <ChevronDoubleRightIcon class="size-4" />
+            </PaginationLast>
+        </PaginationList>
+    </PaginationRoot>
+</template>

resources/js/Components/Common/Project/ProjectTable.vue

@@ -2,10 +2,11 @@
 import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import { FolderPlusIcon } from '@heroicons/vue/24/solid';
 import { PlusIcon } from '@heroicons/vue/16/solid';
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import ProjectCreateModal from '@/packages/ui/src/Project/ProjectCreateModal.vue';
 import ProjectTableHeading from '@/Components/Common/Project/ProjectTableHeading.vue';
 import ProjectTableRow from '@/Components/Common/Project/ProjectTableRow.vue';
+import Pagination from '@/Components/Common/Pagination.vue';
 
 export type SortColumn =
     | 'name'
@@ -143,6 +144,19 @@ const sortedProjects = computed(() => {
     return table.getRowModel().rows.map((row) => row.original);
 });
 
+// Client-side pagination: the full list is in memory, only one page is mounted at a time.
+const PAGE_SIZE = 15;
+const currentPage = ref(1);
+
+watch([() => props.sortColumn, () => props.sortDirection, () => props.projects], () => {
+    currentPage.value = 1;
+});
+
+const paginatedProjects = computed(() => {
+    const start = (currentPage.value - 1) * PAGE_SIZE;
+    return sortedProjects.value.slice(start, start + PAGE_SIZE);
+});
+
 const showCreateProjectModal = ref(false);
 
 async function createProject(project: CreateProjectBody): Promise<Project | undefined> {
@@ -199,7 +213,7 @@ const gridTemplate = computed(() => {
                         >Create your First Project
                     </SecondaryButton>
                 </div>
-                <template v-for="project in sortedProjects" :key="project.id">
+                <template v-for="project in paginatedProjects" :key="project.id">
                     <ProjectTableRow
                         :show-billable-rate="props.showBillableRate"
                         :project="project"></ProjectTableRow>
@@ -207,4 +221,8 @@ const gridTemplate = computed(() => {
             </div>
         </div>
     </div>
+    <Pagination
+        v-model:page="currentPage"
+        :total="sortedProjects.length"
+        :items-per-page="PAGE_SIZE"></Pagination>
 </template>

resources/js/Pages/ReportingDetailed.vue

@@ -4,15 +4,12 @@ import AppLayout from '@/Layouts/AppLayout.vue';
 import PageTitle from '@/Components/Common/PageTitle.vue';
 import {
     ChartBarIcon,
-    ChevronLeftIcon,
-    ChevronDoubleLeftIcon,
-    ChevronRightIcon,
-    ChevronDoubleRightIcon,
     ClockIcon,
     EllipsisVerticalIcon,
     ArrowDownTrayIcon,
     LockClosedIcon,
 } from '@heroicons/vue/20/solid';
+import Pagination from '@/Components/Common/Pagination.vue';
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -43,16 +40,6 @@ import { useClientsQuery } from '@/utils/useClientsQuery';
 import { useClientsStore } from '@/utils/useClients';
 import { getOrganizationCurrencyString } from '@/utils/money';
 import { useMembersQuery } from '@/utils/useMembersQuery';
-import {
-    PaginationEllipsis,
-    PaginationFirst,
-    PaginationLast,
-    PaginationList,
-    PaginationListItem,
-    PaginationNext,
-    PaginationPrev,
-    PaginationRoot,
-} from 'radix-vue';
 import { useQueryClient } from '@tanstack/vue-query';
 import { getCurrentOrganizationId, getCurrentMembershipId } from '@/utils/useUser';
 import ReportingTabNavbar from '@/Components/Common/Reporting/ReportingTabNavbar.vue';
@@ -410,62 +397,6 @@ async function downloadExport(format: ExportFormat) {
             </div>
         </div>
 
-        <PaginationRoot
-            v-model:page="currentPage"
-            :total="totalPages"
-            :items-per-page="pageLimit"
-            class="flex justify-center items-center py-8"
-            :sibling-count="1"
-            show-edges>
-            <PaginationList v-slot="{ items }" class="flex items-center space-x-1 relative">
-                <div class="pr-2 flex items-center space-x-1 border-r border-border-primary mr-1">
-                    <PaginationFirst class="navigation-item">
-                        <ChevronDoubleLeftIcon class="w-4"> </ChevronDoubleLeftIcon>
-                    </PaginationFirst>
-                    <PaginationPrev class="mr-4 navigation-item">
-                        <ChevronLeftIcon class="w-4 text-text-tertiary hover:text-text-primary">
-                        </ChevronLeftIcon>
-                    </PaginationPrev>
-                </div>
-                <template v-for="(page, index) in items">
-                    <PaginationListItem
-                        v-if="page.type === 'page'"
-                        :key="index"
-                        class="pagination-item"
-                        :value="page.value">
-                        {{ page.value }}
-                    </PaginationListItem>
-                    <PaginationEllipsis
-                        v-else
-                        :key="page.type"
-                        :index="index"
-                        class="PaginationEllipsis">
-                        <div class="px-2">&#8230;</div>
-                    </PaginationEllipsis>
-                </template>
-                <div class="!ml-2 pl-2 flex items-center space-x-1 border-l border-border-primary">
-                    <PaginationNext class="navigation-item">
-                        <ChevronRightIcon
-                            class="w-4 text-text-tertiary hover:text-text-primary"></ChevronRightIcon>
-                    </PaginationNext>
-                    <PaginationLast class="navigation-item">
-                        <ChevronDoubleRightIcon
-                            class="w-4 text-text-tertiary hover:text-text-primary"></ChevronDoubleRightIcon>
-                    </PaginationLast>
-                </div>
-            </PaginationList>
-        </PaginationRoot>
+        <Pagination v-model:page="currentPage" :total="totalPages" :items-per-page="pageLimit" />
     </AppLayout>
 </template>
-<style lang="postcss">
-.navigation-item {
-    @apply bg-quaternary h-8 w-8 flex items-center justify-center rounded border border-border-primary text-text-tertiary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-ring;
-}
-
-.pagination-item {
-    @apply bg-secondary h-8 w-8 flex items-center justify-center rounded border border-border-tertiary text-text-secondary hover:text-text-primary transition cursor-pointer hover:border-border-secondary hover:bg-secondary focus-visible:text-text-primary focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-ring;
-}
-.pagination-item[data-selected] {
-    @apply text-text-primary bg-accent-300/10 border border-accent-300/20 rounded-md font-medium hover:bg-accent-300/20 active:bg-accent-300/20 outline-0 focus-visible:ring-2 focus:ring-ring transition ease-in-out duration-150;
-}
-</style>

resources/js/utils/useTimeEntriesReportQuery.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/vue-query';
+import { useQuery, keepPreviousData } 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';
@@ -21,6 +21,9 @@ export function useTimeEntriesReportQuery(
                 },
                 queries: { ...unref(filterParams) },
             }),
+        // Keep the previous page's data (incl. meta.total) while the next page loads, so
+        // pagination doesn't transiently see total=1 and clamp the page back to 1.
+        placeholderData: keepPreviousData,
         staleTime: 1000 * 30, // 30 seconds
     });
 }