fix(FE-88-89) adjust category flock dengan API backend & set disabled input period

2026-05-20 13:32:00 +00:00 · 2025-10-21 10:14:17 +07:00
parent 9964e1797a
commit 1672705464
10 changed files with 262 additions and 42 deletions
@@ -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,11 @@
+import SuspenseHelper from "@/components/helper/SuspenseHelper"
+
+const Layout = ({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>
+}
+
+export default Layout;
@@ -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,11 @@
+import SuspenseHelper from "@/components/helper/SuspenseHelper"
+
+const Layout = ({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>
+}
+
+export default Layout;
@@ -0,0 +1,11 @@
+import SuspenseHelper from "@/components/helper/SuspenseHelper"
+
+const Layout = ({
+  children
+}: Readonly<{
+  children: React.ReactNode
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>
+}
+
+export default Layout;
@@ -3,6 +3,7 @@
 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';
@@ -11,6 +12,7 @@ import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { 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 { Kandang } from '@/types/api/master-data/kandang';
@@ -92,12 +94,33 @@ const ProjectFlockTable = () => {
  } = 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 {
@@ -109,6 +132,59 @@ const ProjectFlockTable = () => {
    ProjectFlockApi.getAllFetcher
  );

+  const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({
+    search: areaSelectInputValue,
+    limit: '100',
+  }).toString()}`;
+  const {
+    data: areas,
+    isLoading: isLoadingAreas,
+    mutate: refreshAreas,
+  } = 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,
+    mutate: refreshLocations,
+  } = 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,
+    mutate: refreshKandang,
+  } = 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] =
@@ -170,21 +246,23 @@ const ProjectFlockTable = () => {
      header: 'FCR',
    },
    {
-      accessorKey: 'product_category.name',
-      header: 'Kategori Produk',
+      accessorKey: 'category',
+      header: 'Kategori',
    },
    {
      header: 'Kandang',
      cell: (props) => {
        const kandang = props.row.original.kandangs;
-        const kandangNames = kandang.map((k: Kandang) => k.name);
-        console.log('kandang');
-        console.log(kandang);
-        return (
-          <div>
-            {kandangNames.length > 0 ? kandangNames.join(', ') : 'Tidak ada'}
-          </div>
-        );
+        if (kandang) {
+          const kandangNames = kandang.map((k: Kandang) => k.name);
+          return (
+            <div>
+              {kandangNames.length > 0 ? kandangNames.join(', ') : 'Tidak ada'}
+            </div>
+          );
+        }else{
+          return '-';
+        }
      },
    },
    {
@@ -341,7 +419,60 @@ const ProjectFlockTable = () => {
                />
              </div>
            </div>
-            <div className='hidden sm:flex flex-row justify-end'>
+            <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()
+                  );
+                }}
+                isClearable
+              />
+              <SelectInput
+                label='Lokasi'
+                options={optionsLocation}
+                isLoading={isLoadingLocations}
+                value={selectedLocation}
+                onChange={(val) => {
+                  setSelectedLocation(val as OptionType);
+                  updateFilter(
+                    'locationFilter',
+                    (val as OptionType)?.value.toString()
+                  );
+                }}
+                isClearable
+              />
+              <SelectInput
+                label='Kandang'
+                options={optionsKandang}
+                isLoading={isLoadingKandang}
+                value={selectedKandang}
+                onChange={(val) => {
+                  setSelectedKandang(val as OptionType);
+                  updateFilter(
+                    'kandangFilter',
+                    (val as OptionType)?.value.toString()
+                  );
+                }}
+                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}
@@ -390,6 +521,21 @@ const ProjectFlockTable = () => {
        </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'
@@ -20,14 +20,13 @@ export const ProjectFlockFormSchema = Yup.object({
    .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!'),
+  // Kategori
+  category_option: Yup.object({
+    value: Yup.string().required('Nilai Kategori wajib diisi!'),
+    label: Yup.string().required('Label Kategori wajib diisi!'),
  }).nullable(),
-  product_category_id: Yup.number()
-    .min(1, 'Kategori Produk wajib diisi!')
-    .required('Kategori Produk wajib diisi!'),
+  category: Yup.string().oneOf(['GROWING', 'LAYING'], 'Kategori wajib diisi!')
+    .required('Kategori wajib diisi!'),

  // FCR
  fcr: Yup.object({
@@ -34,6 +34,7 @@ import { ProjectFlockApi } from '@/services/api/production';
 import { httpClient } from '@/services/http/client';
 import { BaseApiResponse } from '@/types/api/api-general';
 import axios from 'axios';
+import { FLOCK_CATEGORY_OPTIONS } from '@/config/constant';

 interface ProjectFlockFormProps {
  formType?: 'add' | 'edit' | 'detail';
@@ -202,7 +203,7 @@ const ProjectFlockForm = ({

  const optionChangeHandler = (
    val: OptionType | OptionType[] | null,
-    inputName: string
+    inputName: string,
  ) => {
    formik.setFieldValue(inputName, val);
    formik.setFieldValue(
@@ -213,6 +214,12 @@ const ProjectFlockForm = ({
    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) {
@@ -233,7 +240,7 @@ const ProjectFlockForm = ({
      formik.setFieldValue(
        'kandang_ids',
        optionsKandang
-          .filter((kandang) => kandang.status === 'NON_ACTIVE')
+          .filter((kandang) => (kandang.status === 'NON_ACTIVE' || formik.values.kandang_ids.includes(kandang.id)))
          .map((kandang) => kandang.id)
      );
    } else {
@@ -290,10 +297,10 @@ const ProjectFlockForm = ({
            label: initialValues.area.name,
          }
        : null,
-      product_category: initialValues?.product_category
+      category_option: initialValues?.category
        ? {
-            value: initialValues.product_category.id,
-            label: initialValues.product_category.name,
+            value: initialValues.category,
+            label: initialValues.category,
          }
        : null,
      fcr: initialValues?.fcr
@@ -310,11 +317,11 @@ const ProjectFlockForm = ({
        : null,
      flock_id: initialValues?.flock?.id ?? 0,
      area_id: initialValues?.area?.id ?? 0,
-      product_category_id: initialValues?.product_category?.id ?? 0,
+      category: initialValues?.category,
      fcr_id: initialValues?.fcr?.id ?? 0,
      location_id: initialValues?.location?.id ?? 0,
      period: initialValues?.period ?? '',
-      kandang_ids: [],
+      kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) ?? [],
    };
  }, [initialValues]);

@@ -332,7 +339,7 @@ const ProjectFlockForm = ({
      const payload: CreateProjectFlockPayload = {
        flock_id: values.flock_id as number,
        area_id: values.area_id as number,
-        product_category_id: values.product_category_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,
@@ -526,18 +533,15 @@ const ProjectFlockForm = ({
                />
                <SelectInput
                  required
-                  label='Kategori Produk'
-                  value={formik.values.product_category as OptionType}
-                  onChange={(val) => {
-                    optionChangeHandler(val, 'product_category');
-                  }}
-                  options={optionsProductCategory}
-                  isLoading={isLoadingProductCategories}
+                  label='Kategori'
+                  value={formik.values.category_option as OptionType}
+                  onChange={categoryChangeHandler}
+                  options={FLOCK_CATEGORY_OPTIONS}
                  isError={
-                    formik.touched.product_category &&
-                    Boolean(formik.errors.product_category)
+                    formik.touched.category &&
+                    Boolean(formik.errors.category)
                  }
-                  errorMessage={formik.errors.product_category as string}
+                  errorMessage={formik.errors.category as string}
                  isClearable
                  isDisabled={formType === 'detail'}
                />
@@ -554,6 +558,7 @@ const ProjectFlockForm = ({
                  }
                  errorMessage={formik.errors.period as string}
                  readOnly={formType === 'detail'}
+                  disabled={true}
                />
              </div>
            </div>
@@ -592,19 +597,24 @@ const ProjectFlockForm = ({
                              type='checkbox'
                              checked={
                                optionsKandang
-                                  .filter((k) => k.status === 'NON_ACTIVE')
+                                  .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'
+                                  (k) => (k.status === 'NON_ACTIVE' || formik.values.kandang_ids.includes(k.id))
                                ).length > 0
                              }
                              className='checkbox'
+                              disabled={formType === 'detail' || optionsKandang.filter(
+                                  (k) => (k.status === 'NON_ACTIVE')
+                                ).length == 0}
                              onChange={
                                formType === 'detail'
                                  ? () => {}
                                  : kandangCheckAll
+                          
+                                
                              }
                            />
                          </label>
@@ -635,7 +645,7 @@ const ProjectFlockForm = ({
                                  }
                                  disabled={
                                    formType === 'detail' ||
-                                    kandang.status != 'NON_ACTIVE'
+                                    (kandang.status != 'NON_ACTIVE')
                                  }
                                />
                              </label>
@@ -189,6 +189,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' },
@@ -12,8 +12,7 @@ export type BaseProjectFlock = {
  flock_id: number;
  area: Area;
  area_id: number;
-  product_category: ProductCategory;
-  product_category_id: number;
+  category: string;
  fcr: Fcr;
  fcr_id: number;
  location: Location;
@@ -34,7 +33,7 @@ export type ProjectFlock = BaseMetadata & BaseProjectFlock
 export type CreateProjectFlockPayload = {
  flock_id: number;
  area_id: number;
-  product_category_id: number;
+  category: string;
  fcr_id: number;
  location_id: number;
  period: number;