fix(FE-86): fixing approve button and delete button

src/components/pages/master-data/flock/FlocksTable.tsx

@@ -6,7 +6,7 @@ import { cn } from '@/lib/helper';
 import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
-import { use, useState } from 'react';
+import { useState } from 'react';
 import useSWR from 'swr';
 import { FlockApi } from '@/services/api/master-data';
 import { useModal } from '@/components/Modal';

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

@@ -3,7 +3,6 @@
 import Button from '@/components/Button';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
-import TextInput from '@/components/input/TextInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import Table from '@/components/Table';
@@ -22,10 +21,9 @@ import { Icon } from '@iconify/react';
 import {
   CellContext,
   ColumnDef,
-  ColumnSort,
   SortingState,
 } from '@tanstack/react-table';
-import { ChangeEventHandler, useCallback, useEffect, useState } from 'react';
+import { ChangeEventHandler, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
 
@@ -140,7 +138,6 @@ const ProjectFlockTable = () => {
   const {
     data: areas,
     isLoading: isLoadingAreas,
-    mutate: refreshAreas,
   } = useSWR(areaUrl, AreaApi.getAllFetcher);
 
   const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
@@ -151,7 +148,6 @@ const ProjectFlockTable = () => {
   const {
     data: locations,
     isLoading: isLoadingLocations,
-    mutate: refreshLocations,
   } = useSWR(locationUrl, LocationApi.getAllFetcher);
 
   const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
@@ -163,7 +159,6 @@ const ProjectFlockTable = () => {
   const {
     data: kandangs,
     isLoading: isLoadingKandang,
-    mutate: refreshKandang,
   } = useSWR(kandangUrl, KandangApi.getAllFetcher);
 
   // Data to Options Mapping
@@ -337,19 +332,6 @@ const ProjectFlockTable = () => {
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
     updateFilter('search', e.target.value);
   };
-  const updateSortingFilter = useCallback(
-    (
-      sortName: Exclude<keyof typeof tableFilterState, 'page' | 'pageSize'>,
-      sortFilter: ColumnSort | undefined
-    ) => {
-      if (!sortFilter) {
-        updateFilter(sortName, '');
-      } else {
-        updateFilter(sortName, sortFilter.desc ? 'desc' : 'asc');
-      }
-    },
-    [updateFilter]
-  );
   const handleSelectAll = (checked: boolean) => {
     if (checked && isResponseSuccess(projectFlocks)) {
       const allIds = projectFlocks.data.map((item) => item.id);
@@ -458,6 +440,7 @@ const ProjectFlockTable = () => {
                     (val as OptionType)?.value.toString()
                   );
                 }}
+                onInputChange={setAreaSelectInputValue}
                 isClearable
               />
               <SelectInput
@@ -472,6 +455,7 @@ const ProjectFlockTable = () => {
                     (val as OptionType)?.value.toString()
                   );
                 }}
+                onInputChange={setLocationSelectInputValue}
                 isClearable
               />
               <SelectInput
@@ -486,6 +470,7 @@ const ProjectFlockTable = () => {
                     (val as OptionType)?.value.toString()
                   );
                 }}
+                onInputChange={setKandangSelectInputValue}
                 isClearable
               />
               <DebouncedTextInput
