chore: set error in input and use TransferToLayingConfirmationModal component

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

@@ -7,6 +7,7 @@ import {
   useMemo,
   useState,
 } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
 import useSWR, { useSWRConfig } from 'swr';
 import toast from 'react-hot-toast';
 
@@ -19,8 +20,8 @@ import { OptionType, useSelect } from '@/components/input/SelectInput';
 import NumberInput from '@/components/input/NumberInput';
 import TextArea from '@/components/input/TextArea';
 import AlertErrorList from '@/components/helper/form/FormErrors';
+import TransferToLayingConfirmationModal from '@/components/pages/production/transfer-to-laying/TransferToLayingConfirmationModal';
 
-import { useRouter, useSearchParams } from 'next/navigation';
 import { ProjectFlockApi } from '@/services/api/production';
 import { getIn, useFormik } from 'formik';
 import {
@@ -58,8 +59,11 @@ const TransferToLayingFormModal = () => {
   };
 
   const { data: transferToLaying, isLoading: isLoadingTransferToLaying } =
-    useSWR(transferToLayingId ? transferToLayingId : undefined, (id: number) =>
+    useSWR(
-      TransferToLayingApi.getSingle(id)
+      transferToLayingId
+        ? ['detail-transfer-to-laying', transferToLayingId]
+        : undefined,
+      ([, id]) => TransferToLayingApi.getSingle(Number(id))
     );
 
   /**
@@ -71,7 +75,11 @@ const TransferToLayingFormModal = () => {
   const [step, setStep] = useState(1);
 
   const formModal = useModal();
+  const successModal = useModal();
 
+  const [formikLastValues, setFormikLastValues] = useState<
+    TransferToLayingFormValues | undefined
+  >(undefined);
   const [formErrorMessage, setFormErrorMessage] = useState<string | null>(null);
 
   //   Flock Source
@@ -133,6 +141,7 @@ const TransferToLayingFormModal = () => {
       toast.success(createTransferToLayingRes?.message as string);
       router.push('/production/transfer-to-laying');
       closeModalHandler(false);
+      successModal.openModal();
     },
     [router]
   );
@@ -156,6 +165,7 @@ const TransferToLayingFormModal = () => {
       toast.success(updateKandangRes?.message as string);
       router.push('/production/transfer-to-laying');
       closeModalHandler(false);
+      successModal.openModal();
     },
     [router]
   );
@@ -187,6 +197,8 @@ const TransferToLayingFormModal = () => {
         reason: values.reason as string,
       };
 
+      setFormikLastValues(values);
+
       switch (modalAction) {
         case 'add':
           await createTransferToLayingHandler(transferToLayingPayload);
@@ -244,7 +256,7 @@ const TransferToLayingFormModal = () => {
       ? selectedFlockSourceRawData.kandangs.map((kandang) => {
           const availability =
             flockSourceKandangsAvailability[kandang.project_flock_kandang_id]
-              .available_qty;
+              ?.available_qty;
 
           return {
             kandang_name: kandang.name,
@@ -375,6 +387,12 @@ const TransferToLayingFormModal = () => {
         formik.setValues(filledInitialValues);
         setStep(3);
       }
+
+      if (isResponseError(transferToLaying)) {
+        router.push('/production/transfer-to-laying');
+        closeModalHandler();
+        toast.error(transferToLaying.message);
+      }
     };
 
     const getFlockSourceData = async () => {
@@ -437,7 +455,7 @@ const TransferToLayingFormModal = () => {
               <div className='w-px border-none bg-base-content/10' />
 
               <h4 className='text-sm font-medium text-base-content/50'>
-                Add Transfer to Laying
+                {modalAction === 'add' ? 'Add' : 'Edit'} Transfer to Laying
               </h4>
             </div>
 
@@ -771,7 +789,12 @@ const TransferToLayingFormModal = () => {
                     <div className='flex flex-col gap-3'>
                       {formik.values.flockSourceKandangs.map((item, index) => {
                         const isInvalid =
-                          item.quantity === ''
+                          !Boolean(
+                            getIn(
+                              formik.touched,
+                              `flockSourceKandangs[${index}].quantity`
+                            )
+                          ) && item.quantity === ''
                             ? false
                             : Boolean(
                                 getIn(
@@ -833,7 +856,8 @@ const TransferToLayingFormModal = () => {
                           : 'neutral'
                       }
                       text={`Sisa transfer: ${formatNumber(
-                        totalAvailableChickenForTransfer
+                        totalAvailableChickenForTransfer,
+                        'en-US'
                       )} ekor`}
                       className={{
                         badge: 'text-nowrap',
@@ -852,7 +876,12 @@ const TransferToLayingFormModal = () => {
                       {formik.values.flockDestinationKandangs.map(
                         (item, index) => {
                           const isInvalid =
-                            item.quantity === ''
+                            !Boolean(
+                              getIn(
+                                formik.touched,
+                                `flockDestinationKandangs.${index}.quantity`
+                              )
+                            ) && item.quantity === ''
                               ? false
                               : Boolean(
                                   getIn(
@@ -968,6 +997,16 @@ const TransferToLayingFormModal = () => {
           )}
         </form>
       </Modal>
+
+      <TransferToLayingConfirmationModal
+        ref={successModal.ref}
+        type='success'
+        text='Data Berhasil Ditambahkan'
+        subtitleText='Data transfer to laying telah berhasil disimpan.'
+        transferToLayingForm={formikLastValues}
+        onClose={() => setFormikLastValues(undefined)}
+        secondaryButton={undefined}
+      />
     </>
   );
 };