From e7ed6cbb311d7df5013ad02c1c32d894421ebd2d Mon Sep 17 00:00:00 2001
From: Eleazar Resendez <eleazar.resendez@processmaker.com>
Date: Wed, 14 Jan 2026 14:23:57 -0600
Subject: [PATCH 1/2] fix(pagination): keep per-page selection across page
 changes

---
 .../CustomHomeTableSection.vue                |  2 +-
 .../casesDetail/components/CompletedForms.vue |  1 +
 .../casesDetail/components/RequestTable.vue   |  1 +
 .../casesDetail/components/TaskTable.vue      |  1 +
 .../cases/casesMain/CasesDataSection.vue      |  2 +-
 .../jscomposition/system/table/Pagination.vue | 36 +++++++++++++++----
 6 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/resources/js/processes-catalogue/components/home/CustomHomeTableSection/CustomHomeTableSection.vue b/resources/js/processes-catalogue/components/home/CustomHomeTableSection/CustomHomeTableSection.vue
index 6d45de2fd3..550dc07425 100644
--- a/resources/js/processes-catalogue/components/home/CustomHomeTableSection/CustomHomeTableSection.vue
+++ b/resources/js/processes-catalogue/components/home/CustomHomeTableSection/CustomHomeTableSection.vue
@@ -19,7 +19,6 @@
     </FilterableTable>
     <Pagination
       ref="paginator"
-      :key="dataPagination.page"
       :class="{
         'tw-opacity-50':showPlaceholder,
         'tw-pt-3':true
@@ -27,6 +26,7 @@
       :total="dataPagination.total"
       :page="dataPagination.page"
       :pages="dataPagination.pages"
+      :per-page="dataPagination.perPage"
       @perPage="onPerPage"
       @go="onGo" />
   </div>
diff --git a/resources/jscomposition/cases/casesDetail/components/CompletedForms.vue b/resources/jscomposition/cases/casesDetail/components/CompletedForms.vue
index cc6adace3e..38734cea54 100644
--- a/resources/jscomposition/cases/casesDetail/components/CompletedForms.vue
+++ b/resources/jscomposition/cases/casesDetail/components/CompletedForms.vue
@@ -36,6 +36,7 @@
       :total="dataPagination.total"
       :page="dataPagination.page"
       :pages="dataPagination.pages"
+      :per-page="dataPagination.perPage"
       @perPage="onPerPage"
       @go="onGo" />
   </div>
diff --git a/resources/jscomposition/cases/casesDetail/components/RequestTable.vue b/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
index cf4f8d60ce..25b4f1dcf3 100644
--- a/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
+++ b/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
@@ -18,6 +18,7 @@
       :total="dataPagination.total"
       :page="dataPagination.page"
       :pages="dataPagination.pages"
+      :per-page="dataPagination.perPage"
       @perPage="onPerPage"
       @go="onGo" />
   </div>
diff --git a/resources/jscomposition/cases/casesDetail/components/TaskTable.vue b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
index 600fa61b88..91d78c7589 100644
--- a/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
+++ b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
@@ -17,6 +17,7 @@
       :total="dataPagination.total"
       :page="dataPagination.page"
       :pages="dataPagination.pages"
+      :per-page="dataPagination.perPage"
       @perPage="onPerPage"
       @go="onGo" />
   </div>
diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
index d98f2d38d3..84dc595749 100644
--- a/resources/jscomposition/cases/casesMain/CasesDataSection.vue
+++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
@@ -36,7 +36,6 @@
     </FilterableTable>
     <Pagination
       ref="paginator"
-      :key="dataPagination.page"
       :class="{
         'tw-opacity-50':showPlaceholder,
         'tw-pt-3':true
@@ -44,6 +43,7 @@
       :total="dataPagination.total"
       :page="dataPagination.page"
       :pages="dataPagination.pages"
+      :per-page="dataPagination.perPage"
       @perPage="onPerPage"
       @go="onGo" />
   </div>
diff --git a/resources/jscomposition/system/table/Pagination.vue b/resources/jscomposition/system/table/Pagination.vue
index 6b7f5b050b..40a00fad6a 100644
--- a/resources/jscomposition/system/table/Pagination.vue
+++ b/resources/jscomposition/system/table/Pagination.vue
@@ -127,7 +127,7 @@
   </div>
 </template>
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import { t } from "i18next";
 import { Dropdown } from "../../base/form";
 
