add detail history transaction

src/pages/transaction/hooks/TransactionContext.tsx

@@ -8,6 +8,7 @@ import { useCallApi } from '@/hooks';
 import ListToolbar from '../blocks/ListToolbar';
 import { Button } from '@/components/ui/button';
 import { useNavigate } from 'react-router';
+import DetailTransaction from '../blocks/DetailTransaction';
 
 interface TransactionProps {
   id: number;
@@ -23,16 +24,26 @@ interface ContextProps {
     order_direction: any,
     filter: any
   ) => Promise<{ data: TransactionProps[]; totalCount: number } | undefined>;
+  showDetailDialog: boolean;
+  setShowDetailDialog: React.Dispatch<React.SetStateAction<boolean>>;
+  selectedTransactionId: number | null;
+  setSelectedTransactionId: React.Dispatch<React.SetStateAction<number | null>>;
 }
 
 const initialProps: ContextProps = {
-  getTransactionLists: async () => ({ data: [], totalCount: 0 })
+  getTransactionLists: async () => ({ data: [], totalCount: 0 }),
+  showDetailDialog: false,
+  setShowDetailDialog: () => { },
+  selectedTransactionId: null,
+  setSelectedTransactionId: () => { }
 };
 
 const ManageTransactionContext = createContext<ContextProps>(initialProps);
 const API_URL = apiConfig.transaction;
 
 const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
+  const [showDetailDialog, setShowDetailDialog] = useState(false);
+  const [selectedTransactionId, setSelectedTransactionId] = useState<number | null>(null);
   const [transaction, setTransaction] = useState<TransactionProps[]>([]);
   const { GetData } = useCallApi();
   const navigate = useNavigate();
@@ -97,9 +108,9 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
           let status;
           if (row.status === 'C') {
             status = 'COMPLETE';
-          } else if(row.status === 'F') {
+          } else if (row.status === 'F') {
             status = 'FAILED';
-          } else if(row.status === 'O') {
+          } else if (row.status === 'O') {
             status = 'ON PROCESS';
           } else {
             status = 'PENDING';
@@ -138,13 +149,19 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
         enableSorting: false,
         enableHiding: false,
         cell: (data) => {
-          const row = data.row.original.id;
+          const row = data.row.original;
           return (
-            <>
-              <button className="btn btn-sm btn-icon btn-clear btn-light">
+            <div key={`actions-${row.id}`}>
+              <button 
+                className="btn btn-sm btn-icon btn-clear btn-light" 
+                onClick={() => {
+                  setSelectedTransactionId(row.id);
+                  setShowDetailDialog(true);
+                }}
+              >
                 <KeenIcon icon="eye" />
               </button>
-            </>
+            </div>
           );
         },
         meta: {
@@ -161,25 +178,25 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
       let enddate;
       let formattedFilter;
 
-      if (filter == undefined || filter.length==0) {
+      if (filter == undefined || filter.length == 0) {
         const today = new Date();
         const nextWeek = new Date();
         nextWeek.setDate(today.getDate() + 7);
-      
-        startdate = today.toISOString().split('T')[0]; 
+
+        startdate = today.toISOString().split('T')[0];
         enddate = nextWeek.toISOString().split('T')[0];
-      }else if (filter != undefined || filter.length!=0) {
+      } else if (filter != undefined || filter.length != 0) {
         startdate = filter[0].value.from;
         enddate = filter[0].value.to;
       }
 
       formattedFilter = {
         "Transactions.transaction_date": {
-          from: startdate+" 00:00:00",
-          to: enddate+" 23:59:59"
+          from: startdate + " 00:00:00",
+          to: enddate + " 23:59:59"
         }
       };
-      
+
       const response = await GetData(`${API_URL}/transaction/history`, {
         limit,
         page: page + 1,
@@ -199,10 +216,15 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
   return (
     <ManageTransactionContext.Provider
       value={{
-        getTransactionLists
+        getTransactionLists,
+        showDetailDialog,
+        setShowDetailDialog,
+        selectedTransactionId,
+        setSelectedTransactionId
       }}
     >
       <Toaster expand visibleToasts={9} duration={3000} />
+      <DetailTransaction />
 
       <DataGridProvider
         columns={columns}