Merge branch 'feat/FE/US-76/TASK-129-130-137-integrate-api-daily-recording-growing' into 'feat/FE/US-76/daily-recording-growing'

[FEAT/FE][US#76/TASK#129-130-137] Integration API for Feature Daily Recording Growing

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

.gitignore

@@ -40,8 +40,5 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-# prettier
-.prettierrc
-
 # idea
 .idea

package.json

@@ -21,6 +21,7 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-hot-toast": "^2.6.0",
+    "react-number-format": "^5.4.4",
     "react-select": "^5.10.2",
     "swr": "^2.3.6",
     "tailwind-merge": "^3.3.1",
@@ -40,6 +41,7 @@
     "eslint": "^9",
     "eslint-config-next": "15.5.3",
     "husky": "^9.1.7",
+    "prettier": "3.6.2",
     "tailwindcss": "^4",
     "typescript": "^5"
   }

src/app/production/chickin/add/page.tsx

@@ -3,6 +3,7 @@
 import Button from '@/components/Button';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import Modal, { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
 import Table from '@/components/Table';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
@@ -14,7 +15,7 @@ import { Kandang } from '@/types/api/master-data/kandang';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 import { Icon } from '@iconify/react';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import useSWR from 'swr';
 
@@ -33,6 +34,10 @@ const AddChickin = () => {
   const [selectedKandang, setSelectedKandang] = useState<Kandang | undefined>(
     undefined
   );
+  const [projectFlockKandang, setProjectFlockKandang] =
+    useState<BaseApiResponse<ProjectFlockKandang>>();
+  const [isLoadingProjectFlockKandang, setIsLoadingProjectFlockKandang] =
+    useState(false);
   const [searchProjectFlock, setSearchProjectFlock] = useState('');
 
   // Fetch Data
@@ -41,44 +46,26 @@ const AddChickin = () => {
     (id: number) => ProjectFlockApi.getSingle(id)
   );
   const { data: listProjectFlock, isLoading: isLoadingListProjectFlock } =
-    useSWR(`${ProjectFlockApi.basePath}?${new URLSearchParams({
+    useSWR(
+      `${ProjectFlockApi.basePath}?${new URLSearchParams({
         search: searchProjectFlock,
-    }).toString()}`, ProjectFlockApi.getAllFetcher);
-
-  const getProjectFlockKandangUrl = `/kandangs/lookup`;
-  const {
-    data: projectFlockKandang,
-    isLoading: isLoadingProjectFlockKandang,
-    mutate: refreshProjectFlockKandang,
-  } = useSWR(getProjectFlockKandangUrl, () =>
-    ProjectFlockApi.customRequest<BaseApiResponse<ProjectFlockKandang>, 'GET'>(
-      getProjectFlockKandangUrl,
-      {
-        method: 'GET',
-        params: {
-          project_flock_id: projectFlockId ?? 0,
-          kandang_id: selectedKandang?.id,
-        },
-      }
-    )
+      }).toString()}`,
+      ProjectFlockApi.getAllFetcher
     );
 
+  const getProjectFlockKandangUrl = `/kandangs/lookup`;
   // Mapping Options
   const options = isResponseSuccess(listProjectFlock)
     ? listProjectFlock?.data.map((projectFlock) => {
         return {
           value: projectFlock.id,
-          label: `${projectFlock?.flock.name} - ${projectFlock?.category} - Periode ${projectFlock.period}` ,
+          label: `${projectFlock?.flock?.name} - ${projectFlock?.category} - Periode ${projectFlock.period}`,
         };
       })
     : [];
 
   const chickinModal = useModal();
-
-  // Use Effect
-  useEffect(() => {
-    refreshProjectFlockKandang();
-  }, [selectedKandang, refreshProjectFlockKandang]);
+  const alertModal = useModal();
 
   if (!projectFlockId) {
     router.back();
@@ -99,13 +86,33 @@ const AddChickin = () => {
   }
 
   // Handle Function
-  const handleChickinClick = (kandang: Kandang) => {
+  const handleChickinClick = async (kandang: Kandang) => {
+    setIsLoadingProjectFlockKandang(true);
     setSelectedKandang(kandang);
-    refreshProjectFlockKandang();
+    const ProjectFlockKandangRes = await ProjectFlockApi.customRequest<
+      BaseApiResponse<ProjectFlockKandang>,
+      'GET'
+    >(getProjectFlockKandangUrl, {
+      method: 'GET',
+      params: {
+        project_flock_id: projectFlockId ?? 0,
+        kandang_id: kandang.id,
+      },
+    });
+    if (isResponseSuccess(ProjectFlockKandangRes)) {
+      setProjectFlockKandang(ProjectFlockKandangRes);
+      setIsLoadingProjectFlockKandang(false);
+      if (
+        ProjectFlockKandangRes.data.available_quantity &&
+        ProjectFlockKandangRes.data.available_quantity > 0
+      ) {
         chickinModal.openModal();
+      } else {
+        alertModal.openModal();
+      }
+    }
   };
   const handleAfterSubmit = () => {
-    refreshProjectFlockKandang();
     chickinModal.closeModal();
     router.push('/production/chickin');
   };
@@ -126,7 +133,7 @@ const AddChickin = () => {
               </Button>
 
               <div className='flex flex-col gap-4 w-full my-4'>
-                <div className='max-w-1/4'>
+                <div className='max-w-full sm:max-w-1/2 md:max-w-3/5 lg:max-w-2/5'>
                   <SelectInput
                     required
                     isSearchable
@@ -134,8 +141,8 @@ const AddChickin = () => {
                     options={options}
                     isLoading={isLoadingListProjectFlock}
                     value={{
-                      label: `${projectFlock.data.flock.name} - ${projectFlock.data.category} - Periode ${projectFlock.data.period}`,
-                      value: projectFlock.data.id,
+                      label: `${projectFlock.data?.flock?.name} - ${projectFlock.data?.category} - Periode ${projectFlock.data?.period}`,
+                      value: projectFlock.data?.id,
                     }}
                     onChange={(val) =>
                       router.push(
@@ -152,7 +159,7 @@ const AddChickin = () => {
               </div>
             </header>
             <Table<Kandang>
-              data={projectFlock.data.kandangs}
+              data={projectFlock.data?.kandangs}
               columns={[
                 {
                   header: '#',
@@ -173,10 +180,10 @@ const AddChickin = () => {
                         <Button
                           color='success'
                           variant='outline'
-                          isLoading={isLoadingProjectFlockKandang}
                           onClick={() => {
                             handleChickinClick(props.row.original);
                           }}
+                          disabled={isLoadingProjectFlockKandang}
                         >
                           <Icon
                             icon='mdi:home-import-outline'
@@ -195,7 +202,7 @@ const AddChickin = () => {
                 containerClassName: cn({
                   'mb-20':
                     isResponseSuccess(projectFlock) &&
-                    projectFlock.data.kandangs?.length === 0,
+                    projectFlock.data?.kandangs?.length === 0,
                 }),
                 tableWrapperClassName: 'overflow-x-auto min-h-full!',
                 tableClassName: 'font-inter w-full table-auto min-h-full!',
@@ -232,14 +239,28 @@ const AddChickin = () => {
                 <ChickinForm
                   initialValues={{
                     project_flock_kandang: projectFlockKandang.data,
-                    created_user: projectFlock.data.created_user,
-                    created_at: projectFlock.data.created_at,
-                    updated_at: projectFlock.data.updated_at,
+                    created_user: projectFlock.data?.created_user,
+                    created_at: projectFlock.data?.created_at,
+                    updated_at: projectFlock.data?.updated_at,
+                    approval: projectFlock.data?.approval,
                   }}
                   afterSubmit={handleAfterSubmit}
                 />
               )}
           </Modal>
+          <ConfirmationModal
+            ref={alertModal.ref}
+            type='info'
+            text={`Persediaan Day Old Chick pada kandang (${selectedKandang?.name}) belum ada, mohon isi terlebih dahulu di bagian Persediaan!`}
+            secondaryButton={undefined}
+            primaryButton={{
+              text: 'Ya',
+              color: 'info',
+              onClick: () => {
+                alertModal.closeModal();
+              },
+            }}
+          />
         </>
       )}
     </>

src/app/production/chickin/detail/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from "@/components/helper/SuspenseHelper"
+
+const Layout = ({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>
+}
+
+export default Layout;

src/app/production/chickin/detail/page.tsx

@@ -0,0 +1,351 @@
+'use client';
+
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import Modal, { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import ChickinForm from '@/components/pages/production/chickin/form/ChickinForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { ChickinApi } from '@/services/api/production';
+import { BaseApiResponse } from '@/types/api/api-general';
+import {
+  Chickin,
+  ChickinApprovalPayload,
+} from '@/types/api/production/chickin';
+import { Icon } from '@iconify/react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import useSWR from 'swr';
+
+/**
+ * TODO: Refactor code - pindahin detail ke reuseable component
+ *       setelah implement approval and reject 
+ */
+
+const DetailChickin = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const chickinId = searchParams.get('chickinId');
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const confirmModal = useModal();
+  const deleteModal = useModal();
+  const chickinModal = useModal();
+  const {
+    data: chickin,
+    isLoading,
+    mutate: refreshChickin,
+  } = useSWR(chickinId, (id: number) => ChickinApi.getSingle(id));
+
+  const [isApprovedDisabled, setIsApprovedDisabled] = useState(
+    // chickin.data?.approval.step_number == 1 ? false : true
+    true
+  );
+  const [isRejectedDisabled, setIsRejectedDisabled] = useState(
+    !isApprovedDisabled
+  );
+  const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
+    !isApprovedDisabled ? 'APPROVED' : 'REJECTED'
+  );
+
+  if (!chickinId) {
+    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 (!isLoading && (!chickin || isResponseError(chickin))) {
+    router.replace('/404');
+    return;
+  }
+
+  if (!isResponseSuccess(chickin)) {
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  const confirmationModalClickHandler = async ({
+    action = 'APPROVED',
+  }: {
+    action: 'APPROVED' | 'REJECTED';
+  }) => {
+    if (chickin?.data.id === undefined) return;
+    setIsApproveLoading(true);
+    const approveChickinRes = await ChickinApi.customRequest<
+      BaseApiResponse<Chickin>,
+      ChickinApprovalPayload
+    >(`/approvals`, {
+      method: 'POST',
+      payload: {
+        action: action,
+        approvable_ids: [chickin.data.id],
+      },
+    });
+
+    if (isResponseSuccess(approveChickinRes)) {
+      if (refreshChickin) {
+        await refreshChickin();
+      }
+      toast.success(approveChickinRes.message as string);
+    }
+    if (isResponseError(approveChickinRes)) {
+      toast.error(approveChickinRes?.message as string);
+    }
+    confirmModal.closeModal();
+    setIsApproveLoading(false);
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+    const deleteProjectFlockRes = await ChickinApi.delete(
+      chickin.data?.id as number
+    );
+
+    if (isResponseSuccess(deleteProjectFlockRes)) {
+      toast.success(deleteProjectFlockRes?.message as string);
+      router.push('/production/chickin');
+    }
+    if (isResponseError(deleteProjectFlockRes)) {
+      toast.error(deleteProjectFlockRes?.message as string);
+    }
+    deleteModal.closeModal();
+    setIsDeleteLoading(false);
+  };
+
+  return (
+    <>
+      <div className='w-full p-4 flex flex-col justify-center gap-4'>
+        {isLoading && <span className='loading loading-spinner loading-xl' />}
+        {!isLoading && isResponseSuccess(chickin) && (
+          <>
+            {/* <div className='w-full flex flex-col sm:flex-row gap-2'>
+              <Button
+                variant='outline'
+                color='success'
+                onClick={(() => {
+                  if (chickin?.data.id) {
+                    setApprovalAction('APPROVED');
+                    confirmModal.openModal();
+                  }
+                })}
+                disabled={!chickin?.data.id || isApprovedDisabled}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='material-symbols:check' width={24} height={24} />
+                Approve
+              </Button>
+              <Button
+                variant='outline'
+                color='error'
+                onClick={() => {
+                  if (chickin?.data.id) {
+                    setApprovalAction('REJECTED');
+                    confirmModal.openModal();
+                  }
+                }}
+                disabled={!chickin?.data.id || isRejectedDisabled}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='mdi:times' width={24} height={24} />
+                Reject
+              </Button>
+            </div> */}
+            <Card
+              title='Informasi Umum'
+              variant='bordered'
+              className={{
+                wrapper: 'w-full',
+              }}
+            >
+              <div className='grid grid-cols-2 gap-4 mt-4'>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Flock</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.flock
+                        .name
+                    }
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Area</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.area
+                        .name
+                    }
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Kategori</div>
+                  <div className='text-sm'>
+                    {chickin.data.project_flock_kandang?.project_flock.category}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Lokasi</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.location
+                        .name
+                    }
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Periode</div>
+                  <div className='text-sm'>
+                    {chickin.data.project_flock_kandang?.project_flock.period}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Kandang</div>
+                  <div className='text-sm'>
+                    {chickin.data.project_flock_kandang?.kandang.name}
+                  </div>
+                </div>
+              </div>
+            </Card>
+            <Card
+              title='Detail Chickin'
+              variant='bordered'
+              className={{
+                wrapper: 'w-full',
+              }}
+            >
+              <div className='grid grid-cols-2 gap-4 mt-4'>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Flock Kandang</div>
+                  <div className='text-sm'>
+                    {
+                      chickin.data.project_flock_kandang?.project_flock.flock
+                        .name
+                    }{' '}
+                    - {chickin.data.project_flock_kandang?.kandang.name}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Tanggal Chickin</div>
+                  <div className='text-sm'>
+                    {chickin.data.chick_in_date
+                      ? new Date(chickin.data.chick_in_date).toLocaleDateString(
+                          'id-ID'
+                        )
+                      : '-'}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Jumlah (Ekor)</div>
+                  <div className='text-sm'>
+                    {chickin.data.quantity?.toLocaleString('id-ID')}
+                  </div>
+                </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-semibold text-sm'>Catatan</div>
+                  <div className='text-sm'>{chickin.data.note}</div>
+                </div>
+              </div>
+            </Card>
+            <div className='w-full flex flex-col sm:flex-row gap-2'>
+              <Button
+                color='error'
+                onClick={() => {
+                  deleteModal.openModal();
+                }}
+              >
+                <Icon icon='mdi:times' width={24} height={24} />
+                Delete
+              </Button>
+              <Button color='warning'
+                onClick={() => {
+                  chickinModal.openModal();
+                }}
+              >
+                <Icon icon='mdi:pencil-outline' width={24} height={24} />
+                Edit
+              </Button>
+            </div>
+          </>
+        )}
+      </div>
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${chickin?.data.project_flock_kandang?.project_flock.flock.name} - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+
+      <Modal ref={chickinModal.ref}>
+        <div className='flex flex-row justify-between items-center'>
+          <h1 className='text-xl font-semibold text-center mb-6'>
+            Chickin Kandang -{' '}
+            {chickin?.data?.project_flock_kandang &&
+              chickin?.data?.project_flock_kandang.kandang?.name}
+          </h1>
+          <Button
+            color='error'
+            variant='link'
+            onClick={chickinModal.closeModal}
+          >
+            <Icon
+              className='text-black'
+              icon='uil:times'
+              width={24}
+              height={24}
+            />
+          </Button>
+        </div>
+        <ChickinForm
+          initialValues={chickin?.data}
+          formType='edit'
+          afterSubmit={() => {
+            refreshChickin();
+            chickinModal.closeModal();
+          }}
+        />
+      </Modal>
+
+      <ConfirmationModal
+        ref={confirmModal.ref}
+        type={approvalAction == 'APPROVED' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${
+          approvalAction == 'APPROVED' ? 'approve' : 'reject'
+        } chickin berikut? (${
+          chickin?.data.project_flock_kandang?.project_flock.flock.name
+        } - ${chickin?.data.project_flock_kandang?.kandang.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: approvalAction == 'APPROVED' ? 'success' : 'error',
+          isLoading: isApproveLoading,
+          onClick: () => {
+            confirmationModalClickHandler({
+              action: approvalAction,
+            });
+          },
+        }}
+      />
+    </>
+  );
+};
+
+export default DetailChickin;

src/app/production/project-flock/detail/page.tsx

@@ -1,46 +1,51 @@
-'use client'
+'use client';
 
-
-import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm";
-import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
-import { ProjectFlockApi } from "@/services/api/production";
-import { useRouter, useSearchParams } from "next/navigation";
-import useSWR from "swr";
+import ProjectFlockForm from '@/components/pages/production/project-flock/form/ProjectFlockForm';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { ProjectFlockApi } from '@/services/api/production';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
 
 const ProjectFlockDetail = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
 
-  const projectFlockId = searchParams.get("projectFlockId");
+  const projectFlockId = searchParams.get('projectFlockId');
 
-  const { data: projectFlock, isLoading: isLoadingCostumer } = useSWR(
-    projectFlockId,
-    (id: number) => ProjectFlockApi.getSingle(id)
-  );
+  const {
+    data: projectFlock,
+    isLoading: isLoadingProjectFlock,
+    mutate: refreshProjectFlock,
+  } = useSWR(projectFlockId, (id: number) => ProjectFlockApi.getSingle(id));
 
-  if(!projectFlockId){
+  if (!projectFlockId) {
     router.back();
 
     return (
-      <div className="w-full flex flex-row justify-center items-center p-4">
-        <span className="loading loading-spinner loading-xl" />
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
       </div>
     );
   }
 
-  if(!isLoadingCostumer && (!projectFlock || isResponseError(projectFlock))){
-    router.replace("/404");
+  if (
+    !isLoadingProjectFlock &&
+    (!projectFlock || isResponseError(projectFlock))
+  ) {
+    router.replace('/404');
     return;
   }
 
   return (
-    <div className="w-full p-4 flex flex-row justify-center">
-      {isLoadingCostumer && <span className="loading loading-spinner loading-xl" />}
-      {!isLoadingCostumer && isResponseSuccess(projectFlock) && (
-        <ProjectFlockForm formType="detail" initialValues={projectFlock.data} />
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingProjectFlock && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingProjectFlock && isResponseSuccess(projectFlock) && (
+        <ProjectFlockForm formType='detail' initialValues={projectFlock.data} refreshProjectFlocks={refreshProjectFlock} />
       )}
     </div>
-  )
-}
+  );
+};
 
 export default ProjectFlockDetail;

src/app/production/project-flock/page.tsx

@@ -1,4 +1,3 @@
-import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm"
 import ProjectFlockTable from "@/components/pages/production/project-flock/ProjectFlockTable";
 
 const ProjectFlock = () => {

src/app/production/transfer-to-laying/add/page.tsx

@@ -0,0 +1,11 @@
+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;

src/app/production/transfer-to-laying/detail/edit/page.tsx

@@ -0,0 +1,148 @@
+'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';
+
+import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
+
+// TODO: delete dummy data
+const DUMMY_TRANSFER_TO_LAYING_EDIT: TransferToLaying = {
+  id: 1,
+  transfer_date: '2025-10-14',
+  flock_source: {
+    id: 1,
+    name: 'Flock asal test',
+  },
+  flock_destination: {
+    id: 2,
+    name: 'Flock tujuan destination',
+  },
+  quantity: 10,
+  kandangs: [
+    {
+      kandang: {
+        id: 1,
+        name: 'Kandang test',
+        status: 'ACTIVE',
+        location: {
+          id: 1,
+          name: 'test location',
+          address: 'test address 1',
+          area: { id: 1, name: 'test area 1' },
+        },
+        pic: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_user: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_at: '14-10-2025',
+        updated_at: '14-10-2025',
+      },
+      quantity: 8,
+    },
+    {
+      kandang: {
+        id: 1,
+        name: 'Kandang test 2',
+        status: 'ACTIVE',
+        location: {
+          id: 1,
+          name: 'test location',
+          address: 'test address 1',
+          area: { id: 1, name: 'test area 1' },
+        },
+        pic: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_user: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_at: '14-10-2025',
+        updated_at: '14-10-2025',
+      },
+      quantity: 2,
+    },
+  ],
+  reason: 'Test alasan',
+
+  created_user: {
+    id: 1,
+    id_user: 2,
+    email: 'test@gmail.com',
+    name: 'test',
+  },
+  created_at: '14-10-2025',
+  updated_at: '14-10-2025',
+};
+
+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>
+    );
+  }
+
+  // TODO: remove dummy data and integrate with real API
+  if (
+    !isLoadingTransferToLaying &&
+    (!transferToLaying ||
+      (isResponseError(transferToLaying) && !DUMMY_TRANSFER_TO_LAYING_EDIT))
+  ) {
+    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}
+        />
+      )} */}
+
+      {/* TODO: remove this dummy data and integrate to real API */}
+      <TransferToLayingForm
+        type='edit'
+        initialValues={DUMMY_TRANSFER_TO_LAYING_EDIT}
+      />
+    </div>
+  );
+};
+
+export default TransferToLayingEdit;

src/app/production/transfer-to-laying/detail/layout.tsx

@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;

src/app/production/transfer-to-laying/detail/page.tsx

@@ -0,0 +1,148 @@
+'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';
+
+import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
+
+// TODO: delete dummy data
+const DUMMY_TRANSFER_TO_LAYING_DETAIL: TransferToLaying = {
+  id: 1,
+  transfer_date: '2025-10-14',
+  flock_source: {
+    id: 1,
+    name: 'Flock asal test',
+  },
+  flock_destination: {
+    id: 2,
+    name: 'Flock tujuan destination',
+  },
+  quantity: 10,
+  kandangs: [
+    {
+      kandang: {
+        id: 1,
+        name: 'Kandang test',
+        status: 'ACTIVE',
+        location: {
+          id: 1,
+          name: 'test location',
+          address: 'test address 1',
+          area: { id: 1, name: 'test area 1' },
+        },
+        pic: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_user: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_at: '14-10-2025',
+        updated_at: '14-10-2025',
+      },
+      quantity: 8,
+    },
+    {
+      kandang: {
+        id: 1,
+        name: 'Kandang test 2',
+        status: 'ACTIVE',
+        location: {
+          id: 1,
+          name: 'test location',
+          address: 'test address 1',
+          area: { id: 1, name: 'test area 1' },
+        },
+        pic: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_user: {
+          id: 1,
+          id_user: 2,
+          email: 'test@gmail.com',
+          name: 'test',
+        },
+        created_at: '14-10-2025',
+        updated_at: '14-10-2025',
+      },
+      quantity: 2,
+    },
+  ],
+  reason: 'Test alasan',
+
+  created_user: {
+    id: 1,
+    id_user: 2,
+    email: 'test@gmail.com',
+    name: 'test',
+  },
+  created_at: '14-10-2025',
+  updated_at: '14-10-2025',
+};
+
+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>
+    );
+  }
+
+  // TODO: remove dummy data and integrate with real API
+  if (
+    !isLoadingTransferToLaying &&
+    (!transferToLaying ||
+      (isResponseError(transferToLaying) && !DUMMY_TRANSFER_TO_LAYING_DETAIL))
+  ) {
+    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}
+        />
+      )} */}
+
+      {/* TODO: remove this dummy data and integrate to real API */}
+      <TransferToLayingForm
+        type='detail'
+        initialValues={DUMMY_TRANSFER_TO_LAYING_DETAIL}
+      />
+    </div>
+  );
+};
+
+export default TransferToLayingDetail;

src/app/production/transfer-to-laying/page.tsx

@@ -0,0 +1,11 @@
+import TransferToLayingsTable from '@/components/pages/production/transfer-to-laying/TransferToLayingsTable';
+
+const TransferToLaying = () => {
+  return (
+    <section className='w-full p-4'>
+      <TransferToLayingsTable />
+    </section>
+  );
+};
+
+export default TransferToLaying;

src/components/Card.tsx

@@ -6,6 +6,7 @@ import {
 } from 'react';
 
 import { cn } from '@/lib/helper';
+import Image from 'next/image';
 
 export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
   title?: string;