@@ -144,6 +144,10 @@ const props = defineProps({
     type: Number,
     default: () => (0),
   },
+  perPage: {
+    type: Number,
+    default: () => (15),
+  },
   options: {
     type: Array,
     default: () => [],
@@ -159,7 +163,7 @@ const totalModelLabel = computed(() => {
   return `${t("{{count}} Items", { count: props.total })}`;
 });
 
-const pageModel = ref(props.page);
+const pageModel = ref(props.page || 1);
 const optionsPerPage = [
   {
     value: 15,
@@ -177,10 +181,12 @@ const optionsPerPage = [
 
 const optionsModel = ref(props.options.length ? props.options : optionsPerPage);
 
-const selectedOption = ref({
-  value: 15,
-  label: "15 items",
-});
+const resolveOption = (value) => {
+  const matched = optionsModel.value.find((option) => option.value === value);
+  return matched || { value, label: `${value} ${t("Per page")}` };
+};
+
+const selectedOption = ref(resolveOption(props.perPage || 15));
 
 const first = () => {
   if (pageModel.value > 1) {
@@ -226,6 +232,24 @@ const setPerPage = (value) => {
 defineExpose({
   setPerPage,
 });
+
+watch(
+  () => props.page,
+  (value) => {
+    if (value && value !== pageModel.value) {
+      pageModel.value = value;
+    }
+  }
+);
+
+watch(
+  () => props.perPage,
+  (value) => {
+    if (value && value !== selectedOption.value?.value) {
+      selectedOption.value = resolveOption(value);
+    }
+  }
+);
 </script>
 <style scoped>
 /* Chrome, Safari, Edge, Opera */

From 972670d8f428a674d439acdc2a60075f87f4b126 Mon Sep 17 00:00:00 2001
From: Eleazar Resendez <eleazar.resendez@processmaker.com>
Date: Tue, 20 Jan 2026 09:11:06 -0600
Subject: [PATCH 2/2] fix: reset pagination page on per-page change

---
 .../home/CustomHomeTableSection/CustomHomeTableSection.vue       | 1 +
 .../cases/casesDetail/components/CompletedForms.vue              | 1 +
 .../jscomposition/cases/casesDetail/components/RequestTable.vue  | 1 +
 .../jscomposition/cases/casesDetail/components/TaskTable.vue     | 1 +
 resources/jscomposition/cases/casesMain/CasesDataSection.vue     | 1 +
 5 files changed, 5 insertions(+)

diff --git a/resources/js/processes-catalogue/components/home/CustomHomeTableSection/CustomHomeTableSection.vue b/resources/js/processes-catalogue/components/home/CustomHomeTableSection/CustomHomeTableSection.vue
index 550dc07425..8866abeb83 100644
--- a/resources/js/processes-catalogue/components/home/CustomHomeTableSection/CustomHomeTableSection.vue
+++ b/resources/js/processes-catalogue/components/home/CustomHomeTableSection/CustomHomeTableSection.vue
@@ -112,6 +112,7 @@ const hookData = async () => {
 
 const onPerPage = async (perPage) => {
   dataPagination.value.perPage = perPage;
+  dataPagination.value.page = 1;
   await hookData();
 };
 
diff --git a/resources/jscomposition/cases/casesDetail/components/CompletedForms.vue b/resources/jscomposition/cases/casesDetail/components/CompletedForms.vue
index 38734cea54..ce222a3a22 100644
--- a/resources/jscomposition/cases/casesDetail/components/CompletedForms.vue
+++ b/resources/jscomposition/cases/casesDetail/components/CompletedForms.vue
@@ -123,6 +123,7 @@ const onGo = async (page) => {
 
 const onPerPage = async (perPage) => {
   dataPagination.value.perPage = perPage;
+  dataPagination.value.page = 1;
 
   await hookGetData();
 };
diff --git a/resources/jscomposition/cases/casesDetail/components/RequestTable.vue b/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
index 25b4f1dcf3..9688d3cb8f 100644
--- a/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
+++ b/resources/jscomposition/cases/casesDetail/components/RequestTable.vue
@@ -96,6 +96,7 @@ const onGo = async (page) => {
 
 const onPerPage = async (perPage) => {
   dataPagination.value.perPage = perPage;
+  dataPagination.value.page = 1;
 
   await hookGetData();
 };
diff --git a/resources/jscomposition/cases/casesDetail/components/TaskTable.vue b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
index 91d78c7589..e0d967300c 100644
--- a/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
+++ b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
@@ -98,6 +98,7 @@ const onGo = async (page) => {
 
 const onPerPage = async (perPage) => {
   dataPagination.value.perPage = perPage;
+  dataPagination.value.page = 1;
 
   await hookGetData();
 };
diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
index 84dc595749..49cf2e0232 100644
--- a/resources/jscomposition/cases/casesMain/CasesDataSection.vue
+++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
@@ -145,6 +145,7 @@ const onGo = async (page) => {
 
 const onPerPage = async (perPage) => {
   dataPagination.value.perPage = perPage;
+  dataPagination.value.page = 1;
 
   await hookGetData();
 };