diff --git a/src/app/globals.css b/src/app/globals.css
index 0eb04a09..96339bf2 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -30,14 +30,14 @@
   --color-base-100: oklch(100% 0 0); /* #ffffff */
   --color-base-200: oklch(97.2% 0 0); /* #f2f2f2 */
   --color-base-300: oklch(93.1% 0.002 249.7); /* #e5e6e6 */
-  --color-base-content: oklch(18.6% 0.024 257.7); /* #1f2937 */
+  --color-base-content: #18181b;
 
   /* Status/Utility Colors */
   --color-info: oklch(67.4% 0.176 238.9);
   --color-info-content: oklch(0% 0 0); /* #000000 */
   --color-success: #00d390;
   --color-success-content: oklch(100% 0 0); /* #ffffff */
-  --color-warning: oklch(82.2% 0.165 91.9);
+  --color-warning: #fcb700;
   --color-warning-content: oklch(0% 0 0); /* #000000 */
   --color-error: #ff3a3a;
   --color-error-content: oklch(100% 0 0); /* #fffffff */
diff --git a/src/app/production/transfer-to-laying/add/page.tsx b/src/app/production/transfer-to-laying/add/page.tsx
deleted file mode 100644
index 6f29085f..00000000
--- a/src/app/production/transfer-to-laying/add/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
-
-const AddTransferToLaying = () => {
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      <TransferToLayingForm />
-    </div>
-  );
-};
-
-export default AddTransferToLaying;
diff --git a/src/app/production/transfer-to-laying/detail/edit/page.tsx b/src/app/production/transfer-to-laying/detail/edit/page.tsx
deleted file mode 100644
index d5498e08..00000000
--- a/src/app/production/transfer-to-laying/detail/edit/page.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
-
-import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-
-const TransferToLayingEdit = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const transferToLayingId = searchParams.get('transferToLayingId');
-
-  const { data: transferToLaying, isLoading: isLoadingTransferToLaying } =
-    useSWR(transferToLayingId, (id: number) =>
-      TransferToLayingApi.getSingle(id)
-    );
-
-  if (!transferToLayingId) {
-    router.back();
-
-    return (
-      <div className='w-full flex flex-row justify-center items-center p-4'>
-        <span className='loading loading-spinner loading-xl' />
-      </div>
-    );
-  }
-
-  if (
-    !isLoadingTransferToLaying &&
-    (!transferToLaying || isResponseError(transferToLaying))
-  ) {
-    router.replace('/404');
-    return;
-  }
-
-  if (
-    isResponseSuccess(transferToLaying) &&
-    transferToLaying.data.approval.step_number === 2
-  ) {
-    router.replace('/production/transfer-to-laying');
-    return;
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingTransferToLaying && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-      {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
-        <TransferToLayingForm
-          type='edit'
-          initialValues={transferToLaying.data}
-        />
-      )}
-    </div>
-  );
-};
-
-export default TransferToLayingEdit;
diff --git a/src/app/production/transfer-to-laying/detail/layout.tsx b/src/app/production/transfer-to-laying/detail/layout.tsx
deleted file mode 100644
index 7220dfa1..00000000
--- a/src/app/production/transfer-to-laying/detail/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import SuspenseHelper from '@/components/helper/SuspenseHelper';
-
-const Layout = ({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) => {
-  return <SuspenseHelper>{children}</SuspenseHelper>;
-};
-
-export default Layout;
diff --git a/src/app/production/transfer-to-laying/detail/page.tsx b/src/app/production/transfer-to-laying/detail/page.tsx
deleted file mode 100644
index 9ff6ed5e..00000000
--- a/src/app/production/transfer-to-laying/detail/page.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
-
-import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-
-const TransferToLayingDetail = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const transferToLayingId = searchParams.get('transferToLayingId');
-
-  const { data: transferToLaying, isLoading: isLoadingTransferToLaying } =
-    useSWR(transferToLayingId, (id: number) =>
-      TransferToLayingApi.getSingle(id)
-    );
-
-  if (!transferToLayingId) {
-    router.back();
-
-    return (
-      <div className='w-full flex flex-row justify-center items-center p-4'>
-        <span className='loading loading-spinner loading-xl' />
-      </div>
-    );
-  }
-
-  if (
-    !isLoadingTransferToLaying &&
-    (!transferToLaying || isResponseError(transferToLaying))
-  ) {
-    router.replace('/404');
-    return;
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingTransferToLaying && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-
-      {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
-        <TransferToLayingForm
-          type='detail'
-          initialValues={transferToLaying.data}
-        />
-      )}
-    </div>
-  );
-};
-
-export default TransferToLayingDetail;
diff --git a/src/app/production/transfer-to-laying/page.tsx b/src/app/production/transfer-to-laying/page.tsx
index 048ae005..5d790345 100644
--- a/src/app/production/transfer-to-laying/page.tsx
+++ b/src/app/production/transfer-to-laying/page.tsx
@@ -1,5 +1,6 @@
 import TransferToLayingsTable from '@/components/pages/production/transfer-to-laying/TransferToLayingsTable';
 import TransferToLayingFormModal from '@/components/pages/production/transfer-to-laying/TransferToLayingFormModal';
