From 257aedba58c58d7fde342357262ef63859f79c6a Mon Sep 17 00:00:00 2001
From: Vulprit Prooze <raileyalin@gmail.com>
Date: Wed, 29 Apr 2026 22:27:43 +0800
Subject: [PATCH 1/3] feat(receive): set batch master pagination pageSize to 50
 items

---
 .../src/features/receive/components/BatchMasterList.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Walrhouse.Web/App/WebClient/src/features/receive/components/BatchMasterList.tsx b/src/Walrhouse.Web/App/WebClient/src/features/receive/components/BatchMasterList.tsx
index b43c13c..cbff2fb 100644
--- a/src/Walrhouse.Web/App/WebClient/src/features/receive/components/BatchMasterList.tsx
+++ b/src/Walrhouse.Web/App/WebClient/src/features/receive/components/BatchMasterList.tsx
@@ -49,7 +49,7 @@ import { parseISO } from 'date-fns';
 
 export const BatchMasterList = () => {
   const [page, setPage] = useState(1);
-  const pageSize = 10;
+  const pageSize = 50;
 
   const { data, isLoading } = useBatches({
     pageNumber: page,

From 4c8d13ae58d061a749f8a47f03afb7038132cd62 Mon Sep 17 00:00:00 2001
From: Vulprit Prooze <raileyalin@gmail.com>
Date: Wed, 29 Apr 2026 22:42:07 +0800
Subject: [PATCH 2/3] feat(receive): add pagination controls to
 ItemCodeSelectionSheet (50/page)

---
 .../ItemCodeSelectionSheet.tsx                | 55 ++++++++++++++++++-
 1 file changed, 53 insertions(+), 2 deletions(-)

diff --git a/src/Walrhouse.Web/App/WebClient/src/features/receive/components/incoming-orders/ItemCodeSelectionSheet.tsx b/src/Walrhouse.Web/App/WebClient/src/features/receive/components/incoming-orders/ItemCodeSelectionSheet.tsx
index a831bbd..80150ec 100644
--- a/src/Walrhouse.Web/App/WebClient/src/features/receive/components/incoming-orders/ItemCodeSelectionSheet.tsx
+++ b/src/Walrhouse.Web/App/WebClient/src/features/receive/components/incoming-orders/ItemCodeSelectionSheet.tsx
@@ -1,4 +1,12 @@
 import { Search, Loader2 } from 'lucide-react';
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@/components/ui/pagination';
 import {
   Sheet,
   SheetContent,
@@ -31,13 +39,17 @@ export function ItemCodeSelectionSheet({
   onSelect,
 }: ItemCodeSelectionSheetProps) {
   const [searchTerm, setSearchTerm] = useState('');
+  const [page, setPage] = useState(1);
+  const pageSize = 50;
 
   const { data, isLoading } = useItems({
-    pageSize: 50,
+    pageNumber: page,
+    pageSize,
     searchTerm: searchTerm || undefined,
   });
 
   const items = data?.items ?? [];
+  const totalPages = data?.totalPages ?? 0;
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
@@ -54,7 +66,10 @@ export function ItemCodeSelectionSheet({
               className="pl-9"
               placeholder="Search items by code or name..."
               value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
+              onChange={(e) => {
+                setSearchTerm(e.target.value);
+                setPage(1);
+              }}
             />
           </div>
 
@@ -83,6 +98,42 @@ export function ItemCodeSelectionSheet({
                         Select
                       </span>
                     </div>
+
+                      {totalPages > 1 && (
+                        <div className="p-3 border-t bg-muted/5">
+                          <Pagination>
+                            <PaginationContent>
+                              <PaginationItem>
+                                <PaginationPrevious
+                                  onClick={() => setPage((p) => Math.max(1, p - 1))}
+                                  className={page === 1 ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
+                                />
+                              </PaginationItem>
+
+                              {Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (
+                                <PaginationItem key={p}>
+                                  <PaginationLink
+                                    isActive={page === p}
+                                    onClick={() => setPage(p)}
+                                    className="cursor-pointer"
+                                  >
+                                    {p}
+                                  </PaginationLink>
+                                </PaginationItem>
+                              ))}
+
+                              <PaginationItem>
+                                <PaginationNext
+                                  onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                                  className={
+                                    page === totalPages ? 'pointer-events-none opacity-50' : 'cursor-pointer'
+                                  }
+                                />
+                              </PaginationItem>
+                            </PaginationContent>
+                          </Pagination>
+                        </div>
+                      )}
                     <span className="text-xs text-muted-foreground truncate">{item.itemName}</span>
                   </li>
                 ))

From 00415c6d9df6e2362f85a087f88125bb03952ce7 Mon Sep 17 00:00:00 2001
From: Vulprit Prooze <raileyalin@gmail.com>
Date: Wed, 29 Apr 2026 22:48:03 +0800
Subject: [PATCH 3/3] fix(receive): pagination selection sheet

---
 .../ItemCodeSelectionSheet.tsx                | 70 ++++++++++---------
 1 file changed, 37 insertions(+), 33 deletions(-)

diff --git a/src/Walrhouse.Web/App/WebClient/src/features/receive/components/incoming-orders/ItemCodeSelectionSheet.tsx b/src/Walrhouse.Web/App/WebClient/src/features/receive/components/incoming-orders/ItemCodeSelectionSheet.tsx
index 80150ec..42b5c31 100644
--- a/src/Walrhouse.Web/App/WebClient/src/features/receive/components/incoming-orders/ItemCodeSelectionSheet.tsx
+++ b/src/Walrhouse.Web/App/WebClient/src/features/receive/components/incoming-orders/ItemCodeSelectionSheet.tsx
@@ -99,41 +99,45 @@ export function ItemCodeSelectionSheet({
                       </span>
                     </div>
 
-                      {totalPages > 1 && (
-                        <div className="p-3 border-t bg-muted/5">
-                          <Pagination>
-                            <PaginationContent>
-                              <PaginationItem>
-                                <PaginationPrevious
-                                  onClick={() => setPage((p) => Math.max(1, p - 1))}
-                                  className={page === 1 ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
-                                />
-                              </PaginationItem>
-
-                              {Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (
-                                <PaginationItem key={p}>
-                                  <PaginationLink
-                                    isActive={page === p}
-                                    onClick={() => setPage(p)}
-                                    className="cursor-pointer"
-                                  >
-                                    {p}
-                                  </PaginationLink>
-                                </PaginationItem>
-                              ))}
+                    {totalPages > 1 && (
+                      <div className="p-3 border-t bg-muted/5">
+                        <Pagination>
+                          <PaginationContent>
+                            <PaginationItem>
+                              <PaginationPrevious
+                                onClick={() => setPage((p) => Math.max(1, p - 1))}
+                                className={
+                                  page === 1 ? 'pointer-events-none opacity-50' : 'cursor-pointer'
+                                }
+                              />
+                            </PaginationItem>
 
-                              <PaginationItem>
-                                <PaginationNext
-                                  onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
-                                  className={
-                                    page === totalPages ? 'pointer-events-none opacity-50' : 'cursor-pointer'
-                                  }
-                                />
+                            {Array.from({ length: totalPages }, (_, i) => i + 1).map((p) => (
+                              <PaginationItem key={p}>
+                                <PaginationLink
+                                  isActive={page === p}
+                                  onClick={() => setPage(p)}
+                                  className="cursor-pointer"
+                                >
+                                  {p}
+                                </PaginationLink>
                               </PaginationItem>
-                            </PaginationContent>
-                          </Pagination>
-                        </div>
-                      )}
+                            ))}
+
+                            <PaginationItem>
+                              <PaginationNext
+                                onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                                className={
+                                  page === totalPages
+                                    ? 'pointer-events-none opacity-50'
+                                    : 'cursor-pointer'
+                                }
+                              />
+                            </PaginationItem>
+                          </PaginationContent>
+                        </Pagination>
+                      </div>
+                    )}
                     <span className="text-xs text-muted-foreground truncate">{item.itemName}</span>
                   </li>
                 ))