From 3113818a9199b0e8e7ed7245baf184eb4cccd8c5 Mon Sep 17 00:00:00 2001
From: Allan Carr <allan@imexsystems.ca>
Date: Tue, 28 Apr 2026 16:44:23 -0700
Subject: [PATCH] IO-3650 Pagination Corrections

Signed-off-by: Allan Carr <allan@imexsystems.ca>
---
 .../owners-list/owners-list.component.jsx     | 17 +++++++++------
 .../owners-list/owners-list.container.jsx     | 11 +++++++---
 .../parts-queue.list.component.jsx            | 18 +++++++++++-----
 .../vehicles-list/vehicles-list.component.jsx | 17 +++++++++------
 .../vehicles-list/vehicles-list.container.jsx | 10 ++++++---
 .../export-logs.page.component.jsx            | 21 +++++++++++++------
 6 files changed, 65 insertions(+), 29 deletions(-)

diff --git a/client/src/components/owners-list/owners-list.component.jsx b/client/src/components/owners-list/owners-list.component.jsx
index eefec34ca..e6fe1efb9 100644
--- a/client/src/components/owners-list/owners-list.component.jsx
+++ b/client/src/components/owners-list/owners-list.component.jsx
@@ -11,12 +11,13 @@ import ResponsiveTable from "../responsive-table/responsive-table.component";
 
 export default function OwnersListComponent({ loading, owners, total, refetch }) {
   const search = queryString.parse(useLocation().search);
-  const {
-    page
-    // sortcolumn, sortorder
-  } = search;
+  const { page, pageSize } = search;
   const history = useNavigate();
 
+  const currentPage = Number.parseInt(page || "1", 10);
+  const parsedPageSize = Number.parseInt(pageSize || String(pageLimit), 10);
+  const currentPageSize = Number.isNaN(parsedPageSize) ? pageLimit : parsedPageSize;
+
   const [state, setState] = useState({
     sortedInfo: {},
     filteredInfo: { text: "" }
@@ -71,10 +72,14 @@ export default function OwnersListComponent({ loading, owners, total, refetch })
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {
+    const nextPageSize = pagination?.pageSize || currentPageSize;
+    const pageSizeChanged = nextPageSize !== currentPageSize;
+
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
     const updatedSearch = {
       ...search,
-      page: pagination.current,
+      pageSize: nextPageSize,
+      page: pageSizeChanged ? 1 : pagination.current,
       sortcolumn: sorter.columnKey,
       sortorder: sorter.order
     };
@@ -119,7 +124,7 @@ export default function OwnersListComponent({ loading, owners, total, refetch })
     >
       <ResponsiveTable
         loading={loading}
-        pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(page || 1, 10), total: total }}
+        pagination={{ placement: "top", pageSize: currentPageSize, current: currentPage, showSizeChanger: true, total: total }}
         columns={columns}
         mobileColumnKeys={["name", "ownr_ph1", "ownr_ph2"]}
         rowKey="id"
diff --git a/client/src/components/owners-list/owners-list.container.jsx b/client/src/components/owners-list/owners-list.container.jsx
index 8014c9504..11b53b554 100644
--- a/client/src/components/owners-list/owners-list.container.jsx
+++ b/client/src/components/owners-list/owners-list.container.jsx
@@ -8,14 +8,19 @@ import { pageLimit } from "../../utils/config";
 
 export default function OwnersListContainer() {
   const searchParams = queryString.parse(useLocation().search);
-  const { page, sortcolumn, sortorder, search } = searchParams;
+  const { page, sortcolumn, sortorder, search, pageSize } = searchParams;
+
+  const currentPage = Number.parseInt(page || "1", 10);
+  const parsedPageSize = Number.parseInt(pageSize || String(pageLimit), 10);
+  const currentPageSize = Number.isNaN(parsedPageSize) ? pageLimit : parsedPageSize;
+
   const { loading, error, data, refetch } = useQuery(QUERY_ALL_OWNERS_PAGINATED, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
     variables: {
       search: search || "",
-      offset: page ? (page - 1) * pageLimit : 0,
-      limit: pageLimit,
+      offset: (currentPage - 1) * currentPageSize,
+      limit: currentPageSize,
       order: [
         {
           [sortcolumn || "created_at"]: sortorder ? (sortorder === "descend" ? "desc" : "asc") : "desc"
diff --git a/client/src/components/parts-queue-list/parts-queue.list.component.jsx b/client/src/components/parts-queue-list/parts-queue.list.component.jsx
index 3cb5872f2..c14a62344 100644
--- a/client/src/components/parts-queue-list/parts-queue.list.component.jsx
+++ b/client/src/components/parts-queue-list/parts-queue.list.component.jsx
@@ -29,7 +29,10 @@ const mapStateToProps = createStructuredSelector({
 
 export function PartsQueueListComponent({ bodyshop }) {
   const searchParams = queryString.parse(useLocation().search);
-  const { selected, sortcolumn, sortorder, statusFilters } = searchParams;
+  const { selected, sortcolumn, sortorder, statusFilters, page, pageSize } = searchParams;
+  const currentPage = Number.parseInt(page || "1", 10);
+  const parsedPageSize = Number.parseInt(pageSize || String(pageLimit), 10);
+  const currentPageSize = Number.isNaN(parsedPageSize) ? pageLimit : parsedPageSize;
   const history = useNavigate();
   const [filter, setFilter] = useLocalStorage("filter_parts_queue", null);
   const [viewTimeStamp, setViewTimeStamp] = useLocalStorage("parts_queue_timestamps", false);
@@ -66,7 +69,11 @@ export function PartsQueueListComponent({ bodyshop }) {
     : [];
 
   const handleTableChange = (pagination, filters, sorter) => {
-    //  searchParams.page = pagination.current;
+    const nextPageSize = pagination?.pageSize || currentPageSize;
+    const pageSizeChanged = nextPageSize !== currentPageSize;
+
+    searchParams.pageSize = nextPageSize;
+    searchParams.page = pageSizeChanged ? 1 : pagination.current;
     searchParams.sortcolumn = sorter.columnKey;
     searchParams.sortorder = sorter.order;
 
@@ -315,9 +322,10 @@ export function PartsQueueListComponent({ bodyshop }) {
         loading={loading}
         pagination={{
           placement: "top",
-          pageSize: pageLimit
-          // current: parseInt(page || 1),
-          // total: data && data.jobs_aggregate.aggregate.count,
+          pageSize: currentPageSize,
+          current: currentPage,
+          showSizeChanger: true,
+          total: jobs.length
         }}
         columns={columns}
         mobileColumnKeys={["ro_number", "ownr_ln", "status", "vehicle", "partsstatus"]}
diff --git a/client/src/components/vehicles-list/vehicles-list.component.jsx b/client/src/components/vehicles-list/vehicles-list.component.jsx
index 41cc1d764..5d6b33fc8 100644
--- a/client/src/components/vehicles-list/vehicles-list.component.jsx
+++ b/client/src/components/vehicles-list/vehicles-list.component.jsx
@@ -11,12 +11,13 @@ import ResponsiveTable from "../responsive-table/responsive-table.component";
 
 export default function VehiclesListComponent({ loading, vehicles, total, refetch, basePath = "/manage" }) {
   const search = queryString.parse(useLocation().search);
-  const {
-    page
-    //sortcolumn, sortorder,
-  } = search;
+  const { page, pageSize } = search;
   const history = useNavigate();
 
+  const currentPage = Number.parseInt(page || "1", 10);
+  const parsedPageSize = Number.parseInt(pageSize || String(pageLimit), 10);
+  const currentPageSize = Number.isNaN(parsedPageSize) ? pageLimit : parsedPageSize;
+
   const [state, setState] = useState({
     sortedInfo: {},
     filteredInfo: { text: "" }
@@ -62,10 +63,14 @@ export default function VehiclesListComponent({ loading, vehicles, total, refetc
   ];
 
   const handleTableChange = (pagination, filters, sorter) => {
+    const nextPageSize = pagination?.pageSize || currentPageSize;
+    const pageSizeChanged = nextPageSize !== currentPageSize;
+
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
     const updatedSearch = {
       ...search,
-      page: pagination.current,
+      pageSize: nextPageSize,
+      page: pageSizeChanged ? 1 : pagination.current,
       sortcolumn: sorter.columnKey,
       sortorder: sorter.order
     };
@@ -106,7 +111,7 @@ export default function VehiclesListComponent({ loading, vehicles, total, refetc
     >
       <ResponsiveTable
         loading={loading}
-        pagination={{ placement: "top", pageSize: pageLimit, current: parseInt(page || 1), total: total }}
+        pagination={{ placement: "top", pageSize: currentPageSize, current: currentPage, showSizeChanger: true, total: total }}
         columns={columns}
         mobileColumnKeys={["v_vin", "description", "plate_no"]}
         rowKey="id"
diff --git a/client/src/components/vehicles-list/vehicles-list.container.jsx b/client/src/components/vehicles-list/vehicles-list.container.jsx
index cad7024af..d59729135 100644
--- a/client/src/components/vehicles-list/vehicles-list.container.jsx
+++ b/client/src/components/vehicles-list/vehicles-list.container.jsx
@@ -16,14 +16,18 @@ const mapStateToProps = createStructuredSelector({
 
 export function VehiclesListContainer({ isPartsEntry }) {
   const searchParams = queryString.parse(useLocation().search);
-  const { page, sortcolumn, sortorder, search } = searchParams;
+  const { page, sortcolumn, sortorder, search, pageSize } = searchParams;
   const basePath = getPartsBasePath(isPartsEntry);
 
+  const currentPage = Number.parseInt(page || "1", 10);
+  const parsedPageSize = Number.parseInt(pageSize || String(pageLimit), 10);
+  const currentPageSize = Number.isNaN(parsedPageSize) ? pageLimit : parsedPageSize;
+
   const { loading, error, data, refetch } = useQuery(QUERY_ALL_VEHICLES_PAGINATED, {
     variables: {
       search: search || "",
-      offset: page ? (page - 1) * pageLimit : 0,
-      limit: pageLimit,
+      offset: (currentPage - 1) * currentPageSize,
+      limit: currentPageSize,
       order: [
         {
           [sortcolumn || "created_at"]: sortorder ? (sortorder === "descend" ? "desc" : "asc") : "desc"
diff --git a/client/src/pages/export-logs/export-logs.page.component.jsx b/client/src/pages/export-logs/export-logs.page.component.jsx
index d28dcb9a9..db2002191 100644
--- a/client/src/pages/export-logs/export-logs.page.component.jsx
+++ b/client/src/pages/export-logs/export-logs.page.component.jsx
@@ -18,16 +18,20 @@ const mapStateToProps = createStructuredSelector({});
 
 export function ExportLogsPageComponent() {
   const searchParams = queryString.parse(useLocation().search);
-  const { page, sortcolumn, sortorder, search } = searchParams;
+  const { page, sortcolumn, sortorder, search, pageSize } = searchParams;
   const history = useNavigate();
 
+  const currentPage = Number.parseInt(page || "1", 10);
+  const parsedPageSize = Number.parseInt(pageSize || String(pageLimit), 10);
+  const currentPageSize = Number.isNaN(parsedPageSize) ? pageLimit : parsedPageSize;
+
   const { loading, error, data, refetch } = useQuery(QUERY_EXPORT_LOG_PAGINATED, {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only",
     variables: {
       search: search || "",
-      offset: page ? (page - 1) * pageLimit : 0,
-      limit: pageLimit,
+      offset: (currentPage - 1) * currentPageSize,
+      limit: currentPageSize,
       order: [
         {
           ...(sortcolumn === "ro_number"
@@ -61,7 +65,11 @@ export function ExportLogsPageComponent() {
   if (error) return <AlertComponent title={error.message} type="error" />;
 
   const handleTableChange = (pagination, filters, sorter) => {
-    searchParams.page = pagination.current;
+    const nextPageSize = pagination?.pageSize || currentPageSize;
+    const pageSizeChanged = nextPageSize !== currentPageSize;
+
+    searchParams.pageSize = nextPageSize;
+    searchParams.page = pageSizeChanged ? 1 : pagination.current;
     searchParams.sortcolumn = sorter.columnKey;
     searchParams.sortorder = sorter.order;
     if (filters.status) {
@@ -191,8 +199,9 @@ export function ExportLogsPageComponent() {
         loading={loading}
         pagination={{
           placement: "top",
-          pageSize: pageLimit,
-          current: parseInt(page || 1, 10),
+          pageSize: currentPageSize,
+          current: currentPage,
+          showSizeChanger: true,
           total: data && data.search_exportlog_aggregate.aggregate.count
         }}
         columns={columns}