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

fix disbursement detail

Browse Source
This commit is contained in:
bagusajisaputroo
2025-05-22 10:18:15 +07:00
parent b11fe62bd6
commit 718fca4c76
1 changed files with 153 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -94,7 +94,7 @@ const DetailTransaction = () => {
} }
}, [showDetailDialog]); }, [showDetailDialog]);
const handleExport = async () => { const handleExport = async () => {
if (!selectedTransactionId || !transactionDetails) return; if (!selectedTransactionId || !transactionDetails) return;
setIsExporting(true); setIsExporting(true);
@ -144,8 +144,7 @@ const handleExport = async () => {
} finally { } finally {
setIsExporting(false); setIsExporting(false);
} }
}; };
return ( return (
<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}> <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
@ -153,7 +152,7 @@ const handleExport = async () => {
<DialogHeader> <DialogHeader>
<DialogTitle className="text-2xl font-bold">Transaction Details</DialogTitle> <DialogTitle className="text-2xl font-bold">Transaction Details</DialogTitle>
</DialogHeader> </DialogHeader>
<DialogBody> <DialogBody className="flex flex-col overflow-hidden h-full">
<div className="py-4 overflow-y-auto max-h-[600px] space-y-6"> <div className="py-4 overflow-y-auto max-h-[600px] space-y-6">
{/* Summary Info */} {/* Summary Info */}
{transactionDetails && ( {transactionDetails && (
@ -213,7 +212,6 @@ const handleExport = async () => {
</div> </div>
)} )}
{/* Log Table */}
<div className="border rounded-lg overflow-x-auto"> <div className="border rounded-lg overflow-x-auto">
{isLoading ? ( {isLoading ? (
<div className="flex flex-col items-center justify-center p-8"> <div className="flex flex-col items-center justify-center p-8">
@ -229,6 +227,32 @@ const handleExport = async () => {
<p className="mt-4 text-gray-500">Loading Logs Details...</p> <p className="mt-4 text-gray-500">Loading Logs Details...</p>
</div> </div>
) : ( ) : (
<>
<div className="flex justify-end m-5">
<button
className={`px-5 py-2 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 transition-colors flex items-center ${isExporting ? 'opacity-50 pointer-events-none' : ''}`}
onClick={() => {
if (!isExporting) {
handleExport();
}
}}
>
{isExporting ? (
<>
<span className="animate-spin ">
<KeenIcon icon="spinner" />
</span>
Exporting...
</>
) : (
<>
<KeenIcon icon="download" />
Export
</>
)}
</button>
</div>
<div className="max-h-[900px] overflow-y-auto border rounded-lg">
<table className="min-w-full table-auto"> <table className="min-w-full table-auto">
<thead> <thead>
<tr className="bg-gray-100"> <tr className="bg-gray-100">
@ -236,8 +260,12 @@ const handleExport = async () => {
<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">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">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">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">
<th className="px-4 py-2 text-left text-sm text-gray-500">Invoice Number</th> 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">Remark 1</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Remark 1</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Remark 2</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Remark 2</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Remark 3</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Remark 3</th>
@ -254,7 +282,9 @@ const handleExport = async () => {
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
{log.customer?.fullname ?? 'Not Found'} {log.customer?.fullname ?? 'Not Found'}
</td> </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.amount ?? '-'}
</td>
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
{renderStatusBadge(log.status) ?? '-'} {renderStatusBadge(log.status) ?? '-'}
</td> </td>
@ -266,9 +296,15 @@ const handleExport = async () => {
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
{log.reference ?? '-'} {log.reference ?? '-'}
</td> </td>
<td className="px-4 py-2 text-sm text-gray-500">{log.remark_1 ?? '-'}</td> <td className="px-4 py-2 text-sm text-gray-500">
<td className="px-4 py-2 text-sm text-gray-500">{log.remark_2 ?? '-'}</td> {log.remark_1 ?? '-'}
<td className="px-4 py-2 text-sm text-gray-500">{log.remark_3 ?? '-'}</td> </td>
<td className="px-4 py-2 text-sm text-gray-500">
{log.remark_2 ?? '-'}
</td>
<td className="px-4 py-2 text-sm text-gray-500">
{log.remark_3 ?? '-'}
</td>
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
<button <button
className="btn btn-sm btn-icon btn-clear btn-light" className="btn btn-sm btn-icon btn-clear btn-light"
@ -284,40 +320,19 @@ const handleExport = async () => {
)) ))
) : ( ) : (
<tr> <tr>
<td colSpan={10} className="px-4 py-2 text-center text-sm text-gray-500"> <td
colSpan={10}
className="px-4 py-2 text-center text-sm text-gray-500"
>
No logs available No logs available
</td> </td>
</tr> </tr>
)} )}
</tbody> </tbody>
</table> </table>
)}
</div> </div>
{/* Export Button - Moved to bottom right after table */}
<div className="flex justify-end">
<button
className={`px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center ${isExporting ? 'opacity-50 pointer-events-none' : ''}`}
onClick={() => {
if (!isExporting) {
handleExport();
}
}}
>
{isExporting ? (
<>
<span className="animate-spin mr-2">
<KeenIcon icon="spinner" />
</span>
Exporting...
</>
) : (
<>
<KeenIcon icon="download" className="mr-2" />
Export
</> </>
)} )}
</button>
</div> </div>
</div> </div>
</DialogBody> </DialogBody>