refactor(FE-87-106): refactor api integration untuk project flock dan project flock kandang

src/components/pages/production/project-flock/chickin/ProjectFlockChickinDetail.tsx

@@ -3,15 +3,22 @@
 import Badge from '@/components/Badge';
 import Button from '@/components/Button';
 import Card from '@/components/Card';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import PillBadge from '@/components/PillBadge';
 import Table from '@/components/Table';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
-import { ProjectFlockApi } from '@/services/api/production';
+import {
+  ProjectFlockApi,
+  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';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 import { Icon } from '@iconify/react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -37,28 +44,30 @@ const ProjectFlockChickinDetail = ({
   const [projectFlock, setProjectFlock] = useState<ProjectFlock>();
 
   // Fetch Data
-  const { data: listProjectFlock, isLoading: isLoadingListProjectFlock } =
-    useSWR(
-      `${ProjectFlockApi.basePath}?${new URLSearchParams({
-        search: searchProjectFlock,
-      }).toString()}`,
-      ProjectFlockApi.getAllFetcher
-    );
+  const {
+    data: listProjectFlockKandang,
+    isLoading: isLoadingListProjectFlockKandang,
+  } = useSWR(
+    `${ProjectFlockKandangApi.basePath}?${new URLSearchParams({
+      search: searchProjectFlock,
+      project_flock_id:
+        projectFlock?.id?.toString() ?? projectFlockId?.toString() ?? '',
+    }).toString()}`,
+    ProjectFlockKandangApi.getAllFetcher
+  );
 
-  // Mapping Options
-  const options = isResponseSuccess(listProjectFlock)
-    ? listProjectFlock?.data.map((projectFlock) => {
-        return {
-          value: projectFlock.id,
-          label: `${projectFlock?.flock?.name} - Periode ${projectFlock?.period}`,
-        };
-      })
-    : [];
+  const {
+    options: options,
+    isLoadingOptions: isLoadingListProjectFlock,
+    rawData: listProjectFlock,
+  } = useSelect<ProjectFlock>(ProjectFlockApi.basePath, 'id', 'flock_name');
 
   // Handle Function
-  const handleChickinClick = async (kandang: Kandang) => {
+  const handleChickinClick = async (
+    projectFlockKandang: ProjectFlockKandang
+  ) => {
     router.push(
-      `/production/project-flock/chickin/add/kandang?projectFlockKandangId=${kandang.project_flock_kandang_id}&projectFlockId=${projectFlockId ?? selectedProjectFlock?.value}`
+      `/production/project-flock/chickin/add/kandang?projectFlockKandangId=${projectFlockKandang.id}&projectFlockId=${projectFlockId ?? selectedProjectFlock?.value}`
     );
   };
 
@@ -146,6 +155,10 @@ const ProjectFlockChickinDetail = ({
           }
           data={projectFlock ? [projectFlock] : []}
           columns={[
+            {
+              header: 'ID',
+              accessorKey: 'id',
+            },
             {
               header: 'Area',
               accessorKey: 'area.name',
@@ -222,7 +235,7 @@ const ProjectFlockChickinDetail = ({
           wrapper: 'w-full bg-white',
         }}
       >
-        <Table<Kandang>
+        <Table<ProjectFlockKandang>
           emptyContent={
             <div className='w-full p-5 text-center'>
               <span className='text-lg opacity-50'>
@@ -230,7 +243,11 @@ const ProjectFlockChickinDetail = ({
               </span>
             </div>
           }
-          data={projectFlock ? projectFlock.kandangs : []}
+          data={
+            isResponseSuccess(listProjectFlockKandang)
+              ? listProjectFlockKandang.data
+              : []
+          }
           columns={[
             {
               header: '#',
@@ -240,25 +257,48 @@ const ProjectFlockChickinDetail = ({
                 1,
             },
             {
-              accessorFn: () => (projectFlock ? projectFlock.area.name : ''),
+              accessorFn: (row) => row?.project_flock?.area?.name,
               header: 'Area',
             },
             {
-              accessorFn: () =>
-                projectFlock ? projectFlock.location.name : '',
+              accessorFn: (row) => row?.project_flock?.location?.name,
               header: 'Lokasi',
             },
             {
-              accessorKey: 'name',
+              accessorKey: 'kandang.name',
               header: 'Kandang',
             },
             {
-              accessorKey: 'capacity',
+              accessorKey: 'kandang.capacity',
               header: 'Kapasitas',
             },
             {
-              accessorKey: 'pic.name',
-              header: 'Penanggung Jawab',
+              accessorKey: 'approval.step_name',
+              header: 'Status',
+              cell: (props) => {
+                return props.row.original.approval?.step_name ? (
+                  <PillBadge
+                    color={(() => {
+                      switch (
+                        props.row.original.approval?.step_name.toUpperCase()
+                      ) {
+                        case 'DISETUJUI':
+                          return 'green';
+                        case 'DITOLAK':
+                          return 'red';
+                        default:
+                          return 'gray';
+                      }
+                    })()}
+                    content={props.row.original.approval?.step_name
+                      .toLowerCase()
+                      .replace(/_/g, ' ')
+                      .replace(/\b\w/g, (char) => char.toUpperCase())}
+                  />
+                ) : (
+                  <PillBadge color='gray' content={'Belum Chick In'} />
+                );
+              },
             },
             {
               header: 'Aksi',
@@ -271,11 +311,12 @@ const ProjectFlockChickinDetail = ({
                       onClick={() => {
                         handleChickinClick(props.row.original);
                       }}
+                      className='p-1'
                     >
                       <Icon
                         icon='mdi:home-import-outline'
-                        width={24}
-                        height={24}
+                        width={18}
+                        height={18}
                       />
                       Chickin
                     </Button>