add detail history transaction
This commit is contained in:
wayanrivan
149
src/pages/transaction/blocks/DetailTransaction.tsx
Normal file
149
src/pages/transaction/blocks/DetailTransaction.tsx
Normal file
@ -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;
|
||||
@ -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}
|
||||
|
||||
Reference in New Issue
Block a user