@@ -569,7 +554,7 @@ const ProjectFlockTable = () => {
           selectedFlocks.length > 0
             ? `Apakah anda yakin ingin approve Project Flock berikut? (${selectedFlocks
                 .map(
-                  (flock, index) =>
+                  (flock) =>
                     `${flock.flock?.name ?? '(Tanpa nama)'} - ${
                       flock.area?.name ?? '-'
                     }`

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

@@ -1,4 +1,3 @@
-import { min } from 'moment';
 import * as Yup from 'yup';
 
 export const ProjectFlockFormSchema = Yup.object({

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

@@ -9,7 +9,6 @@ import {
   FlockApi,
   KandangApi,
   LocationApi,
-  ProductCategoryApi,
 } from '@/services/api/master-data';
 import { Icon } from '@iconify/react';
 import { useFormik } from 'formik';
@@ -106,14 +105,6 @@ const ProjectFlockForm = ({
     FcrApi.getAllFetcher
   );
 
-  const productCategoryUrl = `${
-    ProductCategoryApi.basePath
-  }?${new URLSearchParams({
-    search: '',
-  }).toString()}`;
-  const { data: productCategories, isLoading: isLoadingProductCategories } =
-    useSWR(productCategoryUrl, ProductCategoryApi.getAllFetcher);
-
   const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
     search: '',
     location_id: selectedLocation == '' ? '0' : selectedLocation,
@@ -153,12 +144,6 @@ const ProjectFlockForm = ({
         label: flock.name,
       }))
     : [];
-  const optionsProductCategory = isResponseSuccess(productCategories)
-    ? productCategories?.data.map((productCategory) => ({
-        value: productCategory.id,
-        label: productCategory.name,
-      }))
-    : [];
 
   useEffect(() => {
     if (isResponseSuccess(locations)) {
@@ -168,7 +153,7 @@ const ProjectFlockForm = ({
       }));
       setOptionsLocation(options);
     }
-  }, [locations]);
+  }, [locations, setSelectedLocation]);
 
   useEffect(() => {
     if (isResponseSuccess(kandang)) {
@@ -327,11 +312,16 @@ const ProjectFlockForm = ({
         : null,
       flock_id: initialValues?.flock?.id ?? 0,
       area_id: initialValues?.area?.id ?? 0,
-      category: initialValues?.category as (NonNullable<"GROWING" | "LAYING" | undefined>),
+      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)[],
+      kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as (
+        | number
+        | undefined
+      )[],
     };
   }, [initialValues]);
 
@@ -378,16 +368,18 @@ const ProjectFlockForm = ({
         label: initialValues?.area.name,
       });
       formik.setFieldValue('area_id', initialValues?.area_id);
-      if(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, formik]);
+  }, [formikSetValues, formikInitialValues]);
+
   // Aktifkan lokasi jika formType = 'detail'
   useEffect(() => {
     if (formType === 'detail') {
@@ -408,9 +400,9 @@ const ProjectFlockForm = ({
   }, [formik.values]);
 
   useEffect(() => {
-    isResponseSuccess(periodFlocks)
-      ? formik.setFieldValue('period', periodFlocks.data.next_period)
-      : formik.setFieldValue('period', '');
+    if(isResponseSuccess(periodFlocks)){
+      formik.setFieldValue('period', periodFlocks.data.next_period);
+    }
   }, [periodFlocks]);
 
   // Actions handler
@@ -488,22 +480,24 @@ const ProjectFlockForm = ({
             </div>
           </div>
         )}
-        <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>
+        {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}
@@ -511,7 +505,9 @@ const ProjectFlockForm = ({
         >
           <div className='card bg-base-100 shadow w-full mb-6'>
             <div className='card-body'>
-              <div className='card-title mb-4'>Informasi Umum {formik.values.kandang_ids && formik.values.kandang_ids.join(', ')}</div>
+              <div className='card-title mb-4'>
+                Informasi Umum
+              </div>
 
               <div className='grid sm:grid-cols-2 gap-4'>
                 <SelectInput
@@ -603,6 +599,7 @@ const ProjectFlockForm = ({
                   errorMessage={formik.errors.period as string}
                   readOnly={formType === 'detail'}
                   disabled={true}
+                  isLoading={isLoadingPeriodFlocks}
                 />
               </div>
             </div>
@@ -633,6 +630,9 @@ const ProjectFlockForm = ({
                 open={openSelectKandangs}
               >
                 <div className='overflow-x-auto'>
+                  {isLoadingKandang && (
+                    <span className="loading loading-dots loading-xl"></span>
+                  )}
                   <table className='table'>
                     {/* head */}
                     <thead>
@@ -756,24 +756,26 @@ const ProjectFlockForm = ({
             )}
           </div>
         </form>
-        <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>
+        {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