feat(FE-141): add approve and reject functionality in Transfer to Laying Detail Page

src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx

@@ -42,10 +42,18 @@ const TransferToLayingForm = ({
   initialValues,
 }: TransferToLayingFormProps) => {
   const router = useRouter();
+
+  // Modal hooks
   const deleteModal = useModal();
+  const approveModal = useModal();
+  const rejectModal = useModal();
 
   const [formErrorMessage, setFormErrorMessage] = useState('');
+
+  // Modal loading state
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isRejectLoading, setIsRejectLoading] = useState(false);
 
   const createTransferToLayingHandler = useCallback(
     async (payload: CreateTransferToLayingPayload) => {
@@ -152,15 +160,65 @@ const TransferToLayingForm = ({
     deleteModal.openModal();
   };
 
+  const approveClickHandler = () => {
+    approveModal.openModal();
+  };
+
+  const rejectClickHandler = () => {
+    rejectModal.openModal();
+  };
+
+  // Modal confirm click handler
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
+    // TODO: delete data and integrate to real API
     deleteModal.closeModal();
-    toast.success('Successfully delete TransferToLaying!');
+    toast.success('Berhasil menghapus data transfer ke laying!');
 
     setIsDeleteLoading(false);
   };
 
+  const confirmationModalApproveClickHandler = async () => {
+    setIsApproveLoading(true);
+
+    const approveResponse = await TransferToLayingApi.approve(
+      initialValues?.id as number
+    );
+
+    if (isResponseSuccess(approveResponse)) {
+      approveModal.closeModal();
+
+      toast.success('Berhasil approve data transfer ke laying!');
+    } else {
+      approveModal.closeModal();
+
+      toast.error('Gagal approve data transfer ke laying!');
+    }
+
+    setIsApproveLoading(false);
+  };
+
+  const confirmationModalRejectClickHandler = async () => {
+    setIsRejectLoading(true);
+
+    const rejectResponse = await TransferToLayingApi.reject(
+      initialValues?.id as number
+    );
+
+    if (isResponseSuccess(rejectResponse)) {
+      rejectModal.closeModal();
+
+      toast.success('Berhasil reject data transfer ke laying!');
+    } else {
+      rejectModal.closeModal();
+
+      toast.error('Gagal reject data transfer ke laying!');
+    }
+
+    setIsRejectLoading(false);
+  };
+
   const isRepeaterInputError = (
     column: keyof TransferToLayingFormValues['kandangs'][0],
     idx: number
@@ -303,10 +361,38 @@ const TransferToLayingForm = ({
           </h1>
         </header>
 
+        <div className='w-full my-4 flex flex-row justify-end gap-2'>
+          {type === 'detail' && (
+            <>
+              <Button
+                variant='outline'
+                color='success'
+                onClick={approveClickHandler}
+                // disabled={selectedRowIds.length === 0}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='material-symbols:check' width={24} height={24} />
+                Approve
+              </Button>
+
+              <Button
+                variant='outline'
+                color='error'
+                onClick={rejectClickHandler}
+                // disabled={selectedRowIds.length === 0}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='material-symbols:close' width={24} height={24} />
+                Reject
+              </Button>
+            </>
+          )}
+        </div>
+
         <form
           onSubmit={formik.handleSubmit}
           onReset={formik.handleReset}
-          className='w-full mt-8 flex flex-col gap-6'
+          className='w-full flex flex-col gap-6'
         >
           <div className='flex flex-col gap-4'>
             <TextInput
@@ -494,7 +580,7 @@ const TransferToLayingForm = ({
                   <Button
                     type='button'
                     color='warning'
-                    href={`/master-data/nonstock/detail/edit/?nonstockId=${initialValues?.id}`}
+                    href={`/production/transfer-to-laying/detail/edit/?transferToLayingId=${initialValues?.id}`}
                     className='px-4'
                   >
                     <Icon
@@ -549,7 +635,7 @@ const TransferToLayingForm = ({
         <ConfirmationModal
           ref={deleteModal.ref}
           type='error'
-          text='Apakah anda yakin ingin menghapus data TransferToLaying?'
+          text='Apakah anda yakin ingin menghapus data transfer ke laying ini?'
           secondaryButton={{
             text: 'Tidak',
           }}
@@ -561,6 +647,40 @@ const TransferToLayingForm = ({
           }}
         />
       )}
+
+      {type === 'detail' && (
+        <>
+          <ConfirmationModal
+            ref={approveModal.ref}
+            type='success'
+            text='Apakah anda yakin ingin approve data transfer ke laying ini?'
+            secondaryButton={{
+              text: 'Tidak',
+            }}
+            primaryButton={{
+              text: 'Ya',
+              color: 'success',
+              isLoading: isApproveLoading,
+              onClick: confirmationModalApproveClickHandler,
+            }}
+          />
+
+          <ConfirmationModal
+            ref={rejectModal.ref}
+            type='error'
+            text='Apakah anda yakin ingin reject data transfer ke laying ini?'
+            secondaryButton={{
+              text: 'Tidak',
+            }}
+            primaryButton={{
+              text: 'Ya',
+              color: 'error',
+              isLoading: isRejectLoading,
+              onClick: confirmationModalRejectClickHandler,
+            }}
+          />
+        </>
+      )}
     </>
   );
 };