TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

detail transaction disbursement

Browse Source
This commit is contained in:
Narul Hidayah
2025-04-14 14:52:32 +07:00
parent 1a88492759
commit e17e99a6de
4 changed files with 229 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/pages/disbursement/history-transaction/blocks/DetailTransaction.tsx
View File

@ -1,7 +1,10 @@
// disbursement/history-transaction/blocks/DetailTransaction.tsx
import { KeenIcon } from '@/components';
import { useTransactionContext } from '../hooks/useTransactionContext';
import { useCallApi } from '@/hooks';
import { apiConfig } from '@/config/api.config';
import { useEffect, useState } from 'react';
import moment from 'moment';
import {
Dialog,
DialogBody,
@ -10,10 +13,11 @@ import {
DialogHeader,
DialogTitle
} from '@/components/ui/dialog';
import TransactionLogViewer from './DetailTransactionLog';
const API_URL = apiConfig.service_disbursement;
type StatusCode = 'W' | 'P' | 'F' | 'D' | 'Y';
type StatusCode = 'W' | 'O' | 'F' | 'D';
interface StatusInfo {
label: string;
@ -22,11 +26,10 @@ interface StatusInfo {
}
const statusMap: Record<StatusCode, StatusInfo> = {
W: { label: 'Waiting', bg: 'bg-yellow-100', text: 'text-yellow-600' },
P: { label: 'Pending', bg: 'bg-blue-100', text: 'text-blue-600' },
W: { label: 'Waiting Schedule', bg: 'bg-yellow-100', text: 'text-yellow-600' },
O: { label: 'On Process', bg: 'bg-blue-100', text: 'text-blue-600' },
F: { label: 'Fail', bg: 'bg-red-100', text: 'text-red-600' },
D: { label: 'Done', bg: 'bg-green-100', text: 'text-green-600' },
Y: { label: 'Active', bg: 'bg-green-100', text: 'text-green-600' },
};
export const renderStatusBadge = (statusRaw: string | null | undefined) => {
@ -49,7 +52,9 @@ const DetailTransaction = () => {
const {
showDetailDialog,
setShowDetailDialog,
selectedTransactionId
selectedTransactionId,
setShowDetailLogDialog,
setDetailLogData
} = useTransactionContext();
const [transactionDetails, setTransactionDetails] = useState<any>(null);
@ -92,27 +97,39 @@ const DetailTransaction = () => {
<thead>
<tr className="bg-gray-100">
<th className="px-4 py-2 text-left text-sm text-gray-500">Username</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Name</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Transfer Amount</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Description</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Invoice Number</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Process Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Fullname</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Amount</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Status</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Process Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Invoice Number</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Actions</th>
</tr>
</thead>
<tbody>
{transactionDetails?.log && transactionDetails?.log.length > 0 ? (
transactionDetails.log.map((log: { customer: any, amount: number, remark: string, reference: string, response_date: string, payment_response: string, status: string}, index: number) => (
transactionDetails.log.map((log: { id: number, customer: any, amount: number, remark: string, reference: string, request_date: string, payment_response: string, status: string}, index: number) => (
<tr key={index} className="border-t">
<td className="px-4 py-2 text-sm text-gray-500">{log.customer.username ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.customer.fullname ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.amount ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.remark ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.reference ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.response_date ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.payment_response ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{renderStatusBadge(log.status) ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_date && moment(log.request_date).isValid() ? moment(log.request_date).format('YYYY-MM-DD HH:mm:ss') : '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.reference ?? '-'}</td>
<td className="px-4 py-2 text-sm text-gray-500">
<div key={`actions-${log.id}`}>
<button
className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => {
setDetailLogData(log)
setShowDetailLogDialog(true);
}}
>
<KeenIcon icon="eye" />
</button>
</div>
</td>
</tr>
))
) : (