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

src/components/pages/production/transfer-to-laying/TransferToLayingFormModal.tsx

@@ -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<
+                        const flockSourceKandangRadioChangeHandler = () => {
-                          HTMLInputElement
+                          if (isAvailable) {
-                        > = (e) => {
-                          const checked = (e.target as HTMLInputElement)
-                            .checked;
-                          if (checked) {
                             formik.setFieldValue('flockSourceKandangs', [
-                              ...formik.values.flockSourceKandangs,
                               {
                                 kandang: {
                                   value: item.project_flock_kandang_id,
@@ -600,15 +604,7 @@ const TransferToLayingFormModal = () => {
                                 maxQuantity: item.available_qty,
                               },
                             ]);
-                          } else {
+                            setMaxSourceQuantity(item.available_qty);
-                            formik.setFieldValue(
-                              'flockSourceKandangs',
-                              formik.values.flockSourceKandangs.filter(
-                                (k) =>
-                                  k.kandang.value !==
-                                  item.project_flock_kandang_id
-                              )
-                            );
                           }
                         };
 
@@ -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
+                              <input
-                                name={`flockSourceKandang.${itemIdx}.value`}
+                                type='radio'
+                                name='flockSourceKandang'
                                 value={item.project_flock_kandang_id}
                                 checked={isChecked}
-                                onChange={
+                                onChange={flockSourceKandangRadioChangeHandler}
-                                  flockSourceKandangCheckboxChangeHandler
-                                }
-                                size='md'
                                 disabled={!isAvailable}
-                                classNames={{
+                                className={cn('radio radio-md radio-primary', {
-                                  checkbox: cn({
+                                  'opacity-50 cursor-not-allowed': !isAvailable,
-                                    'bg-base-200 border border-base-content/10 opacity-100':
+                                })}
-                                      !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