detail transaction disbursement

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

@@ -10,6 +10,7 @@ import { Button } from '@/components/ui/button';
 import { useNavigate } from 'react-router';
 import moment from 'moment';
 import DetailTransaction from '../blocks/DetailTransaction';
+import TransactionLogViewer from '../blocks/DetailTransactionLog';
 
 interface TransactionProps {
   id: number;
@@ -31,6 +32,11 @@ interface ContextProps {
   setSelectedTransactionId: React.Dispatch<React.SetStateAction<number | null>>;
   showUploadBatchDialog: boolean;
   handleUploadBatchDialog: (show: boolean) => void;
+  showDetailLogDialog: boolean;
+  // handleDetailLogDialog: (show: boolean) => void;
+  setShowDetailLogDialog: React.Dispatch<React.SetStateAction<boolean>>;
+  setDetailLogData: React.Dispatch<React.SetStateAction<any | null>>;
+  detailLogData: any | null
 }
 
 const initialProps: ContextProps = {
@@ -41,6 +47,11 @@ const initialProps: ContextProps = {
   setSelectedTransactionId: () => { },
   showUploadBatchDialog: false,
   handleUploadBatchDialog: (show: boolean) => {},
+  showDetailLogDialog: false,
+  // handleDetailLogDialog: (show: boolean) => {},
+  setShowDetailLogDialog: () => { },
+  setDetailLogData: () => {},
+  detailLogData: null,
 };
 
 type StatusCode = 'W' | 'P' | 'F' | 'D' | 'Y';
@@ -67,6 +78,8 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
   const [showDetailDialog, setShowDetailDialog] = useState(false);
   const [selectedTransactionId, setSelectedTransactionId] = useState<number | null>(null);
   const [showUploadBatchDialog, setShowUploadBatchDialog] = useState(false);
+  const [showDetailLogDialog, setShowDetailLogDialog] = useState(false);
+  const [detailLogData, setDetailLogData] = useState<any | null>(null);
   const [transaction, setTransaction] = useState<TransactionProps[]>([]);
   const { GetData } = useCallApi();
   const navigate = useNavigate();
@@ -74,6 +87,9 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
   const handleUploadBatchDialog = useCallback((show: boolean) => {
     setShowUploadBatchDialog(show);
   }, []);
+  // const handleDetailLogDialog = useCallback((show: boolean) => {
+  //   setShowDetailLogDialog(show);
+  // }, []);
 
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
@@ -262,11 +278,17 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         selectedTransactionId,
         setSelectedTransactionId,
         handleUploadBatchDialog,
-        showUploadBatchDialog
+        showUploadBatchDialog,
+        // handleDetailLogDialog,
+        showDetailLogDialog,
+        setShowDetailLogDialog,
+        setDetailLogData,
+        detailLogData
       }}
     >
       <Toaster expand visibleToasts={9} duration={3000} />
       <DetailTransaction />
+      <TransactionLogViewer />
 
       <DataGridProvider
         columns={columns}

src/pages/disbursement/history-transaction/hooks/TransactionDialogContext.tsx

@@ -0,0 +1,42 @@
+import { createContext, useContext, useState } from "react";
+
+interface LogDetail {
+  id: number;
+  username: string;
+  name: string;
+  amount: number;
+  remark: string;
+  inquiry_response: string;
+  payment_response: string;
+  response_message: string;
+  status: string;
+  process_date: string;
+  reference_number: string;
+  additional_info: string;
+}
+
+interface TransactionDialogContextProps {
+  showLogDialog: boolean;
+  selectedLog: LogDetail | null;
+  setShowLogDialog: (val: boolean) => void;
+  setSelectedLog: (log: LogDetail | null) => void;
+}
+
+const TransactionDialogContext = createContext<TransactionDialogContextProps | undefined>(undefined);
+
+export const TransactionDialogProvider = ({ children }: { children: React.ReactNode }) => {
+  const [showLogDialog, setShowLogDialog] = useState(false);
+  const [selectedLog, setSelectedLog] = useState<LogDetail | null>(null);
+
+  return (
+    <TransactionDialogContext.Provider value={{ showLogDialog, setShowLogDialog, selectedLog, setSelectedLog }}>
+      {children}
+    </TransactionDialogContext.Provider>
+  );
+};
+
+export const useTransactionDialog = () => {
+  const context = useContext(TransactionDialogContext);
+  if (!context) throw new Error("useTransactionDialog must be used within TransactionDialogProvider");
+  return context;
+};