diff --git a/package-lock.json b/package-lock.json index 3c55c14..5b8929e 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 8121a93..4dd81d2 100644 --- a/package.json +++ b/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", diff --git a/src/pages/transaction/blocks/DetailTransaction.tsx b/src/pages/transaction/blocks/DetailTransaction.tsx new file mode 100644 index 0000000..bd06276 --- /dev/null +++ b/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(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 ( + + + + Transaction Details + {/* + Viewing details for transaction ID: {selectedTransactionId} + */} + + + {/* Tabs Navigation */} +
+ + + +
+ + {/* Tab Content */} +
+ {activeTab === 'detail' && ( +
+

Transaction Information

+
+
+

Transaction Date

+

2023-11-15 14:30:22

+
+
+

Amount

+

$1,250.00

+
+
+

Status

+

COMPLETED

+
+
+

Fee

+

$5.00

+
+
+
+ )} + + {activeTab === 'log' && ( +
+

Transaction Logs

+
+
+
+ Status changed to COMPLETED + 2023-11-15 14:35:22 +
+

System processed the transaction successfully

+
+
+
+ Status changed to PROCESSING + 2023-11-15 14:31:22 +
+

Transaction received by system

+
+
+
+ )} + + {activeTab === 'approve' && ( +
+

Approval Logs

+
+
+
+ Approved by Admin + 2023-11-15 14:32:22 +
+

Transaction approved automatically by system

+
+
+
+ )} +
+ + + + ); +}; + +export default DetailTransaction; \ No newline at end of file diff --git a/src/pages/transaction/hooks/TransactionContext.tsx b/src/pages/transaction/hooks/TransactionContext.tsx index c8b4943..eb87702 100644 --- a/src/pages/transaction/hooks/TransactionContext.tsx +++ b/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>; + selectedTransactionId: number | null; + setSelectedTransactionId: React.Dispatch>; } const initialProps: ContextProps = { - getTransactionLists: async () => ({ data: [], totalCount: 0 }) + getTransactionLists: async () => ({ data: [], totalCount: 0 }), + showDetailDialog: false, + setShowDetailDialog: () => { }, + selectedTransactionId: null, + setSelectedTransactionId: () => { } }; const ManageTransactionContext = createContext(initialProps); const API_URL = apiConfig.transaction; const TransactionProvider = ({ children }: { children: React.ReactNode }) => { + const [showDetailDialog, setShowDetailDialog] = useState(false); + const [selectedTransactionId, setSelectedTransactionId] = useState(null); const [transaction, setTransaction] = useState([]); 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 ( - <> - - + ); }, 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 ( + = 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"