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

src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx

@@ -252,7 +252,7 @@ const PurchaseOrderStaffApprovalForm = ({
           (item) => item.id === purchaseItem.id
         );
         return {
-          purchase_item_id: type === 'edit' ? purchaseItem.value : undefined,
+          purchase_item_id: purchaseItem.id,
           product_id: purchaseItem.product_id || 0,
           warehouse_id: purchaseItem.warehouse_id || 0,
           qty: purchaseItem.quantity || 0,
@@ -266,36 +266,27 @@ const PurchaseOrderStaffApprovalForm = ({
   }, [purchaseItems, type, initialValues]);
 
   // ===== PURCHASE ITEM OPERATIONS =====
-  const findItemIndex = (purchaseItemId: number) => {
-    return purchaseItems.findIndex((item) => item.id === purchaseItemId);
-  };
-
   const handlePurchaseItemChange = (
     purchaseItemId: number,
     field: 'price' | 'total_price',
     value: string | number
   ) => {
-    const itemIndex = findItemIndex(purchaseItemId);
     const formItemIndex = formik.values.items?.findIndex(
       (item) => item.purchase_item_id === purchaseItemId
     );
+    const purchaseItem = purchaseItems.find(
+      (item) => item.id === purchaseItemId
+    );
 
-    if (itemIndex === -1 || formItemIndex === -1) return;
+    if (formItemIndex === -1 || !purchaseItem) return;
 
     if (field === 'price' || field === 'total_price') {
       const numValue =
         typeof value === 'string' ? parseFloat(value) || 0 : value;
       formik.setFieldValue(`items.${formItemIndex}.${field}`, numValue);
 
-      const selectedItem = purchaseItems[itemIndex];
-
-      if (
-        field === 'price' &&
-        selectedItem &&
-        selectedItem.quantity > 0 &&
-        numValue >= 0
-      ) {
-        const calculatedTotal = numValue * selectedItem.quantity;
+      if (field === 'price' && purchaseItem.quantity > 0 && numValue >= 0) {
+        const calculatedTotal = numValue * purchaseItem.quantity;
         formik.setFieldValue(
           `items.${formItemIndex}.total_price`,
           calculatedTotal
@@ -304,11 +295,10 @@ const PurchaseOrderStaffApprovalForm = ({
 
       if (
         field === 'total_price' &&
-        selectedItem &&
-        selectedItem.quantity > 0 &&
+        purchaseItem.quantity > 0 &&
         numValue >= 0
       ) {
-        const calculatedPrice = numValue / selectedItem.quantity;
+        const calculatedPrice = numValue / purchaseItem.quantity;
         formik.setFieldValue(`items.${formItemIndex}.price`, calculatedPrice);
       }
     }
@@ -362,6 +352,11 @@ const PurchaseOrderStaffApprovalForm = ({
                                 (item) =>
                                   item.purchase_item_id === purchaseItem.id
                               );
+                              const formItemIndex =
+                                formik.values.items?.findIndex(
+                                  (item) =>
+                                    item.purchase_item_id === purchaseItem.id
+                                );
                               return (
                                 <tr key={`purchase-item-${purchaseItem.id}`}>
                                   <td>
@@ -383,7 +378,7 @@ const PurchaseOrderStaffApprovalForm = ({
                                   </td>
                                   <td>
                                     <TextInput
-                                      name={`items.${purchaseItem.id}.product_category`}
+                                      name={`items.${formItemIndex}.product_category`}
                                       type='text'
                                       value={
                                         typeof purchaseItem?.product
@@ -403,7 +398,7 @@ const PurchaseOrderStaffApprovalForm = ({
                                   </td>
                                   <td>
                                     <TextInput
-                                      name={`items.${purchaseItem.id}.quantity`}
+                                      name={`items.${formItemIndex}.quantity`}
                                       type='text'
                                       value={
                                         purchaseItem?.quantity
@@ -421,7 +416,7 @@ const PurchaseOrderStaffApprovalForm = ({
                                   </td>
                                   <td>
                                     <TextInput
-                                      name={`items.${purchaseItem.id}.uom`}
+                                      name={`items.${formItemIndex}.uom`}
                                       type='text'
                                       value={
                                         purchaseItem?.product?.uom?.name || ''
@@ -436,7 +431,7 @@ const PurchaseOrderStaffApprovalForm = ({
                                   <td>
                                     <NumberInput
                                       required
-                                      name={`items.${purchaseItem.id}.price`}
+                                      name={`items.${formItemIndex}.price`}
                                       value={formItem?.price || ''}
                                       onChange={(e) =>
                                         handlePurchaseItemChange(
@@ -473,7 +468,7 @@ const PurchaseOrderStaffApprovalForm = ({
                                   <td>
                                     <NumberInput
                                       required
-                                      name={`items.${purchaseItem.id}.total_price`}
+                                      name={`items.${formItemIndex}.total_price`}
                                       value={formItem?.total_price || ''}
                                       onChange={(e) =>
                                         handlePurchaseItemChange(

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'