refactor(FE-208): update deletion logic in PurchaseOrderDetail to allow item deletion only at approval step 3

src/components/pages/purchase/order/PurchaseOrderDetail.tsx

@@ -1,7 +1,12 @@
 'use client';
 
 import { useCallback, useMemo, useState } from 'react';
-import { ColumnDef, SortingState, Row, Table as TableType } from '@tanstack/react-table';
+import {
+  ColumnDef,
+  SortingState,
+  Row,
+  Table as TableType,
+} from '@tanstack/react-table';
 
 import ApprovalSteps, {
   useApprovalSteps,
@@ -160,7 +165,7 @@ const PurchaseOrderDetail = ({
 
   const canDeleteItems = useMemo(() => {
     if (!initialValues?.approval) return false;
-    return initialValues.approval.step_number >= 3;
+    return initialValues.approval.step_number === 3;
   }, [initialValues?.approval]);
 
   const handleApprovalClick = () => {
@@ -342,7 +347,13 @@ const PurchaseOrderDetail = ({
     } finally {
       setIsDeleteLoading(false);
     }
-  }, [initialValues?.id, searchParams, selectedItem, selectedRowIds, refetchData]);
+  }, [
+    initialValues?.id,
+    searchParams,
+    selectedItem,
+    selectedRowIds,
+    refetchData,
+  ]);
 
   if (!initialValues) {
     return null;
@@ -427,27 +438,31 @@ const PurchaseOrderDetail = ({
       header: 'Total (Rp.)',
       cell: (props) => formatCurrency(props.getValue() as number),
     },
-    {
-      header: 'Aksi',
-      cell: (props) => {
-        const deleteClickHandler = () => {
-          setSelectedItem(props.row.original);
-          setRowSelection({});
-          deleteModal.openModal();
-        };
+    ...(canDeleteItems
+      ? [
+          {
+            header: 'Aksi',
+            cell: (props: { row: Row<PurchaseItem> }) => {
+              const deleteClickHandler = () => {
+                setSelectedItem(props.row.original);
+                setRowSelection({});
+                deleteModal.openModal();
+              };
 
-        return canDeleteItems ? (
-          <Button
-            type='button'
-            color='error'
-            className='text-sm'
-            onClick={deleteClickHandler}
-          >
-            <Icon icon='mdi:trash-can' width={16} height={16} />
-          </Button>
-        ) : null;
-      },
-    },
+              return (
+                <Button
+                  type='button'
+                  color='error'
+                  className='text-sm'
+                  onClick={deleteClickHandler}
+                >
+                  <Icon icon='mdi:trash-can' width={16} height={16} />
+                </Button>
+              );
+            },
+          },
+        ]
+      : []),
   ];
 
   const goodsReceiptColumns: ColumnDef<PurchaseItem>[] = [