From 41bb05413c19e95d2cd2427e066417c7abf03b15 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 21 Oct 2025 11:26:15 +0700
Subject: [PATCH] feat(FE-62): replace native checkboxes with CheckboxInput
 component in MovementForm

---
 .../inventory/movement/form/MovementForm.tsx  | 99 ++++++++++---------
 1 file changed, 54 insertions(+), 45 deletions(-)

diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index 034b2ead..2716ac85 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -29,6 +29,7 @@ import { ProductWarehouseApi } from '@/services/api/inventory';
 import { toast } from 'react-hot-toast';
 import FileInput from '@/components/input/FileInput';
 import FieldMessage from '@/components/helper/FieldMessage';
+import CheckboxInput from '@/components/input/CheckboxInput';
 
 interface MovementFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -831,26 +832,29 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     <tr>
                       {type !== 'detail' && (
                         <th>
-                          <input
-                            type='checkbox'
-                            className='checkbox'
-                            checked={
-                              formik.values.products?.length ===
-                                selectedProducts.length &&
-                              formik.values.products?.length > 0
-                            }
-                            onChange={(e) => {
-                              if (e.target.checked) {
-                                setSelectedProducts(
-                                  formik.values.products?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
-                              } else {
-                                setSelectedProducts([]);
+                          <div className='flex justify-center'>
+                            <CheckboxInput
+                              name='select-all-products'
+                              checked={
+                                formik.values.products?.length ===
+                                  selectedProducts.length &&
+                                formik.values.products?.length > 0
                               }
-                            }}
-                          />
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  setSelectedProducts(
+                                    formik.values.products?.map(
+                                      (_, idx) => idx
+                                    ) ?? []
+                                  );
+                                } else {
+                                  setSelectedProducts([]);
+                                }
+                              }}
+                              naked={true}
+                              size='sm'
+                            />
+                          </div>
                         </th>
                       )}
                       <th>Produk</th>
@@ -863,10 +867,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                       <tr key={`product-row-${idx}-${product.product_id}`}>
                         {type !== 'detail' && (
                           <td>
-                            <div className='flex flex-col items-start gap-2'>
-                              <input
-                                type='checkbox'
-                                className='checkbox'
+                            <div className='flex flex-col items-center gap-2'>
+                              <CheckboxInput
+                                name={`product-${idx}`}
                                 checked={selectedProducts.includes(idx)}
                                 onChange={(e) => {
                                   if (e.target.checked) {
@@ -880,6 +883,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                     );
                                   }
                                 }}
+                                naked={true}
+                                size='sm'
                               />
                               <FieldMessage message={null} isVisible={false} />
                             </div>
@@ -1019,26 +1024,29 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     <tr>
                       {type !== 'detail' && (
                         <th>
-                          <input
-                            type='checkbox'
-                            className='checkbox'
-                            checked={
-                              formik.values.deliveries?.length ===
-                                selectedDeliveries.length &&
-                              formik.values.deliveries?.length > 0
-                            }
-                            onChange={(e) => {
-                              if (e.target.checked) {
-                                setSelectedDeliveries(
-                                  formik.values.deliveries?.map(
-                                    (_, idx) => idx
-                                  ) ?? []
-                                );
-                              } else {
-                                setSelectedDeliveries([]);
+                          <div className='flex justify-center'>
+                            <CheckboxInput
+                              name='select-all-deliveries'
+                              checked={
+                                formik.values.deliveries?.length ===
+                                  selectedDeliveries.length &&
+                                formik.values.deliveries?.length > 0
                               }
-                            }}
-                          />
+                              onChange={(e) => {
+                                if (e.target.checked) {
+                                  setSelectedDeliveries(
+                                    formik.values.deliveries?.map(
+                                      (_, idx) => idx
+                                    ) ?? []
+                                  );
+                                } else {
+                                  setSelectedDeliveries([]);
+                                }
+                              }}
+                              naked={true}
+                              size='sm'
+                            />
+                          </div>
                         </th>
                       )}
                       <th>Produk</th>
@@ -1058,9 +1066,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                         {type !== 'detail' && (
                           <td>
                             <div className='flex flex-col items-start gap-2'>
-                              <input
-                                type='checkbox'
-                                className='checkbox'
+                              <CheckboxInput
+                                name={`delivery-${idx}`}
                                 checked={selectedDeliveries.includes(idx)}
                                 onChange={(e) => {
                                   if (e.target.checked) {
@@ -1076,6 +1083,8 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                     );
                                   }
                                 }}
+                                naked={true}
+                                size='sm'
                               />
                               <FieldMessage message={null} isVisible={false} />
                             </div>