refactor(FE): Refactor form handlers to use consistent formik utilities

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

@@ -95,62 +95,6 @@ const PurchaseOrderAcceptApprovalForm = ({
     };
   };
 
-  // ===== SUBMISSION HANDLERS =====
-  const createAcceptApprovalHandler = useCallback(
-    async (payload: CreateAcceptApprovalRequestPayload) => {
-      const purchaseRequestId = searchParams.get('purchaseId')
-        ? parseInt(searchParams.get('purchaseId')!)
-        : initialValues?.id || 1;
-
-      if (!purchaseRequestId) {
-        setPurchaseOrderFormErrorMessage('Purchase Request ID is required');
-        return;
-      }
-
-      const res = await PurchaseApi.acceptApproval.create(
-        purchaseRequestId,
-        payload
-      );
-
-      if (isResponseError(res)) {
-        setPurchaseOrderFormErrorMessage(res.message);
-        return;
-      }
-      toast.success(res?.message as string);
-      refreshApprovals?.();
-      onRefetchData?.();
-      formik.resetForm();
-      onCancel?.();
-      onModalClose?.();
-      router.refresh();
-    },
-    [
-      initialValues?.id,
-      searchParams,
-      refreshApprovals,
-      onModalClose,
-      onRefetchData,
-    ]
-  );
-
-  const updateAcceptApprovalHandler = useCallback(
-    async (purchaseId: number, payload: CreateAcceptApprovalRequestPayload) => {
-      const res = await PurchaseApi.acceptApproval.create(purchaseId, payload);
-      if (isResponseError(res)) {
-        setPurchaseOrderFormErrorMessage(res.message);
-        return;
-      }
-      toast.success(res?.message as string);
-      refreshApprovals?.();
-      onRefetchData?.();
-      formik.resetForm();
-      onCancel?.();
-      onModalClose?.();
-      router.refresh();
-    },
-    [refreshApprovals, onModalClose, onRefetchData]
-  );
-
   // ===== SELECT INPUT DATA =====
   const {
     options: expeditionVendors,
@@ -244,6 +188,67 @@ const PurchaseOrderAcceptApprovalForm = ({
     },
   });
 
