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,16 +438,18 @@ const PurchaseOrderDetail = ({
       header: 'Total (Rp.)',
       cell: (props) => formatCurrency(props.getValue() as number),
     },
+    ...(canDeleteItems
+      ? [
           {
             header: 'Aksi',
-      cell: (props) => {
+            cell: (props: { row: Row<PurchaseItem> }) => {
               const deleteClickHandler = () => {
                 setSelectedItem(props.row.original);
                 setRowSelection({});
                 deleteModal.openModal();
               };
 
-        return canDeleteItems ? (
+              return (
                 <Button
                   type='button'
                   color='error'
@@ -445,9 +458,11 @@ const PurchaseOrderDetail = ({
                 >
                   <Icon icon='mdi:trash-can' width={16} height={16} />
                 </Button>
-        ) : null;
+              );
             },
           },
+        ]
+      : []),
   ];
 
   const goodsReceiptColumns: ColumnDef<PurchaseItem>[] = [