feat(FE-85-87-88): slicing ui and integrate api for search and edit

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

@@ -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;

src/components/input/SelectInput.tsx

@@ -1,12 +1,6 @@
 'use client';
 
-import {
+import { ComponentType, ReactNode, useEffect, useMemo, useState } from 'react';
-  ComponentType,
-  ReactNode,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
 import Select, {
   OptionProps,
   GroupBase,
@@ -98,10 +92,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     return { ...base, IndicatorSeparator: () => null };
   }, [isAnimated]);
 
-  const internalInputChangeHandler = (
+  const internalInputChangeHandler = (val: string, meta: InputActionMeta) => {
-    val: string,
-    meta: InputActionMeta
-  ) => {
     if (meta.action === 'input-change') setInternalInputValue(val);
     if (meta.action === 'menu-close') setInternalInputValue('');
   };
@@ -113,9 +104,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
   const SelectComponent = createables ? CreatableSelect : Select;
 
   /** 🎯 handleChange tanpa any */
-  const handleChange = (
+  const handleChange = (val: MultiValue<T> | SingleValue<T> | null): void => {
-    val: MultiValue<T> | SingleValue<T>
-  ): void => {
     if (!val) {
       onChange?.(null);
       return;
@@ -145,15 +134,15 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         >
           {label}
           {required && (
-            <span className="tooltip tooltip-error" data-tip="required">
+            <span className='tooltip tooltip-error' data-tip='required'>
-              <span className="text-error"> *</span>
+              <span className='text-error'> *</span>
             </span>
           )}
         </span>
       )}
 
       <SelectComponent<T, boolean, GroupBase<T>>
-        instanceId="select"
+        instanceId='select'
         value={value ?? (isMulti ? [] : null)}
         onChange={handleChange}
         options={options}
@@ -225,9 +214,9 @@ 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>
   );

src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx

@@ -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,

src/components/pages/master-data/customer/form/CustomerForm.tsx

@@ -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';

src/components/pages/master-data/flock/form/FlockForm.tsx

@@ -5,7 +5,7 @@ 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 './FlockForm.schema';
+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';

src/components/pages/master-data/supplier/form/SupplierForm.tsx

@@ -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';

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

@@ -1,6 +1,7 @@
 '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';
@@ -21,7 +22,7 @@ import {
   ColumnSort,
   SortingState,
 } from '@tanstack/react-table';
-import { useCallback, useEffect, useState } from 'react';
+import { ChangeEventHandler, useCallback, useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
 
@@ -54,6 +55,15 @@ const RowOptionsMenu = ({
         <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'
@@ -217,6 +227,10 @@ const ProjectFlockTable = () => {
     setIsDeleteLoading(false);
   };
 
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
   const updateSortingFilter = useCallback(
     (
       sortName: Exclude<keyof typeof tableFilterState, 'page' | 'pageSize'>,
@@ -235,14 +249,31 @@ const ProjectFlockTable = () => {
     <>
       <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='w-full flex flex-col justify-between items-end gap-2'>
-            <div className='flex flex-row'>
+            <div className='flex flex-col sm:flex-row gap-3 w-full'>
-              <Button href='/production/project-flock/add' color='primary'>
+              <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>
+              <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 className='flex flex-row justify-end'>
+            </div>
+            <div className='hidden sm:flex flex-row justify-end'>
               <SelectInput
                 label='Baris'
                 options={ROWS_OPTIONS}

src/components/pages/production/project-flock/form/ProjectFlockForm.schema.ts

@@ -1,42 +1,49 @@
+import { min } from 'moment';
 import * as Yup from 'yup';
 
 export const ProjectFlockFormSchema = Yup.object({
-  name: Yup.string().required('Nama Proyek wajib diisi!'),
-
   // 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().required('Flock wajib diisi!'),
+  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().required('Area wajib diisi!'),
+  area_id: Yup.number()
+    .min(1, 'Area wajib diisi!')
+    .required('Area wajib diisi!'),
 
   //Product Category
   product_category: Yup.object({
     value: Yup.number().required('ID Kategori Produk wajib diisi!'),
     label: Yup.string().required('Nama Kategori Produk wajib diisi!'),
   }).nullable(),
-  product_category_id: Yup.number().required('Kategori Produk wajib diisi!'),
+  product_category_id: Yup.number()
+    .min(1, 'Kategori Produk wajib diisi!')
+    .required('Kategori Produk 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().required('FCR wajib diisi!'),
+  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().required('Lokasi wajib diisi!'),
+  location_id: Yup.number()
+    .min(1, 'Lokasi wajib diisi!')
+    .required('Lokasi wajib diisi!'),
 
   period: Yup.number()
     .required('Periode wajib diisi!')
@@ -54,4 +61,3 @@ export type ProjectFlockFormValues = Yup.InferType<
 >;
 
 export const UpdateProjectFlockFormSchema = ProjectFlockFormSchema;
-

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

@@ -20,17 +20,20 @@ import {
   ProjectFlockFormSchema,
   ProjectFlockFormValues,
   UpdateProjectFlockFormSchema,
-} from './ProjectFlockForm.schema';
+} 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 Table from '@/components/Table';
 import { Kandang } from '@/types/api/master-data/kandang';
 import Collapse from '@/components/Collapse';
 import { ProjectFlockApi } from '@/services/api/production';
+import { httpClient } from '@/services/http/client';
+import { BaseApiResponse } from '@/types/api/api-general';
+import axios from 'axios';
 
 interface ProjectFlockFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -58,6 +61,10 @@ const ProjectFlockForm = ({
     initialValues?.kandangs ?? []
   );
 
+  const [selectedFlock, setSelectedFlock] = useState<number>(
+    initialValues?.flock?.id ?? 0
+  );
+
   // Fetch Data
   const flockUrl = `${FlockApi.basePath}?${new URLSearchParams({
     search: '',
@@ -109,6 +116,17 @@ const ProjectFlockForm = ({
     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) => ({
@@ -147,24 +165,26 @@ const ProjectFlockForm = ({
 
   useEffect(() => {
     if (isResponseSuccess(kandang)) {
-      if (kandang.data.length > 0 && selectedLocation != '') {
+      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.setFieldTouched('area_id', true);
     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);
 
@@ -185,11 +205,11 @@ const ProjectFlockForm = ({
     inputName: string
   ) => {
     formik.setFieldValue(inputName, val);
-
     formik.setFieldValue(
       `${inputName}_id`,
       val ? (val as OptionType)?.value : 0
     );
+
     formik.setFieldTouched(`${inputName}_id`, true);
   };
 
@@ -212,7 +232,9 @@ const ProjectFlockForm = ({
     if (checked) {
       formik.setFieldValue(
         'kandang_ids',
-        optionsKandang.map((kandang) => kandang.id)
+        optionsKandang
+          .filter((kandang) => kandang.status === 'NON_ACTIVE')
+          .map((kandang) => kandang.id)
       );
     } else {
       formik.setFieldValue('kandang_ids', []);
@@ -231,7 +253,24 @@ const ProjectFlockForm = ({
     }
     if (isResponseError(createProjectFlockRes)) {
       setProjectFlockFormErrorMessage(createProjectFlockRes?.message as string);
-      // toast.ersror(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);
     }
   };
 
@@ -269,12 +308,12 @@ const ProjectFlockForm = ({
             label: initialValues.location.name,
           }
         : null,
-      flock_id: initialValues?.flock_id ?? 0,
+      flock_id: initialValues?.flock?.id ?? 0,
-      area_id: 0,
+      area_id: initialValues?.area?.id ?? 0,
-      product_category_id: 0,
+      product_category_id: initialValues?.product_category?.id ?? 0,
-      fcr_id: 0,
+      fcr_id: initialValues?.fcr?.id ?? 0,
-      location_id: 0,
+      location_id: initialValues?.location?.id ?? 0,
-      period: initialValues?.period ?? 0,
+      period: initialValues?.period ?? '',
       kandang_ids: [],
     };
   }, [initialValues]);
@@ -282,6 +321,7 @@ const ProjectFlockForm = ({
   // Formik
   const formik = useFormik<ProjectFlockFormValues>({
     initialValues: formikInitialValues,
+    enableReinitialize: true,
     validationSchema:
       formType == 'add' ? ProjectFlockFormSchema : UpdateProjectFlockFormSchema,
     validateOnBlur: true,
@@ -290,7 +330,6 @@ const ProjectFlockForm = ({
     onSubmit: async (values) => {
       setProjectFlockFormErrorMessage('');
       const payload: CreateProjectFlockPayload = {
-        name: values.name as string,
         flock_id: values.flock_id as number,
         area_id: values.area_id as number,
         product_category_id: values.product_category_id as number,
@@ -304,7 +343,8 @@ const ProjectFlockForm = ({
         case 'add':
           await createProjectFlockHandler(payload);
           break;
-        case 'detail':
+        case 'edit':
+          await updateProjectFlockHandler(payload);
           break;
         default:
           break;
@@ -315,8 +355,6 @@ const ProjectFlockForm = ({
   const { setValues: formikSetValues } = formik;
   // Effect Initial
   useEffect(() => {
-    console.log('Initial Value');
-    console.log(initialValues);
     if (formType == 'detail') {
       formik.setFieldValue('area', {
         value: initialValues.area.id,
@@ -340,7 +378,7 @@ const ProjectFlockForm = ({
 
   // Set lokasi otomatis berdasarkan initialValues saat formType = 'detail'
   useEffect(() => {
-    if (formType === 'detail' && initialValues?.location?.id) {
+    if (formType != 'add' && initialValues?.location?.id) {
       setSelectedLocation(initialValues.location?.id.toString());
       setDisabledLocation(false); // biar dropdown lokasi aktif juga
     }
@@ -348,19 +386,34 @@ const ProjectFlockForm = ({
 
   // Setelah data kandang difetch, centang otomatis kandang yang ada di initialValues
   useEffect(() => {
-    if (formType === 'detail' && isResponseSuccess(kandang)) {
+    if (formType != 'add' && isResponseSuccess(kandang)) {
+      if (selectedLocation) {
         setOptionsKandang(kandang.data);
         setOpenSelectKandangs(true);
-
-      // Ambil ID dari initialValues.kandangs
         const kandangIds =
           initialValues?.kandangs?.map((k: Kandang) => k.id) ?? [];
-
-      // Set nilai ke formik
         formik.setFieldValue('kandang_ids', kandangIds);
+        console.log("kandangIds");
+        console.log(kandangIds);
+      } else {
+        setOptionsKandang([]);
+        setOpenSelectKandangs(false);
+        formik.setFieldValue('kandang_ids', []);
+        initialValues.kandangs = [];
+      }
     }
   }, [formType, kandang, initialValues]);
 
+  useEffect(() => {
+    formik.validateForm();
+  }, [formik.values]);
+
+  useEffect(() => {
+    isResponseSuccess(periodFlocks)
+      ? formik.setFieldValue('period', periodFlocks.data.next_period)
+      : formik.setFieldValue('period', '');
+  }, [periodFlocks]);
+
   return (
     <>
       <section className='w-full'>
@@ -408,24 +461,7 @@ const ProjectFlockForm = ({
             <div className='card-body'>
               <div className='card-title mb-4'>Informasi Umum</div>
 
-              <div className='grid grid-cols-2 gap-4'>
+              <div className='grid sm:grid-cols-2 gap-4'>
-                {formType != 'detail' && (
-                  <div className='col-span-2'>
-                    <TextInput
-                      required
-                      name='name'
-                      label='Nama Project Flock'
-                      placeholder='Masukan nama project flock'
-                      value={formik.values.name}
-                      onChange={formik.handleChange}
-                      onBlur={formik.handleBlur}
-                      isError={
-                        formik.touched.name && Boolean(formik.errors.name)
-                      }
-                      errorMessage={formik.errors.name}
-                    />
-                  </div>
-                )}
                 <SelectInput
                   required
                   label='Area'
@@ -433,8 +469,10 @@ const ProjectFlockForm = ({
                   onChange={areaChangeHandler}
                   options={optionsArea}
                   isLoading={isLoadingAreas}
-                  isError={formik.touched.area && Boolean(formik.errors.area)}
+                  isError={
-                  errorMessage={formik.errors.area as string}
+                    formik.touched.area_id && Boolean(formik.errors.area_id)
+                  }
+                  errorMessage={formik.errors.area_id as string}
                   isClearable
                   isDisabled={formType === 'detail'}
                 />
@@ -444,14 +482,16 @@ const ProjectFlockForm = ({
                   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 && Boolean(formik.errors.flock)}
+                  isError={
-                  errorMessage={formik.errors.flock as string}
+                    formik.touched.flock_id && Boolean(formik.errors.flock_id)
+                  }
+                  errorMessage={formik.errors.flock_id as string}
                   isClearable
                   isDisabled={formType === 'detail'}
-
                 />
                 <SelectInput
                   required
@@ -461,9 +501,10 @@ const ProjectFlockForm = ({
                   options={optionsLocation}
                   isLoading={isLoadingLocations}
                   isError={
-                    formik.touched.location && Boolean(formik.errors.location)
+                    formik.touched.location_id &&
+                    Boolean(formik.errors.location_id)
                   }
-                  errorMessage={formik.errors.location as string}
+                  errorMessage={formik.errors.location_id as string}
                   isClearable
                   isDisabled={formType === 'detail' || disabledLocation}
                 />
@@ -476,8 +517,10 @@ const ProjectFlockForm = ({
                   }}
                   options={optionsFcr}
                   isLoading={isLoadingFcrs}
-                  isError={formik.touched.fcr && Boolean(formik.errors.fcr)}
+                  isError={
-                  errorMessage={formik.errors.fcr as string}
+                    formik.touched.fcr_id && Boolean(formik.errors.fcr_id)
+                  }
+                  errorMessage={formik.errors.fcr_id as string}
                   isClearable
                   isDisabled={formType === 'detail'}
                 />
@@ -497,13 +540,13 @@ const ProjectFlockForm = ({
                   errorMessage={formik.errors.product_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={
@@ -533,7 +576,7 @@ const ProjectFlockForm = ({
                     </Button>
                   </div>
                 }
-                className='w-full size-full'
+                className='sm:w-full'
                 titleClassName='w-full p-0!'
                 onOpenChange={setOpenSelectKandangs}
                 open={openSelectKandangs}
@@ -548,8 +591,14 @@ const ProjectFlockForm = ({
                             <input
                               type='checkbox'
                               checked={
-                                formik.values.kandang_ids.length ===
+                                optionsKandang
-                                optionsKandang.length
+                                  .filter((k) => k.status === 'NON_ACTIVE')
+                                  .every((k) =>
+                                    formik.values.kandang_ids.includes(k.id)
+                                  ) &&
+                                optionsKandang.filter(
+                                  (k) => k.status === 'NON_ACTIVE'
+                                ).length > 0
                               }
                               className='checkbox'
                               onChange={
@@ -561,6 +610,7 @@ const ProjectFlockForm = ({
                           </label>
                         </th>
                         <th>Kandang</th>
+                        <th>Status</th>
                         <th>Penanggung Jawab</th>
                       </tr>
                     </thead>
@@ -583,10 +633,15 @@ const ProjectFlockForm = ({
                                       ? () => {}
                                       : kandangChangeHandler
                                   }
+                                  disabled={
+                                    formType === 'detail' ||
+                                    kandang.status != 'NON_ACTIVE'
+                                  }
                                 />
                               </label>
                             </th>
                             <td>{kandang.name}</td>
+                            <td>{kandang.status}</td>
                             <td>{kandang.pic?.name}</td>
                           </tr>
                         ))}

src/config/constant.ts

@@ -13,9 +13,9 @@ export const MAIN_DRAWER_LINKS: MAIN_DRAWER_MENU[] = [
   },
 
   {
-    title: 'Flock',
+    title: 'Production',
     link: '/production',
-    icon: 'material-symbols:raven-outline-rounded',
+    icon: 'material-symbols:conveyor-belt-outline-rounded',
     submenu: [
       {
         title: 'List Flock',

src/services/api/base.ts

@@ -79,4 +79,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;
+    }
+  }
 }

src/services/api/inventory.ts

@@ -2,7 +2,7 @@ import {
     InventoryAdjustment,
     CreateInventoryAdjustmentPayload,
 } from '@/types/api/inventory/adjustment';
-import { BaseApiService } from './base';
+import { BaseApiService } from '@/services/api/base';
 
 export const inventoryAdjustmentApi = new BaseApiService<
     InventoryAdjustment,

src/services/api/production.ts

@@ -2,7 +2,7 @@ import {
   ProjectFlock,
   CreateProjectFlockPayload,
 } from '@/types/api/production/project-flock';
-import { BaseApiService } from './base';
+import { BaseApiService } from '@/services/api/base';
 
 export const ProjectFlockApi = new BaseApiService<
   ProjectFlock,

src/stores/ui/ui.store.ts

@@ -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(

src/types/api/inventory/adjustment.d.ts

@@ -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;

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

@@ -1,4 +1,4 @@
-import { BaseMetadata } from "../api-general";
+import { BaseMetadata } from "@/types/api/api-general";
 
 export type BaseFlock = {
   id: number;

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

@@ -5,6 +5,7 @@ import { BaseUser } from '@/types/api/user';
 export type BaseKandang = {
   id: number;
   name: string;
+  status: string;
   location: BaseLocation;
   pic: BaseUser;
 };

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

@@ -1,9 +1,9 @@
-import { Area } from "../master-data/area";
+import { Area } from "@/types/api/master-data/area";
-import { Fcr } from "../master-data/fcr";
+import { Fcr } from "@/types/api/master-data/fcr";
-import { Flock } from "../master-data/flock";
+import { Flock } from "@/types/api/master-data/flock";
-import { Kandang } from "../master-data/kandang";
+import { Kandang } from "@/types/api/master-data/kandang";
-import { Location } from "../master-data/location";
+import { Location } from "@/types/api/master-data/location";
-import { ProductCategory } from "../master-data/product-category";
+import { ProductCategory } from "@/types/api/master-data/product-category";
 
 export type BaseProjectFlock = {
   name: string;
@@ -22,10 +22,15 @@ export type BaseProjectFlock = {
   kandangs: Kandang[];
 }
 
+export type PeriodFlock = {
+  flock: Flock;
+  next_period: number;
+}
+
+
 export type ProjectFlock = BaseMetadata & BaseProjectFlock 
 
 export type CreateProjectFlockPayload = {
-  name: string;
   flock_id: number;
   area_id: number;
   product_category_id: number;