128 lines
5.2 KiB
TypeScript
128 lines
5.2 KiB
TypeScript
import React, { useState } from 'react';
|
|
import moment from 'moment';
|
|
import { useTransactionContext } from '../hooks/useTransactionContext';
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody } from '@/components/ui/dialog';
|
|
|
|
interface LogType {
|
|
id: string;
|
|
amount: number;
|
|
remark: string;
|
|
reference: string;
|
|
response_date: string;
|
|
status: string;
|
|
customer?: {
|
|
username: string;
|
|
fullname: string;
|
|
};
|
|
payment_response?: string;
|
|
}
|
|
|
|
type StatusCode = 'W' | 'O' | 'F' | 'D';
|
|
|
|
interface StatusInfo {
|
|
label: string;
|
|
bg: string;
|
|
text: string;
|
|
}
|
|
|
|
const statusMap: Record<StatusCode, StatusInfo> = {
|
|
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' },
|
|
};
|
|
|
|
export const renderStatusBadge = (statusRaw: string | null | undefined) => {
|
|
const status = statusRaw as StatusCode;
|
|
const { label, bg, text } = statusMap[status] ?? {
|
|
label: 'Unknown',
|
|
bg: 'bg-gray-100',
|
|
text: 'text-gray-600',
|
|
};
|
|
|
|
return (
|
|
<span className={`px-2 py-1 text-xs font-semibold rounded-full ${bg} ${text}`}>
|
|
{label}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
const TransactionLogViewer = () => {
|
|
const {
|
|
showDetailLogDialog,
|
|
setShowDetailLogDialog,
|
|
detailLogData
|
|
} = useTransactionContext();
|
|
|
|
return (
|
|
<Dialog open={showDetailLogDialog} onOpenChange={setShowDetailLogDialog}>
|
|
<DialogContent className="container-fixed max-w-[1280px] w-full h-[90vh] flex flex-col p-6 overflow-hidden">
|
|
<DialogHeader>
|
|
<DialogTitle>Detail Record</DialogTitle>
|
|
</DialogHeader>
|
|
<DialogBody >
|
|
{/* Tab Content */}
|
|
{detailLogData && detailLogData != null ? (
|
|
<div className="py-4 overflow-y-auto">
|
|
<div className="space-y-4">
|
|
<div className="border rounded-lg overflow-x-auto">
|
|
<table className='min-w-full table-auto'>
|
|
<tbody>
|
|
<tr className='border-t'>
|
|
<td className="px-4 py-2 text-sm text-gray-500">ID</td>
|
|
<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.customer.id}</td>
|
|
</tr>
|
|
<tr className='border-t'>
|
|
<td className="px-4 py-2 text-sm text-gray-500">Username</td>
|
|
<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.customer.username}</td>
|
|
</tr>
|
|
<tr className='border-t'>
|
|
<td className="px-4 py-2 text-sm text-gray-500">Name</td>
|
|
<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.customer.fullname}</td>
|
|
</tr>
|
|
<tr className='border-t'>
|
|
<td className="px-4 py-2 text-sm text-gray-500">Amount</td>
|
|
<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.amount}</td>
|
|
</tr>
|
|
<tr className='border-t'>
|
|
<td className="px-4 py-2 text-sm text-gray-500">Remark</td>
|
|
<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.remark}</td>
|
|
</tr>
|
|
<tr className='border-t'>
|
|
<td className="px-4 py-2 text-sm text-gray-500">Payment Request</td>
|
|
<td className="px-4 py-2 text-sm text-gray-500"><pre className="whitespace-pre-wrap break-words max-w-full overflow-auto bg-gray-100 p-2 rounded text-sm">{detailLogData.payment_request}</pre></td>
|
|
</tr>
|
|
<tr className='border-t'>
|
|
<td className="px-4 py-2 text-sm text-gray-500">Payment Response</td>
|
|
<td className="px-4 py-2 text-sm text-gray-500"><pre className="whitespace-pre-wrap break-words max-w-full overflow-auto bg-gray-100 p-2 rounded text-sm">{detailLogData.payment_response}</pre></td>
|
|
</tr>
|
|
<tr className='border-t'>
|
|
<td className="px-4 py-2 text-sm text-gray-500">Status</td>
|
|
<td className="px-4 py-2 text-sm text-gray-500">{renderStatusBadge(detailLogData.status)}</td>
|
|
</tr>
|
|
<tr className='border-t'>
|
|
<td className="px-4 py-2 text-sm text-gray-500">Prosess Date</td>
|
|
<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.request_date && moment(detailLogData.request_date).isValid() ? moment(detailLogData.request_date).format('DD/MM/YYYY HH:mm:ss') : '-'}</td>
|
|
</tr>
|
|
<tr className='border-t'>
|
|
<td className="px-4 py-2 text-sm text-gray-500">Response Date</td>
|
|
<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.response_date && moment(detailLogData.response_date).isValid() ? moment(detailLogData.response_date).format('DD/MM/YYYY HH:mm:ss') : '-'}</td>
|
|
</tr>
|
|
<tr className='border-t'>
|
|
<td className="px-4 py-2 text-sm text-gray-500">Reference Number</td>
|
|
<td className="px-4 py-2 text-sm text-gray-500">{detailLogData.reference}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (<div></div>)}
|
|
</DialogBody>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default TransactionLogViewer;
|