add detail history transaction

package-lock.json

@@ -71,6 +71,7 @@
         "styled-components": "^6.1.13",
         "stylis": "^4.3.4",
         "stylis-plugin-rtl": "^2.1.1",
+        "tabs": "^0.2.0",
         "tailwind-merge": "^2.5.4",
         "tailwindcss-animate": "^1.0.7",
         "vite-plugin-windicss": "^1.9.3",
@@ -8025,6 +8026,10 @@
       "version": "5.4.3",
       "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.4.3.tgz",
       "integrity": "sha512-VCY5hFg/soBighAoGcdE+GagkJq0230qN6jcS5sp8wQX1qy1fYN/RX7/BXkrs0oyzzwqR8/+eSUrqXbGeywdUQ==",
+<<<<<<< Updated upstream
+=======
+      "license": "MIT",
+>>>>>>> Stashed changes
       "peerDependencies": {
         "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -8777,6 +8782,12 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/tabs": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/tabs/-/tabs-0.2.0.tgz",
+      "integrity": "sha512-q6mo8KWq/Zi+zGR3ZvGq6S6ckc3JNbGRGtAwIhtnp2GlS1goTqFnWX3MkyDKYSQuzwBqBAy2fYGHQI+3HMnXZQ==",
+      "license": "MIT"
+    },
     "node_modules/tailwind-merge": {
       "version": "2.5.4",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.4.tgz",

package.json

@@ -77,6 +77,7 @@
     "styled-components": "^6.1.13",
     "stylis": "^4.3.4",
     "stylis-plugin-rtl": "^2.1.1",
+    "tabs": "^0.2.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "vite-plugin-windicss": "^1.9.3",

src/pages/transaction/blocks/DetailTransaction.tsx

@@ -0,0 +1,149 @@
+import { useTransactionContext } from '../hooks/useTransactionContext';
+import { useCallApi } from '@/hooks';
+import { apiConfig } from '@/config/api.config';
+import { useEffect, useState } from 'react';
+import {
+    Dialog,
+    DialogBody,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle
+} from '@/components/ui/dialog';
+
+const API_URL = apiConfig.transaction;
+
+const DetailTransaction = () => {
+    const { GetData } = useCallApi();
+    const {
+        showDetailDialog,
+        setShowDetailDialog,
+        selectedTransactionId
+    } = useTransactionContext();
+
+    const [transactionDetails, setTransactionDetails] = useState<any>(null);
+
+    useEffect(() => {
+        const fetchTransactionDetails = async () => {
+            if (selectedTransactionId) {
+                try {
+                    const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionId}`, {
+                        id: selectedTransactionId
+                    });
+                    // console.log(response?.data);
+                    setTransactionDetails(response?.data);
+                } catch (error) {
+                    console.error('Error fetching transaction', error);
+                }
+            }
+        };
+
+        if (showDetailDialog && selectedTransactionId) {
+            fetchTransactionDetails();
+        }
+    }, [showDetailDialog, selectedTransactionId, GetData]);
+
+    const [activeTab, setActiveTab] = useState('detail'); // 'detail', 'log', 'approve'
+
+    return (
+        <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
+            <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
+                <DialogHeader>
+                    <DialogTitle>Transaction Details</DialogTitle>
+                    {/* <DialogDescription>
+                        Viewing details for transaction ID: {selectedTransactionId}
+                    </DialogDescription> */}
+                </DialogHeader>
+                <DialogBody>
+                    {/* Tabs Navigation */}
+                    <div className="flex border-b border-gray-200">
+                        <button
+                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'detail' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+                            onClick={() => setActiveTab('detail')}
+                        >
+                            Detail Transaction
+                        </button>
+                        <button
+                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'log' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+                            onClick={() => setActiveTab('log')}
+                        >
+                            Transaction Log
+                        </button>
+                        <button
+                            className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'approve' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+                            onClick={() => setActiveTab('approve')}
+                        >
+                            Log Approve
+                        </button>
+                    </div>
+
+                    {/* Tab Content */}
+                    <div className="py-4">
+                        {activeTab === 'detail' && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold">Transaction Information</h3>
+                                <div className="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <p className="text-sm text-gray-500">Transaction Date</p>
+                                        <p className="font-medium">2023-11-15 14:30:22</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Amount</p>
+                                        <p className="font-medium">$1,250.00</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Status</p>
+                                        <p className="font-medium">COMPLETED</p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Fee</p>
+                                        <p className="font-medium">$5.00</p>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {activeTab === 'log' && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold">Transaction Logs</h3>
+                                <div className="border rounded-lg divide-y">
+                                    <div className="p-3">
+                                        <div className="flex justify-between">
+                                            <span className="font-medium">Status changed to COMPLETED</span>
+                                            <span className="text-sm text-gray-500">2023-11-15 14:35:22</span>
+                                        </div>
+                                        <p className="text-sm text-gray-600 mt-1">System processed the transaction successfully</p>
+                                    </div>
+                                    <div className="p-3">
+                                        <div className="flex justify-between">
+                                            <span className="font-medium">Status changed to PROCESSING</span>
+                                            <span className="text-sm text-gray-500">2023-11-15 14:31:22</span>
+                                        </div>
+                                        <p className="text-sm text-gray-600 mt-1">Transaction received by system</p>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {activeTab === 'approve' && (
+                            <div className="space-y-4">
+                                <h3 className="font-semibold">Approval Logs</h3>
+                                <div className="border rounded-lg divide-y">
+                                    <div className="p-3">
+                                        <div className="flex justify-between">
+                                            <span className="font-medium">Approved by Admin</span>
+                                            <span className="text-sm text-gray-500">2023-11-15 14:32:22</span>
+                                        </div>
+                                        <p className="text-sm text-gray-600 mt-1">Transaction approved automatically by system</p>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </DialogBody>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default DetailTransaction;

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 (
-            <>
+            <div key={`actions-${row.id}`}>
-              <button className="btn btn-sm btn-icon btn-clear btn-light">
+              <button 
+                className="btn btn-sm btn-icon btn-clear btn-light" 
+                onClick={() => {
+                  setSelectedTransactionId(row.id);
+                  setShowDetailDialog(true);
+                }}
+              >
                 <KeenIcon icon="eye" />
               </button>
-            </>
+            </div>
           );
         },
         meta: {
@@ -161,22 +178,22 @@ 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];
         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",
+          from: startdate + " 00:00:00",
-          to: enddate+" 23:59:59"
+          to: enddate + " 23:59:59"
         }
       };
 
@@ -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}

yarn.lock

@@ -3713,7 +3713,11 @@ react-day-picker@^8.10.1:
   resolved "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.10.1.tgz"
   integrity sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==
 
+<<<<<<< Updated upstream
 react-dom@^18.3.1:
+=======
+"react-dom@^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom@^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react-dom@^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom@^18 || ^19 || ^19.0.0-rc", react-dom@^18.0.0, "react-dom@^18.0.0 || ^19.0.0 || ^19.0.0-rc", react-dom@^18.3.1, "react-dom@>= 16.8.0", react-dom@>=16.6.0, react-dom@>=16.8, react-dom@>=16.8.0:
+>>>>>>> Stashed changes
   version "18.3.1"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"
   integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
@@ -3887,7 +3891,11 @@ react-transition-group@^4.4.5:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+<<<<<<< Updated upstream
 react@^18.3.1:
+=======
+"react@^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.3.0 || ^17.0.0 || ^18.0.0", "react@^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc", "react@^16.6.0 || ^17.0.0 || ^18.0.0", "react@^16.6.0 || 17 || 18", "react@^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react@^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.0 || ^18.0.0", "react@^17.0.0 || ^18.0.0 || ^19.0.0", "react@^18 || ^19", "react@^18 || ^19 || ^19.0.0-rc", react@^18.0.0, "react@^18.0.0 || ^19.0.0 || ^19.0.0-rc", react@^18.3.1, "react@>= 16.8.0", react@>=0.13, react@>=16.3.0, react@>=16.6.0, react@>=16.8, react@>=16.8.0, "react@16.8 - 18":
+>>>>>>> Stashed changes
   version "18.3.1"
   resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
@@ -4237,6 +4245,11 @@ synckit@^0.9.1:
     "@pkgr/core" "^0.1.0"
     tslib "^2.6.2"
 
+tabs@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/tabs/-/tabs-0.2.0.tgz"
+  integrity sha512-q6mo8KWq/Zi+zGR3ZvGq6S6ckc3JNbGRGtAwIhtnp2GlS1goTqFnWX3MkyDKYSQuzwBqBAy2fYGHQI+3HMnXZQ==
+
 tailwind-merge@^2.5.4:
   version "2.5.4"
   resolved "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.4.tgz"