refactor(FE-88): memisahkan file api project flock & penyesuaian tipe data dan paylod dengan BE

2026-05-24 07:15:44 +00:00 · 2025-11-12 09:04:23 +07:00
parent f63d3d3870
commit 5dccaf40cb
13 changed files with 888 additions and 211 deletions
@@ -13,7 +13,7 @@ import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseError, 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 { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { BaseApiResponse } from '@/types/api/api-general';
 import { Kandang } from '@/types/api/master-data/kandang';
@@ -11,10 +11,8 @@ import PillBadge from '@/components/PillBadge';
 import Table from '@/components/Table';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
-import {
-  ProjectFlockApi,
-  ProjectFlockKandangApi,
-} from '@/services/api/production';
+import { ProjectFlockApi } from '@/services/api/production/project-flock';
+import { 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';
@@ -34,7 +34,7 @@ import TextInput from '@/components/input/TextInput';
 import { Kandang } from '@/types/api/master-data/kandang';
 import Collapse from '@/components/Collapse';
 import { ProjectFlockApi } from '@/services/api/production/project-flock';
-import { BaseApiResponse } from '@/types/api/api-general';
+import { BaseApiResponse, BaseGroupedApproval } from '@/types/api/api-general';
 import { APPROVAL_WORKFLOWS, FLOCK_CATEGORY_OPTIONS } from '@/config/constant';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
@@ -45,10 +45,12 @@ import StepItem from '@/components/steps/StepItem';
 import Tooltip from '@/components/Tooltip';
 import { id, is } from 'react-day-picker/locale';
 import { formatDate } from '@/lib/helper';
+import Card from '@/components/Card';

 interface ProjectFlockFormProps {
  formType?: 'add' | 'edit' | 'detail';
  initialValues?: ProjectFlock;
+  initialApprovals?: BaseGroupedApproval[];
  refreshProjectFlocks?: KeyedMutator<
    BaseApiResponse<ProjectFlock> | undefined
  >;
@@ -57,6 +59,7 @@ interface ProjectFlockFormProps {
 const ProjectFlockForm = ({
  formType = 'add',
  initialValues,
+  initialApprovals,
  refreshProjectFlocks,
 }: ProjectFlockFormProps) => {
  // State
@@ -70,14 +73,16 @@ const ProjectFlockForm = ({
    useState('');
  const [selectedArea, setSelectedArea] = useState('');
  const [selectedLocation, setSelectedLocation] = useState('');
-  const [disabledLocation, setDisabledLocation] = useState(true);
+  const [disabledLocation, setDisabledLocation] = useState(
+    initialValues?.location?.id ? false : true
+  );
  const [openSelectKandangs, setOpenSelectKandangs] = useState(
    initialValues?.kandangs && initialValues?.kandangs?.length > 0
  );
  const [optionsKandang, setOptionsKandang] = useState<Kandang[]>(
    initialValues?.kandangs ?? []
  );
-  const [selectedFlock, setSelectedFlock] = useState<number>(
+  const [selectedFlock, setSelectedFlock] = useState<number | undefined>(
    initialValues?.flock?.id ?? 0
  );

@@ -131,7 +136,12 @@ const ProjectFlockForm = ({
    options: optionsLocation,
    isLoadingOptions: isLoadingLocations,
    rawData: locations,
-  } = useSelect(LocationApi.basePath, 'id', 'name');
+  } = useSelect(LocationApi.basePath, 'id', 'name', '', {
+    area_id:
+      selectedArea != ''
+        ? selectedArea
+        : ((initialValues?.area?.id ?? '') as string),
+  });

  const {
    options: optionsFcr,
@@ -150,27 +160,34 @@ const ProjectFlockForm = ({
  } = useSWR(kandangUrl, KandangApi.getAllFetcher);

  const { data: periodFlocks, isLoading: isLoadingPeriodFlocks } = useSWR(
-    `${selectedFlock.toString()}/periods`,
+    `${selectedFlock?.toString()}/periods`,
    (id: string) => ProjectFlockApi.getNextPeriod(id)
  );

-  const { data: approvalLines, isLoading: isLoadingApprovalLines } = useSWR(
-    selectedFlock.toString(),
-    (id: number) => ProjectFlockApi.getApprovalLines(id)
-  );
-
  useEffect(() => {
    if (isResponseSuccess(kandang)) {
      if (selectedLocation) {
        setOptionsKandang(kandang.data);
        setOpenSelectKandangs(true);
      } else {
+        formik.setFieldValue('kandang_ids', []);
        setOptionsKandang([]);
        setOpenSelectKandangs(false);
-        formik.setFieldValue('kandang_ids', []);
+        const selectedRowIds = Object.keys(rowSelection)
+          .filter((id) => rowSelection[id])
+          .map((id) => parseInt(id));
+        if (
+          JSON.stringify(kandang.data.map((k) => k.id)) !==
+          JSON.stringify(formik.values.kandang_ids)
+        ) {
+          formik.setFieldValue('kandang_ids', []);
+          setRowSelection({});
+        } else {
+          formik.setFieldValue('kandang_ids', selectedRowIds);
+        }
      }
    }
-  }, [kandang]);
+  }, [kandang, selectedLocation]);
  useEffect(() => {
    if (initialValues?.kandangs) {
      refreshKandang();
@@ -181,7 +198,7 @@ const ProjectFlockForm = ({
      );
      setRowSelection(newRowSelection);
    }
-  }, [initialValues, refreshKandang]);
+  }, [initialValues, kandang]);

  // Options Handler
  const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -202,9 +219,13 @@ const ProjectFlockForm = ({
  };

  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldValue('kandang_ids', []);
    setSelectedLocation((val as OptionType)?.value as string);
    optionChangeHandler(val, 'location');
-    formik.setFieldValue('kandang_ids', []);
+    const selectedRowIds = Object.keys(rowSelection)
+      .filter((id) => rowSelection[id])
+      .map((id) => parseInt(id));
+    formik.setFieldValue('kandang_ids', selectedRowIds);
  };

  const optionChangeHandler = (
@@ -216,13 +237,8 @@ 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) => {
@@ -267,11 +283,12 @@ const ProjectFlockForm = ({
  // Formik InitialValue
  const formikInitialValues = useMemo<ProjectFlockFormValues>(() => {
    return {
-      name: initialValues?.name ?? '',
-      flock: initialValues?.flock_name
+      name: initialValues?.flock_name,
+      flock: initialValues?.flock
        ? {
            value: initialValues?.flock?.id ?? 0,
-            label: initialValues?.flock_name,
+            label:
+              initialValues?.flock?.name ?? initialValues?.flock_name ?? '',
          }
        : null,
      area: initialValues?.area
@@ -312,11 +329,57 @@ const ProjectFlockForm = ({
        | undefined
      )[],
    };
-  }, [initialValues, flocks]);
+  }, [initialValues]);

  // Formik
  const formik = useFormik<ProjectFlockFormValues>({
-    initialValues: formikInitialValues,
+    initialValues: {
+      name: initialValues?.flock_name,
+      flock: initialValues?.flock
+        ? {
+            value: initialValues?.flock?.id ?? 0,
+            label:
+              initialValues?.flock?.name ?? initialValues?.flock_name ?? '',
+          }
+        : null,
+      area: initialValues?.area
+        ? {
+            value: initialValues.area?.id,
+            label: initialValues.area.name,
+          }
+        : null,
+      category_option: initialValues?.category
+        ? {
+            value: initialValues.category,
+            label: initialValues.category,
+          }
+        : null,
+      fcr: initialValues?.fcr
+        ? {
+            value: initialValues.fcr?.id,
+            label: initialValues.fcr.name,
+          }
+        : null,
+      location: initialValues?.location
+        ? {
+            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 ?? 1,
+      kandang_ids: initialValues?.kandangs?.map((k: Kandang) => k.id) as (
+        | number
+        | undefined
+      )[],
+    } as ProjectFlockFormValues,
    enableReinitialize: true,
    validationSchema:
      formType == 'add' ? ProjectFlockFormSchema : UpdateProjectFlockFormSchema,
@@ -326,7 +389,7 @@ const ProjectFlockForm = ({
    onSubmit: async (values) => {
      setProjectFlockFormErrorMessage('');
      const payload: CreateProjectFlockPayload = {
-        flock_name: values.flock_name as string,
+        flock_name: values.flock?.label as string,
        area_id: values.area_id as number,
        category: values.category as string,
        fcr_id: values.fcr_id as number,
@@ -367,7 +430,7 @@ const ProjectFlockForm = ({

  useEffect(() => {
    formikSetValues(formikInitialValues);
-  }, [formikSetValues, formikInitialValues]);
+  }, [formikSetValues]);

  // Aktifkan lokasi jika formType = 'detail'
  useEffect(() => {
@@ -397,7 +460,7 @@ const ProjectFlockForm = ({
    if (isResponseError(periodFlocks)) {
      console.log(periodFlocks?.message as string);
    }
-  }, [periodFlocks, toast]);
+  }, [periodFlocks]);

  useEffect(() => {
    const selectedRowIds = Object.keys(rowSelection)
@@ -495,11 +558,11 @@ const ProjectFlockForm = ({
            </div>
          </div>
        )}
-        {formType == 'detail' && isResponseSuccess(approvalLines) && (
+        {formType == 'detail' && initialApprovals && (
          <div className='w-full flex items-center gap-2 my-4'>
            <Steps className='w-full'>
              {projectFlockSteps?.steps.map((step, idx) => {
-                const approvalLogs = approvalLines.data.find(
+                const approvalLogs = initialApprovals.find(
                  (approve) => approve.step_number == step.step_number
                );
                return (
@@ -523,7 +586,7 @@ const ProjectFlockForm = ({
                        content={
                          <ul>
                            {approvalLogs &&
-                              approvalLogs.approvals.map((approval, idx) => {
+                              approvalLogs?.approvals?.map((approval, idx) => {
                                return (
                                  <li className='mb-2' key={`key-logs-${idx}`}>
                                    <div className='flex flex-col w-full text-start  text-base'>
@@ -601,8 +664,43 @@ const ProjectFlockForm = ({
              <Icon icon='mdi:times' width={24} height={24} />
              Reject
            </Button>
+            {initialValues?.approval?.step_number == 2 && (
+              <Button
+                variant='outline'
+                color='success'
+                className='w-full sm:w-fit'
+                onClick={() => {
+                  router.push(
+                    `/production/project-flock/chickin/add?projectFlockId=${initialValues?.id}`
+                  );
+                }}
+              >
+                Chickin
+              </Button>
+            )}
          </div>
        )}
+        <Card
+          className={{
+            body: 'text-primary',
+          }}
+        >
+          {JSON.stringify(formik.values)}
+        </Card>
+        <Card
+          className={{
+            body: 'text-success',
+          }}
+        >
+          {JSON.stringify(formik.initialValues)}
+        </Card>
+        <Card
+          className={{
+            body: 'text-error',
+          }}
+        >
+          {JSON.stringify(formik.errors)}
+        </Card>
        <form
          className='w-auto h-auto'
          onSubmit={formik.handleSubmit}
@@ -634,6 +732,10 @@ const ProjectFlockForm = ({
                  onChange={(val) => {
                    optionChangeHandler(val, 'flock');
                    setSelectedFlock((val as OptionType)?.value as number);
+                    formik.setFieldValue(
+                      'flock_name',
+                      (val as OptionType)?.label
+                    );
                  }}
                  options={optionsFlock}
                  isLoading={isLoadingFlocks}
@@ -650,7 +752,11 @@ const ProjectFlockForm = ({
                  label='Lokasi'
                  value={formik.values.location as OptionType}
                  onChange={locationChangeHandler}
-                  options={optionsLocation}
+                  options={
+                    selectedArea != '' || initialValues?.area?.id
+                      ? optionsLocation
+                      : []
+                  }
                  isLoading={isLoadingLocations}
                  isError={
                    formik.touched.location_id &&
@@ -695,7 +801,7 @@ const ProjectFlockForm = ({
                  name='period'
                  label='Periode'
                  placeholder='Masukkan periode yang project'
-                  value={formik.values.period as number}
+                  value={formik.values.period ?? (1 as number)}
                  onChange={formik.handleChange}
                  isError={
                    formik.touched.period && Boolean(formik.errors.period)
@@ -743,6 +849,7 @@ const ProjectFlockForm = ({
                    setRowSelection={setRowSelection}
                    selectedIds={formik.values.kandang_ids}
                    formType={formType}
+                    initialValues={initialValues?.kandangs ?? []}
                  />
                </div>
              </Collapse>
@@ -764,7 +871,10 @@ const ProjectFlockForm = ({
                  type='submit'
                  color='primary'
                  isLoading={formik.isSubmitting}
-                  disabled={!formik.isValid || formik.isSubmitting}
+                  disabled={
+                    !formik.isValid || formik.isSubmitting
+                    // TODO: Add logic && ketika nilai kandang_ids sudah beda dari initial values
+                  }
                  className='px-4'
                >
                  Submit
@@ -5,148 +5,159 @@ import PillBadge from '@/components/PillBadge';
 import Table from '@/components/Table';
 import { cn } from '@/lib/helper';
 import { Kandang } from '@/types/api/master-data/kandang';
-import { OnChangeFn } from '@tanstack/react-table';
+import { OnChangeFn, Row } from '@tanstack/react-table';
+import { useMemo } from 'react';

 const ProjectFlockKandangTable = ({
  listKandang,
  rowSelection,
  setRowSelection,
  selectedIds,
+  initialValues,
  formType = 'add',
 }: {
  listKandang: Kandang[];
  rowSelection: Record<string, boolean>;
  setRowSelection: OnChangeFn<Record<string, boolean>>;
  selectedIds: (number | undefined)[];
+  initialValues?: Kandang[];
  formType: 'add' | 'edit' | 'detail';
 }) => {
-  console.log('selectedIds');
-  console.log(selectedIds);
+  const initialKandangIdSet = useMemo(() => {
+    return initialValues?.map((k) => k.id) ?? [];
+  }, [initialValues]);
+  const isRowEnabled = (row: Row<Kandang>) => {
+    const isDisabled =
+      !initialKandangIdSet.includes(row.original.id) &&
+      (row.original.status == 'ACTIVE' ||
+        row.original.status == 'PENGAJUAN' ||
+        formType == 'detail');
+    return !isDisabled;
+  };
  return (
-    <Table<Kandang>
-      data={listKandang}
-      columns={[
-        {
-          id: 'select',
-          header: ({ table }) => {
-            const allRows = table.getRowModel().rows;
-            const selectableRows = allRows.filter(
-              (row) =>
-                row.original.status == 'NON_ACTIVE' ||
-                row.original.status == 'PENGAJUAN'
-            );
+    <>
+      {JSON.stringify(initialKandangIdSet)}
+      <Table<Kandang>
+        data={listKandang}
+        columns={[
+          {
+            id: 'select',
+            header: ({ table }) => {
+              const allRows = table.getRowModel().rows;
+              // 1. Filter semua baris dengan logika yang sama persis seperti di cell
+              const selectableRows = allRows.filter(isRowEnabled);

-            const allSelected =
-              selectableRows.every((row) => row.getIsSelected()) &&
-              selectableRows.length != 0 &&
-              formType != 'detail';
+              // 2. Cek apakah SEMUA baris yang BISA DIPILIH sudah terpilih
+              const allSelected =
+                selectableRows.length > 0 &&
+                selectableRows.every((row) => row.getIsSelected());

-            const someSelected =
-              selectableRows.some((row) => row.getIsSelected()) &&
-              !allSelected &&
-              formType != 'detail';
+              // 3. Cek apakah BEBERAPA baris yang BISA DIPILIH sudah terpilih
+              const someSelected =
+                selectableRows.some((row) => row.getIsSelected()) &&
+                !allSelected;

-            const toggleSelectableRows = () => {
-              const shouldSelect = !allSelected;
-              selectableRows.forEach((row) => row.toggleSelected(shouldSelect));
-            };
+              // 4. Fungsi toggle HANYA akan mentoggle baris yang BISA DIPILIH
+              const toggleSelectableRows = () => {
+                const shouldSelect = !allSelected;
+                selectableRows.forEach((row) =>
+                  row.toggleSelected(shouldSelect)
+                );
+              };

-            return (
-              <div className='w-full flex flex-row justify-center'>
+              return (
+                <div className='w-full flex flex-row justify-center'>
+                  <CheckboxInput
+                    name='allRow'
+                    checked={allSelected}
+                    indeterminate={someSelected}
+                    onChange={toggleSelectableRows}
+                    disabled={
+                      selectableRows.length === 0 || formType == 'detail'
+                    }
+                  />
+                </div>
+              );
+            },
+            cell: ({ row }) => {
+              return (
                <CheckboxInput
-                  name='allRow'
-                  checked={allSelected}
-                  indeterminate={someSelected}
-                  onChange={toggleSelectableRows}
+                  name='row'
+                  checked={
+                    (row.getIsSelected() &&
+                      (row.original.status == 'NON_ACTIVE' ||
+                        row.original.status == 'PENGAJUAN')) ||
+                    (selectedIds && selectedIds.includes(row.original.id))
+                  }
                  disabled={
-                    listKandang.filter(
-                      (kandang) =>
-                        kandang.status == 'NON_ACTIVE' ||
-                        kandang.status == 'PENGAJUAN'
-                    ).length == 0 || formType == 'detail'
+                    formType == 'detail' ||
+                    (!initialKandangIdSet.includes(row.original.id) &&
+                      (row.original.status == 'ACTIVE' ||
+                        row.original.status == 'PENGAJUAN'))
                  }
+                  indeterminate={row.getIsSomeSelected()}
+                  onChange={row.getToggleSelectedHandler()}
                />
-              </div>
-            );
+              );
+            },
          },
-          cell: ({ row }) => {
-            return (
-              <CheckboxInput
-                name='row'
-                checked={
-                  (row.getIsSelected() &&
-                    (row.original.status == 'NON_ACTIVE' ||
-                      row.original.status == 'PENGAJUAN')) ||
-                  selectedIds.includes(row.original.id)
-                }
-                disabled={
-                  !row.getCanSelect() ||
-                  (row.original.status != 'NON_ACTIVE' &&
-                    row.original.status != 'PENGAJUAN') ||
-                  formType == 'detail'
-                }
-                indeterminate={row.getIsSomeSelected()}
-                onChange={row.getToggleSelectedHandler()}
-              />
-            );
+          {
+            accessorFn: (row) => row.name,
+            header: 'Kandang',
          },
-        },
-        {
-          accessorFn: (row) => row.name,
-          header: 'Kandang',
-        },
-        {
-          accessorFn: (row) => row.status,
-          header: 'Status',
-          cell: (props) => {
-            return (
-              <PillBadge
-                color={(() => {
-                  switch (props.row.original.status) {
-                    case 'ACTIVE':
-                      return 'red';
-                    case 'PENGAJUAN':
-                      return 'green';
-                    case 'NON_ACTIVE':
-                      return 'blue';
-                    default:
-                      return 'gray';
-                  }
-                })()}
-                content={props.row.original.status
-                  .toLowerCase()
-                  .replace(/_/g, ' ')
-                  .replace(/\b\w/g, (char) => char.toUpperCase())}
-              />
-            );
+          {
+            accessorFn: (row) => row.status,
+            header: 'Status',
+            cell: (props) => {
+              return (
+                <PillBadge
+                  color={(() => {
+                    switch (props.row.original.status) {
+                      case 'ACTIVE':
+                        return 'red';
+                      case 'PENGAJUAN':
+                        return 'green';
+                      case 'NON_ACTIVE':
+                        return 'blue';
+                      default:
+                        return 'gray';
+                    }
+                  })()}
+                  content={props.row.original.status
+                    .toLowerCase()
+                    .replace(/_/g, ' ')
+                    .replace(/\b\w/g, (char) => char.toUpperCase())}
+                />
+              );
+            },
          },
-        },
-        {
-          accessorFn: (row) => row.capacity,
-          header: 'Kapasitas',
-        },
-        {
-          accessorFn: (row) => row.pic?.name,
-          header: 'Penanggung Jawab',
-        },
-      ]}
-      className={{
-        containerClassName: cn({
-          'mb-20': listKandang?.length === 0,
-        }),
-        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',
-      }}
-      rowSelection={rowSelection}
-      setRowSelection={setRowSelection}
-    />
+          {
+            accessorFn: (row) => row.capacity,
+            header: 'Kapasitas',
+          },
+          {
+            accessorFn: (row) => row.pic?.name,
+            header: 'Penanggung Jawab',
+          },
+        ]}
+        className={{
+          containerClassName: cn({
+            'mb-20': listKandang?.length === 0,
+          }),
+          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',
+        }}
+        rowSelection={rowSelection}
+        setRowSelection={setRowSelection}
+      />
+    </>
  );
 };