refactor(FE): refactor chickin views and adjust approval logic in project flocks

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

@@ -10,8 +10,6 @@ import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import Table from '@/components/Table';
-import RowCollapseOptions from '@/components/table/RowCollapseOptions';
-import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { cn, formatDate } from '@/lib/helper';
@@ -23,7 +21,7 @@ import { ProjectFlock } from '@/types/api/production/project-flock';
 import { Icon } from '@iconify/react';
 import { CellContext, SortingState } from '@tanstack/react-table';
 import { useRouter } from 'next/navigation';
-import { ChangeEventHandler, useEffect, useState } from 'react';
+import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
 
@@ -124,7 +122,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
   });
   const router = useRouter();
 
-  // State
+  // ===== State =====
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
   const selectedRowIds = Object.keys(rowSelection)
     .filter((id) => rowSelection[id])
@@ -151,7 +149,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isApproveLoading, setIsApproveLoading] = useState(false);
 
-  // Fetch Data
+  // ===== Fetch Data =====
   const {
     data: projectFlocks,
     isLoading,
@@ -192,7 +190,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
     KandangApi.getAllFetcher
   );
 
-  // Data to Options Mapping
+  // ===== Data to Options Mapping ======
   const optionsArea = isResponseSuccess(areas)
     ? areas?.data.map((area) => ({
         value: area.id,
@@ -212,7 +210,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
       }))
     : [];
 
-  // Handler
+  // ====== HANDLER ======
   const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
     const newVal = val as OptionType;
     setPageSize(newVal.value as number);
@@ -220,17 +218,17 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    await ProjectFlockApi.delete(selectedProjectFlock?.id as number);
+    await ProjectFlockApi.delete(selectedSingleRow?.id as number);
     refreshProjectFlocks();
 
     deleteModal.closeModal();
     toast.success('Successfully delete Project Flock!');
     setIsDeleteLoading(false);
+    setRowSelection({});
   };
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
     updateFilter('search', e.target.value);
   };
-
   const confirmApprovalHandler = async (
     notes: string,
     approvalAction: 'APPROVED' | 'REJECTED'
@@ -260,10 +258,29 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
     setIsApproveLoading(false);
   };
 
+  // ====== EFFECT ======
   useEffect(() => {
     refreshProjectFlocks();
   }, [refresh]);
 
+  // ====== MEMO ======
+  const selectedSingleRow: ProjectFlock | null | undefined = useMemo(() => {
+    return selectedRowIds.length === 1
+      ? isResponseSuccess(projectFlocks)
+        ? projectFlocks?.data.find((row) => row.id === selectedRowIds[0])
+        : null
+      : null;
+  }, [rowSelection]);
+
+  const canApprove = useMemo(() => {
+    if (!selectedSingleRow || isApproveLoading) return false;
+
+    const isPengajuan = selectedSingleRow.approval.step_number == 1;
+    const isNotRejected = selectedSingleRow.approval.action != 'REJECTED';
+
+    return isPengajuan && isNotRejected;
+  }, [selectedSingleRow, isApproveLoading]);
+
   return (
     <>
       <div className='min-h-screen w-full p-0 sm:p-4'>
@@ -617,9 +634,10 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
           {
             action: 'DELETE',
             icon: 'material-symbols:delete-outline-rounded',
-            label: `Hapus ${selectedRowIds.length} data`,
+            label: `Hapus data`,
+            hidden: selectedRowIds.length !== 1,
             onClick: () => {
-              toast.error(`Konfirmasi hapus ${selectedRowIds.length} data.`);
+              deleteModal.openModal();
             },
           },
         ]}
@@ -632,6 +650,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
               setApprovalAction('APPROVED');
               confirmModal.openModal();
             },
+            disabled: !canApprove,
           },
           {
             icon: 'mdi:times',