feat(FE-208): implement conditional item deletion in PurchaseOrderDetail and update form handling in PurchaseOrderStaffApprovalForm

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useCallback, useMemo, useState } from 'react';
-import { ColumnDef, SortingState } from '@tanstack/react-table';
+import { ColumnDef, SortingState, Row, Table as TableType } from '@tanstack/react-table';
 
 import ApprovalSteps, {
   useApprovalSteps,
@@ -156,6 +156,11 @@ const PurchaseOrderDetail = ({
   const showApprovalButton =
     approvalStep !== null && approvalStep >= 1 && approvalStep <= 3;
 
+  const canDeleteItems = useMemo(() => {
+    if (!initialValues?.approval) return false;
+    return initialValues.approval.step_number >= 3;
+  }, [initialValues?.approval]);
+
   const handleApprovalClick = () => {
     if (!approvalStep) return;
 
@@ -186,12 +191,6 @@ const PurchaseOrderDetail = ({
     }
   };
 
-  useMemo(() => {
-    if (!initialValues?.approval) return false;
-
-    const currentStep = initialValues.approval.step_number;
-    return currentStep >= 4;
-  }, [initialValues?.approval]);
   const canShowPurchaseOrderInvoice = useMemo(() => {
     if (!initialValues?.approval) return false;
 
@@ -345,32 +344,36 @@ const PurchaseOrderDetail = ({
   const purchaseData = initialValues;
 
   const purchaseOrderColumns: ColumnDef<PurchaseItem>[] = [
-    {
-      id: 'select',
-      header: ({ table }) => (
-        <div className='w-full flex flex-row justify-center'>
-          <CheckboxInput
-            name='allRow'
-            checked={table.getIsAllRowsSelected()}
-            indeterminate={table.getIsSomeRowsSelected()}
-            onChange={table.getToggleAllRowsSelectedHandler()}
-          />
-        </div>
-      ),
-      cell: ({ row }) => {
-        return (
-          <div>
-            <CheckboxInput
-              name='row'
-              checked={row.getIsSelected()}
-              disabled={!row.getCanSelect()}
-              indeterminate={row.getIsSomeSelected()}
-              onChange={row.getToggleSelectedHandler()}
-            />
-          </div>
-        );
-      },
-    },
+    ...(canDeleteItems
+      ? [
+          {
+            id: 'select',
+            header: ({ table }: { table: TableType<PurchaseItem> }) => (
+              <div className='w-full flex flex-row justify-center'>
+                <CheckboxInput
+                  name='allRow'
+                  checked={table.getIsAllRowsSelected()}
+                  indeterminate={table.getIsSomeRowsSelected()}
+                  onChange={table.getToggleAllRowsSelectedHandler()}
+                />
+              </div>
+            ),
+            cell: ({ row }: { row: Row<PurchaseItem> }) => {
+              return (
+                <div>
+                  <CheckboxInput
+                    name='row'
+                    checked={row.getIsSelected()}
+                    disabled={!row.getCanSelect()}
+                    indeterminate={row.getIsSomeSelected()}
+                    onChange={row.getToggleSelectedHandler()}
+                  />
+                </div>
+              );
+            },
+          },
+        ]
+      : []),
     {
       header: 'No',
       cell: (props) => props.row.index + 1,
@@ -426,7 +429,7 @@ const PurchaseOrderDetail = ({
           deleteModal.openModal();
         };
 
-        return (
+        return canDeleteItems ? (
           <Button
             type='button'
             color='error'
@@ -435,7 +438,7 @@ const PurchaseOrderDetail = ({
           >
             <Icon icon='mdi:trash-can' width={16} height={16} />
           </Button>
-        );
+        ) : null;
       },
     },
   ];
@@ -738,7 +741,7 @@ const PurchaseOrderDetail = ({
                 setSorting={setSorting}
                 rowSelection={rowSelection}
                 setRowSelection={setRowSelection}
-                enableRowSelection={() => true}
+                enableRowSelection={() => canDeleteItems}
                 className={{
                   containerClassName: 'm-0',
                   tableWrapperClassName: 'overflow-x-auto',
@@ -755,7 +758,7 @@ const PurchaseOrderDetail = ({
             </div>
 
             {/* Bulk Action Buttons */}
-            {selectedRowIds.length > 0 && (
+            {selectedRowIds.length > 0 && canDeleteItems && (
               <div className='flex justify-center items-center mt-4 gap-4 px-6 py-4 bg-gray-50 border-t border-gray-200'>
                 <Button
                   type='button'