@@ -108,7 +109,7 @@ const Card = ({
     return (
       <div className={getCardClasses()} {...props}>
         <figure>
-          <img
+          <Image
             src={image}
             alt={imageAlt || title || 'Card image'}
             className={getImageClasses()}
@@ -129,7 +130,7 @@ const Card = ({
     <div className={getCardClasses()} {...props}>
       {image && (
         <figure>
-          <img
+          <Image
             src={image}
             alt={imageAlt || title || 'Card image'}
             className={getImageClasses()}

src/components/MainDrawer.tsx

@@ -10,6 +10,7 @@ import Menu from '@/components/menu/Menu';
 import MenuItem from '@/components/menu/MenuItem';
 import Navbar from '@/components/Navbar';
 import Collapse from '@/components/Collapse';
+import Button from '@/components/Button';
 
 import { useUiStore } from '@/stores/ui/ui.store';
 import { MAIN_DRAWER_LINKS } from '@/config/constant';
@@ -155,9 +156,15 @@ const MainDrawerMenu = () => {
 };
 
 const MainDrawerContent = () => {
+  const { setMainDrawerOpen } = useUiStore();
+
+  const closeMainDrawerHandler = () => {
+    setMainDrawerOpen(false);
+  };
+
   return (
     <div className='w-full p-4 flex flex-col gap-4'>
-      <div className='flex items-center gap-4'>
+      <div className='flex flex-row items-center gap-4'>
         <Image
           src='/assets/img/lti-logo.png'
           alt='MBU Logo'
@@ -167,6 +174,21 @@ const MainDrawerContent = () => {
         />
 
         <h1 className='text-xl font-bold'>LTI ERP</h1>
+
+        <div className='grow flex flex-row justify-end sm:hidden'>
+          <Button
+            variant='soft'
+            color='error'
+            onClick={closeMainDrawerHandler}
+            className='rounded-full'
+          >
+            <Icon
+              icon='material-symbols:close-rounded'
+              width={24}
+              height={24}
+            />
+          </Button>
+        </div>
       </div>
 
       <MainDrawerMenu />

src/components/PillBadge.tsx

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { cn } from '@/lib/helper';
+
+interface PillBadgeProps {
+  content: ReactNode;
+  color?: 'yellow' | 'blue' | 'green' | 'red' | 'purple' | 'gray';
+  className?: string;
+}
+
+const PillBadge = ({ content, color = 'gray', className }: PillBadgeProps) => {
+  return (
+    <div
+      className={cn(
+        'w-fit min-w-max px-2 py-0.5 flex justify-center items-center gap-1 rounded-full border border-gray-200 bg-gray-50 text-gray-500 drop-shadow-xs capitalize',
+        {
+          'border-yellow-200 bg-yellow-50 text-yellow-500': color === 'yellow',
+          'border-blue-200 bg-blue-50 text-blue-500': color === 'blue',
+          'border-green-200 bg-green-50 text-green-500': color === 'green',
+          'border-red-200 bg-red-50 text-red-500': color === 'red',
+          'border-purple-200 bg-purple-50 text-purple-500': color === 'purple',
+          'border-neutral-200 bg-neutral-50 text-neutral-500': color === 'gray',
+        },
+        className
+      )}
+    >
+      {content}
+    </div>
+  );
+};
+
+export default PillBadge;

src/components/Table.tsx

@@ -48,6 +48,8 @@ export interface TableProps<TData extends object> {
   sorting?: SortingState;
   setSorting?: OnChangeFn<SortingState>;
   manualSorting?: boolean;
+  rowSelection?: Record<string, boolean>;
+  setRowSelection?: OnChangeFn<Record<string, boolean>>;
 }
 
 const DUMMY_SKELETON_DATA = [{}, {}, {}, {}, {}];
@@ -86,6 +88,8 @@ const Table = <TData extends object>({
   sorting,
   setSorting,
   manualSorting = false,
+  rowSelection,
+  setRowSelection,
 }: TableProps<TData>) => {
   const isServerSideTable =
     totalItems !== undefined &&
@@ -137,6 +141,15 @@ const Table = <TData extends object>({
     };
   }
 
+  if (rowSelection && setRowSelection) {
+    tableOptions.onRowSelectionChange = setRowSelection;
+    tableOptions.state = {
+      ...tableOptions.state,
+      rowSelection,
+    };
+    tableOptions.getRowId = (row) => (row as { id: string }).id;
+  }
+
   const table = useReactTable(tableOptions);
   const { setPageSize } = table;
 

src/components/helper/RequireAuth.tsx

@@ -158,7 +158,7 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
 
   const { data: userResponse, isLoading: isLoadingUserResponse } =
     useSWRImmutable<GetMeResponse & { ok?: boolean }, unknown, SWRHttpKey>(
-      '/auth/get-me',
+      '/auth/sso/userinfo',
       httpClientFetcher,
       {
         shouldRetryOnError: false,

src/components/helper/form/FormActions.tsx

@@ -9,6 +9,11 @@ interface FormActionsProps<T> {
   editUrl?: string;
   onDelete?: () => void;
   disableSubmit?: boolean;
+  onApprove?: () => void;
+  onReject?: () => void;
+  isApproveLoading?: boolean;
+  isRejectLoading?: boolean;
+  showApproveReject?: boolean;
 }
 
 export const FormActions = <T,>({
@@ -17,11 +22,17 @@ export const FormActions = <T,>({
   editUrl,
   onDelete,
   disableSubmit = false,
+  onApprove,
+  onReject,
+  isApproveLoading = false,
+  isRejectLoading = false,
+  showApproveReject = false,
 }: FormActionsProps<T>) => {
   return (
     <div className='flex flex-row justify-between gap-2 flex-wrap'>
-      {type !== 'add' && onDelete && (
+      {type !== 'add' && (
         <div className='flex flex-row justify-start gap-2'>
+          {onDelete && (
             <Button
               type='button'
               color='error'
@@ -36,6 +47,7 @@ export const FormActions = <T,>({
               />
               Delete
             </Button>
+          )}
           {type !== 'edit' && editUrl && (
             <Button
               type='button'
@@ -52,6 +64,44 @@ export const FormActions = <T,>({
               Edit
             </Button>
           )}
+          {type === 'detail' && showApproveReject && (onApprove || onReject) && (
+            <>
+              {onApprove && (
+                <Button
+                  type='button'
+                  color='success'
+                  onClick={onApprove}
+                  className='px-4'
+                  isLoading={isApproveLoading}
+                >
+                  <Icon
+                    icon='material-symbols:check-circle-outline'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Approve
+                </Button>
+              )}
+              {onReject && (
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={onReject}
+                  className='px-4'
+                  isLoading={isRejectLoading}
+                >
+                  <Icon
+                    icon='material-symbols:cancel-outline'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Reject
+                </Button>
+              )}
+            </>
+          )}
         </div>
       )}
       {type !== 'detail' && (

src/components/input/DateInput.tsx

@@ -88,7 +88,7 @@ const DateInput = ({
 
       <div
         className={cn(
-          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 flex items-center',
+          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all duration-200 flex items-center',
           {
             'border-error': isError,
             'border-success!': isValid,

src/components/input/FileInput.tsx

@@ -70,7 +70,7 @@ const FileInput = ({
         onBlur={onBlur}
         disabled={disabled}
         className={cn(
-          'grow file-input w-full h-12 rounded-lg!',
+          'grow file-input w-full h-12 rounded',
           className?.input
         )}
         readOnly={readOnly}

src/components/input/NumberInput.tsx

@@ -1,415 +1,59 @@
 'use client';
 
-import {
-  ChangeEvent,
-  ChangeEventHandler,
-  FocusEventHandler,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { ChangeEvent, ReactNode } from 'react';
+import { NumericFormat, OnValueChange } from 'react-number-format';
+import TextInput, { TextInputProps } from '@/components/input/TextInput';
 
-import { cn } from '@/lib/helper';
-import Inputmask from 'inputmask';
-
-const createInputMask = (
-  maskType: MaskType,
-  decimals: number,
-  thousandSeparator: string,
-  decimalSeparator: string,
-  allowNegative: boolean,
-  oncomplete?: () => void,
-  onincomplete?: () => void,
-  oncleared?: () => void
-): Inputmask.Instance => {
-  const options: Inputmask.Options = {
-    alias: 'numeric',
-    groupSeparator: thousandSeparator,
-    radixPoint: decimalSeparator,
-    digits: decimals,
-    allowMinus: allowNegative,
-    rightAlign: false,
-    insertMode: true,
-    autoUnmask: false,
-    clearMaskOnLostFocus: false,
-    digitsOptional: decimals > 0,
-    placeholder: '0',
-    numericInput: false,
-    positionCaretOnClick: 'radixFocus',
-    greedy: true,
-    oncomplete,
-    onincomplete,
-    oncleared
-  };
-
-  return new Inputmask(options);
-};
-
-export type MaskType = 'currency' | 'weight' | 'decimal' | 'number' | 'text';
-
-export interface NumberInputProps {
-  label?: string;
-  bottomLabel?: string;
-  name: string;
-  value?: number | string;
-  placeholder?: string;
-
-  className?: {
-    wrapper?: string;
-    label?: string;
-    inputWrapper?: string;
-    input?: string;
-  };
-
-  isError?: boolean;
-  isValid?: boolean;
-  errorMessage?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  required?: boolean;
-  isLoading?: boolean;
-
-  startAdornment?: ReactNode;
-  endAdornment?: ReactNode;
-
-  onChange?: ChangeEventHandler<HTMLInputElement>;
-  onBlur?: FocusEventHandler<HTMLInputElement>;
-  onFocus?: FocusEventHandler<HTMLInputElement>;
-
-  maskType?: MaskType;
-  decimals?: number;
+interface NumberInputProps extends Omit<TextInputProps, 'type'> {
   thousandSeparator?: string;
   decimalSeparator?: string;
-  currencyPrefix?: string;
-  weightUnit?: string;
-
-  min?: number;
-  max?: number;
+  decimalScale?: number;
   allowNegative?: boolean;
-
-  oncomplete?: () => void;
-  onincomplete?: () => void;
-  oncleared?: () => void;
+  prefix?: string;
+  suffix?: string;
+  fixedDecimalScale?: boolean;
+  inputPrefix?: ReactNode;
+  inputSuffix?: ReactNode;
 }
 
 const NumberInput = ({
-                       label,
-                       bottomLabel,
-                       name,
-                       value,
-                       placeholder,
-                       className,
-                       isError,
-                       isValid,
-                       errorMessage,
-                       startAdornment,
-                       endAdornment,
-                       disabled = false,
-                       required = false,
-                       onChange,
-                       onBlur,
-                       onFocus,
-                       readOnly = false,
-                       isLoading = false,
-                       maskType = 'number',
-                       decimals = 0,
   thousandSeparator = ',',
   decimalSeparator = '.',
-                       currencyPrefix = 'Rp ',
-                       weightUnit = 'kg',
-                       allowNegative = false,
-                       oncomplete,
-                       onincomplete,
-                       oncleared,
-                     }: NumberInputProps) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const inputmaskRef = useRef<Inputmask.Instance | null>(null);
-  const [maskComplete, setMaskComplete] = useState<boolean>(false);
-  const [maskIncomplete, setMaskIncomplete] = useState<boolean>(false);
-  const [maskCleared, setMaskCleared] = useState<boolean>(false);
+  decimalScale = 5,
+  allowNegative = true,
+  onChange,
+  inputPrefix,
+  inputSuffix,
+  ...restProps
+}: NumberInputProps) => {
+  const valueChangeHandler: OnValueChange = (
+    numberFormatValues,
+    sourceInfo
+  ) => {
+    const newChangeEvent = sourceInfo.event as
+      | ChangeEvent<HTMLInputElement>
+      | undefined;
 
-  const getInputPrefix = (): string => {
-    switch (maskType) {
-      case 'currency':
-        return currencyPrefix;
-      default:
-        return '';
+    if (newChangeEvent) {
+      newChangeEvent.target.value = numberFormatValues.value;
+
+      onChange?.(newChangeEvent);
     }
   };
 
-  const getInputSuffix = (): string => {
-    switch (maskType) {
-      case 'weight':
-        return weightUnit;
-      default:
-        return '';
-    }
-  };
-
-  useEffect(() => {
-    if (inputRef.current && !readOnly && !disabled) {
-      if (inputmaskRef.current) {
-        try {
-          inputmaskRef.current.remove();
-        } catch (error) {
-          console.warn('Error removing Inputmask:', error);
-        }
-      }
-
-      const handleComplete = () => {
-        setMaskComplete(true);
-        setMaskIncomplete(false);
-        setMaskCleared(false);
-        if (oncomplete) oncomplete();
-      };
-
-      const handleIncomplete = () => {
-        setMaskIncomplete(true);
-        setMaskComplete(false);
-        setMaskCleared(false);
-        if (onincomplete) onincomplete();
-      };
-
-      const handleCleared = () => {
-        setMaskCleared(true);
-        setMaskComplete(false);
-        setMaskIncomplete(false);
-        if (oncleared) oncleared();
-      };
-
-          const im = createInputMask(
-        maskType,
-        decimals,
-        ',',
-        '.',
-        allowNegative,
-        handleComplete,
-        handleIncomplete,
-        handleCleared
-      );
-
-      try {
-        im.mask(inputRef.current);
-        inputmaskRef.current = im;
-      } catch (error) {
-        console.warn('Error applying Inputmask:', error);
-        inputmaskRef.current = null;
-      }
-    }
-
-    return () => {
-      if (inputmaskRef.current) {
-        try {
-          inputmaskRef.current.remove();
-        } catch (error) {
-          console.warn('Error removing Inputmask on cleanup:', error);
-        }
-      }
-    };
-  }, [maskType, decimals, thousandSeparator, decimalSeparator, allowNegative, readOnly, disabled, oncomplete, onincomplete, oncleared]);
-
-  useEffect(() => {
-    if (inputRef.current && value !== undefined) {
-      if (value === null || value === '') {
-        inputRef.current.value = '';
-      } else {
-        inputRef.current.value = String(value);
-      }
-    }
-  }, [value]);
-
-  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    const currentValue = (e.currentTarget as HTMLInputElement).value;
-    console.log('✅ After format:', currentValue);
-
-    if (onChange) {
-      const syntheticEvent = {
-        target: {
-          name,
-          value: currentValue,
-        },
-      } as ChangeEvent<HTMLInputElement>;
-      onChange(syntheticEvent);
-    }
-  };
-
-  const inputPrefix = getInputPrefix();
-  const inputSuffix = getInputSuffix();
-
   return (
-    <div
-      className={cn(
-        'w-full flex flex-col gap-2 text-start',
-        className?.wrapper
-      )}
-    >
-      {label && (
-        <label
-          htmlFor={name}
-          className={cn(
-            'w-full text-sm font-normal leading-5',
-            {
-              'text-error': isError,
-            },
-            className?.label
-          )}
-        >
-          {label}
-          {required && (
-            <>
-              {' '}
-              <span className='tooltip tooltip-error' data-tip='required'>
-                <span className='text-error'> *</span>
-              </span>
-            </>
-          )}
-        </label>
-      )}
-
-      <div className='relative flex'>
-        {inputPrefix && (
-          <div
-            className={cn(
-              'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
-              {
-                'bg-gray-100 border-gray-300': !disabled,
-                'bg-gray-50 border-gray-200': disabled,
-              }
-            )}
-          >
-            <span
-              className={cn(
-                'text-sm font-medium select-none whitespace-nowrap',
-                {
-                  'text-gray-600': !disabled,
-                  'text-gray-400': disabled,
-                }
-              )}
-            >
-              {inputPrefix}
-            </span>
-          </div>
-        )}
-
-        <div
-          className={cn(
-            'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white',
-            {
-              'border-error': isError,
-              'border-success!': isValid,
-              'rounded-l-none!': inputPrefix,
-              'rounded-r-none!': inputSuffix,
-              'input-disabled': disabled,
-              'cursor-not-allowed': disabled,
-              'bg-gray-50': disabled,
-            },
-            className?.inputWrapper
-          )}
-        >
-          {startAdornment && startAdornment}
-
-          <input
-            type='text'
-            id={name}
-            name={name}
-            ref={inputRef}
-            placeholder={placeholder || '0'}
-            onKeyUp={handleKeyUp}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            disabled={disabled}
-            className={cn(
-              'grow bg-transparent outline-none',
-              {
-                'cursor-not-allowed': disabled,
-                'text-gray-500': disabled,
-              },
-              className?.input
-            )}
-            readOnly={readOnly}
-            inputMode='text'
-            autoComplete='off'
-            spellCheck={false}
+    <NumericFormat
+      thousandSeparator={thousandSeparator}
+      decimalSeparator={decimalSeparator}
+      customInput={TextInput}
+      onValueChange={valueChangeHandler}
+      decimalScale={decimalScale}
+      allowNegative={allowNegative}
+      inputPrefix={inputPrefix}
+      inputSuffix={inputSuffix}
+      {...restProps}
     />
-
-          {(isLoading || endAdornment) && (
-            <div className='flex flex-row gap-2'>
-              {isLoading && <span className='loading loading-spinner' />}
-              {endAdornment && endAdornment}
-            </div>
-          )}
-        </div>
-
-        {inputSuffix && (
-          <div
-            className={cn(
-              'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
-              {
-                'bg-gray-100 border-gray-300': !disabled,
-                'bg-gray-50 border-gray-200': disabled,
-              }
-            )}
-          >
-            <span
-              className={cn(
-                'text-sm font-medium select-none whitespace-nowrap',
-                {
-                  'text-gray-600': !disabled,
-                  'text-gray-400': disabled,
-                }
-              )}
-            >
-              {inputSuffix}
-            </span>
-          </div>
-        )}
-      </div>
-
-      {(maskType === 'text' || (oncomplete || onincomplete || oncleared)) && (
-        <div className='flex gap-2 text-xs'>
-          <span
-            className={cn(
-              'px-2 py-1 rounded transition-all duration-200',
-              maskComplete
-                ? 'bg-green-100 text-green-700 border border-green-200'
-                : 'bg-gray-50 text-gray-400 border border-gray-200'
-            )}
-          >
-            Complete
-          </span>
-          <span
-            className={cn(
-              'px-2 py-1 rounded transition-all duration-200',
-              maskIncomplete
-                ? 'bg-yellow-100 text-yellow-700 border border-yellow-200'
-                : 'bg-gray-50 text-gray-400 border border-gray-200'
-            )}
-          >
-            Incomplete
-          </span>
-          <span
-            className={cn(
-              'px-2 py-1 rounded transition-all duration-200',
-              maskCleared
-                ? 'bg-blue-100 text-blue-700 border border-blue-200'
-                : 'bg-gray-50 text-gray-400 border border-gray-200'
-            )}
-          >
-            Cleared
-          </span>
-        </div>
-      )}
-
-      {!isError && bottomLabel && (
-        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
-      )}
-      {isError && errorMessage && (
-        <p className='w-full text-sm text-error'>{errorMessage}</p>
-      )}
-    </div>
   );
 };
 
 export default NumberInput;
-

src/components/input/PatternInput.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { ChangeEvent } from 'react';
+import { PatternFormat, OnValueChange } from 'react-number-format';
+import TextInput, { TextInputProps } from '@/components/input/TextInput';
+
+interface PatternInputProps extends Omit<TextInputProps, 'type'> {
+  type?: 'password' | 'tel' | 'text' | undefined;
+
+  /** Format pattern, e.g. "##/##/####", "(###) ###-####", "####-####-####" */
+  format: string;
+
+  /** Mask character for empty slots, e.g. "_" */
+  mask?: string;
+
+  /** Allow showing mask even when value is empty */
+  allowEmptyFormatting?: boolean;
+
+  patternChar?: string;
+}
+
+const PatternInput = ({
+                        type = 'text',
+                        format,
+                        mask = '_',
+                        allowEmptyFormatting = false,
+                        patternChar = '#',
+                        onChange,
+                        ...restProps
+                      }: PatternInputProps) => {
+  const valueChangeHandler: OnValueChange = (
+    patternFormatValues,
+    sourceInfo
+  ) => {
+    const newChangeEvent = sourceInfo.event as
+      | ChangeEvent<HTMLInputElement>
+      | undefined;
+
+    if (newChangeEvent) {
+      newChangeEvent.target.value = patternFormatValues.value;
+
+      onChange?.(newChangeEvent);
+    }
+  };
+
+  return (
+    <PatternFormat
+      type={type}
+      format={format}
+      mask={mask}
+      allowEmptyFormatting={allowEmptyFormatting}
+      patternChar={patternChar}
+      customInput={TextInput}
+      onValueChange={valueChangeHandler}
+      {...restProps}
+    />
+  );
+};
+
+export default PatternInput;

src/components/input/SelectInput.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { ComponentType, ReactNode, useEffect, useMemo, useState } from 'react';
+import useSWR from 'swr';
+
 import Select, {
   OptionProps,
   GroupBase,
@@ -11,7 +13,10 @@ import Select, {
 import CreatableSelect from 'react-select/creatable';
 import makeAnimated from 'react-select/animated';
 import { useDebounce } from 'use-debounce';
-import { cn } from '@/lib/helper';
+import { cn, getByPath } from '@/lib/helper';
+import { httpClientFetcher } from '@/services/http/client';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { BaseApiResponse } from '@/types/api/api-general';
 
 export interface OptionType {
   value: string | number;
@@ -48,6 +53,7 @@ interface SelectInputBaseProps<T = OptionType> {
   openMenu?: boolean;
   delay?: number;
   onInputChange?: (search: string) => void;
+  startAdornment?: ReactNode;
 }
 
 interface SelectInputProps<T = OptionType> extends SelectInputBaseProps<T> {
@@ -82,6 +88,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     delay = 300,
     createables = false,
     onInputChange,
+    startAdornment,
   } = props;
 
   const [internalInputValue, setInternalInputValue] = useState('');
@@ -144,7 +151,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
       <SelectComponent<T, boolean, GroupBase<T>>
         instanceId='select'
         value={value ?? (isMulti ? [] : null)}
-        onChange={handleChange}
+        onChange={onChange ? handleChange : undefined}
         options={options}
         menuIsOpen={openMenu}
         inputValue={internalInputValue}
@@ -160,7 +167,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         classNames={{
           control: ({ isFocused, isDisabled }) =>
             cn(
-              'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer!',
+              'w-full min-h-12! rounded 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,
@@ -176,16 +183,16 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           input: () => cn('text-gray-900'),
           indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
           dropdownIndicator: ({ isFocused }) =>
-            cn('p-1 rounded-md hover:bg-gray-100', {
+            cn('p-1 rounded hover:bg-gray-100', {
               'text-gray-900': isFocused,
               'text-gray-500': !isFocused,
               'text-error!': isError,
             }),
           menu: () =>
-            cn('border border-gray-200 rounded-lg bg-white shadow-lg!'),
+            cn('border border-gray-200 rounded! bg-base-100 shadow-lg!'),
           menuList: () => cn('p-2! max-h-60 overflow-auto'),
           option: ({ isFocused, isSelected }) =>
-            cn('mt-1 px-3 py-2 rounded-md cursor-pointer!', {
+            cn('mt-1 px-3 py-2 rounded cursor-pointer!', {
               'bg-indigo-600 text-white': isFocused,
               'bg-blue-500!': isSelected,
               'text-gray-700': !isFocused && !isSelected,
@@ -193,7 +200,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
           multiValue: ({ getValue, index }) => {
             const selectedValues = getValue() as T[];
             return cn(
-              'bg-indigo-50 rounded-md py-0.5 pl-2 pr-1 flex items-center gap-1!',
+              'bg-indigo-50 rounded py-0.5 pl-2 pr-1 flex items-center gap-1!',
               selectedValues[index]?.className
             );
           },
@@ -205,6 +212,28 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         components={{
           ...components,
           ...(optionComponent ? { Option: optionComponent } : {}),
+          ...(startAdornment ? {
+            Control: ({ children, innerRef, innerProps, menuIsOpen, isFocused, isDisabled }) => (
+              <div
+                ref={innerRef}
+                {...innerProps}
+                className={cn(
+                  'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer! flex items-center',
+                  {
+                    'border-red-500! ring-2 ring-red-200': isError,
+                    'border-indigo-500 ring-2 ring-indigo-200': isFocused,
+                    'border-gray-300': !isError && !isFocused,
+                    'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
+                  }
+                )}
+              >
+                <div className='flex-1 px-4! gap-1 flex items-center'>
+                  {startAdornment}
+                  {children}
+                </div>
+              </div>
+            ),
+          } : {}),
         }}
         menuPortalTarget={
           typeof document !== 'undefined' ? document.body : undefined
@@ -222,4 +251,45 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
   );
 };
 
+const useSelect = <T,>(
+  basePath: string,
+  valueKey: keyof T,
+  labelKey: keyof T,
+  searchKey: string = 'search',
+  params?: { [key: string]: string }
+) => {
+  const [inputValue, setInputValue] = useState('');
+
+  const optionsUrlParams = useMemo(() => {
+    return new URLSearchParams({
+      [searchKey]: inputValue ?? '',
+      ...params,
+    }).toString();
+  }, [inputValue, searchKey]);
+
+  const optionsUrl = `${basePath}?${optionsUrlParams}`;
+
+  const { data, isLoading } = useSWR(optionsUrl, async (url) => {
+    return await httpClientFetcher<BaseApiResponse<T[]>>(url);
+  });
+
+  const options = isResponseSuccess(data)
+    ? data.data.map((item) => {
+        return {
+          value: getByPath<T, number>(item, valueKey as string),
+          label: getByPath<T, string>(item, labelKey as string),
+        };
+      })
+    : [];
+
+  return {
+    inputValue,
+    setInputValue,
+    options,
+    isLoadingOptions: isLoading,
+    rawData: data,
+  };
+};
+
+export { useSelect };
 export default SelectInput;

src/components/input/TextArea.tsx

@@ -83,7 +83,7 @@ const TextArea = ({
 
       <textarea
         className={cn(
-          'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all bg-white',
+          'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded outline-none! transition-all bg-white',
           {
             'border-error': isError,
             'border-success!': isValid,

src/components/input/TextInput.tsx

@@ -31,6 +31,8 @@ export interface TextInputProps {
   errorMessage?: string;
   startAdornment?: ReactNode;
   endAdornment?: ReactNode;
+  inputPrefix?: ReactNode;
+  inputSuffix?: ReactNode;
   onChange?: ChangeEventHandler<HTMLInputElement>;
   onBlur?: FocusEventHandler<HTMLInputElement>;
 }
@@ -48,6 +50,8 @@ const TextInput = ({
   errorMessage,
   startAdornment,
   endAdornment,
+  inputPrefix,
+  inputSuffix,
   disabled = false,
   required = false,
   onChange,
@@ -85,6 +89,83 @@ const TextInput = ({
         </label>
       )}
 
+      {inputPrefix || inputSuffix ? (
+        <div className='relative flex'>
+          {inputPrefix && (
+            <div
+              className={cn(
+                'inline-flex items-center px-4 py-2 border border-r-0 rounded-l-md transition-all duration-200',
+                {
+                  'bg-gray-100 border-gray-300': !disabled,
+                  'bg-gray-50 border-gray-200': disabled,
+                }
+              )}
+            >
+              {inputPrefix}
+            </div>
+          )}
+
+          <div
+            className={cn(
+              'input h-12 text-base font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white',
+              {
+                'border-error': isError,
+                'border-success!': isValid,
+                'rounded-l-none!': inputPrefix,
+                'rounded-r-none!': inputSuffix,
+                'input-disabled': disabled,
+                'cursor-not-allowed': disabled,
+                'bg-gray-50': disabled,
+              },
+              className?.inputWrapper
+            )}
+          >
+            {startAdornment && startAdornment}
+
+            <input
+              type={type}
+              id={name}
+              name={name}
+              placeholder={placeholder}
+              value={value}
+              onChange={onChange}
+              onBlur={onBlur}
+              disabled={disabled}
+              className={cn(
+                'grow bg-transparent outline-none',
+                {
+                  'cursor-not-allowed': disabled,
+                  'text-gray-500': disabled,
+                },
+                className?.input
+              )}
+              readOnly={readOnly}
+            />
+
+            {(isLoading || endAdornment) && (
+              <div className='flex flex-row gap-2'>
+                {isLoading && <span className='loading loading-spinner' />}
+
+                {endAdornment && endAdornment}
+              </div>
+            )}
+          </div>
+
+          {inputSuffix && (
+            <div
+              className={cn(
+                'inline-flex items-center px-4 py-2 border border-l-0 rounded-r-md transition-all duration-200',
+                {
+                  'bg-gray-100 border-gray-300': !disabled,
+                  'bg-gray-50 border-gray-200': disabled,
+                }
+              )}
+            >
+              {inputSuffix}
+            </div>
+          )}
+        </div>
+      ) : (
         <div
           className={cn(
             'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white',
@@ -118,6 +199,7 @@ const TextInput = ({
             </div>
           )}
         </div>
+      )}
 
       {!isError && bottomLabel && (
         <p className='w-full text-sm opacity-60'>{bottomLabel}</p>

src/components/pages/inventory/movement/form/MovementForm.tsx

@@ -30,6 +30,7 @@ import { ProductWarehouseApi } from '@/services/api/inventory';
 import { toast } from 'react-hot-toast';
 import FileInput from '@/components/input/FileInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
+import Badge from '@/components/Badge';
 
 interface MovementFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -37,6 +38,7 @@ interface MovementFormProps {
 }
 
 const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
+  // ===== STATE MANAGEMENT =====
   const [, setMovementFormErrorMessage] = useState('');
   const [
     productWarehouseSelectInputValue,
@@ -44,17 +46,94 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   ] = useState('');
   const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
   const [selectedDeliveries, setSelectedDeliveries] = useState<number[]>([]);
+  const [warehouseSelectInputValue, setWarehouseSelectInputValue] =
+    useState('');
+  const [supplierSelectInputValue, setSupplierSelectInputValue] = useState('');
 
+  // ===== FORM HANDLERS =====
   const {
-    deleteModal,
     movementFormErrorMessage,
-    isDeleteLoading,
     createMovementHandler,
     updateMovementHandler,
-    deleteMovementClickHandler,
-    confirmationModalDeleteClickHandler,
   } = useMovementFormHandlers(initialValues?.id);
 
+  // ===== INTERFACES =====
+  interface WarehouseOptionType extends OptionType {
+    area?: string;
+    location?: string;
+  }
+
+  interface ProductWarehouseOptionType extends OptionType {
+    product_id: number;
+    warehouse_id: number;
+    warehouse_name: string;
+    quantity: number;
+  }
+
+  // ===== API DATA FETCHING =====
+  const allProductWarehousesUrl = `${ProductWarehouseApi.basePath}`;
+  const { data: allProductWarehouses } = useSWR(
+    allProductWarehousesUrl,
+    ProductWarehouseApi.getAllFetcher
+  );
+
+  const warehousesUrl = `${WarehouseApi.basePath}?${new URLSearchParams({ search: warehouseSelectInputValue }).toString()}`;
+  const { data: warehouses, isLoading: isLoadingWarehouses } = useSWR(
+    warehousesUrl,
+    WarehouseApi.getAllFetcher
+  );
+
+  const suppliersUrl = `${SupplierApi.basePath}?${new URLSearchParams({ search: supplierSelectInputValue }).toString()}`;
+  const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR(
+    suppliersUrl,
+    SupplierApi.getAllFetcher
+  );
+
+  // ===== DATA PROCESSING =====
+  const warehouseStockMap = useMemo(() => {
+    if (!isResponseSuccess(allProductWarehouses)) return new Map();
+
+    const stockMap = new Map<
+      number,
+      { totalQty: number; productCount: number }
+    >();
+
+    allProductWarehouses.data.forEach((pw) => {
+      const warehouseId = pw.warehouse.id;
+      const existing = stockMap.get(warehouseId) || {
+        totalQty: 0,
+        productCount: 0,
+      };
+
+      stockMap.set(warehouseId, {
+        totalQty: existing.totalQty + pw.quantity,
+        productCount: existing.productCount + 1,
+      });
+    });
+
+    return stockMap;
+  }, [allProductWarehouses]);
+
+  const warehouseOptions = isResponseSuccess(warehouses)
+    ? warehouses?.data.map((w) => {
+        warehouseStockMap.get(w.id);
+        return {
+          value: w.id,
+          label: w.name,
+          area: w.area?.name,
+          location:
+            'type' in w && (w.type === 'LOKASI' || w.type === 'KANDANG')
+              ? w.location?.name
+              : undefined,
+        };
+      })
+    : [];
+
+  const supplierOptions = isResponseSuccess(suppliers)
+    ? suppliers?.data.map((s) => ({ value: s.id, label: s.name }))
+    : [];
+
+  // ===== FORM INITIALIZATION =====
   const formikInitialValues = useMemo<MovementFormValues>(
     () => getMovementFormInitialValues(initialValues),
     [initialValues]
@@ -77,7 +156,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         if (d.document && d.document instanceof File) {
           documents.push(d.document);
           documentIndex = documents.length - 1;
-        } else {
         }
 
         return {
@@ -122,91 +200,39 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     },
   });
 
-  const addProduct = () => {
-    const newProducts = [
-      ...(formik.values.products || []),
-      {
-        product: null,
-        product_id: 0,
-        product_qty: 0,
-      },
-    ];
-    formik.setFieldValue('products', newProducts);
-  };
-
-  const removeProduct = useCallback(
-    (i: number) => {
-      const updatedProducts =
-        formik.values.products?.reduce((acc: ProductSchema[], item, index) => {
-          if (index !== i) {
-            acc.push(item);
+  // ===== PRODUCT WAREHOUSE FETCHING (after form initialization) =====
+  const getProductWarehousesUrl = useCallback(() => {
+    const productWarehouseParams = new URLSearchParams({
+      search: productWarehouseSelectInputValue,
+    });
+    if (formik.values.source_warehouse_id) {
+      productWarehouseParams.append(
+        'warehouse_id',
+        formik.values.source_warehouse_id.toString()
+      );
     }
-          return acc;
-        }, []) ?? [];
+    return `${ProductWarehouseApi.basePath}?${productWarehouseParams.toString()}`;
+  }, [formik.values.source_warehouse_id, productWarehouseSelectInputValue]);
 
-      formik.setFieldValue('products', updatedProducts);
-    },
-    [formik]
+  const productWarehousesUrl = getProductWarehousesUrl();
+  const { data: productWarehouses, isLoading: isLoadingProductWarehouses } =
+    useSWR(
+      formik.values.source_warehouse_id ? productWarehousesUrl : null,
+      ProductWarehouseApi.getAllFetcher
     );
 
-  const bulkRemoveProduct = useCallback(() => {
-    const updatedProducts =
-      formik.values.products?.filter(
-        (_, idx) => !selectedProducts.includes(idx)
-      ) ?? [];
-    formik.setFieldValue('products', updatedProducts);
-    setSelectedProducts([]);
-  }, [formik, selectedProducts]);
-
-  const addDelivery = () => {
-    formik.setFieldValue('deliveries', [
-      ...(formik.values.deliveries || []),
-      {
-        delivery_cost: undefined,
-        delivery_cost_per_item: undefined,
-        document: null,
-        driver_name: '',
-        vehicle_plate: '',
-        supplier: null,
-        supplier_id: 0,
-        products: [
-          {
-            product: null,
-            product_id: 0,
-            product_qty: 0,
-          },
-        ],
-      },
-    ]);
-  };
-
-  const removeDelivery = useCallback(
-    (i: number) => {
-      const updatedDeliveries =
-        formik.values.deliveries?.reduce(
-          (acc: DeliverySchema[], item, index) => {
-            if (index !== i) {
-              acc.push(item);
-            }
-            return acc;
-          },
-          []
-        ) ?? [];
-
-      formik.setFieldValue('deliveries', updatedDeliveries);
-    },
-    [formik]
-  );
-
-  const bulkRemoveDelivery = useCallback(() => {
-    const updatedDeliveries =
-      formik.values.deliveries?.filter(
-        (_, idx) => !selectedDeliveries.includes(idx)
-      ) ?? [];
-    formik.setFieldValue('deliveries', updatedDeliveries);
-    setSelectedDeliveries([]);
-  }, [formik, selectedDeliveries]);
+  const productWarehouseOptions = isResponseSuccess(productWarehouses)
+    ? productWarehouses?.data.map((pw) => ({
+        value: pw.product.id,
+        label: pw.product.name,
+        product_id: pw.product.id,
+        warehouse_id: pw.warehouse.id,
+        warehouse_name: pw.warehouse.name,
+        quantity: pw.quantity,
+      }))
+    : [];
 
+  // ===== HELPER FUNCTIONS =====
   const isRepeaterInputError = <T extends 'products' | 'deliveries'>(
     arrayName: T,
     column: T extends 'products' ? keyof ProductSchema : keyof DeliverySchema,
@@ -263,118 +289,98 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     };
   };
 
-  interface WarehouseOptionType extends OptionType {
-    area?: string;
-    location?: string;
-  }
-
-  interface ProductWarehouseOptionType extends OptionType {
-    product_id: number;
-    warehouse_id: number;
-    warehouse_name: string;
-    quantity: number;
-  }
-
-  const allProductWarehousesUrl = `${ProductWarehouseApi.basePath}`;
-  const { data: allProductWarehouses } = useSWR(
-    allProductWarehousesUrl,
-    ProductWarehouseApi.getAllFetcher
-  );
-
-  const warehouseStockMap = useMemo(() => {
-    if (!isResponseSuccess(allProductWarehouses)) return new Map();
-
-    const stockMap = new Map<
-      number,
-      { totalQty: number; productCount: number }
-    >();
-
-    allProductWarehouses.data.forEach((pw) => {
-      const warehouseId = pw.warehouse.id;
-      const existing = stockMap.get(warehouseId) || {
-        totalQty: 0,
-        productCount: 0,
+  // ===== EVENT HANDLERS =====
+  // Product Handlers
+  const addProduct = () => {
+    const newProducts = [
+      ...(formik.values.products || []),
+      {
+        product: null,
+        product_id: 0,
+        product_qty: 0,
+      },
+    ];
+    formik.setFieldValue('products', newProducts);
   };
 
-      stockMap.set(warehouseId, {
-        totalQty: existing.totalQty + pw.quantity,
-        productCount: existing.productCount + 1,
-      });
-    });
-
-    return stockMap;
-  }, [allProductWarehouses]);
-
-  // Warehouse selection
-  const [warehouseSelectInputValue, setWarehouseSelectInputValue] =
-    useState('');
-  const warehousesUrl = `${WarehouseApi.basePath}?${new URLSearchParams({ search: warehouseSelectInputValue }).toString()}`;
-  const { data: warehouses, isLoading: isLoadingWarehouses } = useSWR(
-    warehousesUrl,
-    WarehouseApi.getAllFetcher
-  );
-  const warehouseOptions = isResponseSuccess(warehouses)
-    ? warehouses?.data.map((w) => {
-        const stockInfo = warehouseStockMap.get(w.id);
-        const stockLabel = stockInfo
-          ? ` (Stock: ${stockInfo.totalQty.toLocaleString('id-ID')} items, ${stockInfo.productCount} produk)`
-          : ' (Kosong)';
-
-        return {
-          value: w.id,
-          label: `${w.name}${stockLabel}`,
-          area: w.area?.name,
-          location:
-            'type' in w && (w.type === 'LOKASI' || w.type === 'KANDANG')
-              ? w.location?.name
-              : undefined,
-        };
-      })
-    : [];
-
-  // Product Warehouse selection - Filter by source warehouse
-  const productWarehouseParams = new URLSearchParams({
-    search: productWarehouseSelectInputValue,
-  });
-  if (formik.values.source_warehouse_id) {
-    productWarehouseParams.append(
-      'warehouse_id',
-      formik.values.source_warehouse_id.toString()
-    );
+  const removeProduct = useCallback(
+    (i: number) => {
+      const updatedProducts =
+        formik.values.products?.reduce((acc: ProductSchema[], item, index) => {
+          if (index !== i) {
+            acc.push(item);
           }
-  const productWarehousesUrl = `${ProductWarehouseApi.basePath}?${productWarehouseParams.toString()}`;
-  const { data: productWarehouses, isLoading: isLoadingProductWarehouses } =
-    useSWR(
-      formik.values.source_warehouse_id ? productWarehousesUrl : null,
-      ProductWarehouseApi.getAllFetcher
-    );
-  const productWarehouseOptions = isResponseSuccess(productWarehouses)
-    ? productWarehouses?.data.map((pw) => ({
-        value: pw.product.id,
-        label: `${pw.product.name} - ${pw.warehouse.name} (Stock: ${pw.quantity.toLocaleString('id-ID')})`,
-        product_id: pw.product.id,
-        warehouse_id: pw.warehouse.id,
-        warehouse_name: pw.warehouse.name,
-        quantity: pw.quantity,
-      }))
-    : [];
+          return acc;
+        }, []) ?? [];
 
-  // Supplier selection
-  const [supplierSelectInputValue, setSupplierSelectInputValue] = useState('');
-  const suppliersUrl = `${SupplierApi.basePath}?${new URLSearchParams({ search: supplierSelectInputValue }).toString()}`;
-  const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR(
-    suppliersUrl,
-    SupplierApi.getAllFetcher
+      formik.setFieldValue('products', updatedProducts);
+    },
+    [formik]
   );
-  const supplierOptions = isResponseSuccess(suppliers)
-    ? suppliers?.data.map((s) => ({ value: s.id, label: s.name }))
-    : [];
 
-  // Handle cost calculation when delivery_cost changes
+  const bulkRemoveProduct = useCallback(() => {
+    const updatedProducts =
+      formik.values.products?.filter(
+        (_, idx) => !selectedProducts.includes(idx)
+      ) ?? [];
+    formik.setFieldValue('products', updatedProducts);
+    setSelectedProducts([]);
+  }, [formik, selectedProducts]);
+
+  // Delivery Handlers
+  const addDelivery = () => {
+    formik.setFieldValue('deliveries', [
+      ...(formik.values.deliveries || []),
+      {
+        delivery_cost: undefined,
+        delivery_cost_per_item: undefined,
+        document: null,
+        driver_name: '',
+        vehicle_plate: '',
+        supplier: null,
+        supplier_id: 0,
+        products: [
+          {
+            product: null,
+            product_id: 0,
+            product_qty: 0,
+          },
+        ],
+      },
+    ]);
+  };
+
+  const removeDelivery = useCallback(
+    (i: number) => {
+      const updatedDeliveries =
+        formik.values.deliveries?.reduce(
+          (acc: DeliverySchema[], item, index) => {
+            if (index !== i) {
+              acc.push(item);
+            }
+            return acc;
+          },
+          []
+        ) ?? [];
+
+      formik.setFieldValue('deliveries', updatedDeliveries);
+    },
+    [formik]
+  );
+
+  const bulkRemoveDelivery = useCallback(() => {
+    const updatedDeliveries =
+      formik.values.deliveries?.filter(
+        (_, idx) => !selectedDeliveries.includes(idx)
+      ) ?? [];
+    formik.setFieldValue('deliveries', updatedDeliveries);
+    setSelectedDeliveries([]);
+  }, [formik, selectedDeliveries]);
+
+  // Cost Calculation Handlers
   const handleDeliveryCostChange = useCallback(
-    (idx: number, value: string) => {
-      const numValue = parseFloat(value) || 0;
-      formik.setFieldValue(`deliveries.${idx}.delivery_cost`, numValue);
+    (idx: number, value: number) => {
+      formik.setFieldValue(`deliveries.${idx}.delivery_cost`, value);
 
       const delivery = formik.values.deliveries?.[idx];
       if (delivery) {
@@ -382,13 +388,13 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           (sum, p) => sum + p.product_qty,
           0
         );
-        if (productQty > 0 && numValue > 0) {
-          const perItem = numValue / productQty;
+        if (productQty > 0 && value > 0) {
+          const perItem = value / productQty;
           formik.setFieldValue(
             `deliveries.${idx}.delivery_cost_per_item`,
             perItem
           );
-        } else if (numValue === 0) {
+        } else if (value === 0) {
           formik.setFieldValue(`deliveries.${idx}.delivery_cost_per_item`, 0);
         }
       }
@@ -396,14 +402,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     [formik]
   );
 
-  // Handle cost calculation when delivery_cost_per_item changes
   const handleDeliveryCostPerItemChange = useCallback(
-    (idx: number, value: string) => {
-      const numValue = parseFloat(value) || 0;
-      formik.setFieldValue(
-        `deliveries.${idx}.delivery_cost_per_item`,
-        numValue
-      );
+    (idx: number, value: number) => {
+      formik.setFieldValue(`deliveries.${idx}.delivery_cost_per_item`, value);
 
       const delivery = formik.values.deliveries?.[idx];
       if (delivery) {
@@ -411,10 +412,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
           (sum, p) => sum + p.product_qty,
           0
         );
-        if (productQty > 0 && numValue > 0) {
-          const totalCost = numValue * productQty;
+        if (productQty > 0 && value > 0) {
+          const totalCost = value * productQty;
           formik.setFieldValue(`deliveries.${idx}.delivery_cost`, totalCost);
-        } else if (numValue === 0) {
+        } else if (value === 0) {
           formik.setFieldValue(`deliveries.${idx}.delivery_cost`, 0);
         }
       }
@@ -422,57 +423,23 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     [formik]
   );
 
-  // Auto-recalculate when product quantity changes
-  useEffect(() => {
-    formik.values.deliveries?.forEach((delivery, idx) => {
-      const productQty = delivery.products.reduce(
-        (sum, p) => sum + p.product_qty,
-        0
+  const handleDeliveryCostChangeWrapper = useCallback(
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseFloat(e.target.value) || 0;
+      handleDeliveryCostChange(idx, value);
+    },
+    [handleDeliveryCostChange]
   );
 
-      // If delivery_cost is set, recalculate delivery_cost_per_item
-      if (
-        delivery.delivery_cost &&
-        delivery.delivery_cost > 0 &&
-        productQty > 0
-      ) {
-        const perItem = delivery.delivery_cost / productQty;
-        if (Math.abs((delivery.delivery_cost_per_item || 0) - perItem) > 0.01) {
-          formik.setFieldValue(
-            `deliveries.${idx}.delivery_cost_per_item`,
-            perItem
+  const handleDeliveryCostPerItemChangeWrapper = useCallback(
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseFloat(e.target.value) || 0;
+      handleDeliveryCostPerItemChange(idx, value);
+    },
+    [handleDeliveryCostPerItemChange]
   );
-        }
-      }
-      // If delivery_cost_per_item is set, recalculate delivery_cost
-      else if (
-        delivery.delivery_cost_per_item &&
-        delivery.delivery_cost_per_item > 0 &&
-        productQty > 0
-      ) {
-        const totalCost = delivery.delivery_cost_per_item * productQty;
-        if (Math.abs((delivery.delivery_cost || 0) - totalCost) > 0.01) {
-          formik.setFieldValue(`deliveries.${idx}.delivery_cost`, totalCost);
-        }
-      }
-    });
-  }, [
-    formik.values.deliveries
-      ?.map((d) => d.products.reduce((sum, p) => sum + p.product_qty, 0))
-      .join(','),
-  ]);
-
-  useEffect(() => {
-    if (
-      formik.values.source_warehouse_id &&
-      type !== 'edit' &&
-      type !== 'detail'
-    ) {
-      formik.setFieldValue('products', []);
-      formik.setFieldValue('deliveries', []);
-    }
-  }, [formik.values.source_warehouse_id]);
 
+  // UTILITY FUNCTIONS
   const getFilteredProductWarehouseOptions = useCallback(() => {
     return (
       formik.values.products
@@ -495,31 +462,92 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     [productWarehouseOptions, type]
   );
 
-  const getProductQtyAdornment = useCallback(
+  const getProductQtyBottomLabel = useCallback(
     (productIdx: number) => {
-      if (type === 'detail') return null;
+      if (type === 'detail') return undefined;
       const product = formik.values.products?.[productIdx];
-      if (!product || !product.product_id) return null;
+      if (!product || !product.product_id) return undefined;
 
       const availableStock = getAvailableStock(product.product_id);
       const requestedQty = Number(product.product_qty) || 0;
       const remainingStock = availableStock - requestedQty;
 
       if (requestedQty > 0) {
+        return `Sisa: ${remainingStock.toLocaleString('en-US')}`;
+      }
+
+      return `Tersedia: ${availableStock.toLocaleString('en-US')}`;
+    },
+    [formik.values.products, getAvailableStock, type]
+  );
+
+  const getDeliveryProductQtyBottomLabel = useCallback(
+    (deliveryIdx: number, productIdx: number) => {
+      if (type === 'detail') return undefined;
+      const delivery = formik.values.deliveries?.[deliveryIdx];
+      if (!delivery) return undefined;
+
+      const deliveryProduct = delivery.products[productIdx];
+      if (!deliveryProduct || !deliveryProduct.product_id) return undefined;
+
+      const relatedProduct = formik.values.products?.find(
+        (p) => p.product_id === deliveryProduct.product_id
+      );
+      if (!relatedProduct) return undefined;
+
+      const totalQtyUsed =
+        formik.values.deliveries?.reduce((total, d, dIdx) => {
+          const productQty = d.products.reduce((sum, p, pIdx) => {
+            if (
+              p.product_id === deliveryProduct.product_id &&
+              !(dIdx === deliveryIdx && pIdx === productIdx)
+            ) {
+              return sum + (Number(p.product_qty) || 0);
+            }
+            return sum;
+          }, 0);
+          return total + productQty;
+        }, 0) || 0;
+
+      const availableQty = Number(relatedProduct.product_qty) - totalQtyUsed;
+      return `Tersedia: ${availableQty.toLocaleString('en-US')}`;
+    },
+    [formik.values.deliveries, formik.values.products, type]
+  );
+
+  const getWarehouseStockAdornment = useCallback(
+    (warehouseId: number) => {
+      const stockInfo = warehouseStockMap.get(warehouseId);
+      if (!stockInfo) {
         return (
-          <span className='text-sm text-gray-600 whitespace-nowrap'>
-            (sisa: {remainingStock.toLocaleString('id-ID')})
-          </span>
+          <Badge
+            variant='ghost'
+            color='neutral'
+            size='sm'
+            className={{ badge: 'whitespace-nowrap font-semibold' }}
+          >
+            Kosong
+          </Badge>
         );
       }
 
+      const { productCount } = stockInfo;
+      let color: 'neutral' | 'success' | 'warning' = 'neutral';
+      if (productCount === 0) color = 'warning';
+      else if (productCount > 0) color = 'success';
+
       return (
-        <span className='text-sm text-gray-600 whitespace-nowrap'>
-          (tersedia: {availableStock.toLocaleString('id-ID')})
-        </span>
+        <Badge
+          variant='soft'
+          color={color}
+          size='sm'
+          className={{ badge: 'whitespace-nowrap font-semibold' }}
+        >
+          Tersedia {productCount} produk
+        </Badge>
       );
     },
-    [formik.values.products, getAvailableStock, type]
+    [warehouseStockMap]
   );
 
   const getProductQtyError = useCallback(
@@ -532,7 +560,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       const requestedQty = Number(product.product_qty) || 0;
 
       if (requestedQty > availableStock) {
-        return `Qty melebihi stok tersedia! Maksimal: ${availableStock.toLocaleString('id-ID')}`;
+        return `Qty melebihi stok tersedia! Maksimal: ${availableStock.toLocaleString('en-US')}`;
       }
 
       return null;
@@ -618,6 +646,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     [formik.values.deliveries, formik.values.products, type]
   );
 
+  // ===== COMPUTED VALUES =====
   const invalidQtyRows = useMemo(
     () =>
       type === 'detail'
@@ -650,6 +679,54 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     );
   }, [formik.values.products, getProductQtyError, type]);
 
+  // ===== EFFECTS =====
+  useEffect(() => {
+    formik.values.deliveries?.forEach((delivery, idx) => {
+      const productQty = delivery.products.reduce(
+        (sum, p) => sum + p.product_qty,
+        0
+      );
+
+      if (
+        delivery.delivery_cost &&
+        delivery.delivery_cost > 0 &&
+        productQty > 0
+      ) {
+        const perItem = delivery.delivery_cost / productQty;
+        if (Math.abs((delivery.delivery_cost_per_item || 0) - perItem) > 0.01) {
+          formik.setFieldValue(
+            `deliveries.${idx}.delivery_cost_per_item`,
+            perItem
+          );
+        }
+      } else if (
+        delivery.delivery_cost_per_item &&
+        delivery.delivery_cost_per_item > 0 &&
+        productQty > 0
+      ) {
+        const totalCost = delivery.delivery_cost_per_item * productQty;
+        if (Math.abs((delivery.delivery_cost || 0) - totalCost) > 0.01) {
+          formik.setFieldValue(`deliveries.${idx}.delivery_cost`, totalCost);
+        }
+      }
+    });
+  }, [
+    formik.values.deliveries
+      ?.map((d) => d.products.reduce((sum, p) => sum + p.product_qty, 0))
+      .join(','),
+  ]);
+
+  useEffect(() => {
+    if (
+      formik.values.source_warehouse_id &&
+      type !== 'edit' &&
+      type !== 'detail'
+    ) {
+      formik.setFieldValue('products', []);
+      formik.setFieldValue('deliveries', []);
+    }
+  }, [formik.values.source_warehouse_id]);
+
   return (
     <>
       <section className='w-full'>
@@ -728,6 +805,13 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   errorMessage={formik.errors.source_warehouse_id as string}
                   isDisabled={type === 'detail'}
                   isClearable
+                  startAdornment={
+                    formik.values.source_warehouse_id
+                      ? getWarehouseStockAdornment(
+                          formik.values.source_warehouse_id
+                        )
+                      : undefined
+                  }
                 />
 
                 {/* Area and Location Info */}
@@ -790,6 +874,13 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   }
                   isDisabled={type === 'detail'}
                   isClearable
+                  startAdornment={
+                    formik.values.destination_warehouse_id
+                      ? getWarehouseStockAdornment(
+                          formik.values.destination_warehouse_id
+                        )
+                      : undefined
+                  }
                 />
 
                 {/* Area and Location Info */}
@@ -839,7 +930,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     <tr>
                       {type !== 'detail' && (
                         <th>
-                          <div className='flex justify-center'>
                           <CheckboxInput
                             name='select-all-products'
                             checked={
@@ -865,7 +955,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               checkbox: 'checkbox checkbox-sm',
                             }}
                           />
-                          </div>
                         </th>
                       )}
                       <th>
@@ -893,8 +982,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     {formik.values.products?.map((product, idx) => (
                       <tr key={`product-row-${idx}-${product.product_id}`}>
                         {type !== 'detail' && (
-                          <td>
-                            <div className='flex justify-center'>
+                          <td className='!align-middle'>
                             <CheckboxInput
                               name={`product-${idx}`}
                               checked={selectedProducts.includes(idx)}
@@ -917,7 +1005,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                 checkbox: 'checkbox checkbox-sm',
                               }}
                             />
-                            </div>
                           </td>
                         )}
                         <td>
@@ -967,14 +1054,17 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                           />
                         </td>
                         <td>
-                          <TextInput
+                          <NumberInput
                             required
-                            type='number'
                             name={`products.${idx}.product_qty`}
                             value={product.product_qty ?? ''}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
-                            endAdornment={getProductQtyAdornment(idx)}
+                            decimalScale={0}
+                            allowNegative={false}
+                            thousandSeparator=','
+                            decimalSeparator='.'
+                            bottomLabel={getProductQtyBottomLabel(idx)}
                             isError={
                               isRepeaterInputError(
                                 'products',
@@ -1061,7 +1151,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     <tr>
                       {type !== 'detail' && (
                         <th>
-                          <div className='flex justify-center'>
                           <CheckboxInput
                             name='select-all-deliveries'
                             checked={
@@ -1087,7 +1176,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               checkbox: 'checkbox checkbox-sm',
                             }}
                           />
-                          </div>
                         </th>
                       )}
                       <th>
@@ -1161,8 +1249,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                     {formik.values.deliveries?.map((delivery, idx) => (
                       <tr key={`delivery-row-${idx}`}>
                         {type !== 'detail' && (
-                          <td>
-                            <div className='flex justify-center'>
+                          <td className='!align-middle'>
                             <CheckboxInput
                               name={`delivery-${idx}`}
                               checked={selectedDeliveries.includes(idx)}
@@ -1176,9 +1263,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                   ]);
                                 } else {
                                   setSelectedDeliveries(
-                                      selectedDeliveries.filter(
-                                        (i) => i !== idx
-                                      )
+                                    selectedDeliveries.filter((i) => i !== idx)
                                   );
                                 }
                               }}
@@ -1187,7 +1272,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                                 checkbox: 'checkbox checkbox-sm',
                               }}
                             />
-                            </div>
                           </td>
                         )}
                         <td>
@@ -1230,13 +1314,16 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                           />
                         </td>
                         <td>
-                          <TextInput
+                          <NumberInput
                             required
-                            type='number'
                             name={`deliveries.${idx}.products.0.product_qty`}
                             value={delivery.products[0]?.product_qty ?? ''}
                             onChange={formik.handleChange}
                             onBlur={formik.handleBlur}
+                            decimalScale={0}
+                            allowNegative={false}
+                            thousandSeparator=','
+                            decimalSeparator='.'
                             isError={
                               isDeliveryProductInputError(idx, 0, 'product_qty')
                                 .isError || Boolean(getDeliveryQtyError(idx, 0))
@@ -1247,6 +1334,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               getDeliveryQtyError(idx, 0) ||
                               undefined
                             }
+                            bottomLabel={getDeliveryProductQtyBottomLabel(
+                              idx,
+                              0
+                            )}
                             readOnly={type === 'detail'}
                             className={{
                               wrapper: 'w-full min-w-48',
@@ -1373,13 +1464,13 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             required
                             name={`deliveries.${idx}.delivery_cost`}
                             value={delivery.delivery_cost || ''}
-                            onChange={(e) =>
-                              handleDeliveryCostChange(idx, e.target.value)
-                            }
+                            onChange={handleDeliveryCostChangeWrapper(idx)}
                             onBlur={formik.handleBlur}
-                            maskType='currency'
-                            decimals={0}
-                            min={0}
+                            decimalScale={0}
+                            allowNegative={false}
+                            thousandSeparator=','
+                            decimalSeparator='.'
+                            inputPrefix='Rp'
                             {...isRepeaterInputError(
                               'deliveries',
                               'delivery_cost',
@@ -1397,16 +1488,15 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                             required
                             name={`deliveries.${idx}.delivery_cost_per_item`}
                             value={delivery.delivery_cost_per_item || ''}
-                            onChange={(e) =>
-                              handleDeliveryCostPerItemChange(
-                                idx,
-                                e.target.value
-                              )
-                            }
+                            onChange={handleDeliveryCostPerItemChangeWrapper(
+                              idx
+                            )}
                             onBlur={formik.handleBlur}
-                            maskType='currency'
-                            decimals={0}
-                            min={0}
+                            decimalScale={0}
+                            allowNegative={false}
+                            thousandSeparator=','
+                            decimalSeparator='.'
+                            inputPrefix='Rp'
                             {...isRepeaterInputError(
                               'deliveries',
                               'delivery_cost_per_item',

src/components/pages/production/chickin/ChickinTable.tsx

@@ -11,8 +11,8 @@ import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
-import { cn } from '@/lib/helper';
-import { ChickinApi, ProjectFlockApi } from '@/services/api/production';
+import { cn, formatNumber } from '@/lib/helper';
+import { ChickinApi } from '@/services/api/production';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Chickin } from '@/types/api/production/chickin';
 import { Icon } from '@iconify/react';
@@ -57,13 +57,6 @@ const ChickinTable = () => {
     `${ChickinApi.basePath}${getTableFilterQueryString()}`,
     ChickinApi.getAllFetcher
   );
-  const {
-    data: projectFlocks,
-    isLoading: isLoadingProjectFlocks,
-  } = useSWR(
-    `${ProjectFlockApi.basePath}${getTableFilterQueryString()}`,
-    ProjectFlockApi.getAllFetcher
-  );
 
   const searchChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     updateFilter('search', event.target.value);
@@ -131,6 +124,13 @@ const ChickinTable = () => {
           {
             accessorFn: (row) => row.quantity,
             header: 'Jumlah Chickin',
+            cell: (props) => {
+              if (props.row.original.quantity) {
+                return formatNumber(props.row.original.quantity);
+              } else {
+                return '-';
+              }
+            }
           },
           {
             accessorFn: (row) => row.chick_in_date,
@@ -287,7 +287,7 @@ const RowOptionsMenu = ({
       )}
     >
       <Button
-        href={`/production/chickin/detail?projectFlockId=${props.row.original.id}`}
+        href={`/production/chickin/detail?chickinId=${props.row.original.id}`}
         variant='ghost'
         color='primary'
         className='justify-start text-sm'

src/components/pages/production/chickin/form/ChickinForm.tsx

@@ -11,7 +11,7 @@ import {
   ChickinFormValues,
   UpdateChickinFormSchema,
 } from '@/components/pages/production/chickin/form/ChickinForm.schema';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { use, useCallback, useEffect, useMemo, useState } from 'react';
 import { useFormik } from 'formik';
 import { ChickinApi } from '@/services/api/production';
 import DateInput from '@/components/input/DateInput';
@@ -20,6 +20,7 @@ import toast from 'react-hot-toast';
 import { Icon } from '@iconify/react';
 import TextArea from '@/components/input/TextArea';
 import TextInput from '@/components/input/TextInput';
+import NumberInput from '@/components/input/NumberInput';
 
 interface ChickinFormProps {
   formType?: 'add' | 'detail' | 'edit';
@@ -45,8 +46,11 @@ const ChickinForm = ({
   const formikInitialValue = useMemo<ChickinFormValues>(() => {
     return {
       chick_in_date: formatDateForInput(initialValues?.chick_in_date) ?? '',
-      note: initialValues?.note ?? `Catatan Chickin ${initialValues?.project_flock_kandang?.project_flock.flock.name}`,
-      quantity: initialValues?.quantity ?? 1,
+      note: initialValues?.note ?? '',
+      quantity:
+        initialValues?.quantity ??
+        initialValues?.project_flock_kandang?.available_quantity ??
+        0,
     };
   }, [initialValues]);
 
@@ -71,10 +75,7 @@ const ChickinForm = ({
       payload: UpdateChickinPayload,
       afterSubmit: (() => void) | undefined
     ) => {
-      const res = await ChickinApi.update(
-        payload.project_flock_kandang_id as number,
-        payload
-      );
+      const res = await ChickinApi.update(payload.id, payload);
       if (isResponseError(res)) {
         setChickinFormErrorMessage(res.message);
         return;
@@ -95,7 +96,10 @@ const ChickinForm = ({
       // reset error message
       setChickinFormErrorMessage('');
 
-      if (initialValues?.project_flock_kandang?.id == undefined) {
+      if (
+        initialValues?.project_flock_kandang?.id == undefined ||
+        (formType == 'edit' && initialValues?.id == undefined)
+      ) {
         return;
       }
 
@@ -103,9 +107,13 @@ const ChickinForm = ({
       const payload = {
         chick_in_date: values.chick_in_date,
         project_flock_kandang_id: initialValues?.project_flock_kandang?.id,
+        note: values.note,
+        quantity: values.quantity,
+        id: initialValues.id ?? 0,
       };
 
       // cek type form yang disubmit
+      console.log(formType);
       switch (formType) {
         case 'add':
           handleCreate(payload, afterSubmit);
@@ -144,28 +152,34 @@ const ChickinForm = ({
           }
           errorMessage={formik.errors.chick_in_date}
         />
-        <TextInput
+        <NumberInput
           value={formik.values.quantity}
           onChange={formik.handleChange}
           onBlur={formik.handleBlur}
           name='quantity'
-          label='Jumlah Chickin'
+          label='Jumlah (Ekor)'
           required
-          isError={formik.touched.quantity && Boolean(formik.errors.quantity)}
-          errorMessage={formik.errors.quantity}
-          type='number'
-          disabled
+          isError={
+            (formik.touched.quantity && Boolean(formik.errors.quantity)) ||
+            formik.values.quantity == 0
+          }
+          errorMessage={
+            formik.values.quantity == 0
+              ? 'Masukan Persediaan Day Old Chick terlebih dahulu.'
+              : formik.errors.quantity
+          }
+          readOnly
         />
         <TextArea
           required
           label='Catatan'
           name='note'
+          placeholder='Masukan catatan chickin'
           value={formik.values.note}
           onChange={formik.handleChange}
           onBlur={formik.handleBlur}
           isError={formik.touched.note && Boolean(formik.errors.note)}
           errorMessage={formik.errors.note}
-
         />
         {initialValues?.project_flock_kandang?.id == undefined && (
           <p className='text-error'>Project Flock Kandang tidak ditemukan.</p>

src/components/pages/production/project-flock/ProjectFlockTable.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import Button from '@/components/Button';
+import CheckboxInput from '@/components/input/CheckboxInput';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
@@ -16,13 +17,12 @@ import { ProjectFlockApi } from '@/services/api/production';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { BaseApiResponse } from '@/types/api/api-general';
 import { Kandang } from '@/types/api/master-data/kandang';
-import { ProjectFlock } from '@/types/api/production/project-flock';
-import { Icon } from '@iconify/react';
 import {
-  CellContext,
-  ColumnDef,
-  SortingState,
-} from '@tanstack/react-table';
+  ProjectFlockApprovalPayload,
+  ProjectFlock,
+} from '@/types/api/production/project-flock';
+import { Icon } from '@iconify/react';
+import { CellContext, SortingState } from '@tanstack/react-table';
 import { ChangeEventHandler, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
@@ -56,6 +56,7 @@ const RowOptionsMenu = ({
         <Icon icon='mdi:eye-outline' width={16} height={16} />
         Detail
       </Button>
+      {props.row.original.approval.step_name === 'Aktif' && (
         <Button
           href={`/production/chickin/add?projectFlockId=${props.row.original.id}`}
           variant='ghost'
@@ -65,7 +66,9 @@ const RowOptionsMenu = ({
           <Icon icon='mdi:home-import-outline' width={16} height={16} />
           Chickin
         </Button>
-      {/* <Button
+      )}
+      {props.row.original.approval.step_name === 'Pengajuan' && (
+        <Button
           href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
           variant='ghost'
           color='warning'
@@ -73,7 +76,8 @@ const RowOptionsMenu = ({
         >
           <Icon icon='mdi:pencil-outline' width={16} height={16} />
           Edit
-      </Button> */}
+        </Button>
+      )}
       <Button
         onClick={deleteClickHandler}
         variant='ghost'
@@ -117,10 +121,15 @@ const ProjectFlockTable = () => {
       periodFilter: 'period',
     },
   });
+
+  // State
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const selectedRowIds = Object.keys(rowSelection)
+    .filter((id) => rowSelection[id])
+    .map((id) => parseInt(id));
   const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
   const [areaSelectInputValue, setAreaSelectInputValue] = useState('');
   const [kandangSelectInputValue, setKandangSelectInputValue] = useState('');
-
   const [selectedArea, setSelectedArea] = useState<OptionType | null>(null);
   const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
     null
@@ -129,6 +138,13 @@ const ProjectFlockTable = () => {
     null
   );
   const [periodInputValue, setPeriodInputValue] = useState<number | null>(null);
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [selectedProjectFlock, setSelectedProjectFlock] =
+    useState<ProjectFlock>();
+  const deleteModal = useModal();
+  const confirmModal = useModal();
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
 
   // Fetch Data
   const {
@@ -144,20 +160,20 @@ const ProjectFlockTable = () => {
     search: areaSelectInputValue,
     limit: '100',
   }).toString()}`;
-  const {
-    data: areas,
-    isLoading: isLoadingAreas,
-  } = useSWR(areaUrl, AreaApi.getAllFetcher);
+  const { data: areas, isLoading: isLoadingAreas } = useSWR(
+    areaUrl,
+    AreaApi.getAllFetcher
+  );
 
   const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
     search: locationSelectInputValue,
     area_id: selectedArea != null ? selectedArea.value.toString() : '',
     limit: '100',
   }).toString()}`;
-  const {
-    data: locations,
-    isLoading: isLoadingLocations,
-  } = useSWR(locationUrl, LocationApi.getAllFetcher);
+  const { data: locations, isLoading: isLoadingLocations } = useSWR(
+    locationUrl,
+    LocationApi.getAllFetcher
+  );
 
   const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
     search: kandangSelectInputValue,
@@ -165,10 +181,10 @@ const ProjectFlockTable = () => {
       selectedLocation != null ? selectedLocation.value.toString() : '',
     limit: '100',
   }).toString()}`;
-  const {
-    data: kandangs,
-    isLoading: isLoadingKandang,
-  } = useSWR(kandangUrl, KandangApi.getAllFetcher);
+  const { data: kandangs, isLoading: isLoadingKandang } = useSWR(
+    kandangUrl,
+    KandangApi.getAllFetcher
+  );
 
   // Data to Options Mapping
   const optionsArea = isResponseSuccess(areas)
@@ -190,139 +206,6 @@ const ProjectFlockTable = () => {
       }))
     : [];
 
-  // State
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [selectedProjectFlock, setSelectedProjectFlock] =
-    useState<ProjectFlock>();
-  const deleteModal = useModal();
-  const confirmModal = useModal();
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const [selectedIds, setSelectedIds] = useState<number[]>([]);
-  const [selectedFlocks, setSelectedFlocks] = useState<ProjectFlock[]>([]);
-  const [isApproveLoading, setIsApproveLoading] = useState(false);
-
-  // Columns
-  const projectFlocksColumns: ColumnDef<ProjectFlock>[] = [
-    {
-      id: 'select',
-      header: () => {
-        const allSelected =
-          isResponseSuccess(projectFlocks) &&
-          projectFlocks.data.length > 0 &&
-          selectedIds.length === projectFlocks.data.length;
-
-        return (
-          <input
-            type='checkbox'
-            className='checkbox checkbox-sm'
-            checked={allSelected}
-            onChange={(e) => handleSelectAll(e.target.checked)}
-          />
-        );
-      },
-      cell: (props) => {
-        const id = props.row.original.id;
-        const isChecked = selectedIds.includes(id);
-
-        return (
-          <input
-            type='checkbox'
-            className='checkbox checkbox-sm'
-            checked={isChecked}
-            onChange={(e) => handleSelectRow(id, e.target.checked)}
-          />
-        );
-      },
-    },
-
-    {
-      accessorKey: 'flock.name',
-      header: 'Flock',
-    },
-    {
-      accessorKey: 'area.name',
-      header: 'Area',
-    },
-    {
-      accessorKey: 'location.name',
-      header: 'Lokasi',
-    },
-    {
-      accessorKey: 'fcr.name',
-      header: 'FCR',
-    },
-    {
-      accessorKey: 'category',
-      header: 'Kategori',
-    },
-    {
-      header: 'Kandang',
-      cell: (props) => {
-        const kandang = props.row.original.kandangs;
-        if (kandang) {
-          const kandangNames = kandang.map((k: Kandang) => k.name);
-          return (
-            <div>
-              {kandangNames.length > 0 ? kandangNames.join(', ') : 'Tidak ada'}
-            </div>
-          );
-        } else {
-          return '-';
-        }
-      },
-    },
-    {
-      accessorKey: 'period',
-      header: 'Periode',
-    },
-    {
-      accessorKey: 'created_at',
-      header: 'Dibuat pada',
-      cell: (props) =>
-        new Date(props.row.original.created_at).toLocaleDateString(),
-    },
-    {
-      header: 'Aksi',
-      cell: (props) => {
-        const currentPageSize = props.table.getPaginationRowModel().rows.length;
-        const currentPageRows = props.table.getPaginationRowModel().flatRows;
-        const currentRowRelativeIndex =
-          currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
-
-        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
-
-        const deleteClickHandler = () => {
-          setSelectedProjectFlock(props.row.original);
-          deleteModal.openModal();
-        };
-
-        return (
-          <>
-            {currentPageSize > 2 && (
-              <RowDropdownOptions isLast2Rows={isLast2Rows}>
-                <RowOptionsMenu
-                  type='dropdown'
-                  props={props}
-                  deleteClickHandler={deleteClickHandler}
-                />
-              </RowDropdownOptions>
-            )}
-
-            {currentPageSize <= 2 && (
-              <RowCollapseOptions>
-                <RowOptionsMenu
-                  type='dropdown'
-                  props={props}
-                  deleteClickHandler={deleteClickHandler}
-                />
-              </RowCollapseOptions>
-            )}
-          </>
-        );
-      },
-    },
-  ];
-
   // Handler
   const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
     const newVal = val as OptionType;
@@ -341,45 +224,17 @@ const ProjectFlockTable = () => {
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
     updateFilter('search', e.target.value);
   };
-  const handleSelectAll = (checked: boolean) => {
-    if (checked && isResponseSuccess(projectFlocks)) {
-      const allIds = projectFlocks.data.map((item) => item.id);
-      setSelectedIds(allIds);
-      setSelectedFlocks(projectFlocks.data);
-    } else {
-      setSelectedIds([]);
-      setSelectedFlocks([]);
-    }
-  };
-
-  const handleSelectRow = (id: number, checked: boolean) => {
-    if (!isResponseSuccess(projectFlocks)) return;
-
-    const targetFlock = projectFlocks.data.find((item) => item.id === id);
-
-    if (!targetFlock) return;
-
-    if (checked) {
-      setSelectedIds((prev) => [...prev, id]);
-      setSelectedFlocks((prev) => [...(prev || []), targetFlock]);
-    } else {
-      setSelectedIds((prev) => prev.filter((val) => val !== id));
-      setSelectedFlocks((prev) =>
-        (prev || []).filter((flock) => flock.id !== id)
-      );
-    }
-  };
 
   const confirmationModalApproveClickHandler = async () => {
     setIsApproveLoading(true);
     const approveProjectFlockRes = await ProjectFlockApi.customRequest<
       BaseApiResponse<ProjectFlock>,
-      'POST'
-    >(`/approve`, {
+      ProjectFlockApprovalPayload
+    >(`/approvals`, {
       method: 'POST',
-      payload: 'POST',
-      params: {
-        ids: selectedFlocks.map((flock) => flock.id).join(','),
+      payload: {
+        action: 'APPROVED',
+        approvable_ids: selectedRowIds.map((id) => id),
       },
     });
 
@@ -391,6 +246,8 @@ const ProjectFlockTable = () => {
       toast.error(approveProjectFlockRes?.message as string);
       confirmModal.closeModal();
     }
+    setRowSelection({});
+    refreshProjectFlocks();
     setIsApproveLoading(false);
   };
 
@@ -412,11 +269,9 @@ const ProjectFlockTable = () => {
                 variant='outline'
                 color='success'
                 onClick={() => {
-                  if (selectedIds.length > 0) {
                   confirmModal.openModal();
-                  }
                 }}
-                disabled={!(selectedIds.length > 0)}
+                disabled={selectedRowIds.length === 0}
                 className='w-full sm:w-fit'
               >
                 <Icon icon='material-symbols:check' width={24} height={24} />
@@ -508,7 +363,162 @@ const ProjectFlockTable = () => {
 
           <Table<ProjectFlock>
             data={isResponseSuccess(projectFlocks) ? projectFlocks?.data : []}
-            columns={projectFlocksColumns}
+            columns={[
+              {
+                id: 'select',
+                header: ({ table }) => {
+                  const allRows = table.getRowModel().rows;
+                  const selectableRows = allRows.filter(
+                    (row) => row.original?.approval?.step_number == 1
+                  );
+                  
+                  const allSelected = selectableRows.every((row) =>
+                    row.getIsSelected()
+                  ) && selectableRows.length != 0;
+
+                  const someSelected =
+                    selectableRows.some((row) => row.getIsSelected()) &&
+                    !allSelected;
+
+                  const toggleSelectableRows = () => {
+                    const shouldSelect = !allSelected;
+                    selectableRows.forEach((row) =>
+                      row.toggleSelected(shouldSelect)
+                    );
+                  };
+
+                  return (
+                    <div className='w-full flex flex-row justify-center'>
+                      <CheckboxInput
+                        name='allRow'
+                        checked={allSelected}
+                        indeterminate={someSelected}
+                        onChange={toggleSelectableRows}
+                        disabled={
+                          isResponseSuccess(projectFlocks) &&
+                          projectFlocks?.data?.filter(
+                            (flock) => flock.approval.step_number == 1
+                          ).length == 0
+                        }
+                      />
+                    </div>
+                  );
+                },
+                cell: ({ row }) => {
+                  return (
+                    <CheckboxInput
+                      name='row'
+                      checked={
+                        row.getIsSelected() &&
+                        row.original.approval.step_number == 1
+                      }
+                      disabled={
+                        !row.getCanSelect() ||
+                        row.original.approval.step_number != 1
+                      }
+                      indeterminate={row.getIsSomeSelected()}
+                      onChange={row.getToggleSelectedHandler()}
+                    />
+                  );
+                },
+              },
+
+              {
+                accessorKey: 'flock.name',
+                header: 'Flock',
+              },
+              {
+                accessorKey: 'area.name',
+                header: 'Area',
+              },
+              {
+                accessorKey: 'location.name',
+                header: 'Lokasi',
+              },
+              {
+                accessorKey: 'fcr.name',
+                header: 'FCR',
+              },
+              {
+                accessorKey: 'category',
+                header: 'Kategori',
+              },
+              {
+                accessorKey: 'approval.step_name',
+                header: 'Status',
+              },
+              {
+                header: 'Kandang',
+                cell: (props) => {
+                  const kandang = props.row.original.kandangs;
+                  if (kandang) {
+                    const kandangNames = kandang.map((k: Kandang) => k.name);
+                    return (
+                      <div>
+                        {kandangNames.length > 0
+                          ? kandangNames.join(', ')
+                          : 'Tidak ada'}
+                      </div>
+                    );
+                  } else {
+                    return '-';
+                  }
+                },
+              },
+              {
+                accessorKey: 'period',
+                header: 'Periode',
+              },
+              {
+                accessorKey: 'created_at',
+                header: 'Dibuat pada',
+                cell: (props) =>
+                  new Date(props.row.original.created_at).toLocaleDateString(),
+              },
+              {
+                header: 'Aksi',
+                cell: (props) => {
+                  const currentPageSize =
+                    props.table.getPaginationRowModel().rows.length;
+                  const currentPageRows =
+                    props.table.getPaginationRowModel().flatRows;
+                  const currentRowRelativeIndex =
+                    currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+                  const isLast2Rows =
+                    currentRowRelativeIndex > currentPageSize - 2;
+
+                  const deleteClickHandler = () => {
+                    setSelectedProjectFlock(props.row.original);
+                    deleteModal.openModal();
+                  };
+
+                  return (
+                    <>
+                      {currentPageSize > 2 && (
+                        <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                          <RowOptionsMenu
+                            type='dropdown'
+                            props={props}
+                            deleteClickHandler={deleteClickHandler}
+                          />
+                        </RowDropdownOptions>
+                      )}
+
+                      {currentPageSize <= 2 && (
+                        <RowCollapseOptions>
+                          <RowOptionsMenu
+                            type='dropdown'
+                            props={props}
+                            deleteClickHandler={deleteClickHandler}
+                          />
+                        </RowCollapseOptions>
+                      )}
+                    </>
+                  );
+                },
+              },
+            ]}
             pageSize={tableFilterState.pageSize}
             page={
               isResponseSuccess(projectFlocks) ? projectFlocks?.meta?.page : 0
@@ -522,6 +532,8 @@ const ProjectFlockTable = () => {
             isLoading={isLoading}
             sorting={sorting}
             setSorting={setSorting}
+            rowSelection={rowSelection}
+            setRowSelection={setRowSelection}
             className={{
               containerClassName: cn({
                 'mb-20':
@@ -559,18 +571,19 @@ const ProjectFlockTable = () => {
       <ConfirmationModal
         ref={confirmModal.ref}
         type='success'
-        text={
-          selectedFlocks.length > 0
-            ? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks
-                .map(
-                  (flock) =>
-                    `${flock.flock?.name ?? '(Tanpa nama)'} - ${
-                      flock.area?.name ?? '-'
-                    }`
-                )
-                .join(', ')})`
-            : 'Tidak ada Project Flock yang dipilih.'
-        }
+        text={`Apakah anda yakin ingin reject data transfer ke laying ini (${selectedRowIds.length} data)?`}
+        // text={
+        //   selectedFlocks.length > 0
+        //     ? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks
+        //         .map(
+        //           (flock) =>
+        //             `${flock.flock?.name ?? '(Tanpa nama)'} - ${
+        //               flock.area?.name ?? '-'
+        //             }`
+        //         )
+        //         .join(', ')})`
+        //     : 'Tidak ada Project Flock yang dipilih.'
+        // }
         secondaryButton={{
           text: 'Tidak',
         }}

src/components/pages/production/project-flock/form/ProjectFlockForm.tsx

@@ -14,13 +14,14 @@ import { Icon } from '@iconify/react';
 import { useFormik } from 'formik';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
-import useSWR from 'swr';
+import useSWR, { KeyedMutator } from 'swr';
 import {
   ProjectFlockFormSchema,
   ProjectFlockFormValues,
   UpdateProjectFlockFormSchema,
 } from '@/components/pages/production/project-flock/form/ProjectFlockForm.schema';
 import {
+  ProjectFlockApprovalPayload,
   CreateProjectFlockPayload,
   PeriodFlock,
   ProjectFlock,
@@ -34,15 +35,20 @@ import { BaseApiResponse } from '@/types/api/api-general';
 import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import ProjectFlockKandangTable from './ProjectFlockKandangTable';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
   initialValues?: ProjectFlock;
+  refreshProjectFlocks?: KeyedMutator<
+    BaseApiResponse<ProjectFlock> | undefined
+  >;
 }
 
 const ProjectFlockForm = ({
   formType = 'add',
   initialValues,
+  refreshProjectFlocks,
 }: ProjectFlockFormProps) => {
   // State
   const router = useRouter();
@@ -70,6 +76,34 @@ const ProjectFlockForm = ({
 
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isApprovedDisabled, setIsApprovedDisabled] = useState(
+    initialValues?.approval.step_name == 'Pengajuan' ? false : true
+  );
+  const [isRejectedDisabled, setIsRejectedDisabled] = useState(
+    !isApprovedDisabled
+  );
+  const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
+    !isApprovedDisabled ? 'APPROVED' : 'REJECTED'
+  );
+
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>(
+    () =>
+      Object.fromEntries(
+        (initialValues?.kandangs ?? []).map((k: Kandang) => [
+          k.id.toString(),
+          true,
+        ])
+      )
+  );
+
+  useEffect(() => {
+    if (initialValues?.approval?.step_name) {
+      const approvedDisabled = initialValues.approval.step_name !== 'Pengajuan';
+      setIsApprovedDisabled(approvedDisabled);
+      setIsRejectedDisabled(!approvedDisabled);
+      setApprovalAction(!approvedDisabled ? 'APPROVED' : 'REJECTED');
+    }
+  }, [initialValues]);
 
   // Fetch Data
   const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({
@@ -109,7 +143,7 @@ const ProjectFlockForm = ({
     search: '',
     location_id: selectedLocation == '' ? '0' : selectedLocation,
   }).toString()}`;
-  const { data: kandang, isLoading: isLoadingKandang } = useSWR(
+  const { data: kandang, isLoading: isLoadingKandang, mutate: refreshKandang} = useSWR(
     kandangUrl,
     KandangApi.getAllFetcher
   );
@@ -167,6 +201,20 @@ const ProjectFlockForm = ({
       }
     }
   }, [kandang]);
+  useEffect(() => {
+    if (initialValues?.kandangs) {
+      refreshKandang();
+      setOpenSelectKandangs(true);
+
+      const newRowSelection = Object.fromEntries(
+        initialValues.kandangs.map((k: Kandang) => [
+          k.id.toString(),
+          true,
+        ])
+      );
+      setRowSelection(newRowSelection);
+    }
+  }, [initialValues, refreshKandang]);
 
   // Options Handler
   const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -211,38 +259,6 @@ const ProjectFlockForm = ({
     formik.setFieldTouched('category', true);
   };
 
-  const kandangChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { value, checked } = event.target;
-    if (checked) {
-      formik.setFieldValue(
-        'kandang_ids',
-        formik.values.kandang_ids.concat(parseInt(value))
-      );
-    } else {
-      formik.setFieldValue(
-        'kandang_ids',
-        formik.values.kandang_ids.filter((id) => id !== parseInt(value))
-      );
-    }
-  };
-  const kandangCheckAll = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { checked } = event.target;
-    if (checked) {
-      formik.setFieldValue(
-        'kandang_ids',
-        optionsKandang
-          .filter(
-            (kandang) =>
-              kandang.status === 'NON_ACTIVE' ||
-              formik.values.kandang_ids.includes(kandang.id)
-          )
-          .map((kandang) => kandang.id)
-      );
-    } else {
-      formik.setFieldValue('kandang_ids', []);
-    }
-  };
-
   // Submit Handler
   const createProjectFlockHandler = async (
     payload: CreateProjectFlockPayload
@@ -400,11 +416,21 @@ const ProjectFlockForm = ({
   }, [formik.values]);
 
   useEffect(() => {
-    if(isResponseSuccess(periodFlocks)){
+    if (isResponseSuccess(periodFlocks)) {
       formik.setFieldValue('period', periodFlocks.data.next_period);
     }
   }, [periodFlocks]);
 
+  useEffect(() => {
+    const selectedRowIds = Object.keys(rowSelection)
+      .filter((id) => rowSelection[id])
+      .map((id) => parseInt(id));
+    formikSetValues({
+      ...formik.values,
+      kandang_ids: selectedRowIds,
+    });
+  }, [rowSelection, formikSetValues]);
+
   // Actions handler
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
@@ -422,23 +448,42 @@ const ProjectFlockForm = ({
     setIsDeleteLoading(false);
   };
 
-  const confirmationModalApproveClickHandler = async () => {
+  const confirmationModalClickHandler = async ({
+    action = 'APPROVED',
+  }: {
+    action: 'APPROVED' | 'REJECTED';
+  }) => {
+    if (initialValues?.id === undefined) return;
     setIsApproveLoading(true);
     const approveProjectFlockRes = await ProjectFlockApi.customRequest<
       BaseApiResponse<ProjectFlock>,
-      'POST'
-    >(`/${initialValues?.id}/approve`, {
+      ProjectFlockApprovalPayload
+    >(`/approvals`, {
       method: 'POST',
+      payload: {
+        action: action,
+        approvable_ids: [initialValues.id],
+      },
     });
 
     if (isResponseSuccess(approveProjectFlockRes)) {
-      toast.success('Project Flock berhasil di-approve!');
-      confirmModal.closeModal();
+      if (refreshProjectFlocks) {
+        await refreshProjectFlocks();
+      }
+      // if (action == 'APPROVED') {
+      //   setIsApprovedDisabled(true);
+      //   setIsRejectedDisabled(false);
+      // }
+      // if (action == 'REJECTED') {
+      //   setIsRejectedDisabled(true);
+      //   setIsApprovedDisabled(false);
+      // }
+      toast.success(approveProjectFlockRes.message as string);
     }
     if (isResponseError(approveProjectFlockRes)) {
       toast.error(approveProjectFlockRes?.message as string);
-      confirmModal.closeModal();
     }
+    confirmModal.closeModal();
     setIsApproveLoading(false);
   };
 
@@ -481,21 +526,37 @@ const ProjectFlockForm = ({
           </div>
         )}
         {formType == 'detail' && (
-          <div className='w-full py-4'>
+          <div className='w-full flex flex-col sm:flex-row gap-2 py-4'>
             <Button
               variant='outline'
               color='success'
               onClick={() => {
                 if (initialValues?.id) {
+                  setApprovalAction('APPROVED');
                   confirmModal.openModal();
                 }
               }}
-              disabled={!initialValues?.id}
+              disabled={!initialValues?.id || isApprovedDisabled}
               className='w-full sm:w-fit'
             >
               <Icon icon='material-symbols:check' width={24} height={24} />
               Approve
             </Button>
+            <Button
+              variant='outline'
+              color='error'
+              onClick={() => {
+                if (initialValues?.id) {
+                  setApprovalAction('REJECTED');
+                  confirmModal.openModal();
+                }
+              }}
+              disabled={!initialValues?.id || isRejectedDisabled}
+              className='w-full sm:w-fit'
+            >
+              <Icon icon='mdi:times' width={24} height={24} />
+              Reject
+            </Button>
           </div>
         )}
         <form
@@ -505,9 +566,7 @@ const ProjectFlockForm = ({
         >
           <div className='card bg-base-100 shadow w-full mb-6'>
             <div className='card-body'>
-              <div className='card-title mb-4'>
-                Informasi Umum
-              </div>
+              <div className='card-title mb-4'>Informasi Umum</div>
 
               <div className='grid sm:grid-cols-2 gap-4'>
                 <SelectInput
@@ -614,7 +673,7 @@ const ProjectFlockForm = ({
                       variant='link'
                       className={`text-primary rotate-${
                         openSelectKandangs ? '180' : '0'
-                      } transition-transform hover:text-inherit`}
+                      } transition-transform hover:text-inherit me-3`}
                     >
                       <Icon
                         icon='material-symbols:keyboard-arrow-down'
@@ -631,102 +690,15 @@ const ProjectFlockForm = ({
               >
                 <div className='overflow-x-auto'>
                   {isLoadingKandang && (
-                    <span className="loading loading-dots loading-xl"></span>
+                    <span className='loading loading-dots loading-xl'></span>
                   )}
-                  <table className='table'>
-                    {/* head */}
-                    <thead>
-                      <tr>
-                        <th>
-                          <label>
-                            <input
-                              type='checkbox'
-                              checked={
-                                optionsKandang
-                                  .filter(
-                                    (k) =>
-                                      k.status === 'NON_ACTIVE' ||
-                                      formik.values.kandang_ids.includes(k.id)
-                                  )
-                                  .every((k) =>
-                                    formik.values.kandang_ids.includes(k.id)
-                                  ) &&
-                                optionsKandang.filter(
-                                  (k) =>
-                                    k.status === 'NON_ACTIVE' ||
-                                    formik.values.kandang_ids.includes(k.id)
-                                ).length > 0
-                              }
-                              className='checkbox transition-none'
-                              disabled={
-                                formType === 'detail' ||
-                                optionsKandang.filter(
-                                  (k) => k.status === 'NON_ACTIVE'
-                                ).length == 0
-                              }
-                              onChange={
-                                formType === 'detail'
-                                  ? () => {}
-                                  : kandangCheckAll
-                              }
+                  <ProjectFlockKandangTable
+                    listKandang={optionsKandang}
+                    rowSelection={rowSelection}
+                    setRowSelection={setRowSelection}
+                    selectedIds={formik.values.kandang_ids}
+                    formType={formType}
                   />
-                          </label>
-                        </th>
-                        <th>Kandang</th>
-                        <th>Status</th>
-                        <th>Penanggung Jawab</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {/* rows */}
-                      {selectedLocation != '' &&
-                        optionsKandang.map((kandang) => (
-                          <tr key={kandang.id}>
-                            <th>
-                              <label>
-                                <input
-                                  value={kandang.id}
-                                  type='checkbox'
-                                  className='checkbox transition-none'
-                                  checked={formik.values.kandang_ids.includes(
-                                    kandang.id
-                                  )}
-                                  onChange={
-                                    formType === 'detail'
-                                      ? () => {}
-                                      : kandangChangeHandler
-                                  }
-                                  disabled={
-                                    formType === 'detail' ||
-                                    kandang.status != 'NON_ACTIVE'
-                                  }
-                                />
-                              </label>
-                            </th>
-                            <td>{kandang.name}</td>
-                            <td>{kandang.status}</td>
-                            <td>{kandang.pic?.name}</td>
-                          </tr>
-                        ))}
-                      {selectedLocation == '' && (
-                        <tr>
-                          <td colSpan={3} className='text-center text-muted'>
-                            Data tidak tersedia
-                          </td>
-                        </tr>
-                      )}
-                    </tbody>
-                    {/* foot */}
-                    {selectedLocation != '' && (
-                      <tfoot>
-                        <tr>
-                          <th></th>
-                          <th>Kandang</th>
-                          <th>Penanggung Jawab</th>
-                        </tr>
-                      </tfoot>
-                    )}
-                  </table>
                 </div>
               </Collapse>
             </div>
@@ -795,16 +767,24 @@ const ProjectFlockForm = ({
 
       <ConfirmationModal
         ref={confirmModal.ref}
-        type='success'
-        text={`Apakah anda yakin ingin approve Project Flock berikut? (${initialValues?.flock?.name} - ${initialValues?.area?.name})?`}
+        type={approvalAction == 'APPROVED' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${
+          approvalAction == 'APPROVED' ? 'approve' : 'reject'
+        } Project Flock berikut? (${initialValues?.flock?.name} - ${
+          initialValues?.area?.name
+        })?`}
         secondaryButton={{
           text: 'Tidak',
         }}
         primaryButton={{
           text: 'Ya',
-          color: 'success',
+          color: approvalAction == 'APPROVED' ? 'success' : 'error',
           isLoading: isApproveLoading,
-          onClick: confirmationModalApproveClickHandler,
+          onClick: () => {
+            confirmationModalClickHandler({
+              action: approvalAction,
+            });
+          },
         }}
       />
     </>

src/components/pages/production/project-flock/form/ProjectFlockKandangTable.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import CheckboxInput from '@/components/input/CheckboxInput';
+import PillBadge from '@/components/PillBadge';
+import Table from '@/components/Table';
+import { cn } from '@/lib/helper';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { OnChangeFn } from '@tanstack/react-table';
+
+const ProjectFlockKandangTable = ({
+  listKandang,
+  rowSelection,
+  setRowSelection,
+  selectedIds,
+  formType = 'add',
+}: {
+  listKandang: Kandang[];
+  rowSelection: Record<string, boolean>;
+  setRowSelection: OnChangeFn<Record<string, boolean>>;
+  selectedIds: (number | undefined)[];
+  formType: 'add' | 'edit' | 'detail';
+}) => {
+  console.log('selectedIds');
+  console.log(selectedIds);
+  return (
+    <Table<Kandang>
+      data={listKandang}
+      columns={[
+        {
+          id: 'select',
+          header: ({ table }) => {
+            const allRows = table.getRowModel().rows;
+            const selectableRows = allRows.filter(
+              (row) =>
+                row.original.status == 'NON_ACTIVE' ||
+                row.original.status == 'PENGAJUAN'
+            );
+
+            const allSelected =
+              selectableRows.every((row) => row.getIsSelected()) &&
+              selectableRows.length != 0 && formType != 'detail';
+
+            const someSelected =
+              selectableRows.some((row) => row.getIsSelected()) && !allSelected && formType != 'detail';
+
+            const toggleSelectableRows = () => {
+              const shouldSelect = !allSelected;
+              selectableRows.forEach((row) => row.toggleSelected(shouldSelect));
+            };
+
+            return (
+              <div className='w-full flex flex-row justify-center'>
+                <CheckboxInput
+                  name='allRow'
+                  checked={allSelected}
+                  indeterminate={someSelected}
+                  onChange={toggleSelectableRows}
+                  disabled={
+                    listKandang.filter(
+                      (kandang) =>
+                        kandang.status == 'NON_ACTIVE' ||
+                        kandang.status == 'PENGAJUAN'
+                    ).length == 0 || formType == 'detail'
+                  }
+                />
+              </div>
+            );
+          },
+          cell: ({ row }) => {
+            return (
+              <CheckboxInput
+                name='row'
+                checked={
+                  (row.getIsSelected() &&
+                    (row.original.status == 'NON_ACTIVE' ||
+                      row.original.status == 'PENGAJUAN')) ||
+                  selectedIds.includes(row.original.id)
+                }
+                disabled={
+                  !row.getCanSelect() ||
+                  (row.original.status != 'NON_ACTIVE' &&
+                    row.original.status != 'PENGAJUAN') ||
+                  formType == 'detail'
+                }
+                indeterminate={row.getIsSomeSelected()}
+                onChange={row.getToggleSelectedHandler()}
+              />
+            );
+          },
+        },
+        {
+          accessorFn: (row) => row.name,
+          header: 'Kandang',
+        },
+        {
+          accessorFn: (row) => row.status,
+          header: 'Status',
+          cell: (props) => {
+            return (
+              <PillBadge
+                color={(() => {
+                  switch (props.row.original.status) {
+                    case 'ACTIVE':
+                      return 'red';
+                    case 'PENGAJUAN':
+                      return 'green';
+                    case 'NON_ACTIVE':
+                      return 'blue';
+                    default:
+                      return 'gray';
+                  }
+                })()}
+                content={props.row.original.status
+                  .toLowerCase()
+                  .replace(/_/g, ' ')
+                  .replace(/\b\w/g, (char) => char.toUpperCase())}
+              />
+            );
+          },
+        },
+        {
+          accessorFn: (row) => row.pic?.name,
+          header: 'Penanggung Jawab',
+        },
+      ]}
+      className={{
+        containerClassName: cn({
+          'mb-20': listKandang?.length === 0,
+        }),
+        tableWrapperClassName: 'overflow-x-auto min-h-full!',
+        tableClassName: 'font-inter w-full table-auto min-h-full!',
+        headerRowClassName: 'border-b border-b-gray-200',
+        headerColumnClassName:
+          'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+        bodyRowClassName: 'border-b border-b-gray-200',
+        bodyColumnClassName:
+          'px-6 py-3 last:flex last:flex-row last:justify-end',
+        paginationClassName: 'hidden',
+      }}
+      rowSelection={rowSelection}
+      setRowSelection={setRowSelection}
+    />
+  );
+};
+
+export default ProjectFlockKandangTable;

src/components/pages/production/recording/RecordingTable.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useCallback, useMemo, useState } from 'react';
+import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import { SortingState } from '@tanstack/react-table';
 import { cn } from '@/lib/helper';
@@ -8,7 +9,9 @@ import { useModal } from '@/components/Modal';
 import Button from '@/components/Button';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import { OptionType } from '@/components/input/SelectInput';
+import SelectInput from '@/components/input/SelectInput';
 import { ROWS_OPTIONS } from '@/config/constant';
+import CheckboxInput from '@/components/input/CheckboxInput';
 import { TableToolbar } from '@/components/table/TableToolbar';
 import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import Table from '@/components/Table';
@@ -16,105 +19,14 @@ import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import { type CellContext } from '@tanstack/react-table';
 import { type Recording } from '@/types/api/production/recording';
-
-const dummyRecordings: Recording[] = [
-  {
-    id: 1,
-    flock: {
-      id: 1,
-      name: 'Flock Recording 1',
-      created_at: '2024-01-01',
-      updated_at: '2024-01-01',
-      created_user: {
-        id: 1,
-        id_user: 1,
-        email: 'admin@example.com',
-        name: 'Admin',
-      },
-    },
-    recording_date: '2024-01-01',
-    location: {
-      id: 1,
-      name: 'Location 1',
-      address: 'Jl. Contoh No. 1',
-      area: {
-        id: 1,
-        name: 'Area 1',
-      },
-      created_at: '2024-01-01',
-      updated_at: '2024-01-01',
-      created_user: {
-        id: 1,
-        id_user: 1,
-        email: 'admin@example.com',
-        name: 'Admin',
-      },
-    },
-    coop: {
-      id: 1,
-      name: 'Coop 1',
-      status: 'ACTIVE',
-      location: {
-        id: 1,
-        name: 'Location 1',
-        address: 'Jl. Contoh No. 1',
-        area: {
-          id: 1,
-          name: 'Area 1',
-        },
-      },
-      pic: {
-        id: 1,
-        id_user: 1,
-        email: 'pic@example.com',
-        name: 'PIC User',
-      },
-      created_at: '2024-01-01',
-      updated_at: '2024-01-01',
-      created_user: {
-        id: 1,
-        id_user: 1,
-        email: 'admin@example.com',
-        name: 'Admin',
-      },
-    },
-    feed_data: [
-      {
-        feed_name: 'Feed 1',
-        feed_qty: 100,
-        feed_stock: 500,
-      },
-    ],
-    body_weight: [
-      {
-        chicken_weight: 2.5,
-        chicken_count: 1000,
-        average_chicken_weight: 2.5,
-      },
-    ],
-    vaccination: [
-      {
-        vaccine_name: 'Vaccine 1',
-        total_stock: 200,
-        used_stock: 150,
-      },
-    ],
-    mortality: [
-      {
-        condition: 'NORMAL',
-        count: 5,
-      },
-    ],
-    created_at: '2024-01-01',
-    updated_at: '2024-01-01',
-    created_user: {
-      id: 1,
-      id_user: 1,
-      email: 'admin@example.com',
-      name: 'Admin',
-    },
-  },
-];
+import { type BaseApiResponse } from '@/types/api/api-general';
+import { RecordingApi } from '@/services/api/production';
+import { AreaApi } from '@/services/api/master-data';
+import { LocationApi } from '@/services/api/master-data';
+import { KandangApi } from '@/services/api/master-data';
+import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import toast from 'react-hot-toast';
 
 const RowOptionsMenu = ({
   type = 'dropdown',
@@ -173,12 +85,34 @@ const RowOptionsMenu = ({
 };
 
 const RecordingTable = () => {
-  const [search, setSearch] = useState('');
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      areaFilter: '',
+      locationFilter: '',
+      kandangFilter: '',
+      periodFilter: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      search: 'search',
+      areaFilter: 'area_id',
+      locationFilter: 'location_id',
+      kandangFilter: 'kandang_id',
+      periodFilter: 'period',
+    },
+  });
+
   const [sorting, setSorting] = useState<SortingState>([]);
-  const [selectedRecordings, setSelectedRecordings] = useState<number[]>([]);
-  const [, setSelectedRecording] = useState<Recording | undefined>(undefined);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const [selectedRecording, setSelectedRecording] = useState<Recording | undefined>(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isBulkApproveLoading, setIsBulkApproveLoading] = useState(false);
   const [isBulkRejectLoading, setIsBulkRejectLoading] = useState(false);
@@ -187,12 +121,81 @@ const RecordingTable = () => {
   const bulkApproveModal = useModal();
   const bulkRejectModal = useModal();
 
+  // State for dropdown search
+  const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
+  const [areaSelectInputValue, setAreaSelectInputValue] = useState('');
+  const [kandangSelectInputValue, setKandangSelectInputValue] = useState('');
+
+  const [selectedArea, setSelectedArea] = useState<OptionType | null>(null);
+  const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(null);
+  const [selectedKandang, setSelectedKandang] = useState<OptionType | null>(null);
+
+  const {
+    data: recordings,
+    isLoading,
+    mutate: refreshRecordings,
+  } = useSWR(
+    `${RecordingApi.basePath}${getTableFilterQueryString()}`,
+    RecordingApi.getAllFetcher
+  );
+
+  // Fetch data for dropdowns
+  const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({
+    search: areaSelectInputValue,
+    limit: '100',
+  }).toString()}`;
+  const {
+    data: areas,
+    isLoading: isLoadingAreas,
+  } = useSWR(areaUrl, AreaApi.getAllFetcher);
+
+  const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
+    search: locationSelectInputValue,
+    area_id: selectedArea != null ? selectedArea.value.toString() : '',
+    limit: '100',
+  }).toString()}`;
+  const {
+    data: locations,
+    isLoading: isLoadingLocations,
+  } = useSWR(locationUrl, LocationApi.getAllFetcher);
+
+  const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
+    search: kandangSelectInputValue,
+    location_id:
+      selectedLocation != null ? selectedLocation.value.toString() : '',
+    limit: '100',
+  }).toString()}`;
+  const {
+    data: kandangs,
+    isLoading: isLoadingKandang,
+  } = useSWR(kandangUrl, KandangApi.getAllFetcher);
+
+  // Data to Options Mapping
+  const optionsArea = isResponseSuccess(areas)
+    ? areas?.data.map((area) => ({
+        value: area.id,
+        label: area.name,
+      }))
+    : [];
+  const optionsLocation = isResponseSuccess(locations)
+    ? locations?.data.map((location) => ({
+        value: location.id,
+        label: location.name,
+      }))
+    : [];
+  const optionsKandang = isResponseSuccess(kandangs)
+    ? kandangs?.data.map((kandang) => ({
+        value: kandang.id,
+        label: kandang.name,
+      }))
+    : [];
+
   const searchChangeHandler = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      setSearch(e.target.value);
+      updateFilter('search', e.target.value);
       setPage(1);
     },
-    []
+    [updateFilter, setPage]
   );
 
   const pageSizeChangeHandler = useCallback(
@@ -201,52 +204,80 @@ const RecordingTable = () => {
       setPageSize(newVal.value as number);
       setPage(1);
     },
-    []
+    [setPageSize, setPage]
   );
 
   const paginatedData = useMemo(() => {
-    const filteredData = dummyRecordings.filter(
-      (recording) =>
-        recording.flock.name.toLowerCase().includes(search.toLowerCase()) ||
-        recording.location.name.toLowerCase().includes(search.toLowerCase()) ||
-        recording.coop.name.toLowerCase().includes(search.toLowerCase())
-    );
-    const start = (page - 1) * pageSize;
-    return filteredData.slice(start, start + pageSize);
-  }, [page, pageSize, search]);
+    if (!recordings || recordings.status !== 'success') return [];
+
+    return recordings.data;
+  }, [recordings]);
+
+  const selectedRowIds = Object.keys(rowSelection).map((item) => parseInt(item));
 
   const bulkApproveHandler = async () => {
     setIsBulkApproveLoading(true);
-    console.log(
-      'Approved recordings:',
-      paginatedData.filter((_, idx) => selectedRecordings.includes(idx))
-    );
-    setTimeout(() => {
-      setIsBulkApproveLoading(false);
-      setSelectedRecordings([]);
+
+    const approveResponse = await RecordingApi.customRequest<
+      BaseApiResponse<Recording[]>
+    >('approvals', {
+      method: 'POST',
+      payload: {
+        action: 'APPROVED',
+        approvable_ids: selectedRowIds,
+        notes: 'Bulk Approved',
+      },
+    });
+
+    if (isResponseSuccess(approveResponse)) {
+      await refreshRecordings();
+      setRowSelection({});
       bulkApproveModal.closeModal();
-    }, 1000);
+      toast.success(`Successfully approved ${selectedRowIds.length} recordings!`);
+    }
+    if (isResponseError(approveResponse)) {
+      toast.error(approveResponse?.message as string);
+      bulkApproveModal.closeModal();
+    }
+    setIsBulkApproveLoading(false);
   };
 
   const bulkRejectHandler = async () => {
     setIsBulkRejectLoading(true);
-    console.log(
-      'Rejected recordings:',
-      paginatedData.filter((_, idx) => selectedRecordings.includes(idx))
-    );
-    setTimeout(() => {
-      setIsBulkRejectLoading(false);
-      setSelectedRecordings([]);
+
+    const rejectResponse = await RecordingApi.customRequest<
+      BaseApiResponse<Recording[]>
+    >('approvals', {
+      method: 'POST',
+      payload: {
+        action: 'REJECTED',
+        approvable_ids: selectedRowIds,
+        notes: 'Bulk Rejected',
+      },
+    });
+
+    if (isResponseSuccess(rejectResponse)) {
+      refreshRecordings();
+      setRowSelection({});
       bulkRejectModal.closeModal();
-    }, 1000);
+      toast.success(`Successfully rejected ${selectedRowIds.length} recordings!`);
+    }
+    if (isResponseError(rejectResponse)) {
+      toast.error(rejectResponse?.message as string);
+      bulkRejectModal.closeModal();
+    }
+    setIsBulkRejectLoading(false);
   };
 
   const singleDeleteHandler = async () => {
     setIsDeleteLoading(true);
-    setTimeout(() => {
-      setIsDeleteLoading(false);
+
+    await RecordingApi.delete(selectedRecording?.id as number);
+    refreshRecordings();
+
     singleDeleteModal.closeModal();
-    }, 1000);
+    toast.success('Successfully delete Recording!');
+    setIsDeleteLoading(false);
   };
 
   return (
@@ -258,21 +289,189 @@ const RecordingTable = () => {
             label: 'Tambah Recording',
           }}
           search={{
-            value: search,
+            value: tableFilterState.search,
             onChange: searchChangeHandler,
             placeholder: 'Cari Recording',
           }}
         />
         <TableRowSizeSelector
-          value={pageSize}
+          value={tableFilterState.pageSize}
           onChange={pageSizeChangeHandler}
           options={ROWS_OPTIONS}
         />
+
+        {/* Filter Dropdowns - Desktop */}
+        <div className='hidden sm:grid sm:grid-cols-4 gap-4 mt-4'>
+          <SelectInput
+            label='Area'
+            placeholder='Pilih Area'
+            options={optionsArea}
+            value={selectedArea}
+            onChange={(selected) => {
+              const selectedValue = selected as OptionType | null;
+              setSelectedArea(selectedValue);
+              setSelectedLocation(null);
+              setSelectedKandang(null);
+              updateFilter('areaFilter', selectedValue ? selectedValue.value.toString() : '');
+              updateFilter('locationFilter', '');
+              updateFilter('kandangFilter', '');
+              setPage(1);
+            }}
+            className={{ wrapper: 'w-full' }}
+            onInputChange={(value) => setAreaSelectInputValue(value)}
+            isLoading={isLoadingAreas}
+            isClearable
+          />
+
+          <SelectInput
+            label='Lokasi'
+            placeholder='Pilih Lokasi'
+            options={optionsLocation}
+            value={selectedLocation}
+            onChange={(selected) => {
+              const selectedValue = selected as OptionType | null;
+              setSelectedLocation(selectedValue);
+              setSelectedKandang(null);
+              updateFilter('locationFilter', selectedValue ? selectedValue.value.toString() : '');
+              updateFilter('kandangFilter', '');
+              setPage(1);
+            }}
+            className={{ wrapper: 'w-full' }}
+            onInputChange={(value) => setLocationSelectInputValue(value)}
+            isLoading={isLoadingLocations}
+            isClearable
+            isDisabled={!selectedArea}
+          />
+
+          <SelectInput
+            label='Kandang'
+            placeholder='Pilih Kandang'
+            options={optionsKandang}
+            value={selectedKandang}
+            onChange={(selected) => {
+              const selectedValue = selected as OptionType | null;
+              setSelectedKandang(selectedValue);
+              updateFilter('kandangFilter', selectedValue ? selectedValue.value.toString() : '');
+              setPage(1);
+            }}
+            className={{ wrapper: 'w-full' }}
+            onInputChange={(value) => setKandangSelectInputValue(value)}
+            isLoading={isLoadingKandang}
+            isClearable
+            isDisabled={!selectedLocation}
+          />
+
+          <SelectInput
+            label='Periode'
+            placeholder='Pilih Periode'
+            options={[
+              { value: '1', label: 'Periode 1' },
+              { value: '2', label: 'Periode 2' },
+              { value: '3', label: 'Periode 3' },
+            ]}
+            value={
+              tableFilterState.periodFilter
+                ? { value: tableFilterState.periodFilter, label: `Periode ${tableFilterState.periodFilter}` }
+                : null
+            }
+            onChange={(selected) => {
+              const selectedValue = selected as OptionType | null;
+              updateFilter('periodFilter', selectedValue ? selectedValue.value.toString() : '');
+              setPage(1);
+            }}
+            className={{ wrapper: 'w-full' }}
+            isClearable
+          />
+        </div>
+
+        {/* Filter Dropdowns - Mobile */}
+        <div className='sm:hidden flex flex-col gap-3 mt-4'>
+          <SelectInput
+            label='Area'
+            placeholder='Pilih Area'
+            options={optionsArea}
+            value={selectedArea}
+            onChange={(selected) => {
+              const selectedValue = selected as OptionType | null;
+              setSelectedArea(selectedValue);
+              setSelectedLocation(null);
+              setSelectedKandang(null);
+              updateFilter('areaFilter', selectedValue ? selectedValue.value.toString() : '');
+              updateFilter('locationFilter', '');
+              updateFilter('kandangFilter', '');
+              setPage(1);
+            }}
+            className={{ wrapper: 'w-full' }}
+            onInputChange={(value) => setAreaSelectInputValue(value)}
+            isLoading={isLoadingAreas}
+            isClearable
+          />
+
+          <SelectInput
+            label='Lokasi'
+            placeholder='Pilih Lokasi'
+            options={optionsLocation}
+            value={selectedLocation}
+            onChange={(selected) => {
+              const selectedValue = selected as OptionType | null;
+              setSelectedLocation(selectedValue);
+              setSelectedKandang(null);
+              updateFilter('locationFilter', selectedValue ? selectedValue.value.toString() : '');
+              updateFilter('kandangFilter', '');
+              setPage(1);
+            }}
+            className={{ wrapper: 'w-full' }}
+            onInputChange={(value) => setLocationSelectInputValue(value)}
+            isLoading={isLoadingLocations}
+            isClearable
+            isDisabled={!selectedArea}
+          />
+
+          <SelectInput
+            label='Kandang'
+            placeholder='Pilih Kandang'
+            options={optionsKandang}
+            value={selectedKandang}
+            onChange={(selected) => {
+              const selectedValue = selected as OptionType | null;
+              setSelectedKandang(selectedValue);
+              updateFilter('kandangFilter', selectedValue ? selectedValue.value.toString() : '');
+              setPage(1);
+            }}
+            className={{ wrapper: 'w-full' }}
+            onInputChange={(value) => setKandangSelectInputValue(value)}
+            isLoading={isLoadingKandang}
+            isClearable
+            isDisabled={!selectedLocation}
+          />
+
+          <SelectInput
+            label='Periode'
+            placeholder='Pilih Periode'
+            options={[
+              { value: '1', label: 'Periode 1' },
+              { value: '2', label: 'Periode 2' },
+              { value: '3', label: 'Periode 3' },
+            ]}
+            value={
+              tableFilterState.periodFilter
+                ? { value: tableFilterState.periodFilter, label: `Periode ${tableFilterState.periodFilter}` }
+                : null
+            }
+            onChange={(selected) => {
+              const selectedValue = selected as OptionType | null;
+              updateFilter('periodFilter', selectedValue ? selectedValue.value.toString() : '');
+              setPage(1);
+            }}
+            className={{ wrapper: 'w-full' }}
+            isClearable
+          />
+        </div>
       </div>
 
       {/* Bulk action buttons */}
       <div className={'flex justify-end items-center'}>
-        {selectedRecordings.length > 0 && (
+        {selectedRowIds.length > 0 && (
           <div className='flex gap-2 mb-4'>
             <Button
               type='button'
@@ -285,7 +484,7 @@ const RecordingTable = () => {
                 width={20}
                 height={20}
               />
-              Approve ({selectedRecordings.length})
+              Approve ({selectedRowIds.length})
             </Button>
             <Button
               type='button'
@@ -298,7 +497,7 @@ const RecordingTable = () => {
                 width={20}
                 height={20}
               />
-              Reject ({selectedRecordings.length})
+              Reject ({selectedRowIds.length})
             </Button>
           </div>
         )}
@@ -306,7 +505,7 @@ const RecordingTable = () => {
         <ConfirmationModal
           ref={bulkApproveModal.ref}
           type='success'
-          text={`Apakah anda yakin ingin menyetujui ${selectedRecordings.length} data Recording yang dipilih?`}
+          text={`Apakah anda yakin ingin menyetujui ${selectedRowIds.length} data Recording yang dipilih?`}
           secondaryButton={{
             text: 'Tidak',
           }}
@@ -321,7 +520,7 @@ const RecordingTable = () => {
         <ConfirmationModal
           ref={bulkRejectModal.ref}
           type='error'
-          text={`Apakah anda yakin ingin menolak ${selectedRecordings.length} data Recording yang dipilih?`}
+          text={`Apakah anda yakin ingin menolak ${selectedRowIds.length} data Recording yang dipilih?`}
           secondaryButton={{
             text: 'Tidak',
           }}
@@ -339,75 +538,83 @@ const RecordingTable = () => {
         columns={[
           {
             id: 'select',
-            accessorKey: 'id',
             header: ({ table }) => (
-              <input
-                type='checkbox'
-                className='checkbox'
-                checked={
-                  table.getRowModel().rows.length > 0 &&
-                  table
-                    .getRowModel()
-                    .rows.every((row) => selectedRecordings.includes(row.index))
-                }
-                onChange={(e) => {
-                  if (e.target.checked) {
-                    setSelectedRecordings(
-                      table.getRowModel().rows.map((row) => row.index)
-                    );
-                  } else {
-                    setSelectedRecordings([]);
-                  }
-                }}
+              <div className='w-full flex flex-row justify-center'>
+                <CheckboxInput
+                  name='allRow'
+                  checked={table.getIsAllRowsSelected()}
+                  indeterminate={table.getIsSomeRowsSelected()}
+                  onChange={table.getToggleAllRowsSelectedHandler()}
                 />
+              </div>
             ),
             cell: ({ row }) => (
-              <input
-                type='checkbox'
-                className='checkbox'
-                checked={selectedRecordings.includes(row.index)}
-                onChange={(e) => {
-                  if (e.target.checked) {
-                    setSelectedRecordings([...selectedRecordings, row.index]);
-                  } else {
-                    setSelectedRecordings(
-                      selectedRecordings.filter((i) => i !== row.index)
-                    );
-                  }
-                }}
+              <div>
+                <CheckboxInput
+                  name='row'
+                  checked={row.getIsSelected()}
+                  disabled={!row.getCanSelect()}
+                  indeterminate={row.getIsSomeSelected()}
+                  onChange={row.getToggleSelectedHandler()}
                 />
+              </div>
             ),
           },
           {
             header: '#',
-            cell: (props) => pageSize * (page - 1) + props.row.index + 1,
+            cell: (props) => tableFilterState.pageSize * (tableFilterState.page - 1) + props.row.index + 1,
           },
           {
-            accessorKey: 'flock.name',
-            header: 'Flock',
+            header: 'Nama Project',
+            cell: (props) => `Project ${props.row.original.project_flock_kandang_id}`,
           },
           {
-            accessorKey: 'recording_date',
-            header: 'Tanggal Recording',
+            header: 'Umur (hari)',
+            cell: (props) => props.row.original.day,
+          },
+          {
+            accessorKey: 'record_date',
+            header: 'Waktu Recording',
             cell: (props) =>
-              new Date(props.row.original.recording_date).toLocaleDateString(),
+              new Date(props.row.original.record_date).toLocaleDateString(),
           },
           {
-            accessorKey: 'location.name',
-            header: 'Lokasi',
+            header: 'Populasi Awal',
+            cell: (props) => props.row.original.total_chick?.toLocaleString() || '-',
           },
           {
-            accessorKey: 'coop.name',
-            header: 'Kandang',
+            header: 'BW',
+            cell: (props) => props.row.original.avg_daily_gain?.toFixed(2) || '-',
           },
           {
-            accessorKey: 'mortality',
-            header: 'Total Mortality',
+            header: 'Pakan',
+            cell: (props) => props.row.original.cum_intake?.toLocaleString() || '-',
+          },
+          {
+            header: 'FCR',
+            cell: (props) => props.row.original.fcr_value?.toFixed(2) || '-',
+          },
+          {
+            accessorKey: 'total_depletion',
+            header: 'Total Deplesi',
+            cell: (props) => props.row.original.total_depletion,
+          },
+          {
+            header: 'Deplesi (%)',
+            cell: (props) => props.row.original.daily_depletion_rate?.toFixed(2) || '-',
+          },
+          {
+            header: 'Populasi Akhir',
+            cell: (props) => (props.row.original.total_chick - props.row.original.total_depletion)?.toLocaleString() || '-',
+          },
+          {
+            header: 'Ketepatan Waktu',
+            cell: (props) => props.row.original.ontime ? 'Tepat Waktu' : 'Terlambat',
+          },
+          {
+            header: 'Tanggal Submit',
             cell: (props) =>
-              props.row.original.mortality.reduce(
-                (acc, curr) => acc + curr.count,
-                0
-              ),
+              new Date(props.row.original.created_at).toLocaleString(),
           },
           {
             header: 'Aksi',
@@ -452,13 +659,15 @@ const RecordingTable = () => {
             },
           },
         ]}
-        pageSize={pageSize}
-        page={page}
-        totalItems={dummyRecordings.length}
+        pageSize={tableFilterState.pageSize}
+        page={recordings?.status === 'success' ? recordings.meta?.page : tableFilterState.page}
+        totalItems={recordings?.status === 'success' ? recordings.meta?.total_results : 0}
         onPageChange={setPage}
-        isLoading={false}
+        isLoading={isLoading}
         sorting={sorting}
         setSorting={setSorting}
+        rowSelection={rowSelection}
+        setRowSelection={setRowSelection}
         className={{
           containerClassName: cn({
             'mb-20': paginatedData.length === 0,
@@ -477,7 +686,7 @@ const RecordingTable = () => {
       <ConfirmationModal
         ref={singleDeleteModal.ref}
         type='error'
-        text={`Apakah anda yakin ingin menghapus data Recording ini?`}
+        text={`Apakah anda yakin ingin menghapus data Recording ini (ID: ${selectedRecording?.id})?`}
         secondaryButton={{
           text: 'Tidak',
         }}

src/components/pages/production/recording/form/RecordingForm.schema.ts

@@ -1,212 +1,222 @@
 import * as Yup from 'yup';
 import { RECORDING_FLAG_OPTIONS } from '@/config/constant';
-import { Recording } from '@/types/api/production/recording';
+import {
+  Recording,
+  CreateRecordingPayload,
+} from '@/types/api/production/recording';
 
 export const RecordingFormSchema = Yup.object({
-  flock: Yup.object({
+  project_flock_kandang: Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
   }).nullable(),
-  flock_id: Yup.number()
+  project_flock_kandang_id: Yup.number()
     .default(0)
-    .typeError('Flock wajib diisi!')
+    .typeError('Project Flock Kandang wajib diisi!')
     .test(
-      'is-valid-flock',
-      'Flock wajib diisi!',
+      'is-valid-project-flock-kandang',
+      'Project Flock Kandang wajib diisi!',
       (value) => value !== undefined && value !== null && value > 0
     )
-    .required('Flock wajib diisi!'),
-  location: Yup.object({
-    value: Yup.number().min(1).required(),
-    label: Yup.string().required(),
-  }).nullable(),
-  location_id: Yup.number()
-    .default(0)
-    .typeError('Lokasi wajib diisi!')
+    .required('Project Flock Kandang wajib diisi!')
     .test(
-      'is-valid-location',
-      'Lokasi wajib diisi!',
-      (value) => value !== undefined && value !== null && value > 0
-    )
-    .required('Lokasi wajib diisi!'),
-  coop: Yup.object({
-    value: Yup.number().min(1).required(),
-    label: Yup.string().required(),
-  }).nullable(),
-  coop_id: Yup.number()
-    .default(0)
-    .typeError('Kandang wajib diisi!')
-    .test(
-      'is-valid-coop',
-      'Kandang wajib diisi!',
-      (value) => value !== undefined && value !== null && value > 0
-    )
-    .required('Kandang wajib diisi!'),
-  recording_date: Yup.date()
-    .required('Tanggal recording wajib diisi')
-    .typeError('Format tanggal tidak valid'),
-  feed_data: Yup.array()
-    .of(
-      Yup.object({
-        feed_id: Yup.string().required('Nama pakan wajib diisi!'),
-        feed_qty: Yup.mixed<number | ''>().notRequired(),
-        feed_stock: Yup.number()
-          .required('Jumlah pakan yang digunakan wajib diisi!')
-          .min(1, 'Jumlah pakan minimal 1!')
-          .typeError('Jumlah pakan yang digunakan harus berupa angka!')
-          .test(
-            'is-not-exceed-qty',
-            'Jumlah pakan yang digunakan tidak boleh melebihi stok tersedia!',
-            function (value) {
-              const { feed_qty } = this.parent;
-              if (value === undefined) return true;
-              if (
-                feed_qty === undefined ||
-                feed_qty === '' ||
-                typeof feed_qty !== 'number'
-              )
+      'not-already-recorded',
+      'Project Flock ini sudah direcord hari ini!',
+      function(value) {
+        const recordedProjectFlockIds = this.options.context?.recordedProjectFlockIds as Set<number>;
+        const formType = this.options.context?.type as 'add' | 'edit' | 'detail';
+        if (formType !== 'add') return true;
+        if (value && recordedProjectFlockIds?.has(value)) {
+          return false;
+        }
         return true;
-              return value <= feed_qty;
       }
     ),
-      })
-    )
-    .min(1, 'Minimal harus ada 1 data pakan!')
-    .required('Data pakan wajib diisi!'),
-  body_weight: Yup.array()
+  body_weights: Yup.array()
     .of(
       Yup.object({
-        chicken_weight: Yup.number()
+        weight: Yup.number()
           .required('Berat ayam wajib diisi!')
           .min(1, 'Berat ayam minimal 1 gram!')
           .typeError('Berat ayam harus berupa angka!'),
-        chicken_count: Yup.number()
+        qty: Yup.number()
           .required('Jumlah ayam wajib diisi!')
           .min(1, 'Jumlah ayam minimal 1 ekor!')
-          .typeError('Jumlah ayam harus berupa angka!'),
-        average_chicken_weight: Yup.number()
-          .required('Rata-rata berat ayam wajib diisi!')
-          .min(1, 'Rata-rata berat ayam minimal 1 gram!')
-          .typeError('Rata-rata berat ayam harus berupa angka!'),
+          .typeError('Jumlah ayam harus berupa angka!')
+          .default(1),
+        average_weight: Yup.number()
+          .optional()
+          .min(0, 'Rata-rata berat tidak boleh negatif!')
+          .typeError('Rata-rata berat harus berupa angka!')
+          .default(0),
       })
     )
     .min(1, 'Minimal harus ada 1 data bobot badan!')
     .required('Data bobot badan wajib diisi!'),
-  vaccination: Yup.array()
+  stocks: Yup.array()
     .of(
       Yup.object({
-        vaccine_id: Yup.string().required('Nama vaksin wajib diisi!'),
-        total_stock: Yup.mixed<number | ''>().notRequired(),
-        used_stock: Yup.number()
-          .required('Jumlah vaksin yang digunakan wajib diisi!')
-          .min(1, 'Jumlah vaksin minimal 1!')
-          .typeError('Jumlah vaksin yang digunakan harus berupa angka!')
-          .test(
-            'is-not-exceed-total',
-            'Jumlah vaksin yang digunakan tidak boleh melebihi stok tersedia!',
-            function (value) {
-              const { total_stock } = this.parent;
-              if (value === undefined) return true;
-              if (
-                total_stock === undefined ||
-                total_stock === '' ||
-                typeof total_stock !== 'number'
-              )
-                return true;
-              return value <= total_stock;
-            }
-          ),
+        product_warehouse_id: Yup.number()
+          .required('Produk wajib diisi!')
+          .min(1, 'Produk wajib diisi!')
+          .typeError('Produk harus berupa angka!'),
+        usage_amount: Yup.number()
+          .required('Jumlah penggunaan wajib diisi!')
+          .min(0, 'Jumlah penggunaan tidak boleh negatif!')
+          .typeError('Jumlah penggunaan harus berupa angka!'),
+        notes: Yup.string().optional(),
       })
     )
-    .min(1, 'Minimal harus ada 1 data vaksinasi!')
-    .required('Data vaksinasi wajib diisi!'),
-  mortality: Yup.array()
+    .min(1, 'Minimal harus ada 1 data stok!')
+    .required('Data stok wajib diisi!'),
+  depletions: Yup.array()
     .of(
       Yup.object({
-        condition: Yup.mixed<string>()
+        total: Yup.number()
+          .required('Jumlah depletions wajib diisi!')
+          .min(1, 'Jumlah depletions minimal 1!')
+          .typeError('Jumlah depletions harus berupa angka!'),
+        notes: Yup.string()
+          .required('Kondisi depletions wajib diisi!')
           .oneOf(
-            RECORDING_FLAG_OPTIONS.map((opt) => opt.value),
-            'Kondisi tidak valid!'
+            RECORDING_FLAG_OPTIONS.map((option) => option.value),
+            'Kondisi depletions tidak valid!'
           )
-          .required('Kondisi wajib diisi!'),
-        count: Yup.number()
-          .required('Jumlah mortalitas wajib diisi!')
-          .min(1, 'Jumlah mortalitas minimal 1 ekor!')
-          .typeError('Jumlah mortalitas harus berupa angka!'),
+          .typeError('Kondisi depletions harus berupa teks!')
+          .min(1, 'Kondisi depletions wajib diisi!'),
       })
     )
-    .min(1, 'Minimal harus ada 1 data mortalitas!')
-    .required('Data mortalitas wajib diisi!'),
+    .min(1, 'Minimal harus ada 1 data depletions!')
+    .required('Data depletions wajib diisi!'),
 });
 
-export const UpdateRecordingFormSchema = RecordingFormSchema;
+export const UpdateRecordingFormSchema = Yup.object({
+  project_flock_kandang: Yup.object({
+    value: Yup.number().min(1).required(),
+    label: Yup.string().required(),
+  }).nullable(),
+  project_flock_kandang_id: Yup.number()
+    .default(0)
+    .typeError('Project Flock Kandang wajib diisi!')
+    .test(
+      'is-valid-project-flock-kandang',
+      'Project Flock Kandang wajib diisi!',
+      (value) => value !== undefined && value !== null && value > 0
+    )
+    .required('Project Flock Kandang wajib diisi!'),
+  body_weights: Yup.array()
+    .of(
+      Yup.object({
+        weight: Yup.number()
+          .required('Berat ayam wajib diisi!')
+          .min(1, 'Berat ayam minimal 1 gram!')
+          .typeError('Berat ayam harus berupa angka!'),
+        qty: Yup.number()
+          .required('Jumlah ayam wajib diisi!')
+          .min(1, 'Jumlah ayam minimal 1 ekor!')
+          .typeError('Jumlah ayam harus berupa angka!')
+          .default(1),
+        average_weight: Yup.number()
+          .optional()
+          .min(0, 'Rata-rata berat tidak boleh negatif!')
+          .typeError('Rata-rata berat harus berupa angka!')
+          .default(0),
+      })
+    )
+    .min(1, 'Minimal harus ada 1 data bobot badan!')
+    .required('Data bobot badan wajib diisi!'),
+  stocks: Yup.array()
+    .of(
+      Yup.object({
+        product_warehouse_id: Yup.number()
+          .required('Produk wajib diisi!')
+          .min(1, 'Produk wajib diisi!')
+          .typeError('Produk harus berupa angka!'),
+        usage_amount: Yup.number()
+          .required('Jumlah penggunaan wajib diisi!')
+          .min(0, 'Jumlah penggunaan tidak boleh negatif!')
+          .typeError('Jumlah penggunaan harus berupa angka!'),
+        notes: Yup.string().optional(),
+      })
+    )
+    .min(1, 'Minimal harus ada 1 data stok!')
+    .required('Data stok wajib diisi!'),
+  depletions: Yup.array()
+    .of(
+      Yup.object({
+        total: Yup.number()
+          .required('Jumlah depletions wajib diisi!')
+          .min(1, 'Jumlah depletions minimal 1!')
+          .typeError('Jumlah depletions harus berupa angka!'),
+        notes: Yup.string()
+          .required('Kondisi depletions wajib diisi!')
+          .oneOf(
+            RECORDING_FLAG_OPTIONS.map((option) => option.value),
+            'Kondisi depletions tidak valid!'
+          )
+          .typeError('Kondisi depletions harus berupa teks!')
+          .min(1, 'Kondisi depletions wajib diisi!'),
+      })
+    )
+    .min(1, 'Minimal harus ada 1 data depletions!')
+    .required('Data depletions wajib diisi!'),
+});
 
 export type RecordingFormValues = Yup.InferType<typeof RecordingFormSchema>;
 
+type RecordingFormData = Partial<Recording> & {
+  body_weights?: CreateRecordingPayload['body_weights'];
+  stocks?: CreateRecordingPayload['stocks'];
+  depletions?: CreateRecordingPayload['depletions'];
+};
+
 export const getRecordingFormInitialValues = (
-  initialValues?: Recording
+  initialValues?: RecordingFormData
 ): RecordingFormValues => ({
-  flock: initialValues?.flock
+  project_flock_kandang: initialValues?.project_flock_kandang_id
     ? {
-        value: initialValues.flock.id,
-        label: initialValues.flock.name,
+        value: initialValues.project_flock_kandang_id,
+        label: `Project Flock #${initialValues.project_flock_kandang_id}`,
       }
     : null,
-  flock_id: initialValues?.flock?.id ?? 0,
-  location: initialValues?.location
-    ? {
-        value: initialValues.location.id,
-        label: initialValues.location.name,
-      }
-    : null,
-  location_id: initialValues?.location?.id ?? 0,
-  coop: initialValues?.coop
-    ? {
-        value: initialValues.coop.id,
-        label: initialValues.coop.name,
-      }
-    : null,
-  coop_id: initialValues?.coop?.id ?? 0,
-  recording_date: initialValues?.recording_date
-    ? new Date(initialValues.recording_date)
-    : new Date(),
-  feed_data: initialValues?.feed_data
-    ? initialValues.feed_data.map((feed) => ({
-        feed_id: feed.feed_name,
-        feed_qty: feed.feed_qty,
-        feed_stock: feed.feed_stock,
-      }))
-    : [
+  project_flock_kandang_id: initialValues?.project_flock_kandang_id ?? 0,
+  body_weights: initialValues?.body_weights?.map(
+    (bw: NonNullable<CreateRecordingPayload['body_weights']>[0]) => ({
+      weight: bw.weight,
+      qty: bw.qty,
+      average_weight: bw.qty > 0 ? Math.round(bw.weight / bw.qty) : 0,
+    })
+  ) ?? [
     {
-          feed_id: '',
-          feed_qty: '',
-          feed_stock: 0,
+      weight: 0,
+      qty: 0,
+      average_weight: 0,
     },
   ],
-  body_weight: initialValues?.body_weight ?? [
+  stocks: initialValues?.stocks?.map(
+    (stock: NonNullable<CreateRecordingPayload['stocks']>[0]) => ({
+      product_warehouse_id: stock.product_warehouse_id,
+      usage_amount: stock.usage_amount,
+      notes: stock.notes,
+    })
+  ) ?? [
     {
-      chicken_weight: 0,
-      chicken_count: 0,
-      average_chicken_weight: 0,
+      product_warehouse_id: 0,
+      usage_amount: 0,
+      notes: '',
     },
   ],
-  vaccination: initialValues?.vaccination
-    ? initialValues.vaccination.map((vaccine) => ({
-        vaccine_id: vaccine.vaccine_name,
-        total_stock: vaccine.total_stock,
-        used_stock: vaccine.used_stock,
-      }))
-    : [
+  depletions: initialValues?.depletions?.map(
+    (depletion: NonNullable<CreateRecordingPayload['depletions']>[0]) => ({
+      product_warehouse_id: depletion.product_warehouse_id,
+      total: depletion.total,
+      notes: depletion.notes,
+    })
+  ) ?? [
     {
-          vaccine_id: '',
-          total_stock: '',
-          used_stock: 0,
-        },
-      ],
-  mortality: initialValues?.mortality ?? [
-    {
-      condition: '',
-      count: 0,
+      product_warehouse_id: 0,
+      total: 0,
+      notes: '',
     },
   ],
 });

src/components/pages/production/recording/form/useRecordingFormHandlers.ts

@@ -24,7 +24,7 @@ export const useRecordingFormHandlers = (initialValuesId?: number) => {
         return;
       }
       toast.success(res?.message as string);
-      router.push('/flock/recording');
+      router.push('/production/recording');
     },
     [router]
   );
@@ -38,7 +38,7 @@ export const useRecordingFormHandlers = (initialValuesId?: number) => {
       }
       toast.success(res?.message as string);
       router.refresh();
-      router.push('/flock/recording');
+      router.push('/production/recording');
     },
     [router]
   );
@@ -55,7 +55,7 @@ export const useRecordingFormHandlers = (initialValuesId?: number) => {
     deleteModal.closeModal();
     toast.success('Successfully delete Recording!');
     setIsDeleteLoading(false);
-    router.push('/flock/recording');
+    router.push('/production/recording');
   }, [deleteModal, initialValuesId, router]);
 
   return {

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

@@ -0,0 +1,633 @@
+'use client';
+
+import { ChangeEventHandler, useState } from 'react';
+import useSWR from 'swr';
+import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
+import toast from 'react-hot-toast';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import Button from '@/components/Button';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import TextInput from '@/components/input/TextInput';
+import CheckboxInput from '@/components/input/CheckboxInput';
+
+import { TransferToLaying } from '@/types/api/production/transfer-to-laying';
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+import { cn, formatDate } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { Flock } from '@/types/api/master-data/flock';
+import { FlockApi } from '@/services/api/master-data';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  approveClickHandler,
+  rejectClickHandler,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<TransferToLaying, unknown>;
+  approveClickHandler: () => void;
+  rejectClickHandler: () => void;
+  deleteClickHandler: () => void;
+}) => {
+  return (
+    <div
+      tabIndex={type === 'dropdown' ? 0 : undefined}
+      className={cn(
+        {
+          'dropdown-content': type === 'dropdown',
+          'mt-2': type === 'collapse',
+        },
+        'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
+      )}
+    >
+      <Button
+        href={`/production/transfer-to-laying/detail/?transferToLayingId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
+        Detail
+      </Button>
+
+      <Button
+        href={`/production/transfer-to-laying/detail/edit/?transferToLayingId=${props.row.original.id}`}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon icon='material-symbols:edit-outline' width={16} height={16} />
+        Edit
+      </Button>
+
+      <Button
+        variant='ghost'
+        color='success'
+        onClick={approveClickHandler}
+        className='justify-start text-sm'
+      >
+        <Icon icon='material-symbols:check' width={24} height={24} />
+        Approve
+      </Button>
+
+      <Button
+        variant='ghost'
+        color='error'
+        onClick={rejectClickHandler}
+        className='justify-start text-sm'
+      >
+        <Icon icon='material-symbols:close' width={24} height={24} />
+        Reject
+      </Button>
+
+      <Button
+        onClick={deleteClickHandler}
+        variant='ghost'
+        color='error'
+        className='text-error hover:text-inherit'
+      >
+        <Icon
+          icon='material-symbols:delete-outline-rounded'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Delete
+      </Button>
+    </div>
+  );
+};
+
+const TransferToLayingsTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      transferDate: '',
+      flockSource: '',
+      flockDestination: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      transferDate: 'transfer_date',
+      flockSource: 'flock_source',
+      flockDestination: 'flock_destination',
+    },
+  });
+
+  const {
+    data: transferToLayings,
+    isLoading,
+    mutate: refreshTransferToLayings,
+  } = useSWR(
+    `${TransferToLayingApi.basePath}${getTableFilterQueryString()}`,
+    TransferToLayingApi.getAllFetcher
+  );
+
+  // Modal hooks
+  const deleteModal = useModal();
+  const approveModal = useModal();
+  const rejectModal = useModal();
+
+  // Flocks data
+  const {
+    setInputValue: setFlockSourceInputValue,
+    options: flockSourceOptions,
+    isLoadingOptions: isLoadingFlockSourceOptions,
+  } = useSelect<Flock>(FlockApi.basePath, 'id', 'name');
+
+  const {
+    setInputValue: setFlockDestinationInputValue,
+    options: flockDestinationOptions,
+    isLoadingOptions: isLoadingFlockDestinationOptions,
+  } = useSelect<Flock>(FlockApi.basePath, 'id', 'name');
+
+  // Flocks value
+  const [selectedFlockSource, setSelectedFlockSource] =
+    useState<OptionType | null>(null);
+  const [selectedFlockDestination, setSelectedFlockDestination] =
+    useState<OptionType | null>(null);
+
+  const [selectedTransferToLaying, setSelectedTransferToLaying] = useState<
+    TransferToLaying | undefined
+  >(undefined);
+
+  // Modal loading state
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isRejectLoading, setIsRejectLoading] = useState(false);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+  const selectedRowIds = Object.keys(rowSelection).map((item) =>
+    parseInt(item)
+  );
+
+  const transferToLayingsColumns: ColumnDef<TransferToLaying>[] = [
+    {
+      id: 'select',
+      header: ({ table }) => (
+        <div className='w-full flex flex-row justify-center'>
+          <CheckboxInput
+            name='allRow'
+            checked={table.getIsAllRowsSelected()}
+            indeterminate={table.getIsSomeRowsSelected()}
+            onChange={table.getToggleAllRowsSelectedHandler()}
+          />
+        </div>
+      ),
+      cell: ({ row }) => (
+        <div>
+          <CheckboxInput
+            name='row'
+            checked={row.getIsSelected()}
+            disabled={!row.getCanSelect()}
+            indeterminate={row.getIsSomeSelected()}
+            onChange={row.getToggleSelectedHandler()}
+          />
+        </div>
+      ),
+    },
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'transfer_date',
+      header: 'Tanggal Transfer',
+      cell: (props) => formatDate(props.getValue() as string, 'DD MMM YYYY'),
+    },
+    {
+      accessorKey: 'flock_source',
+      header: 'Flock Asal',
+      cell: (props) => props.row.original.flock_source.name,
+    },
+    {
+      accessorKey: 'flock_destination',
+      header: 'Flock Tujuan',
+      cell: (props) => props.row.original.flock_destination.name,
+    },
+    {
+      accessorKey: 'quantity',
+      header: 'Kuantitas',
+    },
+    {
+      accessorKey: 'reason',
+      header: 'Alasan Transfer',
+    },
+    {
+      header: 'Aksi',
+      cell: (props) => {
+        const currentPageSize = props.table.getPaginationRowModel().rows.length;
+        const currentPageRows = props.table.getPaginationRowModel().flatRows;
+        const currentRowRelativeIndex =
+          currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+        const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+        const approveClickHandler = () => {
+          setSelectedTransferToLaying(props.row.original);
+
+          // Set row selection
+          setRowSelection({
+            [String(props.row.original.id)]: true,
+          });
+
+          approveModal.openModal();
+        };
+
+        const rejectClickHandler = () => {
+          setSelectedTransferToLaying(props.row.original);
+
+          // Set row selection
+          setRowSelection({
+            [String(props.row.original.id)]: true,
+          });
+
+          rejectModal.openModal();
+        };
+
+        const deleteClickHandler = () => {
+          setSelectedTransferToLaying(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  approveClickHandler={approveClickHandler}
+                  rejectClickHandler={rejectClickHandler}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowOptionsMenu
+                  type='dropdown'
+                  props={props}
+                  approveClickHandler={approveClickHandler}
+                  rejectClickHandler={rejectClickHandler}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  const bulkApproveClickHandler = () => {
+    approveModal.openModal();
+  };
+
+  const bulkRejectClickHandler = () => {
+    rejectModal.openModal();
+  };
+
+  // Modal confirm click handler
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await TransferToLayingApi.delete(selectedTransferToLaying?.id as number);
+    refreshTransferToLayings();
+
+    deleteModal.closeModal();
+    toast.success('Berhasil menghapus data transfer ke laying!');
+    setIsDeleteLoading(false);
+  };
+
+  const confirmationModalApproveClickHandler = async () => {
+    setIsApproveLoading(true);
+
+    const bulkApproveResponse = await TransferToLayingApi.bulkApprove(
+      selectedRowIds
+    );
+
+    if (isResponseSuccess(bulkApproveResponse)) {
+      refreshTransferToLayings();
+      approveModal.closeModal();
+
+      // TODO: remove console.log
+      console.log('Approved data:', selectedRowIds);
+
+      toast.success(
+        `Berhasil approve ${selectedRowIds.length} data transfer ke laying!`
+      );
+
+      setRowSelection({});
+    } else {
+      approveModal.closeModal();
+
+      toast.error(
+        `Gagal approve ${selectedRowIds.length} data transfer ke laying!`
+      );
+    }
+
+    setIsApproveLoading(false);
+  };
+
+  const confirmationModalRejectClickHandler = async () => {
+    setIsRejectLoading(true);
+
+    const bulkRejectResponse = await TransferToLayingApi.bulkReject(
+      selectedRowIds
+    );
+
+    if (isResponseSuccess(bulkRejectResponse)) {
+      refreshTransferToLayings();
+      rejectModal.closeModal();
+
+      // TODO: remove console.log
+      console.log('Rejected data:', selectedRowIds);
+
+      toast.success(
+        `Berhasil reject ${selectedRowIds.length} data transfer ke laying!`
+      );
+      setRowSelection({});
+    } else {
+      rejectModal.closeModal();
+
+      toast.error(
+        `Gagal reject ${selectedRowIds.length} data transfer ke laying!`
+      );
+    }
+
+    setIsRejectLoading(false);
+  };
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+
+    setPageSize(newVal.value as number);
+  };
+
+  const transferDateChangeHandler: ChangeEventHandler<HTMLInputElement> = (
+    e
+  ) => {
+    updateFilter('transferDate', e.target.value);
+  };
+
+  const flockSourceChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedFlockSource(val as OptionType);
+    updateFilter(
+      'flockSource',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  const flockDestinationChangeHandler = (
+    val: OptionType | OptionType[] | null
+  ) => {
+    setSelectedFlockDestination(val as OptionType);
+    updateFilter(
+      'flockDestination',
+      val ? ((val as OptionType).value as string) : ''
+    );
+  };
+
+  // track sorting
+  //   useEffect(() => {
+  //     const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+
+  //     if (!isNameSorted) {
+  //       updateFilter('nameSort', '');
+  //     } else {
+  //       updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+  //     }
+  //   }, [sorting, updateFilter]);
+
+  return (
+    <>
+      <div className='w-full p-0 sm:p-4'>
+        <div className='flex flex-col gap-2 mb-4'>
+          <div className='w-full flex flex-col xl:flex-row justify-between items-end xl:items-center gap-2'>
+            <div className='w-full sm:w-fit flex flex-col sm:flex-row self-start gap-2'>
+              <Button
+                href='/production/transfer-to-laying/add'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah Transfer ke Laying
+              </Button>
+
+              {selectedRowIds.length > 0 && (
+                <>
+                  <Button
+                    variant='outline'
+                    color='success'
+                    onClick={bulkApproveClickHandler}
+                    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={bulkRejectClickHandler}
+                    disabled={selectedRowIds.length === 0}
+                    className='w-full sm:w-fit'
+                  >
+                    <Icon
+                      icon='material-symbols:close'
+                      width={24}
+                      height={24}
+                    />
+                    Reject
+                  </Button>
+                </>
+              )}
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari TransferToLaying'
+              value={tableFilterState.search}
+              onChange={searchChangeHandler}
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+          </div>
+
+          <div className='grid grid-cols-12 justify-end gap-4'>
+            <TextInput
+              required
+              type='date'
+              label='Tanggal Transfer'
+              name='transfer_date'
+              placeholder='Masukkan tanggal transfer'
+              value={tableFilterState.transferDate}
+              onChange={transferDateChangeHandler}
+              className={{ wrapper: 'col-span-12 sm:col-span-3' }}
+            />
+
+            <SelectInput
+              label='Flock Asal'
+              options={flockSourceOptions}
+              isLoading={isLoadingFlockSourceOptions}
+              value={selectedFlockSource}
+              onChange={flockSourceChangeHandler}
+              onInputChange={setFlockSourceInputValue}
+              isClearable
+              className={{
+                wrapper: 'col-span-12 sm:col-span-3',
+              }}
+            />
+
+            <SelectInput
+              label='Flock Tujuan'
+              options={flockDestinationOptions}
+              isLoading={isLoadingFlockDestinationOptions}
+              value={selectedFlockDestination}
+              onChange={flockDestinationChangeHandler}
+              onInputChange={setFlockDestinationInputValue}
+              isClearable
+              className={{
+                wrapper: 'col-span-12 sm:col-span-3',
+              }}
+            />
+
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{
+                wrapper:
+                  'col-span-6 sm:col-span-3 max-w-28 sm:justify-self-end',
+              }}
+            />
+          </div>
+        </div>
+
+        <Table<TransferToLaying>
+          data={
+            isResponseSuccess(transferToLayings) ? transferToLayings?.data : []
+          }
+          columns={transferToLayingsColumns}
+          pageSize={tableFilterState.pageSize}
+          page={
+            isResponseSuccess(transferToLayings)
+              ? transferToLayings?.meta?.page
+              : 0
+          }
+          totalItems={
+            isResponseSuccess(transferToLayings)
+              ? transferToLayings?.meta?.total_results
+              : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          sorting={sorting}
+          setSorting={setSorting}
+          rowSelection={rowSelection}
+          setRowSelection={setRowSelection}
+          className={{
+            containerClassName: cn({
+              'mb-20':
+                isResponseSuccess(transferToLayings) &&
+                transferToLayings?.data?.length === 0,
+            }),
+            tableWrapperClassName: 'overflow-x-auto min-h-full!',
+            tableClassName: 'font-inter w-full table-auto min-h-full!',
+            headerRowClassName: 'border-b border-b-gray-200',
+            headerColumnClassName:
+              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            bodyRowClassName: 'border-b border-b-gray-200',
+            bodyColumnClassName:
+              'px-6 py-3 last:flex last:flex-row last:justify-end',
+          }}
+        />
+      </div>
+
+      <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,
+        }}
+      />
+
+      <ConfirmationModal
+        ref={approveModal.ref}
+        type='success'
+        text={`Apakah anda yakin ingin approve data transfer ke laying ini (${selectedRowIds.length} data)?`}
+        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 (${selectedRowIds.length} data)?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isRejectLoading,
+          onClick: confirmationModalRejectClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default TransferToLayingsTable;

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

@@ -0,0 +1,83 @@
+import * as Yup from 'yup';
+
+type TransferToLayingFormSchemaType = {
+  transfer_date?: string;
+  flockSource?: {
+    value: number;
+    label: string;
+  };
+  flockDestination?: {
+    value: number;
+    label: string;
+  };
+
+  totalQuantity?: number;
+  maxTotalQuantity?: number; // original cap (hidden), helper
+
+  kandangs: {
+    kandang: {
+      value: number;
+      label: string;
+    };
+    quantity: number | string; // editable
+    maxQuantity?: number; // original cap (hidden), helper
+  }[];
+  reason?: string;
+};
+
+export const TransferToLayingFormSchema: Yup.ObjectSchema<TransferToLayingFormSchemaType> =
+  Yup.object({
+    transfer_date: Yup.string().required('Tanggal transfer wajib diisi!'),
+
+    flockSource: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).required('Flock asal wajib diisi!'),
+
+    flockDestination: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).required('Flock tujuan wajib diisi!'),
+
+    totalQuantity: Yup.number()
+      .min(1, 'Jumlah transfer minimal 1')
+      .max(
+        Yup.ref('maxTotalQuantity'),
+        ({ max }) => `Kuantitas maksimal ${max}!`
+      )
+      .required('Jumlah transfer wajib diisi!'),
+
+    maxTotalQuantity: Yup.number()
+      .min(1, 'Jumlah transfer minimal 1')
+      .required('Jumlah transfer wajib diisi!'),
+
+    kandangs: Yup.array()
+      .of(
+        Yup.object({
+          kandang: Yup.object({
+            value: Yup.number().min(1).required(),
+            label: Yup.string().required(),
+          }).required('Kandang wajib diisi!'),
+
+          quantity: Yup.number()
+            .min(0, 'Kuantitas minimal 0!')
+            .max(
+              Yup.ref('maxQuantity'),
+              ({ max }) => `Kuantitas maksimal ${max}!`
+            )
+            .required('Kuantitas wajib diisi!'),
+
+          maxQuantity: Yup.number().min(1).required(), // internal helper field
+        })
+      )
+      .min(1, 'Minimal 1 kandang terisi!')
+      .required('Kandang wajib diisi!'),
+
+    reason: Yup.string().required('Alasan transfer wajib diisi!'),
+  });
+
+export const UpdateTransferToLayingFormSchema = TransferToLayingFormSchema;
+
+export type TransferToLayingFormValues = Yup.InferType<
+  typeof TransferToLayingFormSchema
+>;

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

@@ -0,0 +1,688 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, 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 TextInput from '@/components/input/TextInput';
+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 {
+  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';
+
+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 createTransferToLayingHandler = useCallback(
+    async (payload: CreateTransferToLayingPayload) => {
+      console.log('Create transfer to laying:', { payload });
+
+      toast.success('Berhasil menambahkan data transfer ke laying!');
+    },
+    [router]
+  );
+
+  const updateTransferToLayingHandler = useCallback(
+    async (
+      transferToLayingId: number,
+      payload: UpdateTransferToLayingPayload
+    ) => {
+      console.log(
+        `Update transfer to laying with ID of ${transferToLayingId}:`,
+        { payload }
+      );
+
+      toast.success('Berhasil mengubah data transfer ke laying!');
+    },
+    [router]
+  );
+
+  const formikInitialValues = useMemo<TransferToLayingFormValues>(() => {
+    return {
+      transfer_date: initialValues?.transfer_date ?? '',
+      flockSource: initialValues?.flock_source
+        ? {
+            value: initialValues?.flock_source.id,
+            label: initialValues?.flock_source.name,
+          }
+        : undefined,
+      flockDestination: initialValues?.flock_destination
+        ? {
+            value: initialValues?.flock_destination.id,
+            label: initialValues?.flock_destination.name,
+          }
+        : undefined,
+      totalQuantity: initialValues?.quantity ?? undefined,
+
+      kandangs: initialValues?.kandangs
+        ? initialValues.kandangs.map((kandang) => ({
+            kandang: {
+              value: kandang.kandang.id,
+              label: kandang.kandang.name,
+            },
+            quantity: kandang.quantity,
+          }))
+        : [],
+
+      reason: initialValues?.reason ?? undefined,
+    };
+  }, [initialValues]);
+
+  const formik = useFormik<TransferToLayingFormValues>({
+    initialValues: formikInitialValues,
+    validationSchema:
+      type === 'edit'
+        ? UpdateTransferToLayingFormSchema
+        : TransferToLayingFormSchema,
+    onSubmit: async (values) => {
+      console.log({ values });
+
+      setFormErrorMessage('');
+
+      const transferToLayingPayload: CreateTransferToLayingPayload = {
+        transfer_date: values.transfer_date as string,
+        flock_source_id: values.flockSource?.value as number,
+        flock_destination_id: values.flockDestination?.value as number,
+        totalQuantity: values.totalQuantity as number,
+
+        kandangs: values.kandangs?.map((kandang) => ({
+          kandang_id: kandang.kandang.value,
+          quantity: kandang.quantity,
+        })) as {
+          kandang_id: number;
+          quantity: number;
+        }[],
+
+        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 { kandangs: kandangsValue } = formikValues;
+
+  const deleteTransferToLayingClickHandler = () => {
+    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('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
+  ) => {
+    return (
+      formik.touched.kandangs?.[idx]?.[column] &&
+      Boolean(
+        formik.errors.kandangs?.[idx] instanceof Object &&
+          formik.errors.kandangs?.[idx]?.[column]
+      )
+    );
+  };
+
+  const repeaterInputErrorMessage = (
+    column: keyof TransferToLayingFormValues['kandangs'][0],
+    idx: number
+  ) => {
+    return (formik.errors.kandangs?.[idx] as Record<string, string>)?.[column];
+  };
+
+  // TODO: remove dummy data and use real data
+  // Flock Source
+  // const {
+  //   inputValue: flockSourceInputValue,
+  //   setInputValue: setFlockSourceInputValue,
+  //   options: flockSourceOptions,
+  //   isLoadingOptions: isLoadingFlockSourceOptions,
+  // } = useSelect<FlockWithKandangs>('/transfer-to-laying/production/get-flock-source', 'id', 'name');
+
+  // TODO: remove this dummy data
+  const { data: flockSources, isLoading: isLoadingFlockSourceOptions } = useSWR(
+    'test',
+    () => TransferToLayingApi.getFlockSource()
+  );
+
+  const flockSourceOptions = isResponseSuccess(flockSources)
+    ? flockSources?.data.map((flockSource) => ({
+        value: flockSource.id,
+        label: flockSource.name,
+      }))
+    : [];
+
+  const flockSourceChangeHandler = (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 formattedKandangs = flockSource.kandangs.map((item) => ({
+        kandang: {
+          value: item.kandang.id,
+          label: item.kandang.name,
+        },
+        quantity: '',
+        maxQuantity: item.quantity,
+      }));
+
+      formik.setFieldValue('totalQuantity', flockSource.totalQuantity);
+      formik.setFieldValue('maxTotalQuantity', flockSource.totalQuantity);
+      formik.setFieldValue('kandangs', formattedKandangs);
+    } else {
+      formik.setFieldValue('totalQuantity', undefined);
+      formik.setFieldValue('kandangs', undefined);
+      formik.setFieldValue('reason', '');
+    }
+
+    formik.setFieldTouched('flockSource', true);
+    formik.setFieldValue('flockSource', val);
+  };
+
+  // TODO: remove dummy data and use real data
+  // Flock Destination
+  // const {
+  //   inputValue: flockDestinationInputValue,
+  //   setInputValue: setFlockDestinationInputValue,
+  //   options: flockDestinationOptions,
+  //   isLoadingOptions: isLoadingFlockDestinationOptions,
+  // } = useSelect<FlockWithKandangs>('/transfer-to-laying/production/get-flock-destination', 'id', 'name');
+
+  // TODO: remove this dummy data
+  const {
+    data: flockDestinations,
+    isLoading: isLoadingFlockDestinationOptions,
+  } = useSWR('test', () => TransferToLayingApi.getFlockSource());
+
+  const flockDestinationOptions = isResponseSuccess(flockDestinations)
+    ? flockDestinations?.data.map((flockDestination) => ({
+        value: flockDestination.id,
+        label: flockDestination.name,
+      }))
+    : [];
+
+  const flockDestinationChangeHandler = (
+    val: OptionType | OptionType[] | null
+  ) => {
+    formik.setFieldTouched('flockDestination', true);
+    formik.setFieldValue('flockDestination', val);
+  };
+
+  useEffect(() => {
+    formikSetValues(formikInitialValues);
+  }, [formikSetValues, formikInitialValues]);
+
+  useEffect(() => {
+    // calculate total quantity if kandangs quantity change
+    if (kandangsValue && kandangsValue.length > 0) {
+      let newTotalQuantity = 0;
+
+      kandangsValue.forEach((item) => {
+        newTotalQuantity += item.quantity as number;
+      });
+
+      formik.setFieldValue('totalQuantity', newTotalQuantity);
+      formik.validateField('totalQuantity');
+    }
+  }, [formikSetValues, kandangsValue]);
+
+  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>
+
+        <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 flex flex-col gap-6'
+        >
+          <div className='flex flex-col gap-4'>
+            <TextInput
+              required
+              type='date'
+              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}
+                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}
+                isError={
+                  formik.touched.flockDestination &&
+                  Boolean(typeof formik.errors.flockDestination === 'string')
+                }
+                errorMessage={formik.errors.flockDestination as string}
+                isDisabled={type === 'detail'}
+                isClearable
+              />
+            </div>
+
+            <TextInput
+              required
+              type='number'
+              name='totalQuantity'
+              label='Jumlah Transfer'
+              bottomLabel={
+                formikValues.maxTotalQuantity
+                  ? `Max: ${formikValues.maxTotalQuantity}`
+                  : undefined
+              }
+              placeholder='Masukkan jumlah transfer'
+              value={formik.values.totalQuantity ?? ''}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.totalQuantity &&
+                Boolean(formik.errors.totalQuantity)
+              }
+              errorMessage={formik.errors.totalQuantity}
+              // readOnly={type === 'detail'}
+              // disabled={Boolean(formik.errors.flockSource)}
+              disabled
+            />
+
+            <div>
+              <div className='overflow-x-auto'>
+                <table className='table'>
+                  <thead>
+                    <tr>
+                      <th>Kandang</th>
+                      <th>Kuantitas</th>
+                    </tr>
+                  </thead>
+
+                  <tbody>
+                    {(!formik.values.kandangs ||
+                      formik.values.kandangs.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.kandangs &&
+                      formik.values.kandangs.map((kandang, idx) => (
+                        <tr key={idx}>
+                          <td>
+                            <SelectInput
+                              value={kandang.kandang}
+                              options={[]}
+                              isDisabled
+                              className={{
+                                wrapper: 'min-w-52',
+                              }}
+                            />
+                          </td>
+
+                          <td>
+                            <TextInput
+                              required
+                              type='number'
+                              name={`kandangs[${idx}].quantity`}
+                              bottomLabel={
+                                kandang.maxQuantity
+                                  ? `Max: ${kandang.maxQuantity}`
+                                  : undefined
+                              }
+                              placeholder='Masukkan kuantitas'
+                              value={kandang.quantity}
+                              onChange={formik.handleChange}
+                              onBlur={formik.handleBlur}
+                              isError={isRepeaterInputError('quantity', idx)}
+                              errorMessage={repeaterInputErrorMessage(
+                                '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>
+
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+            {type !== 'add' && (
+              <div className='flex flex-row justify-start gap-2'>
+                <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>
+
+                {type !== 'edit' && (
+                  <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>
+                )}
+              </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>
+
+                <Button
+                  type='submit'
+                  color='primary'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting}
+                  className='px-4'
+                >
+                  Submit
+                </Button>
+              </div>
+            )}
+          </div>
+
+          {formErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{formErrorMessage}</span>
+            </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' && (
+        <>
+          <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,
+            }}
+          />
+        </>
+      )}
+    </>
+  );
+};
+
+export default TransferToLayingForm;

src/config/constant.ts

@@ -13,7 +13,7 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
   },
 
   {
-    title: 'Production',
+    title: 'Produksi',
     link: '/production',
     icon: 'material-symbols:conveyor-belt-outline-rounded',
     submenu: [
@@ -32,6 +32,11 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
         link: '/production/recording',
         icon: 'mdi:clipboard-text',
       },
+      {
+        title: 'Transfer ke Laying',
+        link: '/production/transfer-to-laying',
+        icon: 'streamline:transfer-van',
+      },
     ],
   },
 
@@ -40,11 +45,11 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
     link: '/inventory',
     icon: 'mdi:warehouse',
     submenu: [
-      {
-        title: 'Product',
-        link: '/inventory/product',
-        icon: 'mdi:package-variant-closed',
-      },
+      // {
+      //   title: 'Product',
+      //   link: '/inventory/product',
+      //   icon: 'mdi:package-variant-closed',
+      // },
       {
         title: 'Penyesuaian Stok',
         link: '/inventory/adjustment',
@@ -216,7 +221,7 @@ export const SUPPLIER_FLAG_OPTIONS = [
 ];
 
 export const RECORDING_FLAG_OPTIONS = [
-  { label: 'Ayam Afkir', value: 'Ayam Afkir' },
-  { label: 'Ayam Culling', value: 'Ayam Culling' },
-  { label: 'Ayam Mati', value: 'Ayam Mati' },
+  { label: 'Ayam Afkir', value: 'Afkir' },
+  { label: 'Ayam Culling', value: 'Culling' },
+  { label: 'Ayam Mati', value: 'Mati' },
 ];

src/lib/helper.ts

@@ -1,7 +1,11 @@
 import moment from 'moment';
+import 'moment/locale/id';
 import { twMerge } from 'tailwind-merge';
 import clsx, { ClassValue } from 'clsx';
 
+// set locale globally
+moment.locale('id');
+
 export const sleep = (ms: number = 1000) =>
   new Promise((resolve) => setTimeout(resolve, ms));
 
@@ -13,6 +17,19 @@ export const cn = (...inputs: ClassValue[]) => {
   return twMerge(clsx(inputs));
 };
 
+export const formatNumber = (
+  value: number | bigint | Intl.StringNumericLiteral,
+  locale = 'en-US',
+  minimumFractionDigits = 0,
+  maximumFractionDigits = 2
+) => {
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits,
+    maximumFractionDigits,
+  }).format(value);
+};
+
+
 export const formatCurrency = (
   value: number | bigint | Intl.StringNumericLiteral,
   currency = 'USD',
@@ -27,3 +44,37 @@ export const formatCurrency = (
     maximumFractionDigits,
   }).format(value);
 };
+
+/**
+ * Retrieves a nested value from an object using a dot-delimited key path.
+ * Supports array indexes (e.g., "users.0.name") and returns a default value
+ * if the path does not exist.
+ *
+ * @param obj - The source object to search.
+ * @param path - Dot-delimited key string (e.g., "user.address.city").
+ * @param defaultValue - Optional value to return if the key path is not found.
+ * @returns The value found at the specified path, or the default value.
+ */
+export function getByPath<T, D = undefined>(
+  obj: T,
+  path: string,
+  defaultValue?: D
+): D {
+  if (obj == null) return defaultValue as D;
+  if (!path) return obj as D;
+
+  const segments = path.split('.').filter(Boolean);
+  let cur: { [key: string]: unknown } = obj;
+
+  for (const seg of segments) {
+    if (cur == null) return defaultValue as D;
+    const key: string | number =
+      Array.isArray(cur) && /^\d+$/.test(seg) ? Number(seg) : seg;
+    if (Object(cur) !== cur || !(key in cur)) {
+      return defaultValue as D;
+    }
+    cur = cur[key] as { [key: string]: unknown };
+  }
+
+  return cur as D;
+}

src/services/api/production.ts

@@ -24,7 +24,7 @@ export const RecordingApi = new BaseApiService<
   Recording,
   CreateRecordingPayload,
   UpdateRecordingPayload
->('/flock/recordings');
+>('/production/recordings');
 export const ChickinApi = new BaseApiService<
   Chickin,
   CreateChickinPayload,

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

@@ -0,0 +1,876 @@
+import { sleep } from '@/lib/helper';
+import { BaseApiService } from '@/services/api/base';
+import { BaseApiResponse } from '@/types/api/api-general';
+
+import {
+  CreateTransferToLayingPayload,
+  TransferToLaying,
+  UpdateTransferToLayingPayload,
+} from '@/types/api/production/transfer-to-laying';
+import { FlockWithKandangs } from '@/types/api/master-data/flock';
+
+// TODO: delete this dummy data
+const GET_ALL_TRANSFER_TO_LAYING_DUMMY_DATA: BaseApiResponse<
+  TransferToLaying[]
+> = {
+  code: 200,
+  status: 'success',
+  message: 'Successfully get all transfer to laying data!',
+  meta: {
+    page: 1,
+    limit: 10,
+    total_pages: 1,
+    total_results: 8,
+  },
+  data: [
+    {
+      id: 201,
+      transfer_date: '2025-10-10',
+      flock_source: { id: 1, name: 'Flock A' },
+      flock_destination: { id: 10, name: 'Laying House 1' },
+      quantity: 1200,
+      kandangs: [
+        {
+          kandang: {
+            id: 11,
+            name: 'KDG-11',
+            status: 'ACTIVE',
+            location: {
+              id: 101,
+              name: 'Farm Alpha',
+              address: 'Jl. Raya Alpha No. 1',
+              area: { id: 1001, name: 'Area Utara' },
+            },
+            pic: {
+              id: 501,
+              id_user: 501,
+              email: 'rina@farm.co',
+              name: 'Rina Setiawan',
+            },
+            created_user: {
+              id: 9001,
+              id_user: 9001,
+              email: 'admin@farm.co',
+              name: 'System Admin',
+            },
+            created_at: '2025-09-01T08:00:00Z',
+            updated_at: '2025-10-01T08:00:00Z',
+          },
+          quantity: 600,
+        },
+        {
+          kandang: {
+            id: 12,
+            name: 'KDG-12',
+            status: 'ACTIVE',
+            location: {
+              id: 101,
+              name: 'Farm Alpha',
+              address: 'Jl. Raya Alpha No. 1',
+              area: { id: 1001, name: 'Area Utara' },
+            },
+            pic: {
+              id: 502,
+              id_user: 502,
+              email: 'budi@farm.co',
+              name: 'Budi Hartono',
+            },
+            created_user: {
+              id: 9002,
+              id_user: 9002,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-08-25T08:00:00Z',
+            updated_at: '2025-09-20T08:00:00Z',
+          },
+          quantity: 600,
+        },
+      ],
+      reason: 'Start laying cycle',
+      created_user: {
+        id: 9100,
+        id_user: 9100,
+        email: 'planner@farm.co',
+        name: 'Planning',
+      },
+      created_at: '2025-10-10T06:00:00Z',
+      updated_at: '2025-10-10T06:00:00Z',
+    },
+    {
+      id: 202,
+      transfer_date: '2025-10-11',
+      flock_source: { id: 2, name: 'Flock B' },
+      flock_destination: { id: 10, name: 'Laying House 1' },
+      quantity: 950,
+      kandangs: [
+        {
+          kandang: {
+            id: 13,
+            name: 'KDG-13',
+            status: 'ACTIVE',
+            location: {
+              id: 102,
+              name: 'Farm Beta',
+              address: 'Jl. Melati 2',
+              area: { id: 1002, name: 'Area Selatan' },
+            },
+            pic: {
+              id: 503,
+              id_user: 503,
+              email: 'sari@farm.co',
+              name: 'Sari Wulandari',
+            },
+            created_user: {
+              id: 9003,
+              id_user: 9003,
+              email: 'system@farm.co',
+              name: 'System',
+            },
+            created_at: '2025-09-05T08:00:00Z',
+            updated_at: '2025-10-02T08:00:00Z',
+          },
+          quantity: 500,
+        },
+        {
+          kandang: {
+            id: 14,
+            name: 'KDG-14',
+            status: 'MAINTENANCE',
+            location: {
+              id: 102,
+              name: 'Farm Beta',
+              address: 'Jl. Melati 2',
+              area: { id: 1002, name: 'Area Selatan' },
+            },
+            pic: {
+              id: 504,
+              id_user: 504,
+              email: 'agus@farm.co',
+              name: 'Agus Pratama',
+            },
+            created_user: {
+              id: 9003,
+              id_user: 9003,
+              email: 'system@farm.co',
+              name: 'System',
+            },
+            created_at: '2025-07-15T08:00:00Z',
+            updated_at: '2025-09-15T08:00:00Z',
+          },
+          quantity: 450,
+        },
+      ],
+      reason: 'Capacity balancing',
+      created_user: {
+        id: 9101,
+        id_user: 9101,
+        email: 'planner@farm.co',
+        name: 'Planning',
+      },
+      created_at: '2025-10-11T06:00:00Z',
+      updated_at: '2025-10-11T06:00:00Z',
+    },
+    {
+      id: 203,
+      transfer_date: '2025-10-12',
+      flock_source: { id: 3, name: 'Flock C' },
+      flock_destination: { id: 11, name: 'Laying House 2' },
+      quantity: 1100,
+      kandangs: [
+        {
+          kandang: {
+            id: 21,
+            name: 'KDG-21',
+            status: 'ACTIVE',
+            location: {
+              id: 103,
+              name: 'Farm Gamma',
+              address: 'Dusun Gamma',
+              area: { id: 1003, name: 'Area Timur' },
+            },
+            pic: {
+              id: 505,
+              id_user: 505,
+              email: 'dewi@farm.co',
+              name: 'Dewi Lestari',
+            },
+            created_user: {
+              id: 9004,
+              id_user: 9004,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-10T08:00:00Z',
+            updated_at: '2025-10-05T08:00:00Z',
+          },
+          quantity: 700,
+        },
+        {
+          kandang: {
+            id: 22,
+            name: 'KDG-22',
+            status: 'ACTIVE',
+            location: {
+              id: 103,
+              name: 'Farm Gamma',
+              address: 'Dusun Gamma',
+              area: { id: 1003, name: 'Area Timur' },
+            },
+            pic: {
+              id: 506,
+              id_user: 506,
+              email: 'hadi@farm.co',
+              name: 'Hadi Santoso',
+            },
+            created_user: {
+              id: 9004,
+              id_user: 9004,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-12T08:00:00Z',
+            updated_at: '2025-10-06T08:00:00Z',
+          },
+          quantity: 400,
+        },
+      ],
+      reason: 'Align age group',
+      created_user: {
+        id: 9102,
+        id_user: 9102,
+        email: 'scheduler@farm.co',
+        name: 'Scheduler',
+      },
+      created_at: '2025-10-12T06:00:00Z',
+      updated_at: '2025-10-12T06:00:00Z',
+    },
+    {
+      id: 204,
+      transfer_date: '2025-10-13',
+      flock_source: { id: 1, name: 'Flock A' },
+      flock_destination: { id: 12, name: 'Laying House 3' },
+      quantity: 800,
+      kandangs: [
+        {
+          kandang: {
+            id: 15,
+            name: 'KDG-15',
+            status: 'ACTIVE',
+            location: {
+              id: 101,
+              name: 'Farm Alpha',
+              address: 'Jl. Raya Alpha No. 1',
+              area: { id: 1001, name: 'Area Utara' },
+            },
+            pic: {
+              id: 507,
+              id_user: 507,
+              email: 'nadia@farm.co',
+              name: 'Nadia Putri',
+            },
+            created_user: {
+              id: 9001,
+              id_user: 9001,
+              email: 'admin@farm.co',
+              name: 'System Admin',
+            },
+            created_at: '2025-08-01T08:00:00Z',
+            updated_at: '2025-09-28T08:00:00Z',
+          },
+          quantity: 800,
+        },
+      ],
+      reason: 'Open capacity in LH3',
+      created_user: {
+        id: 9103,
+        id_user: 9103,
+        email: 'opslead@farm.co',
+        name: 'Ops Lead',
+      },
+      created_at: '2025-10-13T06:00:00Z',
+      updated_at: '2025-10-13T06:00:00Z',
+    },
+    {
+      id: 205,
+      transfer_date: '2025-10-14',
+      flock_source: { id: 4, name: 'Flock D' },
+      flock_destination: { id: 11, name: 'Laying House 2' },
+      quantity: 650,
+      kandangs: [
+        {
+          kandang: {
+            id: 23,
+            name: 'KDG-23',
+            status: 'ACTIVE',
+            location: {
+              id: 104,
+              name: 'Farm Delta',
+              address: 'Jl. Delta 4',
+              area: { id: 1004, name: 'Area Barat' },
+            },
+            pic: {
+              id: 508,
+              id_user: 508,
+              email: 'yoga@farm.co',
+              name: 'Yoga Prabowo',
+            },
+            created_user: {
+              id: 9005,
+              id_user: 9005,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-20T08:00:00Z',
+            updated_at: '2025-10-10T08:00:00Z',
+          },
+          quantity: 350,
+        },
+        {
+          kandang: {
+            id: 24,
+            name: 'KDG-24',
+            status: 'ACTIVE',
+            location: {
+              id: 104,
+              name: 'Farm Delta',
+              address: 'Jl. Delta 4',
+              area: { id: 1004, name: 'Area Barat' },
+            },
+            pic: {
+              id: 509,
+              id_user: 509,
+              email: 'mega@farm.co',
+              name: 'Mega Anggraini',
+            },
+            created_user: {
+              id: 9005,
+              id_user: 9005,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-21T08:00:00Z',
+            updated_at: '2025-10-10T08:00:00Z',
+          },
+          quantity: 300,
+        },
+      ],
+      reason: 'Fill remaining LH2 slots',
+      created_user: {
+        id: 9104,
+        id_user: 9104,
+        email: 'scheduler@farm.co',
+        name: 'Scheduler',
+      },
+      created_at: '2025-10-14T06:00:00Z',
+      updated_at: '2025-10-14T06:00:00Z',
+    },
+    {
+      id: 206,
+      transfer_date: '2025-10-15',
+      flock_source: { id: 2, name: 'Flock B' },
+      flock_destination: { id: 12, name: 'Laying House 3' },
+      quantity: 720,
+      kandangs: [
+        {
+          kandang: {
+            id: 16,
+            name: 'KDG-16',
+            status: 'ACTIVE',
+            location: {
+              id: 102,
+              name: 'Farm Beta',
+              address: 'Jl. Melati 2',
+              area: { id: 1002, name: 'Area Selatan' },
+            },
+            pic: {
+              id: 510,
+              id_user: 510,
+              email: 'rizky@farm.co',
+              name: 'Rizky Maulana',
+            },
+            created_user: {
+              id: 9003,
+              id_user: 9003,
+              email: 'system@farm.co',
+              name: 'System',
+            },
+            created_at: '2025-08-12T08:00:00Z',
+            updated_at: '2025-10-01T08:00:00Z',
+          },
+          quantity: 420,
+        },
+        {
+          kandang: {
+            id: 17,
+            name: 'KDG-17',
+            status: 'ACTIVE',
+            location: {
+              id: 102,
+              name: 'Farm Beta',
+              address: 'Jl. Melati 2',
+              area: { id: 1002, name: 'Area Selatan' },
+            },
+            pic: {
+              id: 511,
+              id_user: 511,
+              email: 'tia@farm.co',
+              name: 'Tia Safitri',
+            },
+            created_user: {
+              id: 9003,
+              id_user: 9003,
+              email: 'system@farm.co',
+              name: 'System',
+            },
+            created_at: '2025-08-18T08:00:00Z',
+            updated_at: '2025-10-01T08:00:00Z',
+          },
+          quantity: 300,
+        },
+      ],
+      reason: 'Stage-by-stage transfer',
+      created_user: {
+        id: 9105,
+        id_user: 9105,
+        email: 'opslead@farm.co',
+        name: 'Ops Lead',
+      },
+      created_at: '2025-10-15T06:00:00Z',
+      updated_at: '2025-10-15T06:00:00Z',
+    },
+    {
+      id: 207,
+      transfer_date: '2025-10-16',
+      flock_source: { id: 5, name: 'Flock E' },
+      flock_destination: { id: 10, name: 'Laying House 1' },
+      quantity: 500,
+      kandangs: [
+        {
+          kandang: {
+            id: 18,
+            name: 'KDG-18',
+            status: 'ACTIVE',
+            location: {
+              id: 105,
+              name: 'Farm Epsilon',
+              address: 'Kp. Epsilon',
+              area: { id: 1005, name: 'Area Tengah' },
+            },
+            pic: {
+              id: 512,
+              id_user: 512,
+              email: 'lukas@farm.co',
+              name: 'Lukas Aditya',
+            },
+            created_user: {
+              id: 9006,
+              id_user: 9006,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-01T08:00:00Z',
+            updated_at: '2025-10-12T08:00:00Z',
+          },
+          quantity: 250,
+        },
+        {
+          kandang: {
+            id: 19,
+            name: 'KDG-19',
+            status: 'ACTIVE',
+            location: {
+              id: 105,
+              name: 'Farm Epsilon',
+              address: 'Kp. Epsilon',
+              area: { id: 1005, name: 'Area Tengah' },
+            },
+            pic: {
+              id: 513,
+              id_user: 513,
+              email: 'maya@farm.co',
+              name: 'Maya Kartika',
+            },
+            created_user: {
+              id: 9006,
+              id_user: 9006,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-03T08:00:00Z',
+            updated_at: '2025-10-12T08:00:00Z',
+          },
+          quantity: 250,
+        },
+      ],
+      reason: 'Trial batch',
+      created_user: {
+        id: 9106,
+        id_user: 9106,
+        email: 'planner@farm.co',
+        name: 'Planning',
+      },
+      created_at: '2025-10-16T06:00:00Z',
+      updated_at: '2025-10-16T06:00:00Z',
+    },
+    {
+      id: 208,
+      transfer_date: '2025-10-17',
+      flock_source: { id: 6, name: 'Flock F' },
+      flock_destination: { id: 13, name: 'Laying House 4' },
+      quantity: 1300,
+      kandangs: [
+        {
+          kandang: {
+            id: 25,
+            name: 'KDG-25',
+            status: 'ACTIVE',
+            location: {
+              id: 106,
+              name: 'Farm Zeta',
+              address: 'Jl. Zeta 6',
+              area: { id: 1006, name: 'Area Tenggara' },
+            },
+            pic: {
+              id: 514,
+              id_user: 514,
+              email: 'rara@farm.co',
+              name: 'Rara Pertiwi',
+            },
+            created_user: {
+              id: 9007,
+              id_user: 9007,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-07T08:00:00Z',
+            updated_at: '2025-10-13T08:00:00Z',
+          },
+          quantity: 700,
+        },
+        {
+          kandang: {
+            id: 26,
+            name: 'KDG-26',
+            status: 'ACTIVE',
+            location: {
+              id: 106,
+              name: 'Farm Zeta',
+              address: 'Jl. Zeta 6',
+              area: { id: 1006, name: 'Area Tenggara' },
+            },
+            pic: {
+              id: 515,
+              id_user: 515,
+              email: 'doni@farm.co',
+              name: 'Doni Firmansyah',
+            },
+            created_user: {
+              id: 9007,
+              id_user: 9007,
+              email: 'ops@farm.co',
+              name: 'Ops Bot',
+            },
+            created_at: '2025-09-09T08:00:00Z',
+            updated_at: '2025-10-13T08:00:00Z',
+          },
+          quantity: 600,
+        },
+      ],
+      reason: 'Open new house',
+      created_user: {
+        id: 9107,
+        id_user: 9107,
+        email: 'scheduler@farm.co',
+        name: 'Scheduler',
+      },
+      created_at: '2025-10-17T06:00:00Z',
+      updated_at: '2025-10-17T06:00:00Z',
+    },
+  ],
+};
+
+// TODO: delete this dummy data
+const FLOCK_SOURCE_DUMMY_DATA: BaseApiResponse<FlockWithKandangs[]> = {
+  code: 200,
+  status: 'success',
+  message: 'Get all projectflocks successfully',
+  meta: {
+    page: 1,
+    limit: 10,
+    total_pages: 1,
+    total_results: 2,
+  },
+  data: [
+    {
+      id: 2,
+      name: 'Flock Banten',
+      totalQuantity: 300,
+      kandangs: [
+        {
+          kandang: {
+            id: 3,
+            name: 'Cikaum 1',
+            status: 'ACTIVE',
+            location: {
+              id: 1,
+              name: 'Singaparna',
+              address: 'Tasik',
+              area: {
+                id: 1,
+                name: 'test area',
+              },
+            },
+            pic: {
+              id: 1,
+              id_user: 1,
+              email: 'admin@mbugroup.id',
+              name: 'Super Admin',
+            },
+          },
+          quantity: 100,
+        },
+        {
+          kandang: {
+            id: 4,
+            name: 'Cikaum 2',
+            status: 'ACTIVE',
+            location: {
+              id: 1,
+              name: 'Singaparna',
+              address: 'Tasik',
+              area: {
+                id: 1,
+                name: 'test area',
+              },
+            },
+            pic: {
+              id: 1,
+              id_user: 1,
+              email: 'admin@mbugroup.id',
+              name: 'Super Admin',
+            },
+          },
+          quantity: 150,
+        },
+        {
+          kandang: {
+            id: 5,
+            name: 'Cikaum 3',
+            status: 'ACTIVE',
+            location: {
+              id: 1,
+              name: 'Singaparna',
+              address: 'Tasik',
+              area: {
+                id: 1,
+                name: 'test area',
+              },
+            },
+            pic: {
+              id: 1,
+              id_user: 1,
+              email: 'admin@mbugroup.id',
+              name: 'Super Admin',
+            },
+          },
+          quantity: 50,
+        },
+      ],
+    },
+
+    {
+      id: 3,
+      name: 'Flock Priangan',
+      totalQuantity: 200,
+      kandangs: [
+        {
+          kandang: {
+            id: 3,
+            name: 'Cikaum 1',
+            status: 'ACTIVE',
+            location: {
+              id: 1,
+              name: 'Singaparna',
+              address: 'Tasik',
+              area: {
+                id: 1,
+                name: 'Priangan',
+              },
+            },
+            pic: {
+              id: 1,
+              id_user: 1,
+              email: 'admin@mbugroup.id',
+              name: 'Super Admin',
+            },
+          },
+          quantity: 100,
+        },
+        {
+          kandang: {
+            id: 4,
+            name: 'Cikaum 2',
+            status: 'ACTIVE',
+            location: {
+              id: 1,
+              name: 'Singaparna',
+              address: 'Tasik',
+              area: {
+                id: 1,
+                name: 'test area',
+              },
+            },
+            pic: {
+              id: 1,
+              id_user: 1,
+              email: 'admin@mbugroup.id',
+              name: 'Super Admin',
+            },
+          },
+          quantity: 100,
+        },
+      ],
+    },
+  ],
+};
+
+export class TransferToLayingService extends BaseApiService<
+  TransferToLaying,
+  CreateTransferToLayingPayload,
+  UpdateTransferToLayingPayload
+> {
+  constructor(basePath: string = '') {
+    super(basePath);
+  }
+
+  // TODO: remove dummy data and integrate to real API
+  override async getAllFetcher(
+    endpoint: string
+  ): Promise<BaseApiResponse<TransferToLaying[]>> {
+    // return await httpClientFetcher<BaseApiResponse<T[]>>(endpoint);
+
+    await sleep(750);
+
+    return GET_ALL_TRANSFER_TO_LAYING_DUMMY_DATA;
+  }
+
+  // TODO: remove dummy data and integrate to real API
+  async getFlockSource(): Promise<
+    BaseApiResponse<FlockWithKandangs[]> | undefined
+  > {
+    try {
+      //   const getFlockSourcePath = `${this.basePath}/${flockSourcePath}`;
+      //   const getSingleRes = await httpClient<FlockSourceType>(getFlockSourcePath);
+      //   return getSingleRes;
+
+      await sleep(500);
+
+      return FLOCK_SOURCE_DUMMY_DATA;
+    } catch (error) {
+      //   if (axios.isAxiosError<BaseApiResponse<T>>(error)) {
+      // return error.response?.data;
+      //   }
+
+      return undefined;
+    }
+  }
+
+  // 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[]
+  ): 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 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[]
+  ): 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;
+    }
+  }
+}
+
+export const TransferToLayingApi = new TransferToLayingService('');

src/types/api/api-general.d.ts

@@ -104,3 +104,14 @@ export type ApprovalsLine = {
   role?: string;
   status: 'approved' | 'rejected' | 'waiting';
 }[];
+
+export type BaseApproval = {
+  step_number: number;
+  step_name: string;
+  action: string;
+  notes: string | null;
+  action_by: CreatedUser;
+  action_at: string;
+};
+
+export type ApproveAction = 'APPROVED' | 'REJECTED';

src/types/api/master-data/flock.d.ts

@@ -12,3 +12,15 @@ export type CreateFlockPayload = {
 };
 
 export type UpdateFlockPayload = CreateFlockPayload;
+
+// ---------------------------------------
+// TODO: adjust this later after Transfer to Laying API done
+import { BaseKandang } from '@/types/api/master-data/kandang';
+
+export type FlockWithKandangs = BaseFlock & {
+  totalQuantity: number;
+  kandangs: {
+    kandang: BaseKandang;
+    quantity: number;
+  }[];
+};

src/types/api/production/chickin.d.ts

@@ -1,4 +1,4 @@
-import { BaseMetadata } from "@/types/api/api-general";
+import { BaseApproval, BaseMetadata } from "@/types/api/api-general";
 import { ProjectFlockKandang } from "@/types/api/production/project-flock-kandang";
 
 export type BaseChickin = {
@@ -7,6 +7,7 @@ export type BaseChickin = {
   quantity?: number;
   note?: string;
   project_flock_kandang?: ProjectFlockKandang;
+  approval: BaseApproval;
 }
 
 export type Chickin = BaseMetadata & BaseChickin;
@@ -14,7 +15,15 @@ export type Chickin = BaseMetadata & BaseChickin;
 export type CreateChickinPayload = {
   project_flock_kandang_id: number;
   chick_in_date: string;
+  note: string;
+  quantity?: number;
 }
 
-export type UpdateChickinPayload = CreateChickinPayload;
+export type UpdateChickinPayload = CreateChickinPayload & {
+  id: number;
+};
 
+export type ChickinApprovalPayload = {
+  action: 'APPROVED' | 'REJECTED';
+  approvable_ids: number[];
+};

src/types/api/production/project-flock-kandang.d.ts

@@ -7,6 +7,12 @@ export type BaseProjectFlockKandang = {
   kandang_id: number;
   kandang: Kandang;
   project_flock: ProjectFlock;
+  available_quantity?: number;
 }
 
 export type ProjectFlockKandang = BaseProjectFlockKandang;
+
+export type LookupProjectFlockKandangPayload = {
+  project_flock_id: number;
+  kandang_id: number;
+}

src/types/api/production/project-flock.d.ts

@@ -3,7 +3,7 @@ import { Fcr } from '@/types/api/master-data/fcr';
 import { Flock } from '@/types/api/master-data/flock';
 import { Kandang } from '@/types/api/master-data/kandang';
 import { Location } from '@/types/api/master-data/location';
-import { BaseMetadata } from '@/types/api/api-general';
+import { BaseApproval, BaseMetadata } from '@/types/api/api-general';
 
 export type BaseProjectFlock = {
   id: number;
@@ -21,6 +21,7 @@ export type BaseProjectFlock = {
   period: number;
   kandang_ids: number[];
   kandangs: Kandang[];
+  approval: BaseApproval;
 };
 
 export type PeriodFlock = {
@@ -41,3 +42,8 @@ export type CreateProjectFlockPayload = {
 };
 
 export type UpdateProjectFlockPayload = CreateProjectFlockPayload;
+
+export type ProjectFlockApprovalPayload = {
+  action: 'APPROVED' | 'REJECTED';
+  approvable_ids: number[];
+};

src/types/api/production/recording.d.ts

@@ -1,60 +1,45 @@
-import { BaseMetadata } from '@/types/api/api-general';
-import { Location } from '@/types/api/master-data/location';
-import { Kandang } from '@/types/api/master-data/kandang';
-import { Flock } from '@/types/api/master-data/flock';
+import { BaseMetadata, User } from '@/types/api/api-general';
+
+export type ProductionMetrics = {
+  total_depletion: number;
+  cum_depletion_rate: number;
+  daily_gain: number;
+  avg_daily_gain: number;
+  cum_intake: number;
+  fcr_value: number;
+  total_chick: number;
+  daily_depletion_rate: number;
+  cum_depletion: number;
+};
 
 export type BaseRecording = {
   id: number;
-  flock: Flock;
-  recording_date: string;
-  location: Location;
-  coop: Kandang;
-  feed_data: {
-    feed_name: string;
-    feed_qty: number;
-    feed_stock: number;
-  }[];
-  body_weight: {
-    chicken_weight: number;
-    chicken_count: number;
-    average_chicken_weight: number;
-  }[];
-  vaccination: {
-    vaccine_name: string;
-    total_stock: number;
-    used_stock: number;
-  }[];
-  mortality: {
-    condition: string;
-    count: number;
-  }[];
-};
+  project_flock_kandang_id: number;
+  record_datetime: string;
+  record_date: string;
+  status: number;
+  ontime: boolean;
+  day: number;
+  created_user: User;
+} & ProductionMetrics;
 
 export type Recording = BaseMetadata & BaseRecording;
 
 export type CreateRecordingPayload = {
-  flock_id: number;
-  recording_date: string;
-  location_id: number;
-  coop_id: number;
-  feed_data: {
-    feed_id: string;
-    feed_qty: number;
-    feed_stock: number;
+  project_flock_kandang_id: number;
+  body_weights: {
+    weight: number;
+    qty: number;
   }[];
-  body_weight: {
-    chicken_weight: number;
-    chicken_count: number;
-    average_chicken_weight: number;
+  stocks?: {
+    product_warehouse_id: number;
+    usage_amount: number;
+    notes: string;
   }[];
-  vaccination: {
-    vaccine_id: string;
-    total_stock: number;
-    used_stock: number;
-  }[];
-  mortality: {
-    condition: string;
-    count: number;
+  depletions?: {
+    product_warehouse_id?: number;
+    total: number;
+    notes: string;
   }[];
 };
 

src/types/api/production/transfer-to-laying.d.ts

@@ -0,0 +1,37 @@
+import { BaseApiResponse, BaseMetadata, flags } from '@/types/api/api-general';
+import { Kandang } from '@/types/api/master-data/kandang';
+
+export type BaseTransferToLaying = {
+  id: number;
+  transfer_date: string;
+  flock_source: {
+    id: number;
+    name: string;
+  };
+  flock_destination: {
+    id: number;
+    name: string;
+  };
+  quantity: number;
+  kandangs: {
+    kandang: Kandang;
+    quantity: number;
+  }[];
+  reason: string;
+};
+
+export type TransferToLaying = BaseMetadata & BaseTransferToLaying;
+
+export type CreateTransferToLayingPayload = {
+  transfer_date: string;
+  flock_source_id: number;
+  flock_destination_id: number;
+  totalQuantity: number;
+  kandangs: {
+    kandang_id: number;
+    quantity: number;
+  }[];
+  reason: string;
+};
+
+export type UpdateTransferToLayingPayload = CreateTransferToLayingPayload;