refactor(FE-87-106): refactor api integration untuk project flock dan project flock kandang

2026-05-23 23:05:46 +00:00 · 2025-11-10 04:08:08 +07:00
parent fcc2fced06
commit e0c347c3d5
19 changed files with 961 additions and 506 deletions
@@ -1,3 +1,37 @@
 import * as Yup from 'yup';
-import { Product } from '@/types/api/master-data/product';
-import { Supplier } from '@/types/api/master-data/supplier';
+
+type ChickinRequestSchemaType = {
+  chick_in_date: string;
+  note?: string | undefined | null;
+  product_warehouse_id: number;
+};
+
+type ChickinSchemaType = {
+  project_flock_kandang_id: number;
+  chickin_requests: ChickinRequestSchemaType[];
+};
+
+export const ChickinRequestSchema: Yup.ObjectSchema<ChickinRequestSchemaType> =
+  Yup.object({
+    chick_in_date: Yup.string().nullable().required('Tanggal wajib diisi!'),
+    note: Yup.string().nullable(),
+    product_warehouse_id: Yup.number()
+      .min(1, 'Produk wajib diisi!')
+      .required('Produk wajib diisi!'),
+  });
+
+export const ChickinSchema: Yup.ObjectSchema<ChickinSchemaType> = Yup.object({
+  project_flock_kandang_id: Yup.number()
+    .min(1, 'Project Flock Kandang wajib diisi!')
+    .required('Project Flock Kandang wajib diisi!'),
+  chickin_requests: Yup.array()
+    .of(ChickinRequestSchema)
+    .min(1, 'Minimal harus ada 1 produk!')
+    .required('Produk wajib diisi!'),
+});
+
+export type ChickinRequestFormValues = Yup.InferType<
+  typeof ChickinRequestSchema
+>;
+
+export type ChickinFormValues = Yup.InferType<typeof ChickinSchema>;
@@ -6,7 +6,7 @@ import { FormHeader } from '@/components/helper/form/FormHeader';
 import DateInput from '@/components/input/DateInput';
 import FileInput from '@/components/input/FileInput';
 import NumberInput from '@/components/input/NumberInput';
-import SelectInput from '@/components/input/SelectInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import TextInput from '@/components/input/TextInput';
 import Table from '@/components/Table';
 import { formatNumber } from '@/lib/helper';
@@ -15,8 +15,19 @@ import {
  AvailableQty,
  ProjectFlockKandang,
 } from '@/types/api/production/project-flock-kandang';
