Merge branch 'feat/FE/US-77/transfer-to-laying' into 'development'

[FIX/FE][US#77] Transfer to Laying

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

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/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/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,
@@ -194,4 +194,4 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
   return <>{children}</>;
 };
 
-export default RequireAuth;
+export default RequireAuth;

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;
@@ -182,7 +187,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
               '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 cursor-pointer!', {
@@ -222,4 +227,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/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',
+      //   title: 'Product',
-        link: '/inventory/product',
+      //   link: '/inventory/product',
-        icon: 'mdi:package-variant-closed',
+      //   icon: 'mdi:package-variant-closed',
-      },
+      // },
       {
         title: 'Penyesuaian Stok',
         link: '/inventory/adjustment',

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));
 
@@ -40,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/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

@@ -113,3 +113,5 @@ export type BaseApproval = {
   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/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;