+import TransferToLayingDetailModal from '@/components/pages/production/transfer-to-laying/TransferToLayingDetailModal';
 
 const TransferToLaying = () => {
   return (
@@ -7,6 +8,8 @@ const TransferToLaying = () => {
       <TransferToLayingsTable />
 
       <TransferToLayingFormModal />
+
+      <TransferToLayingDetailModal />
     </section>
   );
 };
diff --git a/src/components/helper/ApprovalStepsV2.tsx b/src/components/helper/ApprovalStepsV2.tsx
new file mode 100644
index 00000000..6b731a72
--- /dev/null
+++ b/src/components/helper/ApprovalStepsV2.tsx
@@ -0,0 +1,201 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+
+import { Icon } from '@iconify/react';
+import { BaseApproval } from '@/types/api/api-general';
+import Button from '@/components/Button';
+
+import { cn, formatDate } from '@/lib/helper';
+
+interface ApprovalStepsV2Props {
+  approvals?: BaseApproval[];
+  steps: {
+    step_number: number;
+    step_name: string;
+  }[];
+  maxVisibleSteps?: number;
+  className?: {
+    wrapper?: string;
+    stepsWrapper?: string;
+    stepsContainer?: string;
+  };
+}
+
+const ApprovalStepsV2 = ({
+  approvals,
+  steps,
+  maxVisibleSteps = 2,
+  className,
+}: ApprovalStepsV2Props) => {
+  const [isSeeAll, setIsSeeAll] = useState(false);
+  const [formattedApprovals, setFormattedApprovals] = useState<
+    (BaseApproval & { isActive: boolean })[]
+  >([]);
+
+  const latestApprovalStepNumber =
+    approvals?.[approvals.length - 1].step_number ?? 0;
+
+  const lastStepNumber = steps[steps.length - 1].step_number;
+
+  const isLatestApprovalStepNumberLessThanLastStepNumber =
+    latestApprovalStepNumber < lastStepNumber;
+
+  const slicedFormattedApprovals = useMemo(() => {
+    return formattedApprovals.slice(0, isSeeAll ? undefined : maxVisibleSteps);
+  }, [formattedApprovals, isSeeAll]);
+
+  const seeMoreClickHandler = () => {
+    setIsSeeAll((prevVal) => !prevVal);
+  };
+
+  useEffect(() => {
+    if (approvals) {
+      const tempFormattedApprovals: (BaseApproval & { isActive: boolean })[] =
+        [];
+
+      approvals.forEach((approval) => {
+        tempFormattedApprovals.push({
+          ...approval,
+          isActive: true,
+        });
+      });
+
+      if (isLatestApprovalStepNumberLessThanLastStepNumber) {
+        const latestApprovalStepNumberIndexInSteps = steps.findIndex(
+          (step) => step.step_number === latestApprovalStepNumber
+        );
+
+        const slicedSteps = steps.slice(
+          latestApprovalStepNumberIndexInSteps + 1
+        );
+
+        slicedSteps.forEach((step) => {
+          tempFormattedApprovals.push({
+            action: 'APPROVED',
+            action_at: new Date().toISOString(),
+            action_by: {
+              id: 0,
+              id_user: 0,
+              email: '',
+              name: '',
+            },
+            step_name: step.step_name,
+            step_number: step.step_number,
+            isActive: false,
+          });
+        });
+      }
+
+      setFormattedApprovals(tempFormattedApprovals);
+    }
+  }, [approvals]);
+
+  return (
+    <div
+      className={cn(
+        'w-full p-4 flex flex-col border-b border-base-content/10',
+        className?.wrapper
+      )}
+    >
+      <h4 className='text-base font-medium text-base-content/50 font-roboto'>
+        Progress Details
+      </h4>
+
+      <div
+        className={cn(
+          'mt-6 mb-8 flex flex-col gap-10',
+          className?.stepsWrapper
+        )}
+      >
+        {slicedFormattedApprovals.map((approval, idx) => {
+          const isApprovalActionCreated = approval.action === 'CREATED';
+          const isApprovalActionUpdated = approval.action === 'UPDATED';
+          const isApprovalActionRejected = approval.action === 'REJECTED';
+          const isApprovalActionApproved = approval.action === 'APPROVED';
+
+          const approvalIcon =
+            isApprovalActionCreated || isApprovalActionUpdated
+              ? 'heroicons:clock-solid'
+              : isApprovalActionRejected
+                ? 'heroicons:x-circle-solid'
+                : isApprovalActionApproved
+                  ? 'heroicons:check-badge-solid'
+                  : 'heroicons:check-badge-solid';
+
+          return (
+            <div key={idx} className='w-full flex flex-row items-stretch gap-3'>
+              <div className='w-fit self-stretch relative'>
+                <div className='w-fit h-fit flex flex-col items-start'>
+                  <Icon
+                    icon={approvalIcon}
+                    width={24}
+                    height={24}
+                    className={cn({
+                      'text-warning':
+                        isApprovalActionCreated || isApprovalActionUpdated,
+                      'text-error': isApprovalActionRejected,
+                      'text-success': isApprovalActionApproved,
+                      'text-base-content/20': !approval.isActive,
+                    })}
+                  />
+
+                  {idx < formattedApprovals.length - 1 && (
+                    <div className='absolute top-6 left-1/2 -translate-x-1/2 w-0 min-h-full h-[calc(100%)] mx-auto my-2 border border-dashed border-base-content/10' />
+                  )}
+                </div>
+              </div>
+
+              <div
+                className={cn('w-full flex flex-col gap-1 text-base-content', {
+                  'text-base-content/20': !approval.isActive,
+                })}
+              >
+                <div className='flex flex-col'>
+                  <span className='text-xs'>{approval.step_name}</span>
+                  <span className='text-sm font-semibold'>
+                    {(isApprovalActionCreated || isApprovalActionUpdated) &&
+                      'Diajukan oleh '}
+                    {isApprovalActionRejected && 'Ditolak oleh '}
+                    {isApprovalActionApproved && 'Disetujui oleh '}
+                    {approval.isActive ? approval.action_by.name : '...'}
+                  </span>
+                </div>
+
+                {approval.isActive && (
+                  <p className='w-full max-w-60 p-3 bg-base-content/5 rounded-xl text-xs text-base-content/50'>
+                    Created at :{' '}
+                    {formatDate(approval.action_at, 'DD-MM-YYYY, HH:mm')}
+                    <br />
+                    Notes : {approval.notes ?? '-'}
+                  </p>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <Button
+        variant='outline'
+        color='none'
+        onClick={seeMoreClickHandler}
+        className={cn(
+          'px-3 py-2 gap-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-lg transition-all'
+        )}
+      >
+        <Icon
+          icon='heroicons-outline:chevron-double-down'
+          width={20}
+          height={20}
+          className={cn('transition-all duration-300', {
+            '-rotate-180': isSeeAll,
+          })}
+        />
+        See {isSeeAll ? 'Less' : 'More'}
+      </Button>
+    </div>
+  );
+};
+
+export default ApprovalStepsV2;
diff --git a/src/components/input/DateInput.tsx b/src/components/input/DateInput.tsx
index 558779c7..da1a4d81 100644
--- a/src/components/input/DateInput.tsx
+++ b/src/components/input/DateInput.tsx
@@ -226,7 +226,7 @@ const DateInput = ({
 
       <div
         className={cn(
-          'input h-12 bg-inherit px-3 py-2.5 text-base font-normal leading-6 w-full rounded-lg transition-all duration-200 flex items-center border border-base-content/10',
+          'input h-fit bg-inherit px-3 py-2.5 text-base font-normal leading-6 w-full rounded-lg transition-all duration-200 flex items-center border border-base-content/10',
           {
             'border-error': finalIsError,
             'border-success': externalValid && !finalIsError,
@@ -245,7 +245,10 @@ const DateInput = ({
           disabled={disabled}
           readOnly // ✅ tidak bisa diketik manual
           className={cn(
-            'grow bg-transparent cursor-pointer focus:outline-none',
+            'grow bg-transparent cursor-pointer focus:outline-none text-sm leading-tight',
+            {
+              'cursor-not-allowed': readOnly,
+            },
             className?.input
           )}
         />
@@ -257,8 +260,8 @@ const DateInput = ({
         )}
         <Icon
           icon='heroicons:calendar-date-range'
-          width={14}
-          height={14}
+          width={15}
+          height={15}
           className='cursor-pointer text-base-content/20'
           onClick={(e) =>
             handleClick(e as unknown as React.MouseEvent<HTMLInputElement>)
diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index 1eb3ccd8..419ed314 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -42,6 +42,7 @@ interface SelectInputBaseProps<T = OptionType> {
   optionComponent?: OptionComponent<T>;
   components?: Partial<typeof ReactSelectComponents>;
   isDisabled?: boolean;
+  readOnly?: boolean;
   isLoading?: boolean;
   isClearable?: boolean;
   isRtl?: boolean;
@@ -156,6 +157,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     closeMenuOnSelect,
     hideSelectedOptions,
     onMenuScrollToBottom,
+    readOnly,
   } = props;
 
   const [internalInputValue, setInternalInputValue] = useState('');
@@ -235,7 +237,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         onInputChange={internalInputChangeHandler}
         onMenuClose={() => setInternalInputValue('')}
         isMulti={isMulti}
-        isDisabled={isDisabled}
+        isDisabled={isDisabled || readOnly}
         isLoading={isLoading}
         isClearable={isClearable}
         isRtl={isRtl}
@@ -247,30 +249,37 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         classNames={{
           ...(!startAdornment && {
             control: ({ isFocused, isDisabled }) =>
-              cn(
-                'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer!',
-                {
-                  'border-red-500! ring-2 ring-red-200': isError,
-                  'border-indigo-500 ring-2 ring-indigo-200': isFocused,
-                  'border-base-content/10!': !isError && !isFocused,
-                  'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
-                }
-              ),
-            valueContainer: () => cn('flex-1 p-3! py-2! gap-1'),
+              cn('w-full rounded-lg! border bg-white transition-shadow', {
+                'cursor-pointer!': !readOnly && !isDisabled,
+                'border-red-500! ring-2 ring-red-200': isError,
+                'border-indigo-500 ring-2 ring-indigo-200': isFocused,
+                'border-base-content/10!': !isError && !isFocused,
+                'bg-gray-100 text-gray-400 cursor-not-allowed':
+                  isDisabled && !readOnly,
+                'bg-transparent! cursor-not-allowed!': readOnly,
+              }),
+            valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
           }),
           placeholder: () =>
-            cn({ 'text-gray-400': !isError, 'text-red-300!': isError }),
+            cn({
+              'text-gray-400 text-sm leading-tight': !isError,
+              'text-red-300!': isError,
+            }),
           singleValue: () =>
-            cn({ 'text-gray-900': !isError, 'text-error!': isError }),
-          input: () => cn('text-gray-900 m-0! p-0!'),
-          indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
+            cn({
+              'm-0! text-gray-900 text-sm leading-tight': !isError,
+              'text-error!': isError,
+              'text-gray-900!': readOnly,
+            }),
+          input: () => cn('text-gray-900 m-0! p-0! text-sm leading-tight'),
+          indicatorsContainer: () => cn('flex items-center gap-1 pr-3 py-2'),
           dropdownIndicator: ({ isFocused }) =>
-            cn('p-1! rounded hover:bg-gray-100', {
+            cn('p-0! rounded hover:bg-gray-100', {
               'text-gray-900': isFocused,
               'text-gray-500': !isFocused,
               'text-error!': isError,
             }),
-          clearIndicator: () => cn('p-1! rounded hover:bg-gray-100'),
+          clearIndicator: () => cn('p-0! rounded hover:bg-gray-100'),
           menu: () =>
             cn(
               'border border-base-content/5 rounded-xl! bg-base-100 shadow-lg! my-1.5!'
diff --git a/src/components/input/TextArea.tsx b/src/components/input/TextArea.tsx
index 65bd57d3..b3dd2663 100644
--- a/src/components/input/TextArea.tsx
+++ b/src/components/input/TextArea.tsx
@@ -83,7 +83,7 @@ const TextArea = ({
 
       <textarea
         className={cn(
-          'textarea h-auto px-3 py-2.5 text-base font-normal leading-6 w-full rounded-lg outline-none! transition-all bg-white border-base-content/10',
+          'textarea h-auto px-3 py-2.5 text-sm text-base-content font-normal leading-6 w-full rounded-lg outline-none! transition-all bg-white border-base-content/10',
           {
             'border-error': isError,
             'border-success!': isValid,
diff --git a/src/components/input/TextInput.tsx b/src/components/input/TextInput.tsx
index 62582781..da0d4325 100644
--- a/src/components/input/TextInput.tsx
+++ b/src/components/input/TextInput.tsx
@@ -104,8 +104,8 @@ const TextInput = ({
               className={cn(
                 'inline-flex items-center px-3 py-2.5 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200',
                 {
-                  'bg-gray-100 border-gray-300': !disabled,
-                  'bg-gray-50 border-gray-200': disabled,
+                  'bg-gray-100 border-base-content/10': !disabled,
+                  'bg-gray-50 border-base-content/10': disabled,
                   'border-error': isError,
                   'border-success!': isValid,
                 },
@@ -118,7 +118,7 @@ const TextInput = ({
 
           <div
             className={cn(
-              'input h-12 px-3 py-2.5 text-sm font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white border-base-content/10',
+              'input h-fit px-3 py-2.5 text-sm font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white border-base-content/10',
               {
                 'border-error': isError,
                 'border-success!': isValid,
@@ -182,7 +182,7 @@ const TextInput = ({
       ) : (
         <div
           className={cn(
-            'input h-12 px-3 py-2.5 text-sm font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white border-base-content/10',
+            'input h-fit px-3 py-2.5 text-sm font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white border-base-content/10',
             {
               'border-error': isError,
               'border-success!': isValid,
diff --git a/src/components/pages/production/transfer-to-laying/TransferToLayingConfirmationModal.tsx b/src/components/pages/production/transfer-to-laying/TransferToLayingConfirmationModal.tsx
index 40c08b01..335a6337 100644
--- a/src/components/pages/production/transfer-to-laying/TransferToLayingConfirmationModal.tsx
+++ b/src/components/pages/production/transfer-to-laying/TransferToLayingConfirmationModal.tsx
@@ -175,6 +175,10 @@ const TransferToLayingConfirmationModalTable = ({
     <Table<TransferToLayingConfirmationTableDataType>
       columns={confirmationTableColumns}
       data={confirmationTableData}
+      isLoading={
+        isLoadingTransferToLaying ||
+        (!transferToLayingId && !transferToLayingForm)
+      }
       withPagination={false}
       pageSize={10000}
       expanded={true}
diff --git a/src/components/pages/production/transfer-to-laying/TransferToLayingDetailModal.tsx b/src/components/pages/production/transfer-to-laying/TransferToLayingDetailModal.tsx
new file mode 100644
index 00000000..7be756e2
--- /dev/null
+++ b/src/components/pages/production/transfer-to-laying/TransferToLayingDetailModal.tsx
@@ -0,0 +1,338 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import { Icon } from '@iconify/react';
+import Modal, { useModal } from '@/components/Modal';
+import Button from '@/components/Button';
+import DateInput from '@/components/input/DateInput';
+import SelectInputRadio from '@/components/input/SelectInputRadio';
+import NumberInput from '@/components/input/NumberInput';
+import TextArea from '@/components/input/TextArea';
+import ApprovalStepsV2 from '@/components/helper/ApprovalStepsV2';
+import StatusBadge from '@/components/helper/StatusBadge';
+
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { formatNumber } from '@/lib/helper';
+import { APPROVAL_WORKFLOWS } from '@/config/constant';
+
+const TransferToLayingDetailModal = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const modalAction = searchParams.get('action');
+  const transferToLayingId = searchParams.get('id');
+
+  const {
+    data: transferToLayingResponse,
+    isLoading: isLoadingTransferToLaying,
+  } = useSWR(
+    transferToLayingId
+      ? ['detail-transfer-to-laying', transferToLayingId]
+      : undefined,
+    ([, id]) => TransferToLayingApi.getSingle(Number(id))
+  );
+
+  const transferToLaying = isResponseSuccess(transferToLayingResponse)
+    ? transferToLayingResponse.data
+    : undefined;
+
+  const {
+    data: transferToLayingApprovalResponse,
+    isLoading: isLoadingTransferToLayingApproval,
+  } = useSWR(
+    transferToLayingId
+      ? ['approval-transfer-to-laying', transferToLayingId]
+      : undefined,
+    ([, id]) => TransferToLayingApi.getApprovalLineHistory(Number(id))
+  );
+
+  const transferToLayingApproval = isResponseSuccess(
+    transferToLayingApprovalResponse
+  )
+    ? transferToLayingApprovalResponse.data
+    : undefined;
+
+  const detailModal = useModal();
+
+  const totalEnteredChickenForTransfer =
+    transferToLaying?.sources.reduce(
+      (acc, item) => acc + Number(item.qty),
+      0
+    ) ?? 0;
+
+  const totalTransferedChicken =
+    transferToLaying?.targets.reduce(
+      (acc, item) => acc + Number(item.qty),
+      0
+    ) ?? 0;
+
+  const totalAvailableChickenForTransfer =
+    totalEnteredChickenForTransfer - totalTransferedChicken;
+
+  const closeModalHandler = (shouldPushToRoute: boolean = true) => {
+    if (shouldPushToRoute) {
+      router.push('/production/transfer-to-laying');
+    }
+
+    detailModal.closeModal();
+  };
+
+  useEffect(() => {
+    if (modalAction === 'detail') {
+      detailModal.openModal();
+    }
+  }, [modalAction]);
+
+  return (
+    <Modal
+      ref={detailModal.ref}
+      position='end'
+      className={{
+        modalBox: 'w-full sm:w-fit p-3 rounded-xl bg-transparent shadow-none',
+      }}
+    >
+      <div className='w-full sm:w-[446px] min-h-full flex flex-col items-stretch bg-base-100 rounded-xl overflow-y-auto'>
+        <div className='w-full p-4 flex flex-row items-stretch gap-3 border-b border-base-content/10'>
+          <Button
+            type='button'
+            variant='ghost'
+            color='none'
+            onClick={() => closeModalHandler()}
+            className='p-0 text-black hover:text-base-content'
+          >
+            <Icon icon='heroicons:chevron-left' width={20} height={20} />
+          </Button>
+
+          <div className='w-px border-none bg-base-content/10' />
+
+          <h4 className='text-sm font-medium text-base-content/50'>
+            Confirmation
+          </h4>
+        </div>
+
+        {!isLoadingTransferToLaying && transferToLaying && (
+          <>
+            <ApprovalStepsV2
+              approvals={transferToLayingApproval}
+              steps={APPROVAL_WORKFLOWS.TRANSFER_TO_LAYINGS}
+            />
+
+            <div className='w-full p-4 flex flex-col border-b border-base-content/10'>
+              <h4 className='text-base font-medium text-base-content/50 font-roboto'>
+                Informasi Umum
+              </h4>
+
+              <DateInput
+                name='transfer_date'
+                label='Tanggal'
+                placeholder='Tanggal'
+                value={transferToLaying?.transfer_date ?? ''}
+                readOnly
+              />
+
+              <SelectInputRadio
+                label='Flock Asal'
+                placeholder='Pilih Flock Asal'
+                value={{
+                  label: transferToLaying?.from_project_flock?.flock_name ?? '',
+                  value: transferToLaying?.from_project_flock.id ?? '',
+                }}
+                options={[]}
+                readOnly
+              />
+
+              <SelectInputRadio
+                label='Flock Tujuan'
+                placeholder='Pilih Flock Tujuan'
+                value={{
+                  label: transferToLaying?.to_project_flock?.flock_name ?? '',
+                  value: transferToLaying?.to_project_flock.id ?? '',
+                }}
+                options={[]}
+                readOnly
+              />
+            </div>
+
+            <div className='w-full p-4 flex flex-col border-b border-base-content/10'>
+              <h4 className='text-base font-medium text-base-content/50 font-roboto'>
+                Informasi Kandang
+              </h4>
+
+              {/* Source Kandang */}
+              <div className='flex flex-col'>
+                <span className='w-full py-2 text-xs font-semibold'>
+                  Kandang Asal{' '}
+                  <span className='tooltip tooltip-error' data-tip='required'>
+                    <span className='text-error'> *</span>
+                  </span>
+                </span>
+
+                {transferToLaying?.sources.length === 0 && (
+                  <span className='text-sm text-base-content/50 italic'>
+                    Belum ada kandang asal yang dipilih
+                  </span>
+                )}
+
+                {transferToLaying?.sources &&
+                  transferToLaying?.sources.length > 0 && (
+                    <div className='flex flex-col gap-3'>
+                      {transferToLaying?.sources.map((item, index) => {
+                        return (
+                          <NumberInput
+                            key={`flockSourceKandangs-${item.source_project_flock_kandang.id}-${index}`}
+                            name={`flockSourceKandangs.${index}.quantity`}
+                            placeholder='Masukkan Kuantitas'
+                            value={item.qty}
+                            readOnly
+                            inputPrefix={
+                              <div className='w-full h-full py-1 flex flex-row items-stretch justify-between gap-5'>
+                                <span
+                                  title={
+                                    item.source_project_flock_kandang.kandang
+                                      .name
+                                  }
+                                  className='text-sm text-base-content self-center text-nowrap truncate'
+                                >
+                                  {
+                                    item.source_project_flock_kandang.kandang
+                                      .name
+                                  }
+                                </span>
+
+                                <div className='w-px bg-base-content/10' />
+                              </div>
+                            }
+                            className={{
+                              inputPrefix:
+                                'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
+                              inputPrefixSuffixWrapper: 'grid grid-cols-2',
+                              inputWrapper: 'border-l-0 pl-5',
+                            }}
+                          />
+                        );
+                      })}
+                    </div>
+                  )}
+              </div>
+
+              {/* Destination Kandang */}
+              <div className='mt-3 flex flex-col'>
+                <span className='w-fit py-2 text-xs font-semibold flex flex-row items-center gap-3'>
+                  <span className='text-nowrap'>
+                    Kandang Tujuan{' '}
+                    <span className='tooltip tooltip-error' data-tip='required'>
+                      <span className='text-error'> *</span>
+                    </span>
+                  </span>
+
+                  <div className='w-px h-5 bg-base-content/10' />
+
+                  <StatusBadge
+                    color={
+                      totalAvailableChickenForTransfer < 0 ? 'error' : 'neutral'
+                    }
+                    text={`Sisa transfer: ${formatNumber(
+                      totalAvailableChickenForTransfer,
+                      'en-US'
+                    )} ekor`}
+                    className={{
+                      badge: 'text-nowrap',
+                    }}
+                  />
+                </span>
+
+                {transferToLaying?.targets.length === 0 && (
+                  <span className='text-sm text-base-content/50 italic'>
+                    Belum ada kandang tujuan yang dipilih
+                  </span>
+                )}
+
+                {transferToLaying?.targets &&
+                  transferToLaying?.targets.length > 0 && (
+                    <div className='flex flex-col gap-3'>
+                      {transferToLaying?.targets.map((item, index) => {
+                        return (
+                          <NumberInput
+                            key={`flockDestinationKandangs-${item.target_project_flock_kandang.id}-${index}`}
+                            name={`flockDestinationKandangs.${index}.quantity`}
+                            placeholder='Masukkan Kuantitas'
+                            value={item.qty}
+                            readOnly
+                            inputPrefix={
+                              <div className='w-full h-full py-1 flex flex-row items-stretch justify-between gap-5'>
+                                <span
+                                  title={
+                                    item.target_project_flock_kandang.kandang
+                                      .name
+                                  }
+                                  className='text-sm text-base-content self-center text-nowrap truncate'
+                                >
+                                  {
+                                    item.target_project_flock_kandang.kandang
+                                      .name
+                                  }
+                                </span>
+
+                                <div className='w-px bg-base-content/10' />
+                              </div>
+                            }
+                            className={{
+                              inputPrefix:
+                                'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
+                              inputPrefixSuffixWrapper: 'grid grid-cols-2',
+                              inputWrapper: 'border-l-0 pl-5',
+                            }}
+                          />
+                        );
+                      })}
+                    </div>
+                  )}
+              </div>
+            </div>
+
+            <div className='w-full p-4 flex flex-col border-y border-base-content/10'>
+              <h4 className='text-base font-medium text-base-content/50 font-roboto'>
+                Informasi Umum
+              </h4>
+
+              <NumberInput
+                name='totalQuantity'
+                label='Jumlah Transfer'
+                placeholder='Total Kuantitas Transfer'
+                value={totalTransferedChicken}
+                readOnly
+                errorMessage={
+                  totalAvailableChickenForTransfer < 0
+                    ? `Jumlah transfer melebihi ketersediaan (${formatNumber(totalEnteredChickenForTransfer, 'en-US')} ayam)`
+                    : ''
+                }
+              />
+
+              <TextArea
+                required
+                name='reason'
+                label='Catatan'
+                placeholder='Alasan Transfer'
+                rows={4}
+                value={transferToLaying?.notes}
+                readOnly
+              />
+            </div>
+          </>
+        )}
+
+        {isLoadingTransferToLaying && (
+          <div className='w-full flex-1 flex flex-col items-center justify-center'>
+            <span className='loading loading-spinner loading-lg' />
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default TransferToLayingDetailModal;
diff --git a/src/components/pages/production/transfer-to-laying/TransferToLayingFormModal.tsx b/src/components/pages/production/transfer-to-laying/TransferToLayingFormModal.tsx
index 85bb4a3f..9f71fdc5 100644
--- a/src/components/pages/production/transfer-to-laying/TransferToLayingFormModal.tsx
+++ b/src/components/pages/production/transfer-to-laying/TransferToLayingFormModal.tsx
@@ -424,7 +424,7 @@ const TransferToLayingFormModal = () => {
   useEffect(() => {
     formik.setFieldValue('totalQuantity', totalTransferedChicken);
     formik.setFieldValue('maxTotalQuantity', totalTransferedChicken);
-  }, [totalTransferedChicken]);
+  }, [totalTransferedChicken, formik.values.flockDestinationKandangs]);
 
   return (
     <>
@@ -465,6 +465,7 @@ const TransferToLayingFormModal = () => {
               </h4>
 
               <DateInput
+                required
                 name='transfer_date'
                 label='Tanggal'
                 placeholder='Tanggal'
@@ -480,6 +481,7 @@ const TransferToLayingFormModal = () => {
               />
 
               <SelectInputRadio
+                required
                 label='Flock Asal'
                 placeholder='Pilih Flock Asal'
                 value={formik.values.flockSource}
@@ -492,6 +494,7 @@ const TransferToLayingFormModal = () => {
               />
 
               <SelectInputRadio
+                required
                 label='Flock Tujuan'
                 placeholder='Pilih Flock Tujuan'
                 value={formik.values.flockDestination}
@@ -776,7 +779,10 @@ const TransferToLayingFormModal = () => {
                 {/* Source Kandang */}
                 <div className='flex flex-col'>
                   <span className='w-full py-2 text-xs font-semibold'>
-                    Kandang Asal
+                    Kandang Asal{' '}
+                    <span className='tooltip tooltip-error' data-tip='required'>
+                      <span className='text-error'> *</span>
+                    </span>
                   </span>
 
                   {formik.values.flockSourceKandangs.length === 0 && (
@@ -845,7 +851,15 @@ const TransferToLayingFormModal = () => {
                 {/* Destination Kandang */}
                 <div className='mt-3 flex flex-col'>
                   <span className='w-fit py-2 text-xs font-semibold flex flex-row items-center gap-3'>
-                    <span className='text-nowrap'>Kandang Tujuan</span>
+                    <span className='text-nowrap'>
+                      Kandang Tujuan{' '}
+                      <span
+                        className='tooltip tooltip-error'
+                        data-tip='required'
+                      >
+                        <span className='text-error'> *</span>
+                      </span>
+                    </span>
 
                     <div className='w-px h-5 bg-base-content/10' />
 
@@ -946,13 +960,14 @@ const TransferToLayingFormModal = () => {
                   isError={totalAvailableChickenForTransfer < 0}
                   errorMessage={
                     totalAvailableChickenForTransfer < 0
-                      ? 'Jumlah transfer melebihi ketersediaan'
+                      ? `Jumlah transfer melebihi ketersediaan (${formatNumber(totalEnteredChickenForTransfer, 'en-US')} ayam)`
                       : ''
                   }
                   disabled
                 />
 
                 <TextArea
+                  required
                   name='reason'
                   label='Catatan'
                   placeholder='Alasan Transfer'
diff --git a/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx b/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
index 4cdb4a60..f38a932f 100644
--- a/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
+++ b/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
@@ -74,7 +74,7 @@ const RowOptionsMenu = ({
         <div className='flex flex-col bg-base-100 rounded-xl'>
           <RequirePermission permissions='lti.production.transfer_to_laying.detail'>
             <Button
-              href={`/production/transfer-to-laying/detail/?transferToLayingId=${props.row.original.id}`}
+              href={`/production/transfer-to-laying/?action=detail&id=${props.row.original.id}`}
               variant='ghost'
               color='none'
               className='p-3 justify-start text-sm font-semibold w-full'
@@ -240,6 +240,10 @@ const TransferToLayingsTable = () => {
       header: 'Tanggal Transfer',
       cell: (props) => formatDate(props.getValue() as string, 'DD MMM YYYY'),
     },
+    {
+      accessorKey: 'transfer_number',
+      header: 'No. Transfer',
+    },
     {
       accessorKey: 'flock_source',
       header: 'Flock Asal',
@@ -266,6 +270,13 @@ const TransferToLayingsTable = () => {
       accessorKey: 'notes',
       header: 'Alasan Transfer',
       enableSorting: false,
+      cell: (props) => {
+        return (
+          <span title={props.row.original.notes} className='line-clamp-1'>
+            {props.row.original.notes}
+          </span>
+        );
+      },
     },
     {
       header: 'Status',
diff --git a/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema.ts b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema.ts
index 70886d8d..7b362709 100644
--- a/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema.ts
+++ b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema.ts
@@ -59,7 +59,8 @@ export const TransferToLayingFormSchema: Yup.ObjectSchema<TransferToLayingFormSc
       .min(0, 'Jumlah transfer minimal 0')
       .max(
         Yup.ref('maxTotalQuantity'),
-        ({ max }) => `Kuantitas maksimal ${formatNumber(max)}!`
+        ({ max }) =>
+          `Kuantitas melebihi kapasitas kandang tujuan. Kuantitas maksimal ${formatNumber(max, 'en-US')}!`
       )
       .required('Jumlah transfer wajib diisi!'),
 
@@ -79,7 +80,7 @@ export const TransferToLayingFormSchema: Yup.ObjectSchema<TransferToLayingFormSc
             .min(0, 'Kuantitas minimal 0!')
             .max(
               Yup.ref('maxQuantity'),
-              ({ max }) => `Kuantitas maksimal ${formatNumber(max)}!`
+              ({ max }) => `Kuantitas maksimal ${formatNumber(max, 'en-US')}!`
             )
             .required('Kuantitas wajib diisi!'),
 
@@ -101,7 +102,8 @@ export const TransferToLayingFormSchema: Yup.ObjectSchema<TransferToLayingFormSc
             .min(0, 'Kuantitas minimal 0!')
             .max(
               Yup.ref('maxQuantity'),
-              ({ max }) => `Kuantitas maksimal ${formatNumber(max)}!`
+              ({ max }) =>
+                `Kuantitas melebihi kapasitas kandang tujuan. Maks: ${formatNumber(max, 'en-US')}!`
             )
             .required('Kuantitas wajib diisi!'),
 
diff --git a/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
deleted file mode 100644
index a257af0d..00000000
--- a/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
+++ /dev/null
@@ -1,932 +0,0 @@
-'use client';
-
-import { useCallback, useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { useFormik } from 'formik';
-import { toast } from 'react-hot-toast';
-import useSWR from 'swr';
-
-import { Icon } from '@iconify/react';
-import Button from '@/components/Button';
-import RequirePermission from '@/components/helper/RequirePermission';
-import SelectInput, {
-  OptionType,
-  useSelect,
-} from '@/components/input/SelectInput';
-import TextArea from '@/components/input/TextArea';
-import { useModal } from '@/components/Modal';
-import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import DateInput from '@/components/input/DateInput';
-import NumberInput from '@/components/input/NumberInput';
-import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
-import ApprovalSteps, {
-  formatGroupedApprovalsToApprovalSteps,
-} from '@/components/pages/ApprovalSteps';
-
-import {
-  getFilledTransferToLayingFormInitialValues,
-  getTransferToLayingFormInitialValues,
-  TransferToLayingFormSchema,
-  TransferToLayingFormValues,
-  UpdateTransferToLayingFormSchema,
-} from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import {
-  TransferToLaying,
-  CreateTransferToLayingPayload,
-  UpdateTransferToLayingPayload,
-} from '@/types/api/production/transfer-to-laying';
-import { cn } from '@/lib/helper';
-
-import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
-import { ProjectFlock } from '@/types/api/production/project-flock';
-import { TRANSFER_TO_LAYING_APPROVAL_LINE } from '@/config/approval-line';
-import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
-import AlertErrorList from '@/components/helper/form/FormErrors';
-
-interface TransferToLayingFormProps {
-  type?: 'add' | 'edit' | 'detail';
-  initialValues?: TransferToLaying;
-}
-
-const TransferToLayingForm = ({
-  type = 'add',
-  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 { data: approvalHistory, isLoading: isLoadingApprovalHistory } = useSWR(
-    type === 'detail' && initialValues ? [String(initialValues.id)] : null,
-    ([id]: string[]) => TransferToLayingApi.getApprovalHistory(Number(id))
-  );
-
-  const createTransferToLayingHandler = useCallback(
-    async (payload: CreateTransferToLayingPayload) => {
-      const createTransferToLayingRes =
-        await TransferToLayingApi.create(payload);
-
-      if (isResponseError(createTransferToLayingRes)) {
-        setFormErrorMessage(createTransferToLayingRes.message);
-        return;
-      }
-
-      toast.success(createTransferToLayingRes?.message as string);
-      router.push('/production/transfer-to-laying');
-    },
-    [router]
-  );
-
-  const updateTransferToLayingHandler = useCallback(
-    async (
-      transferToLayingId: number,
-      payload: UpdateTransferToLayingPayload
-    ) => {
-      const updateKandangRes = await TransferToLayingApi.update(
-        transferToLayingId,
-        payload
-      );
-
-      if (updateKandangRes?.status === 'error') {
-        setFormErrorMessage(updateKandangRes.message);
-        return;
-      }
-
-      toast.success(updateKandangRes?.message as string);
-      router.refresh();
-      router.push('/production/transfer-to-laying');
-    },
-    [router]
-  );
-
-  // const formikInitialValues = useMemo<TransferToLayingFormValues>(() => {
-  //   return getTransferToLayingFormInitialValues(initialValues);
-  // }, [initialValues]);
-
-  const [formikInitialValues, setFormikInitialValues] = useState(
-    getTransferToLayingFormInitialValues()
-  );
-
-  const formik = useFormik<TransferToLayingFormValues>({
-    initialValues: formikInitialValues,
-    validationSchema:
-      type === 'edit'
-        ? UpdateTransferToLayingFormSchema
-        : TransferToLayingFormSchema,
-    onSubmit: async (values) => {
-      setFormErrorMessage('');
-
-      const transferToLayingPayload: CreateTransferToLayingPayload = {
-        transfer_date: values.transfer_date as string,
-        source_project_flock_id: values.flockSource?.value as number,
-        target_project_flock_id: values.flockDestination?.value as number,
-        totalQuantity: values.totalQuantity as number,
-
-        source_kandangs: values.flockSourceKandangs?.map((kandang) => ({
-          project_flock_kandang_id: kandang.kandang.value,
-          quantity: parseFloat(kandang.quantity as string),
-        })) as CreateTransferToLayingPayload['source_kandangs'],
-
-        target_kandangs: values.flockDestinationKandangs?.map((kandang) => ({
-          project_flock_kandang_id: kandang.kandang.value,
-          quantity: parseFloat(kandang.quantity as string),
-        })) as CreateTransferToLayingPayload['target_kandangs'],
-
-        reason: values.reason as string,
-      };
-
-      switch (type) {
-        case 'add':
-          await createTransferToLayingHandler(transferToLayingPayload);
-          break;
-
-        case 'edit':
-          await updateTransferToLayingHandler(
-            initialValues?.id as number,
-            transferToLayingPayload
-          );
-          break;
-      }
-    },
-  });
-
-  const { setValues: formikSetValues, values: formikValues } = formik;
-  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
-  const {
-    flockSourceKandangs: flockSourceKandangsValue,
-    flockDestinationKandangs: flockDestinationKandangsValue,
-    totalQuantity,
-  } = formikValues;
-
-  const deleteTransferToLayingClickHandler = () => {
-    deleteModal.openModal();
-  };
-
-  const approveClickHandler = () => {
-    approveModal.openModal();
-  };
-
-  const rejectClickHandler = () => {
-    rejectModal.openModal();
-  };
-
-  // Modal confirm click handler
-  const confirmationModalDeleteClickHandler = async () => {
-    setIsDeleteLoading(true);
-
-    try {
-      await TransferToLayingApi.delete(initialValues?.id as number);
-
-      toast.success('Berhasil menghapus data transfer ke laying!');
-      router.push('/production/transfer-to-laying');
-    } catch (error) {
-      toast.success('Gagal menghapus data transfer ke laying!');
-    } finally {
-      deleteModal.closeModal();
-      setIsDeleteLoading(false);
-    }
-  };
-
-  const confirmationModalApproveClickHandler = async (notes: string) => {
-    setIsApproveLoading(true);
-
-    const approveResponse = await TransferToLayingApi.approve(
-      initialValues?.id as number,
-      notes
-    );
-
-    if (isResponseSuccess(approveResponse)) {
-      approveModal.closeModal();
-
-      toast.success('Berhasil approve data transfer ke laying!');
-      router.push('/production/transfer-to-laying');
-    } else {
-      approveModal.closeModal();
-
-      toast.error('Gagal approve data transfer ke laying!');
-    }
-
-    setIsApproveLoading(false);
-  };
-
-  const confirmationModalRejectClickHandler = async (notes: string) => {
-    setIsRejectLoading(true);
-
-    const rejectResponse = await TransferToLayingApi.reject(
-      initialValues?.id as number,
-      notes
-    );
-
-    if (isResponseSuccess(rejectResponse)) {
-      rejectModal.closeModal();
-
-      toast.success('Berhasil reject data transfer ke laying!');
-      router.push('/production/transfer-to-laying');
-    } else {
-      rejectModal.closeModal();
-
-      toast.error('Gagal reject data transfer ke laying!');
-    }
-
-    setIsRejectLoading(false);
-  };
-
-  // flock source
-  const isFlockSourceKandangsRepeaterInputError = (
-    column: keyof TransferToLayingFormValues['flockSourceKandangs'][0],
-    idx: number
-  ) => {
-    return (
-      formik.touched.flockSourceKandangs?.[idx]?.[column] &&
-      Boolean(
-        formik.errors.flockSourceKandangs?.[idx] instanceof Object &&
-          formik.errors.flockSourceKandangs?.[idx]?.[column]
-      )
-    );
-  };
-
-  const flockSourceKandangsRepeaterInputErrorMessage = (
-    column: keyof TransferToLayingFormValues['flockSourceKandangs'][0],
-    idx: number
-  ) => {
-    return (
-      formik.errors.flockSourceKandangs?.[idx] as Record<string, string>
-    )?.[column];
-  };
-
-  const {
-    setInputValue: setFlockSourceInputValue,
-    options: flockSourceOptions,
-    isLoadingOptions: isLoadingFlockSourceOptions,
-    rawData: flockSources,
-    loadMore: loadMoreFlockSource,
-    hasMore: hasMoreFlockSource,
-  } = useSelect<ProjectFlock>(
-    '/production/project-flocks',
-    'id',
-    'flock_name',
-    'search',
-    {
-      category: 'GROWING',
-    }
-  );
-
-  const flockSourceChangeHandler = async (
-    val: OptionType | OptionType[] | null
-  ) => {
-    // Get flock source data for total quantity and kandang
-    const flockSource =
-      isResponseSuccess(flockSources) && val !== null
-        ? flockSources.data.find(
-            (item) => item.id === (val as OptionType).value
-          )
-        : undefined;
-
-    // Set total quantity and kandangs
-    if (flockSource) {
-      const mappedFlockKandangsAvailableQty =
-        await TransferToLayingApi.getMappedFlockKandangsAvailability(
-          flockSource.id
-        );
-
-      const formattedKandangs = flockSource.kandangs.map((item) => ({
-        kandang: {
-          value: item.project_flock_kandang_id,
-          label: item.name,
-        },
-        quantity: '',
-        maxQuantity:
-          (mappedFlockKandangsAvailableQty &&
-            mappedFlockKandangsAvailableQty[item.project_flock_kandang_id]
-              .available_qty) ??
-          0,
-      }));
-
-      let maxTotalQuantity = 0;
-      // flockSource.kandangs.forEach((item) => {
-      //   maxTotalQuantity += item.capacity;
-      // });
-      formattedKandangs.forEach((item) => {
-        maxTotalQuantity += item.maxQuantity;
-      });
-
-      formik.setFieldValue('totalQuantity', '');
-      formik.setFieldValue('maxTotalQuantity', maxTotalQuantity);
-      formik.setFieldValue('flockSourceKandangs', formattedKandangs);
-    } else {
-      formik.setFieldValue('totalQuantity', undefined);
-      formik.setFieldValue('flockSourceKandangs', undefined);
-      formik.setFieldValue('reason', '');
-    }
-
-    formik.setFieldTouched('flockSource', true);
-    formik.setFieldValue('flockSource', val);
-  };
-
-  // flock destination
-  const isFlockDestinationKandangsRepeaterInputError = (
-    column: keyof TransferToLayingFormValues['flockDestinationKandangs'][0],
-    idx: number
-  ) => {
-    return (
-      formik.touched.flockDestinationKandangs?.[idx]?.[column] &&
-      Boolean(
-        formik.errors.flockDestinationKandangs?.[idx] instanceof Object &&
-          formik.errors.flockDestinationKandangs?.[idx]?.[column]
-      )
-    );
-  };
-
-  const flockDestinationKandangsRepeaterInputErrorMessage = (
-    column: keyof TransferToLayingFormValues['flockDestinationKandangs'][0],
-    idx: number
-  ) => {
-    return (
-      formik.errors.flockDestinationKandangs?.[idx] as Record<string, string>
-    )?.[column];
-  };
-
-  const {
-    setInputValue: setFlockDestinationInputValue,
-    options: flockDestinationOptions,
-    isLoadingOptions: isLoadingFlockDestinationOptions,
-    rawData: flockDestinations,
-    loadMore: loadMoreFlockDestination,
-    hasMore: hasMoreFlockDestination,
-  } = useSelect<ProjectFlock>(
-    '/production/project-flocks',
-    'id',
-    'flock_name',
-    'search',
-    {
-      category: 'LAYING',
-    }
-  );
-
-  const flockDestinationChangeHandler = (
-    val: OptionType | OptionType[] | null
-  ) => {
-    // Get flock destination data for total quantity and kandang
-    const flockDestination =
-      isResponseSuccess(flockDestinations) && val !== null
-        ? flockDestinations.data.find(
-            (item) => item.id === (val as OptionType).value
-          )
-        : undefined;
-
-    // Set total quantity and kandangs
-    if (flockDestination) {
-      const formattedKandangs = flockDestination.kandangs.map((item) => ({
-        kandang: {
-          value: item.project_flock_kandang_id,
-          label: item.name,
-        },
-        quantity: '',
-
-        // TODO: integrate this later to real kandang capacity API
-        // maxQuantity: item.capacity ?? 0,
-        maxQuantity: item.capacity ?? Infinity,
-      }));
-
-      formik.setFieldValue('flockDestinationKandangs', formattedKandangs);
-    }
-
-    formik.setFieldTouched('flockDestination', true);
-    formik.setFieldValue('flockDestination', val);
-  };
-
-  const isShowApproveRejectButton =
-    initialValues &&
-    initialValues?.approval?.step_number === 1 &&
-    initialValues?.approval.action !== 'REJECTED';
-
-  const isShowDeleteButton =
-    initialValues &&
-    initialValues?.approval.action !== 'REJECTED' &&
-    initialValues?.approval.action !== 'APPROVED';
-
-  const isShowEditButton = isShowDeleteButton;
-
-  useEffect(() => {
-    const getFilledInitialValues = async () => {
-      if (initialValues) {
-        const filledInitialValues =
-          await getFilledTransferToLayingFormInitialValues(initialValues);
-
-        setFormikInitialValues(filledInitialValues);
-      }
-    };
-
-    getFilledInitialValues();
-  }, [initialValues, setFormikInitialValues]);
-
-  useEffect(() => {
-    formikSetValues(formikInitialValues);
-  }, [formikSetValues, formikInitialValues]);
-
-  useEffect(() => {
-    // calculate total quantity if kandangs quantity change
-    if (flockSourceKandangsValue && flockSourceKandangsValue.length > 0) {
-      let newTotalQuantity = 0;
-
-      flockSourceKandangsValue.forEach((item) => {
-        newTotalQuantity += parseFloat(item.quantity as string);
-      });
-
-      formik.setFieldValue('totalQuantity', newTotalQuantity);
-      formik.validateField('totalQuantity');
-    }
-  }, [formikSetValues, flockSourceKandangsValue]);
-
-  useEffect(() => {
-    // calculate total quantity if kandangs quantity change
-    if (
-      flockDestinationKandangsValue &&
-      flockDestinationKandangsValue.length > 0
-    ) {
-      let destinationKandangsTotalQuantity = 0;
-
-      flockDestinationKandangsValue.forEach((item) => {
-        destinationKandangsTotalQuantity += parseFloat(item.quantity as string);
-      });
-
-      if (
-        destinationKandangsTotalQuantity > parseFloat(String(totalQuantity))
-      ) {
-      }
-    }
-  }, [formikSetValues, flockDestinationKandangsValue]);
-
-  return (
-    <>
-      <section className='w-full max-w-3xl'>
-        <header className='flex flex-col gap-4'>
-          <Button
-            href='/production/transfer-to-laying'
-            variant='link'
-            className='w-fit p-0 text-primary'
-          >
-            <Icon icon='uil:arrow-left' width={24} height={24} />
-            Kembali
-          </Button>
-
-          <h1 className='text-2xl font-bold text-center'>
-            {type === 'add' && 'Tambah Transfer ke Laying'}
-            {type === 'edit' && 'Edit Transfer ke Laying'}
-            {type === 'detail' && 'Detail Transfer ke Laying'}
-          </h1>
-        </header>
-
-        {type === 'detail' &&
-          initialValues &&
-          !isLoadingApprovalHistory &&
-          isResponseSuccess(approvalHistory) && (
-            <div className='w-full my-4'>
-              <ApprovalSteps
-                approvals={formatGroupedApprovalsToApprovalSteps(
-                  TRANSFER_TO_LAYING_APPROVAL_LINE,
-                  approvalHistory.data,
-                  initialValues.approval
-                )}
-              />
-            </div>
-          )}
-
-        <div className='w-full my-4 flex flex-row justify-between gap-2'>
-          {type === 'detail' && (
-            <>
-              {isShowApproveRejectButton && (
-                <div className='w-full flex flex-row justify-end gap-2'>
-                  <RequirePermission permissions='lti.production.transfer_to_laying.approve'>
-                    <Button
-                      variant='outline'
-                      color='success'
-                      onClick={approveClickHandler}
-                      className='w-full sm:w-fit'
-                    >
-                      <Icon
-                        icon='material-symbols:check'
-                        width={24}
-                        height={24}
-                      />
-                      Approve
-                    </Button>
-                  </RequirePermission>
-
-                  <RequirePermission permissions='lti.production.transfer_to_laying.approve'>
-                    <Button
-                      variant='outline'
-                      color='error'
-                      onClick={rejectClickHandler}
-                      className='w-full sm:w-fit'
-                    >
-                      <Icon
-                        icon='material-symbols:close'
-                        width={24}
-                        height={24}
-                      />
-                      Reject
-                    </Button>
-                  </RequirePermission>
-                </div>
-              )}
-            </>
-          )}
-        </div>
-
-        <form
-          onSubmit={handleFormSubmit}
-          onReset={formik.handleReset}
-          className='w-full flex flex-col gap-6'
-        >
-          <div className='flex flex-col gap-4'>
-            <DateInput
-              required
-              label='Tanggal Transfer'
-              name='transfer_date'
-              placeholder='Masukkan tanggal transfer'
-              value={formik.values.transfer_date ?? ''}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              isError={
-                formik.touched.transfer_date &&
-                Boolean(formik.errors.transfer_date)
-              }
-              errorMessage={formik.errors.transfer_date}
-              readOnly={type === 'detail'}
-            />
-
-            <div className='flex flex-col sm:flex-row gap-4'>
-              <SelectInput
-                required
-                label='Flock Asal'
-                placeholder='Flock asal'
-                value={formik.values.flockSource as OptionType}
-                options={flockSourceOptions}
-                onChange={flockSourceChangeHandler}
-                isLoading={isLoadingFlockSourceOptions}
-                onInputChange={setFlockSourceInputValue}
-                onMenuScrollToBottom={loadMoreFlockSource}
-                isError={
-                  formik.touched.flockSource &&
-                  Boolean(typeof formik.errors.flockSource === 'string')
-                }
-                errorMessage={formik.errors.flockSource as string}
-                isDisabled={type === 'detail'}
-                isClearable
-              />
-
-              <SelectInput
-                required
-                label='Flock Tujuan'
-                placeholder='Flock tujuan'
-                value={formik.values.flockDestination as OptionType}
-                options={flockDestinationOptions}
-                onChange={flockDestinationChangeHandler}
-                isLoading={isLoadingFlockDestinationOptions}
-                onInputChange={setFlockDestinationInputValue}
-                onMenuScrollToBottom={loadMoreFlockDestination}
-                isError={
-                  formik.touched.flockDestination &&
-                  Boolean(typeof formik.errors.flockDestination === 'string')
-                }
-                errorMessage={formik.errors.flockDestination as string}
-                isDisabled={type === 'detail'}
-                isClearable
-              />
-            </div>
-
-            <NumberInput
-              required
-              name='totalQuantity'
-              label='Jumlah Transfer'
-              bottomLabel={
-                formikValues.maxTotalQuantity
-                  ? `Max: ${formikValues.maxTotalQuantity}`
-                  : undefined
-              }
-              placeholder='Masukkan jumlah transfer'
-              value={
-                formik.values.totalQuantity ? formik.values.totalQuantity : ''
-              }
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              isError={
-                formik.touched.totalQuantity &&
-                Boolean(formik.errors.totalQuantity)
-              }
-              errorMessage={formik.errors.totalQuantity}
-              disabled
-            />
-
-            <div className='flex flex-col gap-4'>
-              <div className='overflow-x-auto'>
-                <table className='table'>
-                  <thead>
-                    <tr>
-                      <th>Kandang Flock Asal</th>
-                      <th>Kuantitas</th>
-                    </tr>
-                  </thead>
-
-                  <tbody>
-                    {(!formik.values.flockSourceKandangs ||
-                      formik.values.flockSourceKandangs.length === 0) && (
-                      <tr>
-                        <td colSpan={2}>
-                          <p className='w-full text-center text-gray-400'>
-                            Pilih flock asal terlebih dahulu!
-                          </p>
-                        </td>
-                      </tr>
-                    )}
-
-                    {formik.values.flockSourceKandangs &&
-                      formik.values.flockSourceKandangs.map((kandang, idx) => (
-                        <tr key={idx}>
-                          <td>
-                            <SelectInput
-                              value={kandang.kandang}
-                              options={[]}
-                              isDisabled
-                              className={{
-                                wrapper: 'min-w-52',
-                              }}
-                            />
-                          </td>
-
-                          <td>
-                            <NumberInput
-                              required
-                              name={`flockSourceKandangs[${idx}].quantity`}
-                              bottomLabel={
-                                kandang.maxQuantity
-                                  ? `Max: ${kandang.maxQuantity}`
-                                  : undefined
-                              }
-                              placeholder='Masukkan kuantitas'
-                              value={kandang.quantity}
-                              onChange={formik.handleChange}
-                              onBlur={formik.handleBlur}
-                              isError={isFlockSourceKandangsRepeaterInputError(
-                                'quantity',
-                                idx
-                              )}
-                              errorMessage={flockSourceKandangsRepeaterInputErrorMessage(
-                                'quantity',
-                                idx
-                              )}
-                              readOnly={type === 'detail'}
-                              className={{
-                                wrapper: 'min-w-52',
-                              }}
-                            />
-                          </td>
-                        </tr>
-                      ))}
-                  </tbody>
-                </table>
-              </div>
-
-              <div className='overflow-x-auto'>
-                <table className='table'>
-                  <thead>
-                    <tr>
-                      <th>Kandang Flock Tujuan</th>
-                      <th>Kuantitas</th>
-                    </tr>
-                  </thead>
-
-                  <tbody>
-                    {(!formik.values.flockDestinationKandangs ||
-                      formik.values.flockDestinationKandangs.length === 0) && (
-                      <tr>
-                        <td colSpan={2}>
-                          <p className='w-full text-center text-gray-400'>
-                            Pilih flock tujuan terlebih dahulu!
-                          </p>
-                        </td>
-                      </tr>
-                    )}
-
-                    {formik.values.flockDestinationKandangs &&
-                      formik.values.flockDestinationKandangs.map(
-                        (kandang, idx) => (
-                          <tr key={idx}>
-                            <td>
-                              <SelectInput
-                                value={kandang.kandang}
-                                options={[]}
-                                isDisabled
-                                className={{
-                                  wrapper: 'min-w-52',
-                                }}
-                              />
-                            </td>
-
-                            <td>
-                              <NumberInput
-                                required
-                                name={`flockDestinationKandangs[${idx}].quantity`}
-                                bottomLabel={
-                                  kandang.maxQuantity
-                                    ? `Max: ${kandang.maxQuantity}`
-                                    : undefined
-                                }
-                                placeholder='Masukkan kuantitas'
-                                value={kandang.quantity}
-                                onChange={formik.handleChange}
-                                onBlur={formik.handleBlur}
-                                isError={isFlockDestinationKandangsRepeaterInputError(
-                                  'quantity',
-                                  idx
-                                )}
-                                errorMessage={flockDestinationKandangsRepeaterInputErrorMessage(
-                                  'quantity',
-                                  idx
-                                )}
-                                readOnly={type === 'detail'}
-                                className={{
-                                  wrapper: 'min-w-52',
-                                }}
-                              />
-                            </td>
-                          </tr>
-                        )
-                      )}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-
-            <TextArea
-              required
-              rows={5}
-              name='reason'
-              label='Alasan Transfer'
-              placeholder='Alasan transfer'
-              value={formik.values.reason}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              isError={formik.touched.reason && Boolean(formik.errors.reason)}
-              errorMessage={formik.errors.reason}
-              readOnly={type === 'detail'}
-              disabled={Boolean(formik.errors.flockSource)}
-            />
-          </div>
-
-          <AlertErrorList formErrorList={formErrorList} onClose={close} />
-
-          {formErrorMessage && (
-            <div role='alert' className='alert alert-error w-full'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{formErrorMessage}</span>
-            </div>
-          )}
-
-          <div className='flex flex-row justify-between gap-2 flex-wrap'>
-            {type !== 'add' && (
-              <div className='flex flex-row justify-start gap-2'>
-                {isShowDeleteButton && (
-                  <RequirePermission permissions='lti.production.transfer_to_laying.delete'>
-                    <Button
-                      type='button'
-                      color='error'
-                      onClick={deleteTransferToLayingClickHandler}
-                      className='px-4'
-                    >
-                      <Icon
-                        icon='material-symbols:delete-outline-rounded'
-                        width={24}
-                        height={24}
-                        className='justify-start text-sm'
-                      />
-                      Delete
-                    </Button>
-                  </RequirePermission>
-                )}
-
-                {type !== 'edit' && isShowEditButton && (
-                  <RequirePermission permissions='lti.production.transfer_to_laying.update'>
-                    <Button
-                      type='button'
-                      color='warning'
-                      href={`/production/transfer-to-laying/detail/edit/?transferToLayingId=${initialValues?.id}`}
-                      className='px-4'
-                    >
-                      <Icon
-                        icon='material-symbols:edit-outline'
-                        width={24}
-                        height={24}
-                        className='justify-start text-sm'
-                      />
-                      Edit
-                    </Button>
-                  </RequirePermission>
-                )}
-              </div>
-            )}
-
-            {type !== 'detail' && (
-              <div
-                className={cn('flex flex-row justify-end gap-2', {
-                  'w-full': type === 'add',
-                })}
-              >
-                <Button type='reset' color='warning' className='px-4'>
-                  Reset
-                </Button>
-
-                <RequirePermission
-                  permissions={
-                    type === 'add'
-                      ? 'lti.production.transfer_to_laying.create'
-                      : 'lti.production.transfer_to_laying.update'
-                  }
-                >
-                  <Button
-                    type='submit'
-                    color='primary'
-                    isLoading={formik.isSubmitting}
-                    disabled={formik.isSubmitting}
-                    className='px-4'
-                  >
-                    Submit
-                  </Button>
-                </RequirePermission>
-              </div>
-            )}
-          </div>
-        </form>
-      </section>
-
-      {type !== 'add' && (
-        <ConfirmationModal
-          ref={deleteModal.ref}
-          type='error'
-          text='Apakah anda yakin ingin menghapus data transfer ke laying ini?'
-          secondaryButton={{
-            text: 'Tidak',
-          }}
-          primaryButton={{
-            text: 'Ya',
-            color: 'error',
-            isLoading: isDeleteLoading,
-            onClick: confirmationModalDeleteClickHandler,
-          }}
-        />
-      )}
-
-      {type === 'detail' && (
-        <>
-          <ConfirmationModalWithNotes
-            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,
-            }}
-          />
-
-          <ConfirmationModalWithNotes
-            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,
-            }}
-          />
-        </>
-      )}
-    </>
-  );
-};
-
-export default TransferToLayingForm;
diff --git a/src/config/constant.ts b/src/config/constant.ts
index 30af4b0a..fff9fa92 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -408,34 +408,39 @@ export const FINANCE_INITIAL_BALANCE_STATUS = ['SALDO_AWAL'];
 
 export const FINANCE_INJECTION_STATUS = ['INJECTION'];
 
-export const APPROVAL_WORKFLOWS = [
-  {
-    key: 'PROJECT_FLOCKS',
-    steps: [
-      {
-        step_number: 1,
-        step_name: 'Pengajuan',
-      },
-      {
-        step_number: 2,
-        step_name: 'Aktif',
-      },
-    ],
-  },
-  {
-    key: 'RECORDINGS',
-    steps: [
-      {
-        step_number: 1,
-        step_name: 'Pengajuan',
-      },
-      {
-        step_number: 2,
-        step_name: 'Disetujui',
-      },
-    ],
-  },
-];
+export const APPROVAL_WORKFLOWS = {
+  PROJECT_FLOCKS: [
+    {
+      step_number: 1,
+      step_name: 'Pengajuan',
+    },
+    {
+      step_number: 2,
+      step_name: 'Aktif',
+    },
+  ],
+  RECORDINGS: [
+    {
+      step_number: 1,
+      step_name: 'Pengajuan',
+    },
+    {
+      step_number: 2,
+      step_name: 'Disetujui',
+    },
+  ],
+
+  TRANSFER_TO_LAYINGS: [
+    {
+      step_number: 1,
+      step_name: 'Pengajuan',
+    },
+    {
+      step_number: 2,
+      step_name: 'Disetujui',
+    },
+  ],
+};
 
 export const ACCEPTED_FILE_TYPE = {
   PDF: {
diff --git a/src/services/api/production/transfer-to-laying.ts b/src/services/api/production/transfer-to-laying.ts
index 85b556e3..22216e38 100644
--- a/src/services/api/production/transfer-to-laying.ts
+++ b/src/services/api/production/transfer-to-laying.ts
@@ -1,6 +1,10 @@
 import axios from 'axios';
 import { BaseApiService } from '@/services/api/base';
-import { BaseApiResponse, GroupedApprovals } from '@/types/api/api-general';
+import {
+  Approvals,
+  BaseApiResponse,
+  GroupedApprovals,
+} from '@/types/api/api-general';
 
 import {
   CreateTransferToLayingPayload,
@@ -202,6 +206,33 @@ export class TransferToLayingService extends BaseApiService<
       return undefined;
     }
   }
+
+  async getApprovalLineHistory(
+    transferToLayingId: number,
+    page: number = 1,
+    limit: number = 100
+  ) {
+    try {
+      const approvalHistoryRes = await httpClient<Approvals>('/approvals', {
+        query: {
+          module_name: 'TRANSFER_TO_LAYINGS',
+          module_id: transferToLayingId,
+          group_step_number: 'false',
+          page,
+          limit,
+          order_by_date: 'ASC',
+        },
+      });
+
+      return approvalHistoryRes;
+    } catch (error) {
+      if (axios.isAxiosError<Approvals>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
 }
 
 export const TransferToLayingApi = new TransferToLayingService(
diff --git a/src/types/api/api-general.d.ts b/src/types/api/api-general.d.ts
index d3deb616..00a26ba0 100644
--- a/src/types/api/api-general.d.ts
+++ b/src/types/api/api-general.d.ts
@@ -113,7 +113,7 @@ export type BaseGroupedApproval = {
   approvals: BaseApproval[];
 };
 
-export type Approvals = BaseApiResponse<BaseApproval>;
+export type Approvals = BaseApiResponse<BaseApproval[]>;
 
 export type GroupedApprovals = BaseApiResponse<BaseGroupedApproval[]>;