update

src/pages/transaction/history-transaction/blocks/RollbackTransaction.tsx

@@ -0,0 +1,187 @@
+import { useTransactionContext } from '../hooks/useTransactionContext';
+import { useCallApi } from '@/hooks';
+import { apiConfig } from '@/config/api.config';
+import { useCallback, useEffect, useState } from 'react';
+import {
+    Dialog,
+    DialogBody,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
+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;
+
+const RollbackTransaction = () => {
+    const { GetData, PostData } = useCallApi();
+    const { reload } = useDataGrid();
+
+    const {
+        showRollbackDialog,
+        setShowRollbackDialog,
+        selectedTransactionId,
+    } = useTransactionContext();
+
+
+    const [formField, setFormField] = useState({
+        transaction_code: '',
+        notes: '',
+        pin: ''
+    });
+
+    const [alert, setAlert] = useState({
+        show: false,
+        message: '',
+    });
+
+    const doApproval = useCallback(
+        async (e: React.FormEvent<HTMLFormElement>) => {
+            e.preventDefault();
+
+            // ✅ TUTUP Dialog sebelum munculkan SweetAlert
+            setShowRollbackDialog(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 (result.isConfirmed) {
+                // ✅ Kalau tekan YES, baru tembak API
+                const response = await PostData(`${API_URL}/transaction/rollback`, {
+                    id_transaction: selectedTransactionId,
+                    notes: formField.notes,
+                    pin: formField.pin,
+                });
+
+                // console.log(response?.message?.error?.message,response?.status);
+
+                if (response?.status === false) {
+                    // console.log(response);
+                    toast.error(JSON.stringify(response));
+                    return;
+                }
+
+                if (response?.status) {
+                    toast.success('Success Update Approval');
+                    const createActivity = {
+                        module: 'History Transaction',
+                        description: `Rollback Transaction for transaction => ${selectedTransactionId}`,
+                        action: 'U',
+                    };
+                    doSaveLogActivity(createActivity);
+                    reload();
+                }
+            } else {
+                // ✅ Kalau tekan Cancel
+                console.log('User cancelled');
+            }
+        },
+        [formField]
+    );
+
+    useEffect(() => {
+        if (showRollbackDialog) {
+            setFormField({
+                transaction_code: '',
+                notes: '',
+                pin: ''
+            });
+            setAlert({ show: false, message: '' });
+        }
+    }, [showRollbackDialog]);
+
+
+    return (
+        <Dialog open={showRollbackDialog} onOpenChange={setShowRollbackDialog}>
+            <DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
+                <DialogHeader>
+                    <DialogTitle>Rollback Transaction</DialogTitle>
+                </DialogHeader>
+                <DialogDescription></DialogDescription>
+                <DialogBody>
+                    <form onSubmit={doApproval}>
+                        <div className="card-body grid gap-5 p-0">
+                            <div className="w-full">
+                                <div className="flex items-center flex-wrap gap-2.5 mt-4">
+                                    <label className="form-label max-w-56">Notes</label>
+                                    <div className="grow">
+                                        <Input
+                                            type="text"
+                                            placeholder="Notes"
+                                            name="notes"
+                                            id="notes"
+                                            value={formField.notes}
+                                            onChange={(e) =>
+                                                setFormField((prev) => ({
+                                                    ...prev,
+                                                    notes: e.target.value,
+                                                }))
+                                            }
+                                        />
+                                    </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
+                                            required
+                                            type="password"
+                                            placeholder="PIN"
+                                            name="pin"
+                                            id="pin"
+                                            value={formField.pin}
+                                            onChange={(e) =>
+                                                setFormField((prev) => ({
+                                                    ...prev,
+                                                    pin: e.target.value,
+                                                }))
+                                            }
+                                        />
+                                    </div>
+                                </div>
+                                {alert.show && (
+                                    <div className="mt-4">
+                                        <span className="inline-block bg-red-100 text-red-800 text-sm font-medium px-4 py-2 rounded-md">
+                                            {alert.message}
+                                        </span>
+                                    </div>
+                                )}
+                            </div>
+
+                            <hr />
+                            <div className="flex justify-end">
+                                <Button className="btn btn-primary" type="submit">
+                                    Save Changes
+                                </Button>
+                            </div>
+                        </div>
+                    </form>
+                </DialogBody>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default RollbackTransaction;

src/pages/transaction/history-transaction/hooks/TransactionContext.tsx

@@ -8,6 +8,7 @@ import ListToolbar from '../blocks/ListToolbar';
 import { useNavigate } from 'react-router';
 import DetailTransaction from '../blocks/DetailTransaction';
 import ResendTransaction from '../blocks/ResendTransaction';
+import RollbackTransaction from '../blocks/RollbackTransaction';
 
 interface TransactionProps {
   id: number;
@@ -25,6 +26,8 @@ interface ContextProps {
   ) => Promise<{ data: TransactionProps[]; totalCount: number } | undefined>;
   showDetailDialog: boolean;
   setShowDetailDialog: React.Dispatch<React.SetStateAction<boolean>>;
+  showRollbackDialog: boolean;
+  setShowRollbackDialog: React.Dispatch<React.SetStateAction<boolean>>;
   selectedTransactionId: number | null;
   setSelectedTransactionId: React.Dispatch<React.SetStateAction<number | null>>;
 }
@@ -33,6 +36,8 @@ const initialProps: ContextProps = {
   getTransactionLists: async () => ({ data: [], totalCount: 0 }),
   showDetailDialog: false,
   setShowDetailDialog: () => { },
+  showRollbackDialog: false,
+  setShowRollbackDialog: () => { },
   selectedTransactionId: null,
   setSelectedTransactionId: () => { }
 };
@@ -42,6 +47,7 @@ const API_URL = apiConfig.transaction;
 
 const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
   const [showDetailDialog, setShowDetailDialog] = useState(false);
+  const [showRollbackDialog, setShowRollbackDialog] = useState(false);
   const [selectedTransactionId, setSelectedTransactionId] = useState<number | null>(null);
   const [transaction, setTransaction] = useState<TransactionProps[]>([]);
   const { GetData } = useCallApi();
@@ -235,6 +241,16 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
               >
                 <KeenIcon icon="eye" />
               </button>
+              <button
+                className="btn btn-sm btn-icon btn-clear btn-light"
+                onClick={() => {
+                  setSelectedTransactionId(row.id);
+                  setShowRollbackDialog(true);
+                }}
+                disabled={row.status_approve === 'Y' || row.status_approve === 'N'}
+              >
+                <KeenIcon icon="notepad-edit" />
+              </button>
             </div>
           );
         },
@@ -339,6 +355,8 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         getTransactionLists,
         showDetailDialog,
         setShowDetailDialog,
+        showRollbackDialog,
+        setShowRollbackDialog,
         selectedTransactionId,
         setSelectedTransactionId
       }}
@@ -358,6 +376,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         }
       >
         <DetailTransaction />
+        <RollbackTransaction/>
         <ResendTransaction
           isOpen={false}
           onClose={() => console.log('Retry Transaction closed')}