feat(FE-62): replace native checkboxes with CheckboxInput component in MovementForm

This commit is contained in:
rstubryan
2025-10-21 11:26:15 +07:00
parent c746bd94b2
commit 41bb05413c
@@ -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>