diff --git a/package.json b/package.json
index 89c60d4..09bf451 100644
--- a/package.json
+++ b/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",
diff --git a/src/pages/account/home/user-profile/blocks/index.ts b/src/pages/account/home/user-profile/blocks/index.ts
index 623b2f0..00174e5 100644
--- a/src/pages/account/home/user-profile/blocks/index.ts
+++ b/src/pages/account/home/user-profile/blocks/index.ts
@@ -1,2 +1,3 @@
 export * from './BasicSettings';
 export * from './Password';
+export * from './PinCode';
diff --git a/src/pages/transaction/approval-transaction/blocks/ApprovalDialog.tsx b/src/pages/transaction/approval-transaction/blocks/ApprovalDialog.tsx
index 016fd45..da5a4b8 100644
--- a/src/pages/transaction/approval-transaction/blocks/ApprovalDialog.tsx
+++ b/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`, {
-                id_transaction: transactionDetails.id,
-                notes: formField.notes,
-                status: formField.status,
-                pin: formField.pin,
+            // ✅ TUTUP Dialog sebelum munculkan SweetAlert
+            setShowApprovalDialog(false);
+
+            // ✅ TAMPILKAN SWEETALERT
+            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) {
-                setAlert({
-                    show: true,
-                    message: response?.message?.error?.message || 'Approval failed',
+            if (result.isConfirmed) {
+                // ✅ Kalau tekan YES, baru tembak API
+                const response = await PostData(`${API_URL}/transaction/set-approval`, {
+                    id_transaction: transactionDetails.id,
+                    notes: formField.notes,
+                    status: formField.status,
+                    pin: formField.pin,
                 });
-                return;
-            }
 
-            if (response?.status) {
-                setAlert({ show: false, message: '' });
-                toast.success('Success Update Approval');
-                const createActivity = {
-                    module: 'Approval Transaction',
-                    description: `Change status approve for transaction => ${transactionDetails.code}`,
-                    action: 'U',
-                };
-                doSaveLogActivity(createActivity);
-                setShowApprovalDialog(false);
-                reload();
+                if (response?.status === false) {
+                    toast.error(response?.message?.error?.message || 'Approval failed');
+                    return;
+                }
+
+                if (response?.status) {
+                    toast.success('Success Update Approval');
+                    const createActivity = {
+                        module: 'Approval Transaction',
+                        description: `Change status approve for transaction => ${transactionDetails.code}`,
+                        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