From 5fc01a9afa9999b33ab686a9374523ea4cd71414 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 11 Nov 2025 11:26:22 +0700
Subject: [PATCH] feat(FE-208): use CheckboxInput component for item selection
 in PurchaseRequisitionsForm

---
 .../form/request/PurchaseRequisitionsForm.tsx | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx
index f21cf02a..d60868c4 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequisitionsForm.tsx
@@ -9,6 +9,7 @@ import { toast } from 'react-hot-toast';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
+import CheckboxInput from '@/components/input/CheckboxInput';
 import SelectInput, {
   OptionType,
   useSelect,
@@ -665,15 +666,14 @@ const PurchaseRequisitionsForm = ({
                   <tr>
                     {type !== 'detail' && (
                       <th>
-                        <input
-                          type='checkbox'
-                          className='checkbox checkbox-sm'
+                        <CheckboxInput
+                          name='select-all-items'
                           checked={
                             formik.values.items?.length ===
                               selectedPurchaseItems.length &&
                             formik.values.items?.length > 0
                           }
-                          onChange={(e) => {
+                          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                             if (e.target.checked) {
                               setSelectedPurchaseItems(
                                 formik.values.items?.map((_, idx) => idx) ?? []
@@ -682,6 +682,10 @@ const PurchaseRequisitionsForm = ({
                               setSelectedPurchaseItems([]);
                             }
                           }}
+                          classNames={{
+                            wrapper: 'flex justify-center',
+                            checkbox: 'checkbox checkbox-sm',
+                          }}
                         />
                       </th>
                     )}
@@ -703,11 +707,10 @@ const PurchaseRequisitionsForm = ({
                     <tr key={`purchase-item-${idx}`}>
                       {type !== 'detail' && (
                         <td className='!align-middle'>
-                          <input
-                            type='checkbox'
-                            className='checkbox checkbox-sm'
+                          <CheckboxInput
+                            name={`purchase-item-${idx}`}
                             checked={selectedPurchaseItems.includes(idx)}
-                            onChange={(e) => {
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                               if (e.target.checked) {
                                 setSelectedPurchaseItems([
                                   ...selectedPurchaseItems,
@@ -719,6 +722,10 @@ const PurchaseRequisitionsForm = ({
                                 );
                               }
                             }}
+                            classNames={{
+                              wrapper: 'flex justify-center',
+                              checkbox: 'checkbox checkbox-sm',
+                            }}
                           />
                         </td>
                       )}