refactor(FE): Refactor transfer logic to use maxSourceQuantity state

This commit is contained in:
rstubryan
2026-03-08 16:06:13 +07:00
parent 9389fa0354
commit bac6766fa2
@@ -229,6 +229,8 @@ const TransferToLayingFormModal = () => {
ProjectFlock | undefined
>(undefined);
const [maxSourceQuantity, setMaxSourceQuantity] = useState<number>(0);
const selectedFlockDestinationRawData = isResponseSuccess(
flockDestinationRawData
)
@@ -353,19 +355,14 @@ const TransferToLayingFormModal = () => {
return { available: countAvailable, unavailable: countUnavailable };
}, [mappedFlockDestinationKandangsMaxTargetQty]);
const totalEnteredChickenForTransfer =
formik.values.flockSourceKandangs.reduce(
(acc, item) => acc + Number(item.quantity),
0
);
const totalTransferedChicken = formik.values.flockDestinationKandangs.reduce(
(acc, item) => acc + Number(item.quantity),
0
);
// Sisa transfer = Max available dari kandang asal - Total yang sudah diisi di kandang tujuan
const totalAvailableChickenForTransfer =
totalEnteredChickenForTransfer - totalTransferedChicken;
maxSourceQuantity - totalTransferedChicken;
const isNextButtonDisabled = useMemo(() => {
if (step === 1) {
@@ -397,6 +394,7 @@ const TransferToLayingFormModal = () => {
formik.setFieldValue('maxTotalQuantity', '');
formik.setFieldValue('reason', '');
formik.setFieldTouched('reason', false);
setMaxSourceQuantity(0);
setStep(2);
};
@@ -404,6 +402,7 @@ const TransferToLayingFormModal = () => {
const flockSourceChangeHandler = (val: OptionType | OptionType[] | null) => {
formik.setFieldValue('flockSource', val);
formik.setFieldValue('flockSourceKandangs', []);
setMaxSourceQuantity(0);
};
const flockDestinationChangeHandler = (
@@ -469,6 +468,16 @@ const TransferToLayingFormModal = () => {
formik.setFieldValue('maxTotalQuantity', totalTransferedChicken);
}, [totalTransferedChicken, formik.values.flockDestinationKandangs]);
// Auto-fill source kandang quantity from total destination quantity
useEffect(() => {
if (formik.values.flockSourceKandangs.length > 0) {
formik.setFieldValue(
'flockSourceKandangs.0.quantity',
totalTransferedChicken
);
}
}, [totalTransferedChicken]);
return (
<>
<Modal
@@ -583,14 +592,9 @@ const TransferToLayingFormModal = () => {
k.kandang.value === item.project_flock_kandang_id
);
const flockSourceKandangCheckboxChangeHandler: FormEventHandler<
HTMLInputElement
> = (e) => {
const checked = (e.target as HTMLInputElement)
.checked;
if (checked) {
const flockSourceKandangRadioChangeHandler = () => {
if (isAvailable) {
formik.setFieldValue('flockSourceKandangs', [
...formik.values.flockSourceKandangs,
{
kandang: {
value: item.project_flock_kandang_id,
@@ -600,15 +604,7 @@ const TransferToLayingFormModal = () => {
maxQuantity: item.available_qty,
},
]);
} else {
formik.setFieldValue(
'flockSourceKandangs',
formik.values.flockSourceKandangs.filter(
(k) =>
k.kandang.value !==
item.project_flock_kandang_id
)
);
setMaxSourceQuantity(item.available_qty);
}
};
@@ -618,28 +614,22 @@ const TransferToLayingFormModal = () => {
className='w-full p-3 flex flex-row items-center justify-between'
>
<div className='flex flex-row items-center gap-3'>
<CheckboxInput
name={`flockSourceKandang.${itemIdx}.value`}
<input
type='radio'
name='flockSourceKandang'
value={item.project_flock_kandang_id}
checked={isChecked}
onChange={
flockSourceKandangCheckboxChangeHandler
}
size='md'
onChange={flockSourceKandangRadioChangeHandler}
disabled={!isAvailable}
classNames={{
checkbox: cn({
'bg-base-200 border border-base-content/10 opacity-100':
!isAvailable,
}),
}}
className={cn('radio radio-md radio-primary', {
'opacity-50 cursor-not-allowed': !isAvailable,
})}
/>
<label
htmlFor={`flockSourceKandang.${itemIdx}.value`}
className={cn('text-sm text-base-content/50', {
'cursor-pointer': isAvailable,
'cursor-not-allowed': !isAvailable,
'cursor-not-allowed opacity-50': !isAvailable,
})}
>
{item.kandang_name}{' '}
@@ -858,7 +848,7 @@ const TransferToLayingFormModal = () => {
<NumberInput
key={`flockSourceKandangs-${item.kandang.value}-${index}`}
name={`flockSourceKandangs.${index}.quantity`}
placeholder='Masukkan Kuantitas'
placeholder='Masukkan Kuantitas pada Kandang Tujuan'
value={item.quantity}
onChange={formik.handleChange}
isError={isInvalid}
@@ -875,6 +865,8 @@ const TransferToLayingFormModal = () => {
<div className='w-px bg-base-content/10' />
</div>
}
readOnly
disabled
className={{
inputPrefix:
'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
@@ -1000,7 +992,7 @@ const TransferToLayingFormModal = () => {
isError={totalAvailableChickenForTransfer < 0}
errorMessage={
totalAvailableChickenForTransfer < 0
? `Jumlah transfer melebihi ketersediaan (${formatNumber(totalEnteredChickenForTransfer, 'en-US')} ayam)`
? `Jumlah transfer melebihi ketersediaan (${formatNumber(maxSourceQuantity, 'en-US')} ayam)`
: ''
}
disabled