Merge branch 'feat/FE/US-77/TASK-141-slicing-detail-page-for-transfer-to-laying' into 'feat/FE/US-77/transfer-to-laying'

[FEAT/FE][US#77/TASK#141] Slicing detail page for Transfer to Laying

See merge request mbugroup/lti-web-client!26

.husky/pre-commit

@@ -0,0 +1,2 @@
+npm run lint
+npm run build

package-lock.json

@@ -35,6 +35,7 @@
         "daisyui": "^5.1.12",
         "eslint": "^9",
         "eslint-config-next": "15.5.3",
+        "husky": "^9.1.7",
         "tailwindcss": "^4",
         "typescript": "^5"
       }
@@ -4176,6 +4177,22 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/husky": {
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
+      "integrity": "sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "husky": "bin.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",

package.json

@@ -6,7 +6,8 @@
     "dev": "eslint && next dev --turbopack",
     "build": "next build --turbopack",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "prepare": "husky"
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.19.4",
@@ -36,6 +37,7 @@
     "daisyui": "^5.1.12",
     "eslint": "^9",
     "eslint-config-next": "15.5.3",
+    "husky": "^9.1.7",
     "tailwindcss": "^4",
     "typescript": "^5"
   }

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,
+            }}
+          />
+        </>
+      )}
     </>
   );
 };

src/services/api/production/transfer-to-laying.ts

@@ -776,6 +776,30 @@ export class TransferToLayingService extends BaseApiService<
     }
   }
 
+  // TODO: remove dummy data and integrate to real API
+  async approve(
+    id: number
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      await sleep(750);
+
+      return {
+        code: 200,
+        status: 'success',
+        message: 'Berhasil approve data transfer ke laying!',
+        data: {
+          message: 'Berhasil approve data transfer ke laying!',
+        },
+      };
+    } catch (error) {
+      //   if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
+      // return error.response?.data;
+      //   }
+
+      return undefined;
+    }
+  }
+
   // TODO: remove dummy data and integrate to real API
   async bulkApprove(
     ids: number[]
@@ -800,6 +824,30 @@ export class TransferToLayingService extends BaseApiService<
     }
   }
 
+  // TODO: remove dummy data and integrate to real API
+  async reject(
+    id: number
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      await sleep(750);
+
+      return {
+        code: 200,
+        status: 'success',
+        message: 'Berhasil reject data transfer ke laying!',
+        data: {
+          message: 'Berhasil reject data transfer ke laying!',
+        },
+      };
+    } catch (error) {
+      //   if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
+      // return error.response?.data;
+      //   }
+
+      return undefined;
+    }
+  }
+
   // TODO: remove dummy data and integrate to real API
   async bulkReject(
     ids: number[]