fix(FE-92-93-105-106): fixing chickin form, after submit event and chickin modal trigger

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

@@ -29,9 +29,11 @@ const AddChickin = () => {
     paramMap: { page: 'page', pageSize: 'limit' },
   });
 
+  // States
   const [selectedKandang, setSelectedKandang] = useState<Kandang | undefined>(
     undefined
   );
+  const [searchProjectFlock, setSearchProjectFlock] = useState('');
 
   // Fetch Data
   const { data: projectFlock, isLoading: isLoadingProjectFlock } = useSWR(
@@ -39,7 +41,9 @@ const AddChickin = () => {
     (id: number) => ProjectFlockApi.getSingle(id)
   );
   const { data: listProjectFlock, isLoading: isLoadingListProjectFlock } =
-    useSWR(`${ProjectFlockApi.basePath}`, ProjectFlockApi.getAllFetcher);
+    useSWR(`${ProjectFlockApi.basePath}?${new URLSearchParams({
+      search: searchProjectFlock,
+    }).toString()}`, ProjectFlockApi.getAllFetcher);
 
   const getProjectFlockKandangUrl = `/kandangs/lookup`;
   const {
@@ -64,7 +68,7 @@ const AddChickin = () => {
     ? listProjectFlock?.data.map((projectFlock) => {
         return {
           value: projectFlock.id,
-          label: projectFlock?.flock.name,
+          label: `${projectFlock?.flock.name} - ${projectFlock?.category} - Periode ${projectFlock.period}` ,
         };
       })
     : [];
@@ -97,10 +101,13 @@ const AddChickin = () => {
   // Handle Function
   const handleChickinClick = (kandang: Kandang) => {
     setSelectedKandang(kandang);
-    if (isResponseSuccess(projectFlockKandang) && projectFlockKandang.data.id) {
-      chickinModal.openModal();
-      return;
-    }
+    refreshProjectFlockKandang();
+    chickinModal.openModal();
+  };
+  const handleAfterSubmit = () => {
+    refreshProjectFlockKandang();
+    chickinModal.closeModal();
+    router.push('/production/chickin');
   };
 
   return (
@@ -119,13 +126,15 @@ const AddChickin = () => {
               </Button>
 
               <div className='flex flex-col gap-4 w-full my-4'>
-                <div className='max-w-64'>
+                <div className='max-w-1/4'>
                   <SelectInput
-                    label='Project flock'
+                    required
+                    isSearchable
+                    label='Project Flock'
                     options={options}
                     isLoading={isLoadingListProjectFlock}
                     value={{
-                      label: projectFlock.data.flock.name,
+                      label: `${projectFlock.data.flock.name} - ${projectFlock.data.category} - Periode ${projectFlock.data.period}`,
                       value: projectFlock.data.id,
                     }}
                     onChange={(val) =>
@@ -135,6 +144,9 @@ const AddChickin = () => {
                         }`
                       )
                     }
+                    onInputChange={(val) => {
+                      setSearchProjectFlock(val);
+                    }}
                   />
                 </div>
               </div>
@@ -224,6 +236,7 @@ const AddChickin = () => {
                     created_at: projectFlock.data.created_at,
                     updated_at: projectFlock.data.updated_at,
                   }}
+                  afterSubmit={handleAfterSubmit}
                 />
               )}
           </Modal>

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

@@ -2,15 +2,13 @@
 
 import Button from '@/components/Button';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { OptionType } from '@/components/input/SelectInput';
 import Modal, { 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 { TableRowOptions } from '@/components/table/TableRowOptions';
 import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
-import { TableToolbar } from '@/components/table/TableToolbar';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';

src/components/pages/production/chickin/form/ChickinForm.schema.ts

@@ -2,6 +2,8 @@ import * as Yup from 'yup';
 
 export const ChickinFormSchema = Yup.object({
   chick_in_date: Yup.string().required('Tanggal masuk wajib diisi!'),
+  note: Yup.string().required('Catatan wajib diisi!'),
+  quantity: Yup.number().min(1, 'Jumlah wajib diisi!').required('Jumlah wajib diisi!'),
 })
 
 export type ChickinFormValues = Yup.InferType<typeof ChickinFormSchema>;

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

@@ -18,6 +18,8 @@ import DateInput from '@/components/input/DateInput';
 import { isResponseError } from '@/lib/api-helper';
 import toast from 'react-hot-toast';
 import { Icon } from '@iconify/react';
+import TextArea from '@/components/input/TextArea';
+import TextInput from '@/components/input/TextInput';
 
 interface ChickinFormProps {
   formType?: 'add' | 'detail' | 'edit';
@@ -43,6 +45,8 @@ const ChickinForm = ({
   const formikInitialValue = useMemo<ChickinFormValues>(() => {
     return {
       chick_in_date: formatDateForInput(initialValues?.chick_in_date) ?? '',
+      note: initialValues?.note ?? `Catatan Chickin ${initialValues?.project_flock_kandang?.project_flock.flock.name}`,
+      quantity: initialValues?.quantity ?? 1,
     };
   }, [initialValues]);
 
@@ -140,6 +144,29 @@ const ChickinForm = ({
           }
           errorMessage={formik.errors.chick_in_date}
         />
+        <TextInput
+          value={formik.values.quantity}
+          onChange={formik.handleChange}
+          onBlur={formik.handleBlur}
+          name='quantity'
+          label='Jumlah Chickin'
+          required
+          isError={formik.touched.quantity && Boolean(formik.errors.quantity)}
+          errorMessage={formik.errors.quantity}
+          type='number'
+          disabled
+        />
+        <TextArea
+          required
+          label='Catatan'
+          name='note'
+          value={formik.values.note}
+          onChange={formik.handleChange}
+          onBlur={formik.handleBlur}
+          isError={formik.touched.note && Boolean(formik.errors.note)}
+          errorMessage={formik.errors.note}
+
+        />
         {initialValues?.project_flock_kandang?.id == undefined && (
           <p className='text-error'>Project Flock Kandang tidak ditemukan.</p>
         )}