disbursement fixing
This commit is contained in:
bagusajisaputroo
@ -5,15 +5,15 @@ import { useCallApi } from '@/hooks';
|
||||
import { apiConfig } from '@/config/api.config';
|
||||
import { useEffect, useState } from 'react';
|
||||
import moment from 'moment';
|
||||
import { getAuth } from '@/auth';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
Dialog,
|
||||
DialogBody,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle
|
||||
} from '@/components/ui/dialog';
|
||||
import TransactionLogViewer from './DetailTransactionLog';
|
||||
|
||||
const API_URL = apiConfig.service_disbursement;
|
||||
|
||||
@ -57,6 +57,7 @@ const DetailTransaction = () => {
|
||||
|
||||
const [transactionDetails, setTransactionDetails] = useState<any>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isExporting, setIsExporting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchTransactionDetails = async () => {
|
||||
@ -69,7 +70,6 @@ const DetailTransaction = () => {
|
||||
id: selectedTransactionId
|
||||
}
|
||||
);
|
||||
// console.log(response?.data);
|
||||
setTransactionDetails(response?.data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching transaction', error);
|
||||
@ -84,8 +84,6 @@ const DetailTransaction = () => {
|
||||
}
|
||||
}, [showDetailDialog, selectedTransactionId, GetData]);
|
||||
|
||||
const [activeTab, setActiveTab] = useState('detail'); // 'detail', 'log', 'approve'
|
||||
|
||||
const resetForm = () => {
|
||||
setTransactionDetails(null);
|
||||
};
|
||||
@ -96,109 +94,230 @@ const DetailTransaction = () => {
|
||||
}
|
||||
}, [showDetailDialog]);
|
||||
|
||||
const handleExport = async () => {
|
||||
if (!selectedTransactionId || !transactionDetails) return;
|
||||
|
||||
setIsExporting(true);
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${API_URL}/transaction/export?id_disbursment=${selectedTransactionId}`,
|
||||
{
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Authorization: `Bearer ${getAuth()?.access_token}`
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch file');
|
||||
}
|
||||
|
||||
const blob = await response.blob();
|
||||
const contentDisposition = response.headers.get('content-disposition');
|
||||
|
||||
const executionDate = transactionDetails.execution_date;
|
||||
const formattedDate = executionDate
|
||||
? moment(executionDate).format('YYYYMMDD_HHmm')
|
||||
: moment().format('YYYYMMDD_HHmm');
|
||||
|
||||
let filename = `transaction_${formattedDate}.xlsx`;
|
||||
|
||||
if (contentDisposition) {
|
||||
const filenameMatch = contentDisposition.match(/filename\*?=(?:UTF-8'')?"?([^;"\n]*)"?/);
|
||||
if (filenameMatch && filenameMatch[1]) {
|
||||
filename = decodeURIComponent(filenameMatch[1]);
|
||||
}
|
||||
}
|
||||
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
|
||||
toast.success('Export successful');
|
||||
} catch (error) {
|
||||
console.error('Error exporting transaction:', error);
|
||||
toast.error('Failed to export transaction');
|
||||
} finally {
|
||||
setIsExporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
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>
|
||||
<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>
|
||||
{/* 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">
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center p-8">
|
||||
<div className="animate-pulse flex space-x-4 w-full">
|
||||
<div className="flex-1 space-y-4 py-1">
|
||||
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 bg-gray-200 rounded"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
|
||||
</div>
|
||||
<div className="py-4 overflow-y-auto max-h-[600px] space-y-6">
|
||||
{/* Summary Info */}
|
||||
{transactionDetails && (
|
||||
<div className="grid grid-cols-2 gap-y-4 gap-x-6 border rounded-lg p-4 bg-gray-50">
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Filename Upload</p>
|
||||
<p className="text-base text-gray-800">{transactionDetails.file_name ?? '-'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Total Amount</p>
|
||||
<p className="text-base text-gray-800">{transactionDetails.amount ?? '-'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Total Record</p>
|
||||
<p className="text-base text-gray-800">
|
||||
{transactionDetails.total_record ?? '-'}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Success Record</p>
|
||||
<p className="text-base text-gray-800">
|
||||
{transactionDetails.total_success ?? '-'}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Fail Record</p>
|
||||
<p className="text-base text-gray-800">{transactionDetails.total_fail ?? '-'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Pending Record</p>
|
||||
<p className="text-base text-gray-800">
|
||||
{transactionDetails.total_pending ?? '-'}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Status</p>
|
||||
<p className="text-base text-gray-800">
|
||||
{renderStatusBadge(transactionDetails.status)}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Execution Date</p>
|
||||
<p className="text-base text-gray-800">
|
||||
{transactionDetails.execution_date
|
||||
? moment(transactionDetails.execution_date).format('DD/MM/YYYY HH:mm')
|
||||
: '-'}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">Done Date</p>
|
||||
<p className="text-base text-gray-800">
|
||||
{transactionDetails.done_date
|
||||
? moment(transactionDetails.done_date).format('DD/MM/YYYY HH:mm')
|
||||
: '-'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Log Table */}
|
||||
<div className="border rounded-lg overflow-x-auto">
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center p-8">
|
||||
<div className="animate-pulse flex space-x-4 w-full">
|
||||
<div className="flex-1 space-y-4 py-1">
|
||||
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 bg-gray-200 rounded"></div>
|
||||
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-4 text-gray-500">Loading Logs Details...</p>
|
||||
</div>
|
||||
) : (
|
||||
<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">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: {
|
||||
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 ?? 'Not Found'}
|
||||
</td>
|
||||
<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">
|
||||
{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('DD/MM/YYYY 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>
|
||||
)
|
||||
)
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={8} className="px-4 py-2 text-center text-sm text-gray-500">
|
||||
No logs available
|
||||
<p className="mt-4 text-gray-500">Loading Logs Details...</p>
|
||||
</div>
|
||||
) : (
|
||||
<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">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">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>
|
||||
<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: any, index: number) => (
|
||||
<tr key={index} className="border-t">
|
||||
<td className="px-4 py-2 text-sm text-gray-500">
|
||||
{log.customer?.username ?? 'Not Found'}
|
||||
</td>
|
||||
<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">
|
||||
{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('DD/MM/YYYY HH:mm')
|
||||
: '-'}
|
||||
</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.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"
|
||||
onClick={() => {
|
||||
setDetailLogData(log);
|
||||
setShowDetailLogDialog(true);
|
||||
}}
|
||||
>
|
||||
<KeenIcon icon="eye" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<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
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogBody>
|
||||
@ -207,4 +326,4 @@ const DetailTransaction = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default DetailTransaction;
|
||||
export default DetailTransaction;
|
||||
Reference in New Issue
Block a user