Merge branch 'development' into feat/FE/US-77/TASK-113-slicing-transfer-to-laying-create-form

2026-05-20 05:22:02 +00:00 · 2025-10-21 15:29:10 +07:00
parent a29bbc9a42 791e8e787c
commit 32d4c0268f
32 changed files with 2428 additions and 12 deletions
@@ -2,6 +2,43 @@
@plugin "daisyui";
@import '../styles/daisyui.css';

+@plugin "daisyui/theme" {
+  name: "lti";
+  default: false;
+  prefersdark: false;
+  color-scheme: "light";
+  --color-base-100: oklch(98% 0.001 106.423);
+  --color-base-200: oklch(97% 0.001 106.424);
+  --color-base-300: oklch(92% 0.003 48.717);
+  --color-base-content: oklch(22.389% 0.031 278.072);
+  --color-primary: oklch(60% 0.126 221.723);
+  --color-primary-content: oklch(100% 0 0);
+  --color-secondary: oklch(52% 0.105 223.128);
+  --color-secondary-content: oklch(100% 0 0);
+  --color-accent: oklch(45% 0.085 224.283);
+  --color-accent-content: oklch(100% 0 0);
+  --color-neutral: oklch(39% 0.07 227.392);
+  --color-neutral-content: oklch(100% 0 0);
+  --color-info: oklch(58% 0.158 241.966);
+  --color-info-content: oklch(100% 0 0);
+  --color-success: oklch(62% 0.194 149.214);
+  --color-success-content: oklch(100% 0 0);
+  --color-warning: oklch(85% 0.199 91.936);
+  --color-warning-content: oklch(0% 0 0);
+  --color-error: oklch(57% 0.245 27.325);
+  --color-error-content: oklch(100% 0 0);
+  --radius-selector: 0rem;
+  --radius-field: 0.25rem;
+  --radius-box: 0.25rem;
+  --size-selector: 0.21875rem;
+  --size-field: 0.1875rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
+
+
+
 :root {
  --color-primary: #1f74bf;
 }
@@ -0,0 +1,11 @@
+import SuspenseHelper from "@/components/helper/SuspenseHelper"
+
+const Layout = ({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>
+}
+
+export default Layout;
@@ -28,7 +28,7 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html lang='en'>
+    <html lang='en' data-theme='lti'>
      <body className={`${inter.variable} antialiased font-inter`}>
        <RequireAuth>
          <MainDrawer>{children}</MainDrawer>
@@ -0,0 +1,11 @@
+import FlockForm from "@/components/pages/master-data/flock/form/FlockForm";
+
+const AddFlock = () => {
+  return (
+    <section className="w-full p-4 flex flex-row justify-center">
+      <FlockForm />
+    </section>
+  );
+}
+
+export default AddFlock;
@@ -0,0 +1,49 @@
+'use client'
+
+import FlockForm from "@/components/pages/master-data/flock/form/FlockForm";
+import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
+import { FlockApi } from "@/services/api/master-data";
+import { useRouter, useSearchParams } from "next/navigation";
+import useSWR from "swr";
+
+const FlockEdit = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Get Query Params
+  const flockId = searchParams.get('flockId');
+
+  // Fetch Data
+  const { data: flock, isLoading: isLoadingFlock } = useSWR(
+    flockId,
+    (id: number) => FlockApi.getSingle(id)
+  );
+
+  if (!flockId) {
+    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 (!isLoadingFlock && (!flock || isResponseError(flock))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingFlock && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingFlock && isResponseSuccess(flock) && (
+        <FlockForm formType='edit' initialValues={flock.data} />
+      )}
+    </div>
+  );
+}
+
+export default FlockEdit;
@@ -0,0 +1,11 @@
+import SuspenseHelper from "@/components/helper/SuspenseHelper"
+
+const Layout = ({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>
+}
+
+export default Layout;
@@ -0,0 +1,46 @@
+'use client'
+
+import FlockForm from "@/components/pages/master-data/flock/form/FlockForm";
+import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
+import { FlockApi } from "@/services/api/master-data";
+import { useRouter, useSearchParams } from "next/navigation";
+import useSWR from "swr";
+
+const FlockDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Get Query Params
+  const flockId = searchParams.get('flockId');
+
+  // Fetch Data
+  const { data: flock, isLoading: isLoadingFlock } = useSWR(flockId, (id: number) => FlockApi.getSingle(id));
+
+  if(!flockId){
+    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(!isLoadingFlock && (!flock || isResponseError(flock))){
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className="w-full p-4 flex flex-row justify-center">
+      {isLoadingFlock && (
+        <span className="loading loading-spinner loading-xl" />
+      )}
+      {!isLoadingFlock && isResponseSuccess(flock) && (
+        <FlockForm formType="detail" initialValues={flock.data} />
+      )}
+    </div>
+  );
+}
+
+export default FlockDetail;
@@ -0,0 +1,11 @@
+import FlockTable from "@/components/pages/master-data/flock/FlocksTable";
+
+const Flock = () => {
+  return (
+    <section className="w-full p-4">
+      <FlockTable/>
+    </section>
+  );   
+}
+
+export default Flock;
@@ -0,0 +1,13 @@
+'use client'
+
+import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm";
+
+const AddProjectFlock = () => {
+  return (
+    <section className="w-full p-4 flex flex-row justify-center">
+      <ProjectFlockForm formType="add"/>
+    </section>
+  );
+}
+
+export default AddProjectFlock;
@@ -0,0 +1,46 @@
+'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";
+
+const ProjectFlockEdit = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const projectFlockId = searchParams.get("projectFlockId");
+
+  const { data: projectFlock, isLoading: isLoadingCostumer } = useSWR(
+    projectFlockId,
+    (id: number) => ProjectFlockApi.getSingle(id)
+  );
+
+  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>
+    );
+  }
+
+  if(!isLoadingCostumer && (!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="edit" initialValues={projectFlock.data} />
+      )}
+    </div>
+  )
+}
+
+export default ProjectFlockEdit;
@@ -0,0 +1,11 @@
+import SuspenseHelper from "@/components/helper/SuspenseHelper"
+
+const Layout = ({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>
+}
+
+export default Layout;
@@ -0,0 +1,46 @@
+'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";
+
+const ProjectFlockDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const projectFlockId = searchParams.get("projectFlockId");
+
+  const { data: projectFlock, isLoading: isLoadingCostumer } = useSWR(
+    projectFlockId,
+    (id: number) => ProjectFlockApi.getSingle(id)
+  );
+
+  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>
+    );
+  }
+
+  if(!isLoadingCostumer && (!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>
+  )
+}
+
+export default ProjectFlockDetail;
@@ -0,0 +1,12 @@
+import ProjectFlockForm from "@/components/pages/production/project-flock/form/ProjectFlockForm"
+import ProjectFlockTable from "@/components/pages/production/project-flock/ProjectFlockTable";
+
+const ProjectFlock = () => {
+  return (
+    <section className="w-full p-4">
+      <ProjectFlockTable/>
+    </section>
+  );
+}
+
+export default ProjectFlock;
@@ -97,6 +97,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
    return { ...base, IndicatorSeparator: () => null };
  }, [isAnimated]);

