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

disbursement list , detail, upload batch

Browse Source
This commit is contained in:
Narul Hidayah
2025-04-11 18:19:27 +07:00
parent 1674aeed85
commit 0de97696fd
10 changed files with 773 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/pages/disbursement/history-transaction/blocks/DetailTransaction.tsx Normal file
View File

@ -0,0 +1,137 @@
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.service_disbursement;
type StatusCode = 'W' | 'P' | 'F' | 'D' | 'Y';
interface StatusInfo {
label: string;
bg: string;
text: string;
}
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' },
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) => {
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 DetailTransaction = () => {
const { GetData } = useCallApi();
const {
showDetailDialog,
setShowDetailDialog,
selectedTransactionId
} = useTransactionContext();
const [transactionDetails, setTransactionDetails] = useState<any>(null);
useEffect(() => {
const fetchTransactionDetails = async () => {
console.log(selectedTransactionId)
if (selectedTransactionId) {
try {
const response = await GetData(`${API_URL}/transaction/history/${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-[1024px] flex flex-col p-5 overflow-hidden">
<DialogHeader>
<DialogTitle>Transaction Details</DialogTitle>
</DialogHeader>
<DialogBody>
{/* Tab Content */}
<div className="py-4 overflow-y-auto max-h-[400px]">
<div className="space-y-4">
<div className="border rounded-lg overflow-x-auto">
<table className="min-w-full table-auto">
<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">Status</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) => (
<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>
</tr>
))
) : (
<tr>
<td colSpan={8} className="px-4 py-2 text-center text-sm text-gray-500">
No logs available
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</div>
</DialogBody>
</DialogContent>
</Dialog>
);
};
export default DetailTransaction;