From fe2a2dfb43fb6c7893366ff6defbcb9d42ca6807 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Wed, 13 May 2026 15:29:03 +0700
Subject: [PATCH] fix: add loading state to approve modal

---
 .../pages/marketing/MarketingTable.tsx        | 70 +++++++++++++------
 1 file changed, 48 insertions(+), 22 deletions(-)

diff --git a/src/components/pages/marketing/MarketingTable.tsx b/src/components/pages/marketing/MarketingTable.tsx
index 08dcf318..39384b0d 100644
--- a/src/components/pages/marketing/MarketingTable.tsx
+++ b/src/components/pages/marketing/MarketingTable.tsx
@@ -297,6 +297,8 @@ const MarketingTable = () => {
 
   const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
     useState(false);
+  const [isApproveLoading, setIsApproveLoading] = useState(false);
+  const [isDeliveryLoading, setIsDeliveryLoading] = useState(false);
 
   const filterResetHandler = () => {
     updateFilter('product_ids', '', true);
@@ -452,23 +454,33 @@ const MarketingTable = () => {
       return;
     }
 
-    const approveMarketingRes: BaseApiResponse<unknown> | undefined =
-      approveAction === 'APPROVED'
-        ? await MarketingApi.bulkApprovals(
-            idsToProcess,
-            nextApprovalStatus as 'SALES_ORDER' | 'DELIVERY_ORDER',
-            '',
-            notes || `APPROVED marketing ${idsToProcess.join(', ')}`
-          )
-        : await SalesOrderApi.bulkApprovals(idsToProcess, approveAction, notes);
+    setIsApproveLoading(true);
 
-    if (isResponseSuccess(approveMarketingRes)) {
-      confirmationModal.closeModal();
-      toast.success(approveMarketingRes?.message as string);
-      setRowSelection({});
+    try {
+      const approveMarketingRes: BaseApiResponse<unknown> | undefined =
+        approveAction === 'APPROVED'
+          ? await MarketingApi.bulkApprovals(
+              idsToProcess,
+              nextApprovalStatus as 'SALES_ORDER' | 'DELIVERY_ORDER',
+              '',
+              notes || `APPROVED marketing ${idsToProcess.join(', ')}`
+            )
+          : await SalesOrderApi.bulkApprovals(
+              idsToProcess,
+              approveAction,
+              notes
+            );
+
+      if (isResponseSuccess(approveMarketingRes)) {
+        confirmationModal.closeModal();
+        toast.success(approveMarketingRes?.message as string);
+        setRowSelection({});
+      }
+
+      refreshMarketing();
+    } finally {
+      setIsApproveLoading(false);
     }
-
-    refreshMarketing();
   };
 
   const bulkDeliveryDateChangeHandler: ChangeEventHandler<HTMLInputElement> = (
@@ -530,13 +542,21 @@ const MarketingTable = () => {
   };
 
   const confirmationModalDeliveryClickHandler = async (notes: string) => {
-    const res = await SalesOrderApi.delivery(selectedItem?.id as number, notes);
-    deliveryModal.closeModal();
-    toast.success(res?.message as string);
-    refreshMarketing?.();
-    router.push(
-      `/marketing/detail/delivery-orders/edit?id=${selectedItem?.id}`
-    );
+    setIsDeliveryLoading(true);
+    try {
+      const res = await SalesOrderApi.delivery(
+        selectedItem?.id as number,
+        notes
+      );
+      deliveryModal.closeModal();
+      toast.success(res?.message as string);
+      refreshMarketing?.();
+      router.push(
+        `/marketing/detail/delivery-orders/edit?id=${selectedItem?.id}`
+      );
+    } finally {
+      setIsDeliveryLoading(false);
+    }
   };
 
   const getRowCanSelect = useCallback(
@@ -1020,11 +1040,13 @@ const MarketingTable = () => {
         text={`Apakah anda yakin ingin ${approveAction == 'APPROVED' ? 'approve' : 'reject'} data penjualan tahap ${selectedApprovalStep ?? '-'} (${idsToProcess.length} data)?`}
         secondaryButton={{
           text: 'Tidak',
+          isLoading: isApproveLoading,
           onClick: confirmationModal.closeModal,
         }}
         primaryButton={{
           text: 'Ya',
           color: approveAction === 'APPROVED' ? 'success' : 'error',
+          isLoading: isApproveLoading,
           onClick: approveMarketingHandler,
         }}
       />
@@ -1048,10 +1070,12 @@ const MarketingTable = () => {
         text={`Apakah anda yakin ingin deliver penjualan ${selectedItem?.so_number}?`}
         secondaryButton={{
           text: 'Tidak',
+          isLoading: isDeliveryLoading,
         }}
         primaryButton={{
           text: 'Ya',
           color: 'success',
+          isLoading: isDeliveryLoading,
           onClick: confirmationModalDeliveryClickHandler,
         }}
       />
@@ -1111,6 +1135,7 @@ const MarketingTable = () => {
             <Button
               variant='outline'
               color='none'
+              disabled={isSubmittingBulkDelivery}
               onClick={() => {
                 bulkDeliveryModal.closeModal();
                 setBulkDeliveryDate('');
@@ -1123,6 +1148,7 @@ const MarketingTable = () => {
             <Button
               color='success'
               isLoading={isSubmittingBulkDelivery}
+              disabled={isSubmittingBulkDelivery}
               onClick={() =>
                 submitBulkDeliveryApprovalHandler(
                   idsToProcess,