+import { useFormik } from 'formik';
+import {
+  ChickinFormValues,
+  ChickinRequestFormValues,
+  ChickinSchema,
+} from './ChickinForm.schema';
+import { useCallback, useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
-
+import { CreateChickinPayload } from '@/types/api/production/chickin';
+import { ChickinApi } from '@/services/api/production';
+import { isResponseError } from '@/lib/api-helper';
+import toast from 'react-hot-toast';
+import { flushSync } from 'react-dom';
 const ChickinFormKandang = ({
  formType = 'add',
  initialValues,
@@ -27,199 +38,263 @@ const ChickinFormKandang = ({
  afterSubmit?: () => void;
 }) => {
  const router = useRouter();
+  const [chickinErrorMessage, setChickinErrorMessage] = useState('');
+
+  const createChickin = useCallback(
+    async (payload: CreateChickinPayload) => {
+      const createChickinRes = await ChickinApi.create(payload);
+      if (isResponseError(createChickinRes)) {
+        setChickinErrorMessage(createChickinRes.message);
+        return;
+      }
+
+      toast.success(createChickinRes?.message as string);
+      router.push(
+        `/production/project-flock/chickin/add?projectFlockId=${initialValues?.project_flock?.id}`
+      );
+    },
+    [router]
+  );
+
+  const handleReset = async () => {
+    flushSync(() => {
+      formik.resetForm({
+        values: {
+          project_flock_kandang_id: initialValues?.id,
+          chickin_requests: initialValues?.available_qtys
+            ? initialValues.available_qtys.map((availableQty) => ({
+                chick_in_date: '',
+                product_warehouse_id: availableQty.product_warehouse.id,
+                available_qty: availableQty.available_qty,
+                note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
+              }))
+            : [],
+        },
+      });
+    });
+
+    formik.setTouched({
+      chickin_requests: initialValues?.available_qtys?.map(() => ({
+        chick_in_date: true,
+      })),
+    });
+
+    const errors = await formik.validateForm();
+    formik.setErrors(errors);
+  };
+
+  const formik = useFormik<ChickinFormValues>({
+    enableReinitialize: true,
+    validationSchema: ChickinSchema,
+    initialValues: {
+      project_flock_kandang_id: initialValues?.id,
+      chickin_requests: initialValues?.available_qtys
+        ? initialValues.available_qtys.map((availableQty) => ({
+            chick_in_date: '',
+            product_warehouse_id: availableQty.product_warehouse.id,
+            available_qty: availableQty.available_qty,
+            note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
+          }))
+        : [],
+    },
+    onSubmit: (values) => {
+      setChickinErrorMessage('');
+      createChickin(values as CreateChickinPayload);
+      if (afterSubmit) {
+        afterSubmit();
+      }
+    },
+  });
+
+  const { setValues: formikSetValues } = formik;
+
+  useEffect(() => {
+    formikSetValues({
+      project_flock_kandang_id: initialValues?.id,
+      chickin_requests: initialValues?.available_qtys
+        ? initialValues.available_qtys.map((availableQty) => ({
+            chick_in_date: '',
+            product_warehouse_id: availableQty.product_warehouse.id,
+            available_qty: availableQty.available_qty,
+            note: `Chickin project-flock-kandang-${initialValues?.id} product-warehouse-${availableQty.product_warehouse.id}`,
+          }))
+        : [],
+    });
+  }, [formikSetValues, initialValues]);
+
  return (
    <div className='flex flex-col gap-4'>
      <FormHeader
        type='add'
        title='Chick In DOC'
-        backUrl={`/production/project-flock/chickin/add?projectFlockId=${initialValues.project_flock.id}`}
+        backUrl={`/production/project-flock/chickin/add?projectFlockId=${initialValues?.project_flock?.id}`}
      />
-      <Card
-        title='Informasi Kandang'
-        className={{
-          wrapper: 'w-full bg-white mt-4',
+      <form
+        className='flex flex-col gap-4'
+        onReset={(e) => {
+          handleReset();
        }}
+        onSubmit={formik.handleSubmit}
      >
-        <Table<Kandang>
-          emptyContent={
-            <div className='w-full p-5 text-center'>
-              <span className='text-lg opacity-50'>
-                Informasi Kandang belum tersedia...
-              </span>
-            </div>
-          }
-          data={[initialValues.kandang]}
-          columns={[
-            {
-              header: 'Area',
-              accessorFn: () => initialValues.project_flock?.area.name || '-',
-            },
-            {
-              header: 'Lokasi',
-              accessorFn: () =>
-                initialValues.project_flock?.location.name || '-',
-            },
-            {
-              header: 'Flock',
-              accessorFn: () => initialValues.project_flock?.flock.name || '-',
-            },
-            {
-              header: 'Kandang',
-              accessorFn: (row) => row?.name || '-',
-            },
-            {
-              header: 'Kapasitas',
-              accessorFn: (row) =>
-                (row?.capacity && formatNumber(row?.capacity)) || '-',
-            },
-            {
-              header: 'Penanggung Jawab',
-              accessorFn: (row) => row?.pic?.name || '-',
-            },
-          ]}
+        <Card
+          title='Informasi Kandang'
          className={{
-            tableWrapperClassName: 'overflow-x-auto min-h-full!',
-            tableClassName: 'font-inter w-full table-auto min-h-full!',
-            headerRowClassName: 'border-b border-b-gray-200',
-            headerColumnClassName:
-              'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
-            bodyRowClassName: 'border-b border-b-gray-200',
-            bodyColumnClassName:
-              'px-6 py-3 last:flex last:flex-row last:justify-end',
-            paginationClassName: 'hidden',
+            wrapper: 'w-full bg-white mt-4',
          }}
-        />
-      </Card>
-      <Card
-        title='Informasi Chick In DOC'
-        className={{
-          wrapper: 'w-full bg-white',
-        }}
-      >
-        <Table<AvailableQty>
-          data={initialValues.available_qtys || []}
-          columns={[
-            {
-              accessorFn: (row) => row.chick_in_date,
-              header: 'Tanggal Chick In',
-              cell(props) {
-                return (
-                  <DateInput
-                    name='chick_in_date[]'
-                    value={props.row.original.chick_in_date}
-                    onChange={(e) => {
-                      props.row.original.chick_in_date = e.target.value;
-                    }}
-                  />
-                );
+        >
+          <Table<Kandang>
+            emptyContent={
+              <div className='w-full p-5 text-center'>
+                <span className='text-lg opacity-50'>
+                  Informasi Kandang belum tersedia...
+                </span>
+              </div>
+            }
+            data={[initialValues?.kandang]}
+            columns={[
+              {
+                header: 'Area',
+                accessorFn: () =>
+                  initialValues?.project_flock?.area.name || '-',
              },
-            },
-            {
-              accessorFn: (row) => row.po_number,
-              header: 'No. Surat Jalan',
-              cell(props) {
-                return (
-                  <TextInput
-                    name='po_number[]'
-                    value={props.row.original.po_number}
-                    onChange={(e) => {
-                      props.row.original.po_number = e.target.value;
-                    }}
-                  />
-                );
+              {
+                header: 'Lokasi',
+                accessorFn: () =>
+                  initialValues?.project_flock?.location.name || '-',
              },
-            },
-            {
-              header: 'Dokumen Surat Jalan',
-              cell(props) {
-                return (
-                  <FileInput
-                    name='document_path[]'
-                    onChange={(e) => {
-                      props.row.original.document_path = e.target.value;
-                    }}
-                  />
-                );
+              {
+                header: 'Flock',
+                accessorFn: () =>
+                  initialValues?.project_flock?.flock_name || '-',
              },
-            },
-            {
-              accessorFn: (row) => row.supplier?.name,
-              header: 'Supplier',
-              cell(props) {
-                return (
-                  <SelectInput
-                    value={
-                      props.row.original.supplier?.name &&
-                      props.row.original.supplier?.id
-                        ? {
-                            label: props.row.original.supplier.name,
-                            value: props.row.original.supplier.id,
-                          }
-                        : undefined
-                    }
-                    options={[]}
-                    isDisabled
-                  />
-                );
+              {
+                header: 'Kandang',
+                accessorFn: (row) => row?.name || '-',
              },
-            },
-            {
-              accessorFn: (row) => row.product_warehouse.product.name,
-              header: 'Produk',
-              cell(props) {
-                return (
-                  <SelectInput
-                    value={{
-                      label: props.row.original.product_warehouse.product.name,
-                      value: props.row.original.product_warehouse.product.id,
-                    }}
-                    options={[]}
-                    isDisabled
-                  />
-                );
+              {
+                header: 'Kapasitas',
+                accessorFn: (row) =>
+                  (row?.capacity && formatNumber(row?.capacity)) || '-',
              },
-            },
-            {
-              accessorFn: (row) => row.product_warehouse.quantity,
-              header: 'Jumlah (ekor)',
-              cell(props) {
-                return (
-                  <NumberInput
-                    name='qty[]'
-                    value={props.row.original.product_warehouse.quantity}
-                  />
-                );
+              {
+                header: 'Penanggung Jawab',
+                accessorFn: (row) => row?.pic?.name || '-',
              },
-            },
-          ]}
+            ]}
+            className={{
+              tableWrapperClassName: 'overflow-x-auto min-h-full!',
+              tableClassName: 'font-inter w-full table-auto min-h-full!',
+              headerRowClassName: 'border-b border-b-gray-200',
+              headerColumnClassName:
+                'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+              bodyRowClassName: 'border-b border-b-gray-200',
+              bodyColumnClassName:
+                'px-6 py-3 last:flex last:flex-row last:justify-end',
+              paginationClassName: 'hidden',
+            }}
+          />
+        </Card>
+        <Card
+          title='Informasi Chick In DOC'
          className={{
-            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-2 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-2 py-2 last:flex last:flex-row last:justify-end',
-            paginationClassName: 'hidden',
+            wrapper: 'w-full bg-white',
          }}
-          emptyContent={
-            <div className='w-full p-5 text-center'>
-              <span className='text-lg opacity-50'>
-                Isi persediaan DOC untuk kandang belum tersedia...
-              </span>
-            </div>
-          }
-        />
-      </Card>
-      <div className='flex flex-row justify-center gap-3'>
-        <Button type='reset' color='warning'>
-          Reset
-        </Button>
-        <Button type='submit' color='primary'>
-          Submit
-        </Button>
-      </div>
+        >
+          <Table<ChickinRequestFormValues>
+            data={formik.values.chickin_requests || []}
+            columns={[
+              {
+                accessorFn: (row) => row.chick_in_date,
+                header: 'Tanggal Chick In',
+                cell(props) {
+                  return (
+                    <DateInput
+                      name={`chickin_requests[${props.row.index}].chick_in_date`}
+                      value={
+                        formik.values.chickin_requests[props.row.index]
+                          ?.chick_in_date as string
+                      }
+                      onChange={formik.handleChange}
+                    />
+                  );
+                },
+              },
+              {
+                accessorFn: (row) => row.product_warehouse_id,
+                header: 'Produk',
+                cell(props) {
+                  const availableQty = initialValues?.available_qtys?.find(
+                    (availableQty) =>
+                      availableQty.product_warehouse.id ===
+                      props.row.original.product_warehouse_id
+                  );
+                  return (
+                    <SelectInput
+                      value={
+                        {
+                          label: availableQty?.product_warehouse?.product?.name,
+                          value: availableQty?.product_warehouse?.product?.id,
+                        } as OptionType
+                      }
+                      options={[]}
+                      isDisabled
+                    />
+                  );
+                },
+              },
+              {
+                accessorFn: (row) => row.product_warehouse_id,
+                header: 'Jumlah (ekor)',
+                cell(props) {
+                  const availableQty = initialValues?.available_qtys?.find(
+                    (availableQty) =>
+                      availableQty.product_warehouse.id ===
+                      props.row.original.product_warehouse_id
+                  );
+                  return (
+                    <NumberInput
+                      name='qty[]'
+                      value={availableQty?.available_qty}
+                    />
+                  );
+                },
+              },
+            ]}
+            className={{
+              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-2 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-2 py-2 last:flex last:flex-row last:justify-end',
+              paginationClassName: 'hidden',
+            }}
+            emptyContent={
+              <div className='w-full p-5 text-center'>
+                <span className='text-lg opacity-50'>
+                  Isi persediaan DOC untuk kandang belum tersedia...
+                </span>
+              </div>
+            }
+          />
+        </Card>
+        {JSON.stringify(formik.values)}
+        <div className='flex flex-row justify-center gap-3'>
+          <Button type='reset' color='warning' disabled={formik.isSubmitting}>
+            Reset
+          </Button>
+          <Button
+            type='submit'
+            color='primary'
+            disabled={!formik.isValid || formik.isSubmitting}
+          >
+            Submit
+          </Button>
+        </div>
+        {JSON.stringify(formik.errors)}
+      </form>
    </div>
  );
 };
@@ -426,7 +426,7 @@ const ProjectFlockTable = () => {
              },

              {
-                accessorKey: 'flock.name',
+                accessorKey: 'flock_name',
                header: 'Flock',
              },
              {
@@ -3,15 +3,22 @@
 import Badge from '@/components/Badge';
 import Button from '@/components/Button';
 import Card from '@/components/Card';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import PillBadge from '@/components/PillBadge';
 import Table from '@/components/Table';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
-import { ProjectFlockApi } from '@/services/api/production';
+import {
+  ProjectFlockApi,
+  ProjectFlockKandangApi,
+} from '@/services/api/production';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Kandang } from '@/types/api/master-data/kandang';
 import { ProjectFlock } from '@/types/api/production/project-flock';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 import { Icon } from '@iconify/react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -37,28 +44,30 @@ const ProjectFlockChickinDetail = ({
  const [projectFlock, setProjectFlock] = useState<ProjectFlock>();

  // Fetch Data
-  const { data: listProjectFlock, isLoading: isLoadingListProjectFlock } =
-    useSWR(
-      `${ProjectFlockApi.basePath}?${new URLSearchParams({
-        search: searchProjectFlock,
-      }).toString()}`,
-      ProjectFlockApi.getAllFetcher
-    );
+  const {
+    data: listProjectFlockKandang,
+    isLoading: isLoadingListProjectFlockKandang,
+  } = useSWR(
+    `${ProjectFlockKandangApi.basePath}?${new URLSearchParams({
+      search: searchProjectFlock,
+      project_flock_id:
+        projectFlock?.id?.toString() ?? projectFlockId?.toString() ?? '',
+    }).toString()}`,
+    ProjectFlockKandangApi.getAllFetcher
+  );

-  // Mapping Options
-  const options = isResponseSuccess(listProjectFlock)
-    ? listProjectFlock?.data.map((projectFlock) => {
-        return {
-          value: projectFlock.id,
-          label: `${projectFlock?.flock?.name} - Periode ${projectFlock?.period}`,
-        };
-      })
-    : [];
+  const {
+    options: options,
+    isLoadingOptions: isLoadingListProjectFlock,
+    rawData: listProjectFlock,
+  } = useSelect<ProjectFlock>(ProjectFlockApi.basePath, 'id', 'flock_name');

  // Handle Function
-  const handleChickinClick = async (kandang: Kandang) => {
+  const handleChickinClick = async (
+    projectFlockKandang: ProjectFlockKandang
+  ) => {
    router.push(
-      `/production/project-flock/chickin/add/kandang?projectFlockKandangId=${kandang.project_flock_kandang_id}&projectFlockId=${projectFlockId ?? selectedProjectFlock?.value}`
+      `/production/project-flock/chickin/add/kandang?projectFlockKandangId=${projectFlockKandang.id}&projectFlockId=${projectFlockId ?? selectedProjectFlock?.value}`
    );
  };

@@ -146,6 +155,10 @@ const ProjectFlockChickinDetail = ({
          }
          data={projectFlock ? [projectFlock] : []}
          columns={[
+            {
+              header: 'ID',
+              accessorKey: 'id',
+            },
            {
              header: 'Area',
              accessorKey: 'area.name',
@@ -222,7 +235,7 @@ const ProjectFlockChickinDetail = ({
          wrapper: 'w-full bg-white',
        }}
      >
-        <Table<Kandang>
+        <Table<ProjectFlockKandang>
          emptyContent={
            <div className='w-full p-5 text-center'>
              <span className='text-lg opacity-50'>
@@ -230,7 +243,11 @@ const ProjectFlockChickinDetail = ({
              </span>
            </div>
          }
-          data={projectFlock ? projectFlock.kandangs : []}
+          data={
+            isResponseSuccess(listProjectFlockKandang)
+              ? listProjectFlockKandang.data
+              : []
+          }
          columns={[
            {
              header: '#',
@@ -240,25 +257,48 @@ const ProjectFlockChickinDetail = ({
                1,
            },
            {
-              accessorFn: () => (projectFlock ? projectFlock.area.name : ''),
+              accessorFn: (row) => row?.project_flock?.area?.name,
              header: 'Area',
            },
            {
-              accessorFn: () =>
-                projectFlock ? projectFlock.location.name : '',
+              accessorFn: (row) => row?.project_flock?.location?.name,
              header: 'Lokasi',
            },
            {
-              accessorKey: 'name',
+              accessorKey: 'kandang.name',
              header: 'Kandang',
            },
            {
-              accessorKey: 'capacity',
+              accessorKey: 'kandang.capacity',
              header: 'Kapasitas',
            },
            {
-              accessorKey: 'pic.name',
-              header: 'Penanggung Jawab',
+              accessorKey: 'approval.step_name',
+              header: 'Status',
+              cell: (props) => {
+                return props.row.original.approval?.step_name ? (
+                  <PillBadge
+                    color={(() => {
+                      switch (
+                        props.row.original.approval?.step_name.toUpperCase()
+                      ) {
+                        case 'DISETUJUI':
+                          return 'green';
+                        case 'DITOLAK':
+                          return 'red';
+                        default:
+                          return 'gray';
+                      }
+                    })()}
+                    content={props.row.original.approval?.step_name
+                      .toLowerCase()
+                      .replace(/_/g, ' ')
+                      .replace(/\b\w/g, (char) => char.toUpperCase())}
+                  />
+                ) : (
+                  <PillBadge color='gray' content={'Belum Chick In'} />
+                );
+              },
            },
            {
              header: 'Aksi',
@@ -271,11 +311,12 @@ const ProjectFlockChickinDetail = ({
                      onClick={() => {
                        handleChickinClick(props.row.original);
                      }}
+                      className='p-1'
                    >
                      <Icon
                        icon='mdi:home-import-outline'
-                        width={24}
-                        height={24}
+                        width={18}
+                        height={18}
                      />
                      Chickin
                    </Button>
@@ -6,9 +6,7 @@ export const ProjectFlockFormSchema = 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!'),
+  flock_name: Yup.string().required('Nama Flock wajib diisi!'),

  // Area
  area: Yup.object({
@@ -1,7 +1,10 @@
 'use client';

 import Button from '@/components/Button';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import {
  AreaApi,
@@ -13,7 +16,7 @@ import {
 import { Icon } from '@iconify/react';
 import { useFormik } from 'formik';
 import { useRouter } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
+import { use, useEffect, useMemo, useState } from 'react';
 import useSWR, { KeyedMutator } from 'swr';
 import {
  ProjectFlockFormSchema,
@@ -58,7 +61,6 @@ const ProjectFlockForm = ({

  const [selectedLocation, setSelectedLocation] = useState('');
  const [disabledLocation, setDisabledLocation] = useState(true);
-  const [optionsLocation, setOptionsLocation] = useState<OptionType[]>([]);

  const [openSelectKandangs, setOpenSelectKandangs] = useState(
    initialValues?.kandangs && initialValues?.kandangs?.length > 0
@@ -105,38 +107,29 @@ const ProjectFlockForm = ({
  }, [initialValues]);

  // Fetch Data
-  const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({
-    search: '',
-  }).toString()}`;
-  const { data: flocks, isLoading: isLoadingFlocks } = useSWR(
-    flockUrl,
-    FlockApi.getAllFetcher
-  );
+  const {
+    rawData: flocks,
+    isLoadingOptions: isLoadingFlocks,
+    options: optionsFlock,
+  } = useSelect(FlockApi.basePath, 'id', 'name');

-  const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({
-    search: '',
-  }).toString()}`;
-  const { data: areas, isLoading: isLoadingAreas } = useSWR(
-    areaUrl,
-    AreaApi.getAllFetcher
-  );
+  const {
+    options: optionsArea,
+    isLoadingOptions: isLoadingAreas,
+    rawData: areas,
+  } = useSelect(AreaApi.basePath, 'id', 'name');

-  const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
-    search: '',
-    area_id: selectedArea,
-  }).toString()}`;
-  const { data: locations, isLoading: isLoadingLocations } = useSWR(
-    locationUrl,
-    LocationApi.getAllFetcher
-  );
+  const {
+    options: optionsLocation,
+    isLoadingOptions: isLoadingLocations,
+    rawData: locations,
+  } = useSelect(LocationApi.basePath, 'id', 'name');

-  const fcrUrl = `${FcrApi.basePath}?${new URLSearchParams({
-    search: '',
-  }).toString()}`;
-  const { data: fcrs, isLoading: isLoadingFcrs } = useSWR(
-    fcrUrl,
-    FcrApi.getAllFetcher
-  );
+  const {
+    options: optionsFcr,
+    isLoadingOptions: isLoadingFcrs,
+    rawData: fcrs,
+  } = useSelect(FcrApi.basePath, 'id', 'name');

  const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
    search: '',
@@ -159,36 +152,6 @@ const ProjectFlockForm = ({
      )
  );

-  // 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) {
@@ -246,8 +209,13 @@ const ProjectFlockForm = ({
      `${inputName}_id`,
      val ? (val as OptionType)?.value : 0
    );
+    formik.setFieldValue(
+      `${inputName}_name`,
+      val ? (val as OptionType)?.label : 0
+    );

    formik.setFieldTouched(`${inputName}_id`, true);
+    formik.setFieldTouched(`${inputName}_name`, true);
  };

  const categoryChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -293,15 +261,15 @@ const ProjectFlockForm = ({
  const formikInitialValues = useMemo<ProjectFlockFormValues>(() => {
    return {
      name: initialValues?.name ?? '',
-      flock: initialValues?.flock
+      flock: initialValues?.flock_name
        ? {
-            value: initialValues.flock.id,
-            label: initialValues.flock.name,
+            value: initialValues?.flock?.id ?? 0,
+            label: initialValues?.flock_name,
          }
        : null,
      area: initialValues?.area
        ? {
-            value: initialValues.area.id,
+            value: initialValues.area?.id,
            label: initialValues.area.name,
          }
        : null,
@@ -313,30 +281,31 @@ const ProjectFlockForm = ({
        : null,
      fcr: initialValues?.fcr
        ? {
-            value: initialValues.fcr.id,
+            value: initialValues.fcr?.id,
            label: initialValues.fcr.name,
          }
        : null,
      location: initialValues?.location
        ? {
-            value: initialValues.location.id,
+            value: initialValues.location?.id,
            label: initialValues.location.name,
          }
        : null,
      flock_id: initialValues?.flock?.id ?? 0,
+      flock_name: initialValues?.flock_name ?? '',
      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,
+      period: initialValues?.period ?? 1,
      kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as (
        | number
        | undefined
      )[],
    };
-  }, [initialValues]);
+  }, [initialValues, flocks]);

  // Formik
  const formik = useFormik<ProjectFlockFormValues>({
@@ -350,7 +319,7 @@ const ProjectFlockForm = ({
    onSubmit: async (values) => {
      setProjectFlockFormErrorMessage('');
      const payload: CreateProjectFlockPayload = {
-        flock_id: values.flock_id as number,
+        flock_name: values.flock_name as string,
        area_id: values.area_id as number,
        category: values.category as string,
        fcr_id: values.fcr_id as number,
@@ -377,8 +346,8 @@ const ProjectFlockForm = ({
  useEffect(() => {
    if (formType == 'detail') {
      formik.setFieldValue('area', {
-        value: initialValues?.area.id,
-        label: initialValues?.area.name,
+        value: initialValues?.area?.id,
+        label: initialValues?.area?.name,
      });
      formik.setFieldValue('area_id', initialValues?.area_id);
      if (initialValues?.area_id) {
@@ -402,9 +371,11 @@ const ProjectFlockForm = ({

  // 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
+    if (formType != 'add') {
+      if (initialValues?.location?.id) {
+        setSelectedLocation(initialValues.location?.id.toString());
+        setDisabledLocation(false); // biar dropdown lokasi aktif juga
+      }
    }
  }, [formType, initialValues]);

@@ -459,7 +430,7 @@ const ProjectFlockForm = ({
      method: 'POST',
      payload: {
        action: action,
-        approvable_ids: [initialValues.id],
+        approvable_ids: [initialValues?.id],
      },
    });

@@ -467,14 +438,6 @@ const ProjectFlockForm = ({
      if (refreshProjectFlocks) {
        await refreshProjectFlocks();
      }
-      // if (action == 'APPROVED') {
-      //   setIsApprovedDisabled(true);
-      //   setIsRejectedDisabled(false);
-      // }
-      // if (action == 'REJECTED') {
-      //   setIsRejectedDisabled(true);
-      //   setIsApprovedDisabled(false);
-      // }
      toast.success(approveProjectFlockRes.message as string);
    }
    if (isResponseError(approveProjectFlockRes)) {
@@ -591,9 +554,10 @@ const ProjectFlockForm = ({
                  options={optionsFlock}
                  isLoading={isLoadingFlocks}
                  isError={
-                    formik.touched.flock_id && Boolean(formik.errors.flock_id)
+                    formik.touched.flock_name &&
+                    Boolean(formik.errors.flock_name)
                  }
-                  errorMessage={formik.errors.flock_id as string}
+                  errorMessage={formik.errors.flock_name as string}
                  isClearable
                  isDisabled={formType === 'detail'}
                />
@@ -724,6 +688,7 @@ const ProjectFlockForm = ({
              </div>
            )}
          </div>
+          {JSON.stringify(formik.errors)}
        </form>
        {formType != 'add' && (
          <div className='flex flex-row gap-2 mb-6'>
@@ -215,7 +215,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
  const flockOptions = isResponseSuccess(projectFlocks)
    ? projectFlocks.data.map((flock) => ({
        value: flock.id,
-        label: flock.flock.name,
+        label: flock.flock?.name || '',
      }))
    : [];