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/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"