+  const internalInputChangeHandler = (val: string, meta: InputActionMeta) => {
  const internalInputChangeHandler = (val: string, meta: InputActionMeta) => {
    if (meta.action === 'input-change') setInternalInputValue(val);
    if (meta.action === 'menu-close') setInternalInputValue('');
@@ -109,7 +110,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
  const SelectComponent = createables ? CreatableSelect : Select;

  /** 🎯 handleChange tanpa any */
-  const handleChange = (val: MultiValue<T> | SingleValue<T>): void => {
+  const handleChange = (val: MultiValue<T> | SingleValue<T> | null): void => {
    if (!val) {
      onChange?.(null);
      return;
@@ -139,6 +140,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
        >
          {label}
          {required && (
+            <span className='tooltip tooltip-error' data-tip='required'>
+              <span className='text-error'> *</span>
            <span className='tooltip tooltip-error' data-tip='required'>
              <span className='text-error'> *</span>
            </span>
@@ -147,6 +150,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
      )}

      <SelectComponent<T, boolean, GroupBase<T>>
+        instanceId='select'
        instanceId='select'
        value={value ?? (isMulti ? [] : null)}
        onChange={handleChange}
@@ -219,9 +223,11 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
        }}
      />

+      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
      {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
      {!isError && bottomLabel && (
        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
      )}
    </div>
  );
@@ -13,7 +13,7 @@ import toast from 'react-hot-toast';
 import {
  InventoryAdjustmentFormSchema,
  InventoryAdjustmentFormValues,
-} from './InventoryAdjustmentForm.schema';
+} from '@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema';
 import useSWR from 'swr';
 import {
  ProductApi,
@@ -11,7 +11,7 @@ import {
 import { useRouter } from 'next/navigation';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
-import { CustomerFormSchema, CustomerFormValues, UpdateCustomerFormSchema } from './CustomerForm.schema';
+import { CustomerFormSchema, CustomerFormValues, UpdateCustomerFormSchema } from '@/components/pages/master-data/customer/form/CustomerForm.schema';
 import { useFormik } from 'formik';
 import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
@@ -0,0 +1,278 @@
+'use client';
+
+import { CellContext, ColumnDef } from '@tanstack/react-table';
+import { Flock } from '@/types/api/master-data/flock';
+import { cn } from '@/lib/helper';
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { useState } from 'react';
+import useSWR from 'swr';
+import { FlockApi } from '@/services/api/master-data';
+import { useModal } from '@/components/Modal';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import toast from 'react-hot-toast';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { ROWS_OPTIONS } from '@/config/constant';
+import Table from '@/components/Table';
+import { isResponseSuccess } from '@/lib/api-helper';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+
+const RowsOptions = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<Flock, unknown>;
+  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={`/master-data/flock/detail/edit/?flockId=${props.row.original.id}`}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon
+          icon='material-symbols:edit-outline'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Edit
+      </Button>
+       <Button
+        href={`/master-data/flock/detail/?flockId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
+        className='justify-start text-sm'
+      >
+        <Icon
+          icon='mdi:eye-outline'
+          width={16}
+          height={16}
+          className='justify-start text-sm'
+        />
+        Detail
+      </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 FlockTable = () => {
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: { search: '', nameSort: '' },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+    },
+  });
+
+  // Fetch Data
+  const {
+    data: flocks,
+    isLoading,
+    mutate: refreshFlocks,
+  } = useSWR(
+    `${FlockApi.basePath}${getTableFilterQueryString()}`,
+    FlockApi.getAllFetcher
+  );
+
+  // State
+  const deleteModal = useModal();
+  const [selectedFlock, setSelectedFlock] = useState<Flock | undefined>(
+    undefined
+  );
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  // Columns Definition
+  const flocksColumns: ColumnDef<Flock>[] = [
+    {
+      header: '#',
+      cell: (props) =>
+        tableFilterState.pageSize * (tableFilterState.page - 1) +
+        props.row.index +
+        1,
+    },
+    {
+      accessorKey: 'name',
+      header: 'Nama',
+    },
+    {
+      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 = () => {
+          setSelectedFlock(props.row.original);
+          deleteModal.openModal();
+        };
+
+        return (
+          <>
+            {currentPageSize > 2 && (
+              <RowDropdownOptions isLast2Rows={isLast2Rows}>
+                <RowsOptions
+                  type='dropdown'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowDropdownOptions>
+            )}
+            {currentPageSize <= 2 && (
+              <RowCollapseOptions>
+                <RowsOptions
+                  type='collapse'
+                  props={props}
+                  deleteClickHandler={deleteClickHandler}
+                />
+              </RowCollapseOptions>
+            )}
+          </>
+        );
+      },
+    },
+  ];
+
+  // Handler
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await FlockApi.delete(selectedFlock?.id as number);
+    refreshFlocks();
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Flock!');
+    setIsDeleteLoading(false);
+  };
+  const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateFilter('search', e.target.value);
+  };
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+  };
+
+  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 sm:flex-row justify-between items-end sm:items-center gap-2'>
+            <div className='flex flex-row'>
+              <Button href='/master-data/flock/add' color='primary'>
+                Tambah Flock
+              </Button>
+            </div>
+
+            <DebouncedTextInput
+              name='search'
+              placeholder='Cari Flock'
+              value={tableFilterState.search}
+              onChange={searchChangeHandler}
+              className={{ wrapper: 'sm:max-w-3xs' }}
+            />
+          </div>
+
+          <div className='flex flex-row justify-end'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{ wrapper: 'max-w-28' }}
+            />
+          </div>
+        </div>
+
+        <Table<Flock>
+          data={isResponseSuccess(flocks) ? flocks?.data : []}
+          columns={flocksColumns}
+          pageSize={tableFilterState.pageSize}
+          page={isResponseSuccess(flocks) ? flocks?.meta?.page : 0}
+          totalItems={
+            isResponseSuccess(flocks) ? flocks?.meta?.total_results : 0
+          }
+          onPageChange={setPage}
+          isLoading={isLoading}
+          className={{
+            containerClassName: cn({
+              'mb-20': isResponseSuccess(flocks) && flocks?.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 Supplier ini (${selectedFlock?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default FlockTable;
@@ -0,0 +1,14 @@
+import * as Yup from 'yup';
+
+export const FlockFormSchema = Yup.object({
+  name: Yup.string()
+    .required('Nama wajib diisi!')
+    .matches(
+      /^[\p{L}\p{N}\s]+$/u,
+      'Nama tidak boleh mengandung simbol'
+    ),
+});
+
+export const UpdateFlockFormSchema = FlockFormSchema;
+
+export type FlockFormValues = Yup.InferType<typeof FlockFormSchema>;
@@ -0,0 +1,217 @@
+'use client'
+
+import { useModal } from '@/components/Modal';
+import { FlockApi } from '@/services/api/master-data';
+import { Flock } from '@/types/api/master-data/flock';
+import { useRouter } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
+import { FlockFormSchema, FlockFormValues, UpdateFlockFormSchema } from '@/components/pages/master-data/flock/form/FlockForm.schema';
+import { useFormik } from 'formik';
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+import TextInput from '@/components/input/TextInput';
+import { cn } from '@/lib/helper';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+
+interface FlockCustomProps {
+  formType?: 'add' | 'edit' | 'detail';
+  initialValues?: Flock;
+}
+
+const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
+  const router = useRouter();
+  const deleteModal = useModal();
+
+  // State
+  const [flockFormErrorMessage, setFlockFormErrorMessage] = useState('');
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  // Handler
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await FlockApi.delete(initialValues?.id as number);
+
+    deleteModal.closeModal();
+    setIsDeleteLoading(false);
+    router.push('/master-data/flock');
+  };
+
+  // Initital Value
+  const formikInitialValue = useMemo<FlockFormValues>(() => {
+    return {
+      name: initialValues?.name ?? '',
+    };
+  }, [initialValues]);
+
+  // Formik
+  const formik = useFormik<FlockFormValues>({
+    initialValues: formikInitialValue,
+    enableReinitialize: true,
+    validationSchema: formType === 'edit' ? UpdateFlockFormSchema : FlockFormSchema,
+    onSubmit: async (values) => {
+      // reset error message
+      setFlockFormErrorMessage('');
+
+      // create payload
+      const payload = {
+        name: values.name,
+      };
+
+      // cek type form yang disubmit
+      switch (formType) {
+        case 'add':
+          await FlockApi.create(payload);
+          break;
+        case 'edit':
+          await FlockApi.update(initialValues?.id as number, payload);
+          break;
+        default:
+          break;
+      }
+
+      router.push('/master-data/flock');
+    },
+  });
+
+  // Initialize Formik
+  const { setValues: formikSetValues } = formik;
+  useEffect(() => {
+    formikSetValues(formikInitialValue);
+  }, [formikSetValues, formikInitialValue]);
+
+  // Render
+  return (
+    <>
+      <section className='w-full max-w-xl'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/master-data/flock'
+            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'>
+            {formType === 'add' && 'Tambah Flock'}
+            {formType === 'edit' && 'Ubah Flock'}
+            {formType === 'detail' && 'Detail Flock'}
+          </h1>
+        </header>
+        <form
+          onSubmit={formik.handleSubmit}
+          onReset={formik.handleReset}
+          className='w-full mt-8 flex flex-col gap-6'
+        >
+          {/* Fields Form */}
+          <div className='flex flex-col gap-4'>
+            <TextInput
+              required
+              label='Nama Flock'
+              name='name'
+              placeholder='Masukkan nama flock'
+              value={formik.values.name}
+              onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={formik.touched.name && Boolean(formik.errors.name)}
+              errorMessage={formik.errors.name}
+              readOnly={formType === 'detail'}
+            />
+          </div>
+
+          {/* Action Button  */}
+          <div className='flex flex-row justify-between gap-2 flex-wrap'>
+            {formType !== 'add' && (
+              <div className='flex flex-row justify-start gap-2'>
+                <Button
+                  type='button'
+                  color='error'
+                  onClick={() => deleteModal.openModal()}
+                  className='px-4'
+                >
+                  <Icon
+                    icon='material-symbols:delete-outline-rounded'
+                    width={24}
+                    height={24}
+                    className='justify-start text-sm'
+                  />
+                  Delete
+                </Button>
+                {formType !== 'edit' && (
+                  <Button
+                    type='button'
+                    color='warning'
+                    href={`/master-data/flock/detail/edit/?flockId=${initialValues?.id}`}
+                    className='px-4'
+                  >
+                    <Icon
+                      icon='material-symbols:edit-outline'
+                      width={24}
+                      height={24}
+                      className='justify-start text-sm'
+                    />
+                    Edit
+                  </Button>
+                )}
+              </div>
+            )}
+
+            {formType !== 'detail' && (
+              <div
+                className={cn('flex flex-row justify-end gap-2', {
+                  'w-full': formType === '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>
+
+          {flockFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{flockFormErrorMessage}</span>
+            </div>
+          )}
+        </form>
+      </section>
+
+      {formType !== 'add' && (
+        <ConfirmationModal
+          ref={deleteModal.ref}
+          type='error'
+          text={`Apakah anda yakin ingin menghapus data Flock ini (${initialValues?.name})?`}
+          secondaryButton={{
+            text: 'Tidak',
+          }}
+          primaryButton={{
+            text: 'Ya',
+            color: 'error',
+            onClick: confirmationModalDeleteClickHandler,
+            isLoading: isDeleteLoading,
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default FlockForm;
@@ -15,7 +15,7 @@ import {
  SupplierFormSchema,
  SupplierFormValues,
  UpdateSupplierFormSchema,
-} from './SupplierForm.schema';
+} from '@/components/pages/master-data/supplier/form/SupplierForm.schema';
 import { useFormik } from 'formik';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { Icon } from '@iconify/react';
@@ -0,0 +1,579 @@
+'use client';
+
+import Button from '@/components/Button';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import Table from '@/components/Table';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { cn } from '@/lib/helper';
+import { AreaApi, KandangApi, LocationApi } from '@/services/api/master-data';
+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';
+import { ChangeEventHandler, useState } from 'react';
+import toast from 'react-hot-toast';
+import useSWR from 'swr';
+
+const RowOptionsMenu = ({
+  type = 'dropdown',
+  props,
+  deleteClickHandler,
+}: {
+  type: 'dropdown' | 'collapse';
+  props: CellContext<ProjectFlock, unknown>;
+  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/project-flock/detail?projectFlockId=${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/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:pencil-outline' width={16} height={16} />
+        Edit
+      </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 ProjectFlockTable = () => {
+  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 [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 [periodInputValue, setPeriodInputValue] = useState<number | null>(null);
+
+  // Fetch Data
+  const {
+    data: projectFlocks,
+    isLoading,
+    mutate: refreshProjectFlocks,
+  } = useSWR(
+    `${ProjectFlockApi.basePath}${getTableFilterQueryString()}`,
+    ProjectFlockApi.getAllFetcher
+  );
+
+  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 optionsKandang = isResponseSuccess(kandangs)
+    ? kandangs?.data.map((kandang) => ({
+        value: kandang.id,
+        label: kandang.name,
+      }))
+    : [];
+  const optionsLocation = isResponseSuccess(locations)
+    ? locations?.data.map((location) => ({
+        value: location.id,
+        label: location.name,
+      }))
+    : [];
+
+  // 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;
+    setPageSize(newVal.value as number);
+  };
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await ProjectFlockApi.delete(selectedProjectFlock?.id as number);
+    refreshProjectFlocks();
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Project Flock!');
+    setIsDeleteLoading(false);
+  };
+  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`, {
+      method: 'POST',
+      payload: 'POST',
+      params: {
+        ids: selectedFlocks.map((flock) => flock.id).join(','),
+      },
+    });
+
+    if (isResponseSuccess(approveProjectFlockRes)) {
+      toast.success('Project Flock berhasil di-approve!');
+      confirmModal.closeModal();
+    }
+    if (isResponseError(approveProjectFlockRes)) {
+      toast.error(approveProjectFlockRes?.message as string);
+      confirmModal.closeModal();
+    }
+    setIsApproveLoading(false);
+  };
+
+  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 justify-between items-end gap-2'>
+            <div className='flex flex-col sm:flex-row gap-3 w-full'>
+              <Button
+                href='/production/project-flock/add'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='ic:round-plus' width={24} height={24} />
+                Tambah
+              </Button>
+              <Button
+                variant='outline'
+                color='success'
+                onClick={() => {
+                  if (selectedIds.length > 0) {
+                    confirmModal.openModal();
+                  }
+                }}
+                disabled={!(selectedIds.length > 0)}
+                className='w-full sm:w-fit'
+              >
+                <Icon icon='material-symbols:check' width={24} height={24} />
+                Approve
+              </Button>
+              <div className='ms-auto w-full sm:w-auto'>
+                <DebouncedTextInput
+                  name='search'
+                  placeholder='Cari Area'
+                  value={tableFilterState.search}
+                  onChange={searchChangeHandler}
+                  className={{
+                    wrapper: 'w-full sm:max-w-3xs',
+                    input: 'w-full',
+                    inputWrapper: 'w-full',
+                  }}
+                />
+              </div>
+            </div>
+            <div className='hidden sm:flex flex-row justify-end gap-6 w-full'>
+              <SelectInput
+                label='Area'
+                options={optionsArea}
+                isLoading={isLoadingAreas}
+                value={selectedArea}
+                onChange={(val) => {
+                  setSelectedArea(val as OptionType);
+                  updateFilter(
+                    'areaFilter',
+                    (val as OptionType)?.value.toString()
+                  );
+                }}
+                onInputChange={setAreaSelectInputValue}
+                isClearable
+              />
+              <SelectInput
+                label='Lokasi'
+                options={optionsLocation}
+                isLoading={isLoadingLocations}
+                value={selectedLocation}
+                onChange={(val) => {
+                  setSelectedLocation(val as OptionType);
+                  updateFilter(
+                    'locationFilter',
+                    (val as OptionType)?.value.toString()
+                  );
+                }}
+                onInputChange={setLocationSelectInputValue}
+                isClearable
+              />
+              <SelectInput
+                label='Kandang'
+                options={optionsKandang}
+                isLoading={isLoadingKandang}
+                value={selectedKandang}
+                onChange={(val) => {
+                  setSelectedKandang(val as OptionType);
+                  updateFilter(
+                    'kandangFilter',
+                    (val as OptionType)?.value.toString()
+                  );
+                }}
+                onInputChange={setKandangSelectInputValue}
+                isClearable
+              />
+              <DebouncedTextInput
+                name='period'
+                type='number'
+                label='Periode'
+                placeholder='Masukan periode'
+                value={periodInputValue ?? ''}
+                onChange={(e) => {
+                  setPeriodInputValue(parseInt(e.target.value));
+                  updateFilter('periodFilter', e.target.value);
+                }}
+              />
+              <SelectInput
+                label='Baris'
+                options={ROWS_OPTIONS}
+                value={{
+                  label: String(tableFilterState.pageSize),
+                  value: tableFilterState.pageSize,
+                }}
+                onChange={pageSizeChangeHandler}
+                className={{ wrapper: 'max-w-28' }}
+              />
+            </div>
+          </div>
+
+          <Table<ProjectFlock>
+            data={isResponseSuccess(projectFlocks) ? projectFlocks?.data : []}
+            columns={projectFlocksColumns}
+            pageSize={tableFilterState.pageSize}
+            page={
+              isResponseSuccess(projectFlocks) ? projectFlocks?.meta?.page : 0
+            }
+            totalItems={
+              isResponseSuccess(projectFlocks)
+                ? projectFlocks?.meta?.total_results
+                : 0
+            }
+            onPageChange={setPage}
+            isLoading={isLoading}
+            sorting={sorting}
+            setSorting={setSorting}
+            className={{
+              containerClassName: cn({
+                'mb-20':
+                  isResponseSuccess(projectFlocks) &&
+                  projectFlocks?.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>
+      </div>
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${selectedProjectFlock?.flock?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+
+      <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.'
+        }
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          onClick: confirmationModalApproveClickHandler,
+          isLoading: isApproveLoading,
+        }}
+      />
+    </>
+  );
+};
+
+export default ProjectFlockTable;
@@ -0,0 +1,61 @@
+import * as Yup from 'yup';
+
+export const ProjectFlockFormSchema = Yup.object({
+  // Flock
+  flock: Yup.object({
+    value: Yup.number().required('ID Flock wajib diisi!'),
+    label: Yup.string().required('Nama Flock wajib diisi!'),
+  }).nullable(),
+  flock_id: Yup.number()
+    .min(1, 'Flock wajib diisi!')
+    .required('Flock wajib diisi!'),
+
+  // Area
+  area: Yup.object({
+    value: Yup.number().required('ID Area wajib diisi!'),
+    label: Yup.string().required('Nama Area wajib diisi!'),
+  }).nullable(),
+  area_id: Yup.number()
+    .min(1, 'Area wajib diisi!')
+    .required('Area wajib diisi!'),
+
+  // Kategori
+  category_option: Yup.object({
+    value: Yup.string().required('Nilai Kategori wajib diisi!'),
+    label: Yup.string().required('Label Kategori wajib diisi!'),
+  }).nullable(),
+  category: Yup.string().oneOf(['GROWING', 'LAYING'], 'Kategori wajib diisi!')
+    .required('Kategori wajib diisi!'),
+
+  // FCR
+  fcr: Yup.object({
+    value: Yup.number().required('ID FCR wajib diisi!'),
+    label: Yup.string().required('Nama FCR wajib diisi!'),
+  }).nullable(),
+  fcr_id: Yup.number().min(1, 'FCR wajib diisi!').required('FCR wajib diisi!'),
+
+  // Location
+  location: Yup.object({
+    value: Yup.number().required('ID Lokasi wajib diisi!'),
+    label: Yup.string().required('Nama Lokasi wajib diisi!'),
+  }).nullable(),
+  location_id: Yup.number()
+    .min(1, 'Lokasi wajib diisi!')
+    .required('Lokasi wajib diisi!'),
+
+  period: Yup.number()
+    .required('Periode wajib diisi!')
+    .typeError('Periode harus berupa angka')
+    .min(1, 'Minimal periode adalah 1'),
+
+  kandang_ids: Yup.array()
+    .of(Yup.number().typeError('Kandang tidak valid!'))
+    .min(1, 'Minimal harus ada 1 kandang!')
+    .required('Kandang wajib diisi!'),
+});
+
+export type ProjectFlockFormValues = Yup.InferType<
+  typeof ProjectFlockFormSchema
+>;
+
+export const UpdateProjectFlockFormSchema = ProjectFlockFormSchema;
@@ -0,0 +1,814 @@
+'use client';
+
+import Button from '@/components/Button';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import {
+  AreaApi,
+  FcrApi,
+  FlockApi,
+  KandangApi,
+  LocationApi,
+} from '@/services/api/master-data';
+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 {
+  ProjectFlockFormSchema,
+  ProjectFlockFormValues,
+  UpdateProjectFlockFormSchema,
+} from '@/components/pages/production/project-flock/form/ProjectFlockForm.schema';
+import {
+  CreateProjectFlockPayload,
+  PeriodFlock,
+  ProjectFlock,
+} from '@/types/api/production/project-flock';
+import toast from 'react-hot-toast';
+import TextInput from '@/components/input/TextInput';
+import { Kandang } from '@/types/api/master-data/kandang';
+import Collapse from '@/components/Collapse';
+import { ProjectFlockApi } from '@/services/api/production';
+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';
+
+interface ProjectFlockFormProps {
+  formType?: 'add' | 'edit' | 'detail';
+  initialValues?: ProjectFlock;
+}
+
+const ProjectFlockForm = ({
+  formType = 'add',
+  initialValues,
+}: ProjectFlockFormProps) => {
+  // State
+  const router = useRouter();
+  const [projectFlockFormErrorMessage, setProjectFlockFormErrorMessage] =
+    useState('');
+  const [selectedArea, setSelectedArea] = useState('');
+
+  const [selectedLocation, setSelectedLocation] = useState('');
+  const [disabledLocation, setDisabledLocation] = useState(true);
+  const [optionsLocation, setOptionsLocation] = useState<OptionType[]>([]);
+
+  const [openSelectKandangs, setOpenSelectKandangs] = useState(
+    initialValues?.kandangs && initialValues?.kandangs?.length > 0
+  );
+  const [optionsKandang, setOptionsKandang] = useState<Kandang[]>(
+    initialValues?.kandangs ?? []
+  );
+
+  const [selectedFlock, setSelectedFlock] = useState<number>(
+    initialValues?.flock?.id ?? 0
+  );
+
+  const deleteModal = useModal();
+  const confirmModal = useModal();
+
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+
+  // Fetch Data
+  const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({
+    search: '',
+  }).toString()}`;
+  const { data: flocks, isLoading: isLoadingFlocks } = useSWR(
+    flockUrl,
+    FlockApi.getAllFetcher
+  );
+
+  const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({
+    search: '',
+  }).toString()}`;
+  const { data: areas, isLoading: isLoadingAreas } = useSWR(
+    areaUrl,
+    AreaApi.getAllFetcher
+  );
+
+  const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
+    search: '',
+    area_id: selectedArea,
+  }).toString()}`;
+  const { data: locations, isLoading: isLoadingLocations } = useSWR(
+    locationUrl,
+    LocationApi.getAllFetcher
+  );
+
+  const fcrUrl = `${FcrApi.basePath}?${new URLSearchParams({
+    search: '',
+  }).toString()}`;
+  const { data: fcrs, isLoading: isLoadingFcrs } = useSWR(
+    fcrUrl,
+    FcrApi.getAllFetcher
+  );
+
+  const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
+    search: '',
+    location_id: selectedLocation == '' ? '0' : selectedLocation,
+  }).toString()}`;
+  const { data: kandang, isLoading: isLoadingKandang } = useSWR(
+    kandangUrl,
+    KandangApi.getAllFetcher
+  );
+
+  const getPeriodFlocksUrl = `flocks/${selectedFlock}/periods`;
+
+  const { data: periodFlocks, isLoading: isLoadingPeriodFlocks } = useSWR(
+    getPeriodFlocksUrl,
+    () =>
+      ProjectFlockApi.customRequest<BaseApiResponse<PeriodFlock>, 'GET'>(
+        getPeriodFlocksUrl,
+        { method: 'GET' }
+      )
+  );
+
+  // Map Data to Options
+  const optionsArea = isResponseSuccess(areas)
+    ? areas?.data.map((area) => ({
+        value: area.id,
+        label: area.name,
+      }))
+    : [];
+  const optionsFcr = isResponseSuccess(fcrs)
+    ? fcrs?.data.map((fcr) => ({
+        value: fcr.id,
+        label: fcr.name,
+      }))
+    : [];
+  const optionsFlock = isResponseSuccess(flocks)
+    ? flocks?.data.map((flock) => ({
+        value: flock.id,
+        label: flock.name,
+      }))
+    : [];
+
+  useEffect(() => {
+    if (isResponseSuccess(locations)) {
+      const options = locations.data.map((location) => ({
+        value: location.id,
+        label: location.name,
+      }));
+      setOptionsLocation(options);
+    }
+  }, [locations, setSelectedLocation]);
+
+  useEffect(() => {
+    if (isResponseSuccess(kandang)) {
+      if (selectedLocation) {
+        setOptionsKandang(kandang.data);
+        setOpenSelectKandangs(true);
+      } else {
+        setOptionsKandang([]);
+        setOpenSelectKandangs(false);
+        formik.setFieldValue('kandang_ids', []);
+      }
+    }
+  }, [kandang]);
+
+  // Options Handler
+  const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldValue('area_id', (val as OptionType)?.value);
+    formik.setFieldValue('area', val);
+
+    formik.setFieldTouched('area_id', true);
+
+    setSelectedArea((val as OptionType)?.value as string);
+    setSelectedLocation('');
+    const disabled = (val as OptionType)?.value == null;
+    setDisabledLocation(disabled);
+
+    formik.setFieldValue('location', null);
+    formik.setFieldValue('location_id', 0);
+    formik.setFieldTouched('location', false);
+    formik.setFieldTouched('location_id', false);
+  };
+
+  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+    setSelectedLocation((val as OptionType)?.value as string);
+    optionChangeHandler(val, 'location');
+    formik.setFieldValue('kandang_ids', []);
+  };
+
+  const optionChangeHandler = (
+    val: OptionType | OptionType[] | null,
+    inputName: string
+  ) => {
+    formik.setFieldValue(inputName, val);
+    formik.setFieldValue(
+      `${inputName}_id`,
+      val ? (val as OptionType)?.value : 0
+    );
+
+    formik.setFieldTouched(`${inputName}_id`, true);
+  };
+
+  const categoryChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldValue('category', (val as OptionType)?.value);
+    formik.setFieldValue('category_option', val);
+    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
+  ) => {
+    const createProjectFlockRes = await ProjectFlockApi.create(payload);
+
+    if (isResponseSuccess(createProjectFlockRes)) {
+      toast.success(createProjectFlockRes?.message as string);
+      router.push('/production/project-flock');
+    }
+    if (isResponseError(createProjectFlockRes)) {
+      setProjectFlockFormErrorMessage(createProjectFlockRes?.message as string);
+      toast.error(createProjectFlockRes?.message as string);
+    }
+  };
+  const updateProjectFlockHandler = async (
+    payload: CreateProjectFlockPayload
+  ) => {
+    const updateProjectFlockRes = await ProjectFlockApi.update(
+      initialValues?.id as number,
+      payload
+    );
+
+    if (isResponseSuccess(updateProjectFlockRes)) {
+      toast.success(updateProjectFlockRes?.message as string);
+      router.push('/production/project-flock');
+    }
+    if (isResponseError(updateProjectFlockRes)) {
+      setProjectFlockFormErrorMessage(updateProjectFlockRes?.message as string);
+      toast.error(updateProjectFlockRes?.message as string);
+    }
+  };
+
+  // Formik InitialValue
+  const formikInitialValues = useMemo<ProjectFlockFormValues>(() => {
+    return {
+      name: initialValues?.name ?? '',
+      flock: initialValues?.flock
+        ? {
+            value: initialValues.flock.id,
+            label: initialValues.flock.name,
+          }
+        : null,
+      area: initialValues?.area
+        ? {
+            value: initialValues.area.id,
+            label: initialValues.area.name,
+          }
+        : null,
+      category_option: initialValues?.category
+        ? {
+            value: initialValues.category,
+            label: initialValues.category,
+          }
+        : null,
+      fcr: initialValues?.fcr
+        ? {
+            value: initialValues.fcr.id,
+            label: initialValues.fcr.name,
+          }
+        : null,
+      location: initialValues?.location
+        ? {
+            value: initialValues.location.id,
+            label: initialValues.location.name,
+          }
+        : null,
+      flock_id: initialValues?.flock?.id ?? 0,
+      area_id: initialValues?.area?.id ?? 0,
+      category: initialValues?.category as NonNullable<
+        'GROWING' | 'LAYING' | undefined
+      >,
+      fcr_id: initialValues?.fcr?.id ?? 0,
+      location_id: initialValues?.location?.id ?? 0,
+      period: initialValues?.period ?? 0,
+      kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as (
+        | number
+        | undefined
+      )[],
+    };
+  }, [initialValues]);
+
+  // Formik
+  const formik = useFormik<ProjectFlockFormValues>({
+    initialValues: formikInitialValues,
+    enableReinitialize: true,
+    validationSchema:
+      formType == 'add' ? ProjectFlockFormSchema : UpdateProjectFlockFormSchema,
+    validateOnBlur: true,
+    validateOnChange: true,
+    validateOnMount: true,
+    onSubmit: async (values) => {
+      setProjectFlockFormErrorMessage('');
+      const payload: CreateProjectFlockPayload = {
+        flock_id: values.flock_id as number,
+        area_id: values.area_id as number,
+        category: values.category as string,
+        fcr_id: values.fcr_id as number,
+        location_id: values.location_id as number,
+        period: values.period as number,
+        kandang_ids: values.kandang_ids as number[],
+      };
+
+      switch (formType) {
+        case 'add':
+          await createProjectFlockHandler(payload);
+          break;
+        case 'edit':
+          await updateProjectFlockHandler(payload);
+          break;
+        default:
+          break;
+      }
+    },
+  });
+
+  const { setValues: formikSetValues } = formik;
+  // Effect Initial
+  useEffect(() => {
+    if (formType == 'detail') {
+      formik.setFieldValue('area', {
+        value: initialValues?.area.id,
+        label: initialValues?.area.name,
+      });
+      formik.setFieldValue('area_id', initialValues?.area_id);
+      if (initialValues?.area_id) {
+        setSelectedArea(initialValues?.area_id.toString() as string);
+      }
+
+      formik.setFieldValue('period', initialValues?.period);
+    }
+  }, [initialValues, setSelectedArea, formType]);
+  
+  useEffect(() => {
+    formikSetValues(formikInitialValues);
+  }, [formikSetValues, formikInitialValues]);
+
+  // Aktifkan lokasi jika formType = 'detail'
+  useEffect(() => {
+    if (formType === 'detail') {
+      setDisabledLocation(false);
+    }
+  }, [formType]);
+
+  // Set lokasi otomatis berdasarkan initialValues saat formType = 'detail'
+  useEffect(() => {
+    if (formType != 'add' && initialValues?.location?.id) {
+      setSelectedLocation(initialValues.location?.id.toString());
+      setDisabledLocation(false); // biar dropdown lokasi aktif juga
+    }
+  }, [formType, initialValues]);
+
+  useEffect(() => {
+    formik.validateForm();
+  }, [formik.values]);
+
+  useEffect(() => {
+    if(isResponseSuccess(periodFlocks)){
+      formik.setFieldValue('period', periodFlocks.data.next_period);
+    }
+  }, [periodFlocks]);
+
+  // Actions handler
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+    const deleteProjectFlockRes = await ProjectFlockApi.delete(
+      initialValues?.id as number
+    );
+
+    if (isResponseSuccess(deleteProjectFlockRes)) {
+      toast.success(deleteProjectFlockRes?.message as string);
+      router.push('/production/project-flock');
+    }
+    if (isResponseError(deleteProjectFlockRes)) {
+      toast.error(deleteProjectFlockRes?.message as string);
+    }
+    setIsDeleteLoading(false);
+  };
+
+  const confirmationModalApproveClickHandler = async () => {
+    setIsApproveLoading(true);
+    const approveProjectFlockRes = await ProjectFlockApi.customRequest<
+      BaseApiResponse<ProjectFlock>,
+      'POST'
+    >(`/${initialValues?.id}/approve`, {
+      method: 'POST',
+    });
+
+    if (isResponseSuccess(approveProjectFlockRes)) {
+      toast.success('Project Flock berhasil di-approve!');
+      confirmModal.closeModal();
+    }
+    if (isResponseError(approveProjectFlockRes)) {
+      toast.error(approveProjectFlockRes?.message as string);
+      confirmModal.closeModal();
+    }
+    setIsApproveLoading(false);
+  };
+
+  return (
+    <>
+      <section className='w-full'>
+        <header className='flex flex-col gap-4'>
+          <Button
+            href='/production/project-flock'
+            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'>
+            {formType === 'add' && 'Tambah Project Flock'}
+            {formType === 'detail' && 'Detail Project Flock'}
+          </h1>
+        </header>
+        {projectFlockFormErrorMessage && (
+          <div className='my-4'>
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{projectFlockFormErrorMessage}</span>
+              <Button
+                onClick={() => {
+                  setProjectFlockFormErrorMessage('');
+                }}
+                variant='link'
+              >
+                <Icon icon='material-symbols:close' width={24} height={24} />
+              </Button>
+            </div>
+          </div>
+        )}
+        {formType == 'detail' && (
+          <div className='w-full py-4'>
+            <Button
+              variant='outline'
+              color='success'
+              onClick={() => {
+                if (initialValues?.id) {
+                  confirmModal.openModal();
+                }
+              }}
+              disabled={!initialValues?.id}
+              className='w-full sm:w-fit'
+            >
+              <Icon icon='material-symbols:check' width={24} height={24} />
+              Approve
+            </Button>
+          </div>
+        )}
+        <form
+          className='w-auto h-auto'
+          onSubmit={formik.handleSubmit}
+          onReset={formik.handleReset}
+        >
+          <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='grid sm:grid-cols-2 gap-4'>
+                <SelectInput
+                  required
+                  label='Area'
+                  value={formik.values.area as OptionType}
+                  onChange={areaChangeHandler}
+                  options={optionsArea}
+                  isLoading={isLoadingAreas}
+                  isError={
+                    formik.touched.area_id && Boolean(formik.errors.area_id)
+                  }
+                  errorMessage={formik.errors.area_id as string}
+                  isClearable
+                  isDisabled={formType === 'detail'}
+                />
+                <SelectInput
+                  required
+                  label='Flock'
+                  value={formik.values.flock as OptionType}
+                  onChange={(val) => {
+                    optionChangeHandler(val, 'flock');
+                    setSelectedFlock((val as OptionType)?.value as number);
+                  }}
+                  options={optionsFlock}
+                  isLoading={isLoadingFlocks}
+                  isError={
+                    formik.touched.flock_id && Boolean(formik.errors.flock_id)
+                  }
+                  errorMessage={formik.errors.flock_id as string}
+                  isClearable
+                  isDisabled={formType === 'detail'}
+                />
+                <SelectInput
+                  required
+                  label='Lokasi'
+                  value={formik.values.location as OptionType}
+                  onChange={locationChangeHandler}
+                  options={optionsLocation}
+                  isLoading={isLoadingLocations}
+                  isError={
+                    formik.touched.location_id &&
+                    Boolean(formik.errors.location_id)
+                  }
+                  errorMessage={formik.errors.location_id as string}
+                  isClearable
+                  isDisabled={formType === 'detail' || disabledLocation}
+                />
+                <SelectInput
+                  required
+                  label='FCR'
+                  value={formik.values.fcr as OptionType}
+                  onChange={(val) => {
+                    optionChangeHandler(val, 'fcr');
+                  }}
+                  options={optionsFcr}
+                  isLoading={isLoadingFcrs}
+                  isError={
+                    formik.touched.fcr_id && Boolean(formik.errors.fcr_id)
+                  }
+                  errorMessage={formik.errors.fcr_id as string}
+                  isClearable
+                  isDisabled={formType === 'detail'}
+                />
+                <SelectInput
+                  required
+                  label='Kategori'
+                  value={formik.values.category_option as OptionType}
+                  onChange={categoryChangeHandler}
+                  options={FLOCK_CATEGORY_OPTIONS}
+                  isError={
+                    formik.touched.category && Boolean(formik.errors.category)
+                  }
+                  errorMessage={formik.errors.category as string}
+                  isClearable
+                  isDisabled={formType === 'detail'}
+                />
+                <TextInput
+                  required
+                  type='number'
+                  name='period'
+                  label='Periode'
+                  placeholder='Masukkan periode yang project'
+                  value={formik.values.period as number}
+                  onChange={formik.handleChange}
+                  isError={
+                    formik.touched.period && Boolean(formik.errors.period)
+                  }
+                  errorMessage={formik.errors.period as string}
+                  readOnly={formType === 'detail'}
+                  disabled={true}
+                  isLoading={isLoadingPeriodFlocks}
+                />
+              </div>
+            </div>
+          </div>
+          <div className='card bg-base-100 shadow w-full'>
+            <div className='card-body'>
+              <Collapse
+                title={
+                  <div className='card-actions justify-between w-full'>
+                    <div className='card-title'>Pilih Kandang</div>
+                    <Button
+                      variant='link'
+                      className={`text-primary rotate-${
+                        openSelectKandangs ? '180' : '0'
+                      } transition-transform hover:text-inherit`}
+                    >
+                      <Icon
+                        icon='material-symbols:keyboard-arrow-down'
+                        width={24}
+                        height={24}
+                      />
+                    </Button>
+                  </div>
+                }
+                className='sm:w-full'
+                titleClassName='w-full p-0!'
+                onOpenChange={setOpenSelectKandangs}
+                open={openSelectKandangs}
+              >
+                <div className='overflow-x-auto'>
+                  {isLoadingKandang && (
+                    <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
+                              }
+                            />
+                          </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>
+          </div>
+
+          <div className='flex flex-row justify-center gap-2 flex-wrap my-6'>
+            {formType !== 'detail' && (
+              <div className='flex flex-row justify-end gap-2'>
+                <Button
+                  type='button'
+                  color='warning'
+                  className='px-4'
+                  onClick={formik.handleReset}
+                >
+                  Reset
+                </Button>
+                <Button
+                  type='submit'
+                  color='primary'
+                  isLoading={formik.isSubmitting}
+                  disabled={!formik.isValid || formik.isSubmitting}
+                  className='px-4'
+                >
+                  Submit
+                </Button>
+              </div>
+            )}
+          </div>
+        </form>
+        {formType != 'add' && (
+          <div className='w-full'>
+            <Button
+              onClick={() => {
+                if (initialValues?.id) {
+                  deleteModal.openModal();
+                }
+              }}
+              color='error'
+            >
+              <Icon
+                icon='material-symbols:delete-outline-rounded'
+                width={16}
+                height={16}
+                className='justify-start text-sm'
+              />
+              Delete
+            </Button>
+          </div>
+        )}
+      </section>
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data Project Flock ini (${initialValues?.flock?.name} - ${initialValues?.area?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+
+      <ConfirmationModal
+        ref={confirmModal.ref}
+        type='success'
+        text={`Apakah anda yakin ingin approve Project Flock berikut? (${initialValues?.flock?.name} - ${initialValues?.area?.name})?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          isLoading: isApproveLoading,
+          onClick: confirmationModalApproveClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default ProjectFlockForm;
@@ -13,14 +13,24 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
  },

  {
-    title: 'Produksi',
+    title: 'Production',
    link: '/production',
-    icon: 'ix:machine-a',
+    icon: 'material-symbols:conveyor-belt-outline-rounded',
    submenu: [
      {
-        title: 'Transfer ke Laying',
-        link: '/production/transfer-to-laying',
-        icon: 'streamline:transfer-van',
+        title: 'List Flock',
+        link: '/production/project-flock',
+        icon: 'material-symbols:list-alt-add-outline-rounded',
+      },
+      {
+        title: 'Chick In',
+        link: '/production/chick-in',
+        icon: 'mdi:home-import-outline',
+      },
+      {
+        title: 'Recording',
+        link: '/production/recording',
+        icon: 'mdi:clipboard-text',
      },
    ],
  },
@@ -113,6 +123,11 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
        link: '/master-data/supplier',
        icon: 'material-symbols:add-business-outline-rounded',
      },
+      {
+        title: 'Flock',
+        link: '/master-data/flock',
+        icon: 'material-symbols:raven-outline-rounded',
+      },
    ],
  },
 ] as const;
@@ -173,6 +188,17 @@ export const CATEGORY_OPTIONS = [
  },
 ];

+export const FLOCK_CATEGORY_OPTIONS = [
+  {
+    label: 'GROWING',
+    value: 'GROWING',
+  },
+  {
+    label: 'LAYING',
+    value: 'LAYING',
+  },
+];
+
 export const PRODUCT_FLAG_OPTIONS = [
  { label: 'DOC', value: 'DOC' },
  { label: 'PAKAN', value: 'PAKAN' },
@@ -89,4 +89,40 @@ export class BaseApiService<T, CreatePayloadGeneric, UpdatePayloadGeneric> {
      return undefined;
    }
  }
+
+  async customRequest<ResponseType = T, PayloadType = unknown>(
+    endpoint: string,
+    options?: {
+      method?: 'GET' | 'POST' | 'PATCH' | 'PUT' | 'DELETE';
+      payload?: PayloadType;
+      params?: Record<string, string | number | boolean | undefined>;
+    }
+  ): Promise<ResponseType | undefined> {
+    try {
+      const urlBase = endpoint.startsWith('http')
+        ? endpoint
+        : `${this.basePath.replace(/\/$/, '')}/${endpoint.replace(/^\//, '')}`;
+
+      const url = options?.params
+        ? `${urlBase}?${new URLSearchParams(
+            Object.entries(options.params).reduce((acc, [key, value]) => {
+              if (value !== undefined) acc[key] = String(value);
+              return acc;
+            }, {} as Record<string, string>)
+          )}`
+        : urlBase;
+
+      const res = await httpClient<ResponseType>(url, {
+        method: options?.method || 'GET',
+        body: options?.payload,
+      });
+
+      return res;
+    } catch (error: unknown) {
+      if (axios.isAxiosError<ResponseType>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
 }
@@ -59,6 +59,11 @@ import {
  Fcr,
  UpdateFcrPayload,
 } from '@/types/api/master-data/fcr';
+import {
+  CreateFlockPayload,
+  Flock,
+  UpdateFlockPayload,
+} from '@/types/api/master-data/flock';

 export const UomApi = new BaseApiService<
  Uom,
@@ -130,3 +135,9 @@ export const FcrApi = new BaseApiService<
  CreateFcrPayload,
  UpdateFcrPayload
 >('/master-data/fcrs');
+
+export const FlockApi = new BaseApiService<
+  Flock,
+  CreateFlockPayload,
+  UpdateFlockPayload
+>('/master-data/flocks');
@@ -0,0 +1,11 @@
+import {
+  ProjectFlock,
+  CreateProjectFlockPayload,
+} from '@/types/api/production/project-flock';
+import { BaseApiService } from '@/services/api/base';
+
+export const ProjectFlockApi = new BaseApiService<
+  ProjectFlock,
+  CreateProjectFlockPayload,
+  unknown
+>('/production/project_flocks');
@@ -4,7 +4,7 @@ import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';

 import { UIStore } from '@/types/stores';
-import { createMainUiSlice } from './slices/main.slice';
+import { createMainUiSlice } from '@/stores/ui/slices/main.slice';

 export const useUiStore = create<UIStore>()(
  devtools(
@@ -1,5 +1,5 @@
 import { Product } from '@/types/api/master-data/product';
-import { Warehouse } from '../master-data/warehouse';
+import { Warehouse } from '@/types/api/master-data/warehouse';

 export type BaseInventoryAdjustment = {
  id: number;
@@ -0,0 +1,14 @@
+import { BaseMetadata } from "@/types/api/api-general";
+
+export type BaseFlock = {
+  id: number;
+  name: string;
+}
+
+export type Flock = BaseMetadata & BaseFlock;
+
+export type CreateFlockPayload = {
+  name: string;
+}
+
+export type UpdateFlockPayload = CreateFlockPayload;
@@ -5,6 +5,7 @@ import { BaseUser } from '@/types/api/user';
 export type BaseKandang = {
  id: number;
  name: string;
+  status: string;
  location: BaseLocation;
  pic: BaseUser;
 };
@@ -0,0 +1,44 @@
+import { Area } from "@/types/api/master-data/area";
+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";
+
+export type BaseProjectFlock = {
+  id: number;
+  name: string;
+  status: string;
+  flock: Flock;
+  flock_id: number;
+  area: Area;
+  area_id: number;
+  category: string;
+  fcr: Fcr;
+  fcr_id: number;
+  location: Location;
+  location_id: number;
+  period: number;
+  kandang_ids: number[];
+  kandangs: Kandang[];
+}
+
+export type PeriodFlock = {
+  flock: Flock;
+  next_period: number;
+}
+
+
+export type ProjectFlock = BaseMetadata & BaseProjectFlock 
+
+export type CreateProjectFlockPayload = {
+  flock_id: number;
+  area_id: number;
+  category: string;
+  fcr_id: number;
+  location_id: number;
+  period: number;
+  kandang_ids: number[];
+}
+
+export type UpdateProjectFlockPayload = CreateProjectFlockPayload;