add loading in detail dialog

src/pages/transaction/approval-transaction/hooks/ApprovalTransactionContext.tsx

@@ -53,12 +53,24 @@ const ManageApprovalTransactionContext = createContext<ContextProps>(initialProp
 const API_URL = apiConfig.transaction;
 
 const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }) => {
+  const [isLoadingDetail, setIsLoadingDetail] = useState(false);
   const [showDetailDialog, setShowDetailDialog] = useState(false);
   const [showApprovalDialog, setShowApprovalDialog] = useState(false);
   const [selectedTransactionId, setSelectedTransactionId] = useState<number | null>(null);
   const [selectedTransactionIdForApproval, setSelectedTransactionIdForApproval] = useState<number | null>(null);
   const [transaction, setTransaction] = useState<ApprovalTransactionProps[]>([]);
 
+  const handleShowDetail = (transactionId: any) => {
+    setIsLoadingDetail(true);
+    setSelectedTransactionId(transactionId);
+
+    // Simulasi loading (bisa ganti dengan fetch detail data jika perlu)
+    setTimeout(() => {
+      setShowDetailDialog(true);
+      setIsLoadingDetail(false);
+    }, 1000); // 500ms loading
+  };
+
   const { GetData } = useCallApi();
   const navigate = useNavigate();
 
@@ -236,11 +248,8 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
           return (
             <div key={`actions-${row.id}`} className="flex gap-2 justify-center">
               <button
-                className="btn btn-sm btn-icon btn-clear btn-light"
+                className={`btn btn-sm btn-icon btn-clear btn-light ${isLoadingDetail ? "cursor-not-allowed opacity-60" : ""}`}
-                onClick={() => {
+                onClick={() => !isLoadingDetail && handleShowDetail(row.id)}
-                  setSelectedTransactionId(row.id);
-                  setShowDetailDialog(true);
-                }}
               >
                 <KeenIcon icon="eye" />
               </button>
@@ -367,6 +376,32 @@ const ApprovalTransactionProvider = ({ children }: { children: React.ReactNode }
     >
       <Toaster expand visibleToasts={9} duration={3000} />
 
+      {isLoadingDetail && (
+        <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-black bg-opacity-40">
+          <svg
+            className="w-8 h-8 animate-spin text-white mb-2"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            ></circle>
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8v4l3-3-3-3v4a8 8 0 00-8 8h4z"
+            ></path>
+          </svg>
+          <span className="text-white text-lg font-medium">Loading data...</span>
+        </div>
+      )}
+
       <DataGridProvider
         columns={columns}
         pagination={{ size: 10 }}

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

@@ -47,6 +47,7 @@ const ManageTransactionContext = createContext<ContextProps>(initialProps);
 const API_URL = apiConfig.transaction;
 
 const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
+  const [isLoadingDetail, setIsLoadingDetail] = useState(false);
   const [showDetailDialog, setShowDetailDialog] = useState(false);
   const [showRollbackDialog, setShowRollbackDialog] = useState(false);
   const [selectedTransactionId, setSelectedTransactionId] = useState<number | null>(null);
@@ -58,6 +59,18 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
   };
 
 
+  const handleShowDetail = (transactionId: any) => {
+    setIsLoadingDetail(true);
+    setSelectedTransactionId(transactionId);
+
+    // Simulasi loading (bisa ganti dengan fetch detail data jika perlu)
+    setTimeout(() => {
+      setShowDetailDialog(true);
+      setIsLoadingDetail(false);
+    }, 1000); // 500ms loading
+  };
+
+
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
       {
@@ -261,18 +274,17 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         enableHiding: false,
         cell: (data) => {
           const row = data.row.original;
-          const isVisible = (row.status === 'F' ? true : false || row.status === 'P' ? true : false) && row.status_approve !== 'W' ? true : false;
+          // const isVisible = (row.status === 'F' ? true : false || row.status === 'P' ? true : false) && row.status_approve !== 'W' ? true : false;
           return (
             <div key={`actions-${row.id}`}>
-              <button
+              <div className="relative inline-block">
-                className="btn btn-sm btn-icon btn-clear btn-light"
+                <button
-                onClick={() => {
+                  className={`btn btn-sm btn-icon btn-clear btn-light ${isLoadingDetail ? "cursor-not-allowed opacity-60" : ""}`}
-                  setSelectedTransactionId(row.id);
+                  onClick={() => !isLoadingDetail && handleShowDetail(row.id)}
-                  setShowDetailDialog(true);
+                >
-                }}
+                  <KeenIcon icon="eye" />
-              >
+                </button>
-                <KeenIcon icon="eye" />
+              </div>
-              </button>
 
               <button
                 className="btn btn-sm btn-icon btn-clear btn-light"
@@ -409,6 +421,32 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
     >
       <Toaster expand visibleToasts={9} duration={3000} />
 
+      {isLoadingDetail && (
+        <div className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-black bg-opacity-40">
+          <svg
+            className="w-8 h-8 animate-spin text-white mb-2"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            ></circle>
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8v4l3-3-3-3v4a8 8 0 00-8 8h4z"
+            ></path>
+          </svg>
+          <span className="text-white text-lg font-medium">Loading data...</span>
+        </div>
+      )}
+
 
       <DataGridProvider
         columns={columns}