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

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

@ -146,14 +146,13 @@ const handleExport = async () => {
}
};
return (
<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
<DialogContent className="container-fixed max-w-[1280px] w-full h-[90vh] flex flex-col p-6 overflow-hidden">
<DialogHeader>
<DialogTitle className="text-2xl font-bold">Transaction Details</DialogTitle>
</DialogHeader>
<DialogBody>
<DialogBody className="flex flex-col overflow-hidden h-full">
<div className="py-4 overflow-y-auto max-h-[600px] space-y-6">
{/* Summary Info */}
{transactionDetails && (
@ -213,7 +212,6 @@ const handleExport = async () => {
</div>
)}
{/* Log Table */}
<div className="border rounded-lg overflow-x-auto">
{isLoading ? (
<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>
</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">
<thead>
<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">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">
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 2</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">
{log.customer?.fullname ?? 'Not Found'}
</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">
{renderStatusBadge(log.status) ?? '-'}
</td>
@ -266,9 +296,15 @@ const handleExport = async () => {
<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.remark_1 ?? '-'}</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">
{log.remark_1 ?? '-'}
</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">
<button
className="btn btn-sm btn-icon btn-clear btn-light"
@ -284,40 +320,19 @@ const handleExport = async () => {
))
) : (
<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
</td>
</tr>
)}
</tbody>
</table>
)}
</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>
</DialogBody>