refactor(FE-212): enhance quantity and price handling in PurchaseOrderStaffApprovalForm with improved validation and formatting

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

@@ -23,6 +23,7 @@ import {
   PurchaseStaffApprovalItemSchema,
 } from './PurchaseOrderForm.schema';
 import { isResponseError } from '@/lib/api-helper';
+import { formatNumber } from '@/lib/helper';
 import { PurchaseApi } from '@/services/api/purchase';
 import {
   CreateStaffApprovalRequestPayload,
@@ -590,7 +591,11 @@ const PurchaseOrderStaffApprovalForm = ({
 
     if (field === 'qty') {
       const numValue =
-        typeof value === 'string' ? parseFloat(value) || 0 : value;
+        typeof value === 'string'
+          ? value === ''
+            ? ''
+            : parseFloat(value) || 0
+          : value;
 
       formik.setFieldValue(`items.${idx}.qty`, numValue);
 
@@ -600,16 +605,30 @@ const PurchaseOrderStaffApprovalForm = ({
 
     if (field === 'price' || field === 'total_price') {
       const numValue =
-        typeof value === 'string' ? parseFloat(value) || 0 : value;
+        typeof value === 'string'
+          ? value === ''
+            ? ''
+            : parseFloat(value) || 0
+          : value;
 
       formik.setFieldValue(`items.${idx}.${field}`, numValue);
 
-      if (field === 'price' && formItem.qty > 0 && numValue >= 0) {
+      if (
+        field === 'price' &&
+        formItem.qty > 0 &&
+        numValue !== '' &&
+        numValue >= 0
+      ) {
         const calculatedTotal = numValue * formItem.qty;
         formik.setFieldValue(`items.${idx}.total_price`, calculatedTotal);
       }
 
-      if (field === 'total_price' && formItem.qty > 0 && numValue >= 0) {
+      if (
+        field === 'total_price' &&
+        formItem.qty > 0 &&
+        numValue !== '' &&
+        numValue >= 0
+      ) {
         const calculatedPrice = numValue / formItem.qty;
         formik.setFieldValue(`items.${idx}.price`, calculatedPrice);
       }
@@ -692,6 +711,7 @@ const PurchaseOrderStaffApprovalForm = ({
                                         handleProductChange(formItemIndex, val)
                                       }
                                       options={supplierProductOptions}
+                                      placeholder='Pilih produk'
                                       isClearable={false}
                                       isSearchable={false}
                                       isDisabled={type === 'add'}
@@ -699,6 +719,9 @@ const PurchaseOrderStaffApprovalForm = ({
                                         wrapper:
                                           'min-w-52 md:min-w-72 lg:min-w-80',
                                       }}
+                                      bottomLabel={
+                                        'Previous: ' + purchaseItem.product.name
+                                      }
                                     />
                                   </td>
                                   <td>
@@ -726,9 +749,8 @@ const PurchaseOrderStaffApprovalForm = ({
                                       <NumberInput
                                         name={`items.${formItemIndex}.qty`}
                                         value={
-                                          formItem?.qty ||
+                                          formik.values.items?.[formItemIndex]
-                                          purchaseItem?.quantity ||
+                                            ?.qty ?? ''
-                                          ''
                                         }
                                         onChange={(e) =>
                                           handlePurchaseItemChange(
@@ -741,8 +763,9 @@ const PurchaseOrderStaffApprovalForm = ({
                                         placeholder='Masukkan jumlah'
                                         allowNegative={false}
                                         decimalScale={0}
+                                        bottomLabel={`Previous: ${formatNumber(purchaseItem.quantity)}`}
                                         className={{
-                                          wrapper: 'min-w-24',
+                                          wrapper: 'min-w-32',
                                         }}
                                       />
                                     ) : (
@@ -797,6 +820,7 @@ const PurchaseOrderStaffApprovalForm = ({
                                       thousandSeparator=','
                                       decimalSeparator='.'
                                       inputPrefix={'Rp'}
+                                      bottomLabel={`Previous: Rp${formatNumber(initialValues?.items?.find((item) => item.id === purchaseItem.id)?.price || 0, 'id-ID', 2, 2)}`}
                                       isError={
                                         isRepeaterInputError(
                                           formItemIndex,
@@ -834,6 +858,7 @@ const PurchaseOrderStaffApprovalForm = ({
                                       thousandSeparator=','
                                       decimalSeparator='.'
                                       inputPrefix={'Rp'}
+                                      bottomLabel={`Previous: Rp${formatNumber(initialValues?.items?.find((item) => item.id === purchaseItem.id)?.total_price || 0, 'id-ID', 2, 2)}`}
                                       isError={
                                         isRepeaterInputError(
                                           formItemIndex,