alert for approval transaction

package.json

@@ -80,6 +80,7 @@
     "styled-components": "^6.1.13",
     "stylis": "^4.3.4",
     "stylis-plugin-rtl": "^2.1.1",
+    "sweetalert2": "^11.19.1",
     "tabs": "^0.2.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",

src/pages/account/home/user-profile/blocks/index.ts

@@ -1,2 +1,3 @@
 export * from './BasicSettings';
 export * from './Password';
+export * from './PinCode';

src/pages/transaction/approval-transaction/blocks/ApprovalDialog.tsx

@@ -22,6 +22,7 @@ import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { toast } from 'sonner';
 import { Input } from '@/components/ui/input';
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
+import Swal from 'sweetalert2'; // ✅ IMPORT sweetalert2
 
 const API_URL = apiConfig.transaction;
 
@@ -63,34 +64,48 @@ const ApprovalDialog = () => {
                 return;
             }
 
-            const response = await PostData(`${API_URL}/transaction/set-approval`, {
+            // ✅ TUTUP Dialog sebelum munculkan SweetAlert
-                id_transaction: transactionDetails.id,
+            setShowApprovalDialog(false);
-                notes: formField.notes,
+
-                status: formField.status,
+            // ✅ TAMPILKAN SWEETALERT
-                pin: formField.pin,
+            const result = await Swal.fire({
+                title: 'Are you sure?',
+                text: "You want to save changes?",
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: '#3085d6',
+                cancelButtonColor: '#d33',
+                confirmButtonText: 'Yes, save it!',
+                cancelButtonText: 'Cancel'
             });
 
-            if (response?.status === false) {
+            if (result.isConfirmed) {
-                setAlert({
+                // ✅ Kalau tekan YES, baru tembak API
-                    show: true,
+                const response = await PostData(`${API_URL}/transaction/set-approval`, {
-                    message: response?.message?.error?.message || 'Approval failed',
+                    id_transaction: transactionDetails.id,
+                    notes: formField.notes,
+                    status: formField.status,
+                    pin: formField.pin,
                 });
-                return;
-            }
 
-            if (response?.status) {
+                if (response?.status === false) {
-                setAlert({ show: false, message: '' });
+                    toast.error(response?.message?.error?.message || 'Approval failed');
-                toast.success('Success Update Approval');
+                    return;
-                const createActivity = {
+                }
-                    module: 'Approval Transaction',
+
-                    description: `Change status approve for transaction => ${transactionDetails.code}`,
+                if (response?.status) {
-                    action: 'U',
+                    toast.success('Success Update Approval');
-                };
+                    const createActivity = {
-                doSaveLogActivity(createActivity);
+                        module: 'Approval Transaction',
-                setShowApprovalDialog(false);
+                        description: `Change status approve for transaction => ${transactionDetails.code}`,
-                reload();
+                        action: 'U',
+                    };
+                    doSaveLogActivity(createActivity);
+                    reload();
+                }
             } else {
-                setAlert({ show: true, message: response?.message });
+                // ✅ Kalau tekan Cancel
+                console.log('User cancelled');
             }
         },
         [formField, transactionDetails]
@@ -102,7 +117,7 @@ const ApprovalDialog = () => {
                 transaction_code: '',
                 notes: '',
                 status: '',
-                pin:''
+                pin: ''
             });
             setTransactionDetails(null);
             setAlert({ show: false, message: '' });
@@ -171,7 +186,6 @@ const ApprovalDialog = () => {
                                     </div>
                                 </div>
                                 <div className="flex items-center flex-wrap gap-2.5 mt-3 mb-3">
-
                                     <label className="form-label max-w-56">PIN</label>
                                     <div className="grow">
                                         <Input