feat(FE-208): add refetchData prop to PurchaseOrderDetail and related forms for improved data synchronization

src/app/purchase/detail/page.tsx

@@ -12,7 +12,7 @@ const PurchaseDetail = () => {
 
   const purchaseId = searchParams.get('purchaseId');
 
-  const { data: purchase, isLoading: isLoadingPurchase } = useSWR(
+  const { data: purchase, isLoading: isLoadingPurchase, mutate: mutatePurchase } = useSWR(
     purchaseId,
     (id: number) => PurchaseApi.getSingle(id)
   );
@@ -40,7 +40,11 @@ const PurchaseDetail = () => {
         </div>
       )}
       {!isLoadingPurchase && isResponseSuccess(purchase) && (
-        <PurchaseOrderDetail type='detail' initialValues={purchase.data} />
+        <PurchaseOrderDetail
+          type='detail'
+          initialValues={purchase.data}
+          refetchData={mutatePurchase}
+        />
       )}
     </div>
   );

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

@@ -9,6 +9,7 @@ import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { useRouter } from 'next/navigation';
 
 import {
   PurchaseRequestAcceptApprovalFormDefaultValues,
@@ -30,6 +31,7 @@ interface PurchaseOrderAcceptApprovalFormProps {
   onCancel?: () => void;
   refreshApprovals?: () => void;
   onModalClose?: () => void;
+  onRefetchData?: () => void;
 }
 
 const PurchaseOrderAcceptApprovalForm = ({
@@ -38,7 +40,9 @@ const PurchaseOrderAcceptApprovalForm = ({
   onCancel,
   refreshApprovals,
   onModalClose,
+  onRefetchData,
 }: PurchaseOrderAcceptApprovalFormProps) => {
+  const router = useRouter();
   const searchParams = useSearchParams();
   const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
     useState('');
@@ -105,11 +109,13 @@ const PurchaseOrderAcceptApprovalForm = ({
       }
       toast.success(res?.message as string);
       refreshApprovals?.();
+      onRefetchData?.();
       formik.resetForm();
       onCancel?.();
       onModalClose?.();
+      router.refresh();
     },
-    [initialValues?.id, searchParams, refreshApprovals, onModalClose]
+    [initialValues?.id, searchParams, refreshApprovals, onModalClose, onRefetchData]
   );
 
   const updateAcceptApprovalHandler = useCallback(
@@ -121,12 +127,13 @@ const PurchaseOrderAcceptApprovalForm = ({
       }
       toast.success(res?.message as string);
       refreshApprovals?.();
+      onRefetchData?.();
       formik.resetForm();
       onCancel?.();
       onModalClose?.();
-      window.location.href = '/purchase';
+      router.refresh();
     },
-    [refreshApprovals, onModalClose]
+    [refreshApprovals, onModalClose, onRefetchData]
   );
 
   // ===== FORM CONFIGURATION =====

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

@@ -8,7 +8,7 @@ import { useSearchParams } from 'next/navigation';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
 import NumberInput from '@/components/input/NumberInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput from '@/components/input/SelectInput';
 
 import {
   PurchaseRequestStaffApprovalFormDefaultValues,
@@ -22,7 +22,7 @@ import {
   UpdateStaffApprovalRequestPayload,
   Purchase,
 } from '@/types/api/purchase/purchase';
-import { router } from 'next/client';
+import { useRouter } from 'next/navigation';
 
 interface PurchaseOrderStaffApprovalFormProps {
   type?: 'add' | 'edit';
@@ -30,6 +30,7 @@ interface PurchaseOrderStaffApprovalFormProps {
   onCancel?: () => void;
   refreshApprovals?: () => void;
   onModalClose?: () => void;
+  onRefetchData?: () => void;
 }
 
 const PurchaseOrderStaffApprovalForm = ({
@@ -38,7 +39,9 @@ const PurchaseOrderStaffApprovalForm = ({
   onCancel,
   refreshApprovals,
   onModalClose,
+  onRefetchData,
 }: PurchaseOrderStaffApprovalFormProps) => {
+  const router = useRouter();
   const searchParams = useSearchParams();
   const [purchaseOrderFormErrorMessage, setPurchaseOrderFormErrorMessage] =
     useState('');
@@ -104,11 +107,13 @@ const PurchaseOrderStaffApprovalForm = ({
       }
       toast.success(res?.message as string);
       refreshApprovals?.();
+      onRefetchData?.();
       formik.resetForm();
       onCancel?.();
       onModalClose?.();
+      router.refresh();
     },
-    [initialValues?.id, searchParams, refreshApprovals, onModalClose]
+    [initialValues?.id, searchParams, refreshApprovals, onModalClose, onRefetchData]
   );
 
   const updateStaffApprovalHandler = useCallback(
@@ -120,12 +125,13 @@ const PurchaseOrderStaffApprovalForm = ({
       }
       toast.success(res?.message as string);
       refreshApprovals?.();
+      onRefetchData?.();
       formik.resetForm();
       onCancel?.();
       onModalClose?.();
-      await router.push(`/purchase/detail?purchaseId=${purchaseId}`);
+      router.refresh();
     },
-    [refreshApprovals, onModalClose]
+    [refreshApprovals, onModalClose, onRefetchData]
   );
 
   // ===== FORM CONFIGURATION =====

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

@@ -69,11 +69,13 @@ const PenerimaanBarangDropdown = ({ onEdit }: { onEdit: () => void }) => {
 interface PurchaseOrderDetailProps {
   type?: 'detail' | 'edit';
   initialValues?: Purchase;
+  refetchData?: () => void;
 }
 
 const PurchaseOrderDetail = ({
   type = 'detail',
   initialValues,
+  refetchData,
 }: PurchaseOrderDetailProps) => {
   // ===== MODAL HOOKS =====
   const searchParams = useSearchParams();
@@ -251,8 +253,9 @@ const PurchaseOrderDetail = ({
       }
       toast.success(res?.message as string);
       refreshApprovals();
+      refetchData?.();
     },
-    [initialValues?.id, searchParams, refreshApprovals]
+    [initialValues?.id, searchParams, refreshApprovals, refetchData]
   );
 
   const createManagerApprovalHandler = useCallback(
@@ -276,20 +279,23 @@ const PurchaseOrderDetail = ({
         return;
       }
       toast.success(res?.message as string);
+      refetchData?.();
     },
-    [initialValues?.id, searchParams]
+    [initialValues?.id, searchParams, refetchData]
   );
 
   // ===== MODAL HANDLERS =====
   const handleStaffApprovalModalClose = useCallback(() => {
     refreshApprovals();
+    refetchData?.();
     staffApprovalModal.closeModal();
-  }, [refreshApprovals]);
+  }, [refreshApprovals, refetchData]);
 
   const handleEditModalClose = useCallback(() => {
     refreshApprovals();
+    refetchData?.();
     editModal.closeModal();
-  }, [refreshApprovals]);
+  }, [refreshApprovals, refetchData]);
 
   // ===== DELETE HANDLER =====
   const deleteItemsHandler = useCallback(async () => {
@@ -327,6 +333,7 @@ const PurchaseOrderDetail = ({
 
       toast.success(successMessage);
       refreshApprovals();
+      refetchData?.();
       deleteModal.closeModal();
       setSelectedItem(null);
       setRowSelection({});
@@ -335,7 +342,7 @@ const PurchaseOrderDetail = ({
     } finally {
       setIsDeleteLoading(false);
     }
-  }, [initialValues?.id, searchParams, selectedItem, selectedRowIds]);
+  }, [initialValues?.id, searchParams, selectedItem, selectedRowIds, refetchData]);
 
   if (!initialValues) {
     return null;
@@ -901,6 +908,7 @@ const PurchaseOrderDetail = ({
 
             await createManagerApprovalHandler(payload);
             await refreshApprovals();
+            await refetchData?.();
             confirmationModalWithNotes.closeModal();
           },
         }}
@@ -923,6 +931,7 @@ const PurchaseOrderDetail = ({
           onCancel={handleStaffApprovalModalClose}
           refreshApprovals={refreshApprovals}
           onModalClose={staffApprovalModal.closeModal}
+          onRefetchData={refetchData}
         />
       </Modal>
 
@@ -940,6 +949,7 @@ const PurchaseOrderDetail = ({
           onCancel={acceptApprovalModal.closeModal}
           refreshApprovals={refreshApprovals}
           onModalClose={acceptApprovalModal.closeModal}
+          onRefetchData={refetchData}
         />
       </Modal>
 
@@ -957,6 +967,7 @@ const PurchaseOrderDetail = ({
           onCancel={handleEditModalClose}
           refreshApprovals={refreshApprovals}
           onModalClose={editModal.closeModal}
+          onRefetchData={refetchData}
         />
       </Modal>
 
@@ -974,6 +985,7 @@ const PurchaseOrderDetail = ({
           onCancel={penerimaanBarangModal.closeModal}
           refreshApprovals={refreshApprovals}
           onModalClose={penerimaanBarangModal.closeModal}
+          onRefetchData={refetchData}
         />
       </Modal>
 
@@ -996,6 +1008,7 @@ const PurchaseOrderDetail = ({
             };
 
             await createStaffApprovalHandler(payload);
+            await refetchData?.();
             staffRejectionModal.closeModal();
           },
         }}