From ff9545d03c74db1358158eb033248490aacf6a7b Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 19 Mar 2025 16:45:59 +0530
Subject: [PATCH] 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
---
 .../dashboard/components/table/Pagination.vue | 183 ++++++++++++------
 .../dashboard/i18n/locale/en/report.json      |   3 +-
 .../components/overview/AgentTable.vue        |  27 ++-
 .../reports/components/overview/TeamTable.vue |  27 ++-
 4 files changed, 177 insertions(+), 63 deletions(-)

diff --git a/app/javascript/dashboard/components/table/Pagination.vue b/app/javascript/dashboard/components/table/Pagination.vue
index 6de3d851c..cea8e0e90 100644
--- a/app/javascript/dashboard/components/table/Pagination.vue
+++ b/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,70 +83,98 @@ 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>
-        <p class="text-sm text-n-slate-11 mb-0">
-          {{ $t('REPORT.PAGINATION.RESULTS', { start, end, total }) }}
-        </p>
-      </div>
-      <nav class="isolate inline-flex gap-1">
-        <woot-button
-          :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" />
-        </woot-button>
-        <woot-button
-          variant="clear"
-          class="h-8 border-0 flex items-center"
-          color-scheme="secondary"
-          :disabled="!table.getCanPreviousPage()"
-          @click="table.previousPage()"
-        >
-          <span class="i-lucide-chevron-left size-3" aria-hidden="true" />
-        </woot-button>
-        <woot-button
-          v-for="page in visiblePages"
-          :key="page"
-          variant="clear"
-          class="h-8 flex items-center justify-center text-xs leading-none text-center"
-          :class="page == currentPage ? 'border-n-brand' : 'border-slate-50'"
-          color-scheme="secondary"
-          @click="table.setPageIndex(page - 1)"
-        >
-          <span
-            class="text-center"
-            :class="{ 'text-n-brand': page == currentPage }"
+    <div class="flex flex-1 items-center gap-2 justify-between">
+      <p class="text-sm truncate text-n-slate-11 mb-0">
+        {{ $t('REPORT.PAGINATION.RESULTS', { start, end, total }) }}
+      </p>
+      <div class="flex items-center gap-2">
+        <FilterSelect
+          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()"
+            @click="table.setPageIndex(0)"
+          />
+          <Button
+            icon="i-lucide-chevron-left"
+            ghost
+            slate
+            sm
+            class="!size-6"
+            :disabled="!table.getCanPreviousPage()"
+            @click="table.previousPage()"
+          />
+          <Button
+            v-for="page in visiblePages"
+            :key="page"
+            xs
+            outline
+            :color="page == currentPage ? 'blue' : 'slate'"
+            class="!h-6 min-w-6"
+            @click="table.setPageIndex(page - 1)"
           >
-            {{ page }}
-          </span>
-        </woot-button>
-        <woot-button
-          :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" />
-        </woot-button>
-        <woot-button
-          :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>
+            <span
+              class="text-center"
+              :class="{ 'text-n-brand': page == currentPage }"
+            >
+              {{ page }}
+            </span>
+          </Button>
+          <Button
+            icon="i-lucide-chevron-right"
+            ghost
+            slate
+            sm
+            class="!size-6"
+            :disabled="!table.getCanNextPage()"
+            @click="table.nextPage()"
+          />
+          <Button
+            icon="i-lucide-chevrons-right"
+            ghost
+            slate
+            sm
+            class="!size-6"
+            :disabled="!table.getCanNextPage()"
+            @click="table.setPageIndex(table.getPageCount() - 1)"
+          />
+        </nav>
+      </div>
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/i18n/locale/en/report.json b/app/javascript/dashboard/i18n/locale/en/report.json
index 3156115c9..294ca2e7b 100644
--- a/app/javascript/dashboard/i18n/locale/en/report.json
+++ b/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": {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
index 42ca08582..483ea914d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
+++ b/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"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/TeamTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/TeamTable.vue
index 290b8a01d..626e67110 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/TeamTable.vue
+++ b/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"