+  const { resetForm, setFieldValue } = formik;
+
+  // ===== SUBMISSION HANDLERS =====
+  const createAcceptApprovalHandler = useCallback(
+    async (payload: CreateAcceptApprovalRequestPayload) => {
+      const purchaseRequestId = searchParams.get('purchaseId')
+        ? parseInt(searchParams.get('purchaseId')!)
+        : initialValues?.id || 1;
+
+      if (!purchaseRequestId) {
+        setPurchaseOrderFormErrorMessage('Purchase Request ID is required');
+        return;
+      }
+
+      const res = await PurchaseApi.acceptApproval.create(
+        purchaseRequestId,
+        payload
+      );
+
+      if (isResponseError(res)) {
+        setPurchaseOrderFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      refreshApprovals?.();
+      onRefetchData?.();
+      resetForm();
+      onCancel?.();
+      onModalClose?.();
+      router.refresh();
+    },
+    [
+      initialValues?.id,
+      searchParams,
+      refreshApprovals,
+      onModalClose,
+      onRefetchData,
+      onCancel,
+      router,
+      resetForm,
+    ]
+  );
+
+  const updateAcceptApprovalHandler = useCallback(
+    async (purchaseId: number, payload: CreateAcceptApprovalRequestPayload) => {
+      const res = await PurchaseApi.acceptApproval.create(purchaseId, payload);
+      if (isResponseError(res)) {
+        setPurchaseOrderFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      refreshApprovals?.();
+      onRefetchData?.();
+      resetForm();
+      onCancel?.();
+      onModalClose?.();
+      router.refresh();
+    },
+    [refreshApprovals, onModalClose, onRefetchData, onCancel, router, resetForm]
+  );
+
   const handleValidateForm = async () => {
     const errors = await formik.validateForm();
 
@@ -307,9 +312,9 @@ const PurchaseOrderAcceptApprovalForm = ({
           transport_per_item: item.transport_per_item || '',
         };
       });
-      formik.setFieldValue('items', updatedItems);
+      setFieldValue('items', updatedItems);
     }
-  }, [purchaseItems, initialValues, key]);
+  }, [purchaseItems, initialValues, key, setFieldValue]);
 
   // ===== HELPER FUNCTIONS =====
   const getQuantityExceededError = useCallback(

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

@@ -146,120 +146,6 @@ const PurchaseOrderStaffApprovalForm = ({
     return !item.purchase_item_id || item.purchase_item_id === 0;
   };
 
-  // ===== SUBMISSION HANDLERS =====
-  const createStaffApprovalHandler = useCallback(
-    async (payload: CreateStaffApprovalRequestPayload) => {
-      const purchaseRequestId = searchParams.get('purchaseId')
-        ? parseInt(searchParams.get('purchaseId')!)
-        : initialValues?.id || 1;
-
-      if (!purchaseRequestId) {
-        setPurchaseOrderFormErrorMessage('Purchase Request ID is required');
-        return;
-      }
-
-      const res = await PurchaseApi.staffApproval.create(
-        purchaseRequestId,
-        payload
-      );
-
-      if (isResponseError(res)) {
-        setPurchaseOrderFormErrorMessage(res.message);
-        return;
-      }
-      toast.success(res?.message as string);
-      refreshApprovals?.();
-      onRefetchData?.();
-      formik.resetForm();
-      onCancel?.();
-      onModalClose?.();
-      router.refresh();
-    },
-    [
-      initialValues?.id,
-      searchParams,
-      refreshApprovals,
-      onModalClose,
-      onRefetchData,
-    ]
-  );
-
-  const updateStaffApprovalHandler = useCallback(
-    async (purchaseId: number, payload: UpdateStaffApprovalRequestPayload) => {
-      const res = await PurchaseApi.staffApproval.update(purchaseId, payload);
-      if (isResponseError(res)) {
-        setPurchaseOrderFormErrorMessage(res.message);
-        return;
-      }
-      toast.success(res?.message as string);
-      refreshApprovals?.();
-      onRefetchData?.();
-      formik.resetForm();
-      onCancel?.();
-      onModalClose?.();
-      router.refresh();
-    },
-    [refreshApprovals, onModalClose, onRefetchData]
-  );
-
-  // ===== DELETE HANDLER =====
-  const deleteItemsHandler = useCallback(async () => {
-    const purchaseRequestId = searchParams.get('purchaseId')
-      ? parseInt(searchParams.get('purchaseId')!)
-      : initialValues?.id || 1;
-
-    if (!purchaseRequestId) {
-      toast.error('Purchase Request ID is required');
-      return;
-    }
-
-    const itemIdsToDelete = selectedItemForDelete
-      ? [selectedItemForDelete]
-      : [];
-
-    if (itemIdsToDelete.length === 0) {
-      toast.error('Tidak ada item yang dipilih untuk dihapus');
-      return;
-    }
-
-    try {
-      const res = await PurchaseApi.items.delete(purchaseRequestId, {
-        item_ids: itemIdsToDelete,
-      });
-
-      if (isResponseError(res)) {
-        toast.error(res.message || 'Gagal menghapus item pembelian');
-        return;
-      }
-
-      const successMessage = 'Item pembelian berhasil dihapus';
-      toast.success(successMessage);
-
-      refreshApprovals?.();
-      onRefetchData?.();
-      deleteModal.closeModal();
-      setSelectedItemForDelete(null);
-      setSelectedItemIndex(null);
-
-      if (selectedItemIndex !== null) {
-        const updatedPurchaseItems = formik.values.items?.filter(
-          (_, i) => i !== selectedItemIndex
-        );
-        formik.setFieldValue('items', updatedPurchaseItems);
-      }
-    } catch {
-      toast.error('Terjadi kesalahan saat menghapus item pembelian');
-    }
-  }, [
-    initialValues?.id,
-    searchParams,
-    selectedItemForDelete,
-    selectedItemIndex,
-    refreshApprovals,
-    onRefetchData,
-    deleteModal,
-  ]);
-
   // ===== API DATA FETCHING FOR SUPPLIER PRODUCTS =====
   const { data: supplierData, isLoading: isLoadingSupplierProducts } = useSWR(
     initialValues?.supplier?.id
@@ -418,6 +304,127 @@ const PurchaseOrderStaffApprovalForm = ({
     },
   });
 
+  const { resetForm, setFieldValue } = formik;
+
+  // ===== SUBMISSION HANDLERS =====
+  const createStaffApprovalHandler = useCallback(
+    async (payload: CreateStaffApprovalRequestPayload) => {
+      const purchaseRequestId = searchParams.get('purchaseId')
+        ? parseInt(searchParams.get('purchaseId')!)
+        : initialValues?.id || 1;
+
+      if (!purchaseRequestId) {
+        setPurchaseOrderFormErrorMessage('Purchase Request ID is required');
+        return;
+      }
+
+      const res = await PurchaseApi.staffApproval.create(
+        purchaseRequestId,
+        payload
+      );
+
+      if (isResponseError(res)) {
+        setPurchaseOrderFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      refreshApprovals?.();
+      onRefetchData?.();
+      resetForm();
+      onCancel?.();
+      onModalClose?.();
+      router.refresh();
+    },
+    [
+      initialValues?.id,
+      searchParams,
+      refreshApprovals,
+      onModalClose,
+      onRefetchData,
+      resetForm,
+      onCancel,
+      router,
+    ]
+  );
+
+  const updateStaffApprovalHandler = useCallback(
+    async (purchaseId: number, payload: UpdateStaffApprovalRequestPayload) => {
+      const res = await PurchaseApi.staffApproval.update(purchaseId, payload);
+      if (isResponseError(res)) {
+        setPurchaseOrderFormErrorMessage(res.message);
+        return;
+      }
+      toast.success(res?.message as string);
+      refreshApprovals?.();
+      onRefetchData?.();
+      resetForm();
+      onCancel?.();
+      onModalClose?.();
+      router.refresh();
+    },
+    [refreshApprovals, onModalClose, onRefetchData, resetForm, onCancel, router]
+  );
+
+  // ===== DELETE HANDLER =====
+  const deleteItemsHandler = useCallback(async () => {
+    const purchaseRequestId = searchParams.get('purchaseId')
+      ? parseInt(searchParams.get('purchaseId')!)
+      : initialValues?.id || 1;
+
+    if (!purchaseRequestId) {
+      toast.error('Purchase Request ID is required');
+      return;
+    }
+
+    const itemIdsToDelete = selectedItemForDelete
+      ? [selectedItemForDelete]
+      : [];
+
+    if (itemIdsToDelete.length === 0) {
+      toast.error('Tidak ada item yang dipilih untuk dihapus');
+      return;
+    }
+
+    try {
+      const res = await PurchaseApi.items.delete(purchaseRequestId, {
+        item_ids: itemIdsToDelete,
+      });
+
+      if (isResponseError(res)) {
+        toast.error(res.message || 'Gagal menghapus item pembelian');
+        return;
+      }
+
+      const successMessage = 'Item pembelian berhasil dihapus';
+      toast.success(successMessage);
+
+      refreshApprovals?.();
+      onRefetchData?.();
+      deleteModal.closeModal();
+      setSelectedItemForDelete(null);
+      setSelectedItemIndex(null);
+
+      if (selectedItemIndex !== null) {
+        const updatedPurchaseItems = formik.values.items?.filter(
+          (_, i) => i !== selectedItemIndex
+        );
+        setFieldValue('items', updatedPurchaseItems);
+      }
+    } catch {
+      toast.error('Terjadi kesalahan saat menghapus item pembelian');
+    }
+  }, [
+    initialValues?.id,
+    searchParams,
+    selectedItemForDelete,
+    selectedItemIndex,
+    refreshApprovals,
+    onRefetchData,
+    deleteModal,
+    setFieldValue,
+    formik.values.items,
+  ]);
+
   const handleValidateForm = async () => {
     const errors = await formik.validateForm();
 
@@ -519,9 +526,9 @@ const PurchaseOrderStaffApprovalForm = ({
         };
         return itemData;
       });
-      formik.setFieldValue('items', updatedItems);
+      setFieldValue('items', updatedItems);
     }
-  }, [purchaseItems, type, initialValues]);
+  }, [purchaseItems, type, initialValues, setFieldValue]);
 
   // ===== PURCHASE ITEM OPERATIONS =====
   const addPurchaseItem = () => {