feat: Add per-page support for agent and team overview report pagination (#11110)

# Pull Request Template

## Description

This PR includes per-page support for table pagination in agent and team
overview reports.

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

### Loom video

https://www.loom.com/share/8c9668fe129c452986d8813a156dd3b8?sid=d637f4fe-ad0c-4f18-ad90-65e50247b3c6

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

app/javascript/dashboard/components/table/Pagination.vue

@@ -1,12 +1,47 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import FilterSelect from 'dashboard/components-next/filter/inputs/FilterSelect.vue';
+
 const props = defineProps({
   table: {
     type: Object,
     required: true,
   },
+  defaultPageSize: {
+    type: Number,
+    default: 10,
+  },
+  showPageSizeSelector: {
+    type: Boolean,
+    default: false,
+  },
 });
 
+const emit = defineEmits(['pageSizeChange']);
+const { t } = useI18n();
+
+const pageSizeOptions = [
+  {
+    label: `${t('REPORT.PAGINATION.PER_PAGE_TEMPLATE', { size: 10 })}`,
+    value: 10,
+  },
+  {
+    label: `${t('REPORT.PAGINATION.PER_PAGE_TEMPLATE', { size: 20 })}`,
+    value: 20,
+  },
+  {
+    label: `${t('REPORT.PAGINATION.PER_PAGE_TEMPLATE', { size: 50 })}`,
+    value: 50,
+  },
+  {
+    label: `${t('REPORT.PAGINATION.PER_PAGE_TEMPLATE', { size: 100 })}`,
+    value: 100,
+  },
+];
+
 const getFormattedPages = (start, end) => {
   const formatter = new Intl.NumberFormat(navigator.language);
   return Array.from({ length: end - start + 1 }, (_, i) =>
@@ -48,42 +83,69 @@ const end = computed(() => {
     total.value
   );
 });
+
+const currentPageSize = computed({
+  get() {
+    return props.table.getState().pagination.pageSize;
+  },
+  set(newValue) {
+    props.table.setPageSize(Number(newValue));
+    emit('pageSizeChange', Number(newValue));
+  },
+});
+
+onMounted(() => {
+  if (
+    props.showPageSizeSelector &&
+    props.defaultPageSize &&
+    props.defaultPageSize !== 10
+  ) {
+    props.table.setPageSize(props.defaultPageSize);
+  }
+});
 </script>
 
 <template>
   <div class="flex items-center justify-between">
-    <div class="flex flex-1 items-center justify-between">
+    <div class="flex flex-1 items-center gap-2 justify-between">
-      <div>
+      <p class="text-sm truncate text-n-slate-11 mb-0">
-        <p class="text-sm text-n-slate-11 mb-0">
         {{ $t('REPORT.PAGINATION.RESULTS', { start, end, total }) }}
       </p>
-      </div>
+      <div class="flex items-center gap-2">
-      <nav class="isolate inline-flex gap-1">
+        <FilterSelect
-        <woot-button
+          v-if="showPageSizeSelector"
+          v-model="currentPageSize"
+          variant="outline"
+          hide-icon
+          class="[&>button]:text-n-slate-11 [&>button]:hover:text-n-slate-12 [&>button]:h-6"
+          :options="pageSizeOptions"
+        />
+        <nav class="isolate inline-flex items-center gap-1.5">
+          <Button
+            icon="i-lucide-chevrons-left"
+            ghost
+            slate
+            sm
+            class="!size-6"
             :disabled="!table.getCanPreviousPage()"
-          variant="clear"
-          class="h-8 border-0 flex items-center"
-          color-scheme="secondary"
             @click="table.setPageIndex(0)"
-        >
+          />
-          <span class="i-lucide-chevrons-left size-3" aria-hidden="true" />
+          <Button
-        </woot-button>
+            icon="i-lucide-chevron-left"
-        <woot-button
+            ghost
-          variant="clear"
+            slate
-          class="h-8 border-0 flex items-center"
+            sm
-          color-scheme="secondary"
+            class="!size-6"
             :disabled="!table.getCanPreviousPage()"
             @click="table.previousPage()"
-        >
+          />
-          <span class="i-lucide-chevron-left size-3" aria-hidden="true" />
+          <Button
-        </woot-button>
-        <woot-button
             v-for="page in visiblePages"
             :key="page"
-          variant="clear"
+            xs
-          class="h-8 flex items-center justify-center text-xs leading-none text-center"
+            outline
-          :class="page == currentPage ? 'border-n-brand' : 'border-slate-50'"
+            :color="page == currentPage ? 'blue' : 'slate'"
-          color-scheme="secondary"
+            class="!h-6 min-w-6"
             @click="table.setPageIndex(page - 1)"
           >
             <span
@@ -92,26 +154,27 @@ const end = computed(() => {
             >
               {{ page }}
             </span>
-        </woot-button>
+          </Button>
-        <woot-button
+          <Button
+            icon="i-lucide-chevron-right"
+            ghost
+            slate
+            sm
+            class="!size-6"
             :disabled="!table.getCanNextPage()"
-          variant="clear"
-          class="h-8 border-0 flex items-center"
-          color-scheme="secondary"
             @click="table.nextPage()"
-        >
+          />
-          <span class="i-lucide-chevron-right size-3" aria-hidden="true" />
+          <Button
-        </woot-button>
+            icon="i-lucide-chevrons-right"
-        <woot-button
+            ghost
+            slate
+            sm
+            class="!size-6"
             :disabled="!table.getCanNextPage()"
-          variant="clear"
-          class="h-8 border-0 flex items-center"
-          color-scheme="secondary"
             @click="table.setPageIndex(table.getPageCount() - 1)"
-        >
+          />
-          <span class="i-lucide-chevrons-right size-3" aria-hidden="true" />
-        </woot-button>
         </nav>
       </div>
     </div>
+  </div>
 </template>

app/javascript/dashboard/i18n/locale/en/report.json

@@ -119,7 +119,8 @@
       "EMPTY_LIST": "No results found"
     },
     "PAGINATION": {
-      "RESULTS": "Showing {start} to {end} of {total} results"
+      "RESULTS": "Showing {start} to {end} of {total} results",
+      "PER_PAGE_TEMPLATE": "{size} / page"
     }
   },
   "AGENT_REPORTS": {

app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue

@@ -7,6 +7,7 @@ import {
   getPaginationRowModel,
 } from '@tanstack/vue-table';
 import { useI18n } from 'vue-i18n';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
@@ -30,6 +31,19 @@ const { agents, agentMetrics } = defineProps({
 });
 
 const { t } = useI18n();
+const { uiSettings, updateUISettings } = useUISettings();
+
+// UI Settings key for agent table page size
+const AGENT_TABLE_PAGE_SIZE_KEY = 'report_overview_agent_table_page_size';
+
+// Get the saved page size from UI settings or default to 10
+const getPageSize = () => {
+  return uiSettings.value[AGENT_TABLE_PAGE_SIZE_KEY] || 10;
+};
+
+const handlePageSizeChange = pageSize => {
+  updateUISettings({ [AGENT_TABLE_PAGE_SIZE_KEY]: pageSize });
+};
 
 const getAgentMetrics = id =>
   agentMetrics.find(metrics => metrics.assignee_id === Number(id)) || {};
@@ -98,13 +112,24 @@ const table = useVueTable({
   enableSorting: false,
   getCoreRowModel: getCoreRowModel(),
   getPaginationRowModel: getPaginationRowModel(),
+  initialState: {
+    pagination: {
+      pageSize: getPageSize(),
+    },
+  },
 });
 </script>
 
 <template>
   <div class="flex flex-col flex-1">
     <Table :table="table" class="max-h-[calc(100vh-21.875rem)]" />
-    <Pagination class="mt-2" :table="table" />
+    <Pagination
+      class="mt-2"
+      :table="table"
+      show-page-size-selector
+      :default-page-size="getPageSize()"
+      @page-size-change="handlePageSizeChange"
+    />
     <div
       v-if="isLoading"
       class="items-center flex text-base justify-center p-8"

app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/TeamTable.vue

@@ -7,6 +7,7 @@ import {
   getPaginationRowModel,
 } from '@tanstack/vue-table';
 import { useI18n } from 'vue-i18n';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 
 import Spinner from 'shared/components/Spinner.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
@@ -29,6 +30,19 @@ const { teams, teamMetrics } = defineProps({
 });
 
 const { t } = useI18n();
+const { uiSettings, updateUISettings } = useUISettings();
+
+// UI Settings key for team table page size
+const TEAM_TABLE_PAGE_SIZE_KEY = 'report_overview_team_table_page_size';
+
+// Get the saved page size from UI settings or default to 10
+const getPageSize = () => {
+  return uiSettings.value[TEAM_TABLE_PAGE_SIZE_KEY] || 10;
+};
+
+const handlePageSizeChange = pageSize => {
+  updateUISettings({ [TEAM_TABLE_PAGE_SIZE_KEY]: pageSize });
+};
 
 const getTeamMetrics = id =>
   teamMetrics.find(metrics => metrics.team_id === Number(id)) || {};
@@ -92,13 +106,24 @@ const table = useVueTable({
   enableSorting: false,
   getCoreRowModel: getCoreRowModel(),
   getPaginationRowModel: getPaginationRowModel(),
+  initialState: {
+    pagination: {
+      pageSize: getPageSize(),
+    },
+  },
 });
 </script>
 
 <template>
   <div class="flex flex-col flex-1">
     <Table :table="table" class="max-h-[calc(100vh-21.875rem)]" />
-    <Pagination class="mt-2" :table="table" />
+    <Pagination
+      class="mt-2"
+      :table="table"
+      show-page-size-selector
+      :default-page-size="getPageSize()"
+      @page-size-change="handlePageSizeChange"
+    />
     <div
       v-if="isLoading"
       class="items-center flex text-base justify-center p-8"