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

disbursement fixing

Browse Source
This commit is contained in:
bagusajisaputroo
2025-05-19 19:32:21 +07:00
parent 1a6bf1bab9
commit ff333b8f98
4 changed files with 489 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;

262
src/pages/disbursement/history-transaction/blocks/DetailTransactionLog.tsx
View File

@ -1,21 +1,13 @@
import React, { useState } from 'react';
import React 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;
}
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogBody
} from '@/components/ui/dialog';
type StatusCode = 'W' | 'O' | 'F' | 'D';
@ -29,97 +21,171 @@ 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' },
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 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();
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>
<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 className="overflow-y-auto max-h-[70vh] scroll-smooth scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100">
{detailLogData ? (
<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">Log ID</td>
<td className="px-4 py-2 text-sm text-gray-800">{detailLogData.id}</td>
</tr>
{detailLogData.customer && (
<>
<tr className="border-t">
<td className="px-4 py-2 text-sm text-gray-500">Customer ID</td>
<td className="px-4 py-2 text-sm text-gray-800">
{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-800">
{detailLogData.customer.username}
</td>
</tr>
<tr className="border-t">
<td className="px-4 py-2 text-sm text-gray-500">Fullname</td>
<td className="px-4 py-2 text-sm text-gray-800">
{detailLogData.customer.fullname}
</td>
</tr>
{detailLogData.customer.email && (
<tr className="border-t">
<td className="px-4 py-2 text-sm text-gray-500">Email</td>
<td className="px-4 py-2 text-sm text-gray-800">
{detailLogData.customer.email}
</td>
</tr>
)}
{detailLogData.customer.bank_name && (
<tr className="border-t">
<td className="px-4 py-2 text-sm text-gray-500">Bank Name</td>
<td className="px-4 py-2 text-sm text-gray-800">
{detailLogData.customer.bank_name}
</td>
</tr>
)}
{detailLogData.customer.bank_account && (
<tr className="border-t">
<td className="px-4 py-2 text-sm text-gray-500">Bank Account</td>
<td className="px-4 py-2 text-sm text-gray-800">
{detailLogData.customer.bank_account}
</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-800">{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-800">{detailLogData.remark}</td>
</tr>
<tr className="border-t">
<td className="px-4 py-2 text-sm text-gray-500">Remark 1</td>
<td className="px-4 py-2 text-sm text-gray-800">
{detailLogData.remark_1}
</td>
</tr>
<tr className="border-t">
<td className="px-4 py-2 text-sm text-gray-500">Remark 2</td>
<td className="px-4 py-2 text-sm text-gray-800">
{detailLogData.remark_2}
</td>
</tr>
<tr className="border-t">
<td className="px-4 py-2 text-sm text-gray-500">Remark 3</td>
<td className="px-4 py-2 text-sm text-gray-800">
{detailLogData.remark_3}
</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-800">
{detailLogData.reference ?? '-'}
</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-800">
<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-800">
<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-800">
{renderStatusBadge(detailLogData.status)}
</td>
</tr>
<tr className="border-t">
<td className="px-4 py-2 text-sm text-gray-500">Request Date</td>
<td className="px-4 py-2 text-sm text-gray-800">
{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-800">
{detailLogData.response_date &&
moment(detailLogData.response_date).isValid()
? moment(detailLogData.response_date).format('DD/MM/YYYY HH:mm:ss')
: '-'}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
) : (
<div className="text-center text-sm text-gray-400 py-10">No data available</div>
)}
</DialogBody>
</DialogContent>
</Dialog>
);
};

100
src/pages/disbursement/history-transaction/blocks/UploadBatchDialog.tsx
View File

@ -27,23 +27,28 @@ import clsx from 'clsx';
import { RefreshCw } from 'lucide-react';
const API_URL = apiConfig.service_disbursement;
const API_URL_TRANSACTION = apiConfig.service_transaction;
interface TransferType {
id: string;
name: string;
type: string;
}
const UploadBatchDialog = () => {
const parentRef = useRef<any | null>(null);
const { showUploadBatchDialog, handleUploadBatchDialog } = useTransactionContext();
const { reload } = useDataGrid();
const { PostData, PostDataFile, GetData } = useCallApi();
const { PostDataFile, GetData } = useCallApi();
const [isSubmitting, setIsSubmitting] = useState(false);
const [alert, setAlert] = useState({
show: false,
message: ''
});
const initialState: {
execution_date: string;
file: File | null;
} = {
const [alert, setAlert] = useState({ show: false, message: '' });
const [transferTypes, setTransferTypes] = useState<TransferType[]>([]);
const initialState = {
execution_date: '',
file: null
file: null as File | null,
id_transaction_type: ''
};
const [formField, setFormField] = useState(initialState);
@ -52,14 +57,17 @@ const UploadBatchDialog = () => {
setAlert({ show: false, message: '' });
};
/* actions */
const doUploadBatch = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setIsSubmitting(true);
const formData = new FormData();
formData.append('execution_date', formField.execution_date);
const localDate = new Date(formField.execution_date);
const newDate = localDate.toISOString();
formData.append('execution_date', newDate);
formData.append('id_transaction_type', formField.id_transaction_type);
if (formField.file) {
formData.append('file', formField.file);
@ -67,9 +75,7 @@ const UploadBatchDialog = () => {
try {
const response = await PostDataFile(`${API_URL}/upload-excel`, formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
headers: { 'Content-Type': 'multipart/form-data' }
});
if (response?.status) {
@ -102,26 +108,52 @@ const UploadBatchDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
console.log('Form data before submit:', formField);
if (formField.execution_date.trim() === '' || formField.file === null) {
if (
formField.execution_date.trim() === '' ||
formField.file === null ||
formField.id_transaction_type.trim() === ''
) {
setAlert({ show: true, message: 'Please fill in all required fields.' });
return;
}
doUploadBatch(e);
// console.log(formField);
setAlert({ show: false, message: '' });
};
useEffect(() => {
if (showUploadBatchDialog === false) {
resetForm();
return;
}
const fetchTransferTypes = async () => {
try {
const response = await GetData(`${API_URL_TRANSACTION}/transactiontype/list`, {
limit: 100,
page: 1,
with_deleted: false,
order_field: 'id',
order_direction: 'ASC',
filter: JSON.stringify({})
});
const validTypes = ['DM', 'DA', 'DE'];
const records: TransferType[] = response?.data?.list ?? [];
const filtered = records.filter((item) => validTypes.includes(item.type));
setTransferTypes(filtered);
} catch (error) {
console.error('Failed to fetch transfer types', error);
}
};
fetchTransferTypes();
}, [showUploadBatchDialog]);
return (
<Dialog open={showUploadBatchDialog} onOpenChange={(open) => handleUploadBatchDialog(open)}>
<Dialog open={showUploadBatchDialog} onOpenChange={handleUploadBatchDialog}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
<DialogHeader className="p-0 border-0">
<DialogTitle></DialogTitle>
@ -129,7 +161,6 @@ const UploadBatchDialog = () => {
<div className="flex items-center justify-between flex-wrap grow">
<div className="flex flex-col justify-center">
<h1 className="text-xl font-semibold leading-none text-gray-900">Upload Batch</h1>
<div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
</div>
<div
className="cursor-pointer hover:opacity-100 opacity-50"
@ -149,7 +180,7 @@ const UploadBatchDialog = () => {
<h3>{alert.message}</h3>
</Alert>
)}
<form action="" onSubmit={handleSubmit}>
<form onSubmit={handleSubmit}>
<div className="card-body grid gap-5 p-0">
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
@ -182,6 +213,31 @@ const UploadBatchDialog = () => {
/>
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Transfer Type
</label>
<Select
required
value={formField.id_transaction_type}
onValueChange={(val) =>
setFormField((prev) => ({ ...prev, id_transaction_type: val }))
}
>
<SelectTrigger className="w-full lg:w-[420px]">
<SelectValue placeholder="Select Transfer Type" />
</SelectTrigger>
<SelectContent>
{transferTypes.map((item) => (
<SelectItem key={item.id} value={item.id}>
{item.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
<div className="flex justify-end pt-2.5">
<Button variant="default" type="submit" disabled={isSubmitting}>
{isSubmitting ? (

59
src/pages/disbursement/history-transaction/hooks/TransactionContext.tsx
View File

@ -36,22 +36,22 @@ interface ContextProps {
// handleDetailLogDialog: (show: boolean) => void;
setShowDetailLogDialog: React.Dispatch<React.SetStateAction<boolean>>;
setDetailLogData: React.Dispatch<React.SetStateAction<any | null>>;
detailLogData: any | null
detailLogData: any | null;
}
const initialProps: ContextProps = {
getTransactionLists: async () => ({ data: [], totalCount: 0 }),
showDetailDialog: false,
setShowDetailDialog: () => { },
setShowDetailDialog: () => {},
selectedTransactionId: null,
setSelectedTransactionId: () => { },
setSelectedTransactionId: () => {},
showUploadBatchDialog: false,
handleUploadBatchDialog: (show: boolean) => {},
showDetailLogDialog: false,
// handleDetailLogDialog: (show: boolean) => {},
setShowDetailLogDialog: () => { },
setShowDetailLogDialog: () => {},
setDetailLogData: () => {},
detailLogData: null,
detailLogData: null
};
type StatusCode = 'W' | 'P' | 'F' | 'D' | 'Y';
@ -67,10 +67,9 @@ const statusMap: Record<StatusCode, StatusInfo> = {
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' },
Y: { label: 'Active', bg: 'bg-green-100', text: 'text-green-600' }
};
const ManageTransactionContext = createContext<ContextProps>(initialProps);
const API_URL = apiConfig.service_disbursement;
@ -83,7 +82,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
const [transaction, setTransaction] = useState<TransactionProps[]>([]);
const { GetData } = useCallApi();
const navigate = useNavigate();
const handleUploadBatchDialog = useCallback((show: boolean) => {
setShowUploadBatchDialog(show);
}, []);
@ -100,19 +99,21 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
},
}
},
{
accessorFn: (row) => {
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(row.amount);
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(
row.amount
);
},
id: 'amount',
header: ({ column }) => <DataGridColumnHeader title="Amount" column={column} />,
enableSorting: false,
enableHiding: false,
meta: {
headerClassName: 'w-[250px]',
},
headerClassName: 'w-[250px]'
}
},
{
accessorKey: 'total_record',
@ -121,7 +122,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
},
}
},
{
accessorKey: 'total_success',
@ -130,7 +131,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
},
}
},
{
accessorKey: 'total_fail',
@ -139,7 +140,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
},
}
},
{
accessorKey: 'total_pending',
@ -148,7 +149,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
enableHiding: false,
meta: {
headerClassName: 'w-[250px]'
},
}
},
{
accessorFn: (row) => row.status,
@ -161,21 +162,19 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
const { label, bg, text } = statusMap[status] ?? {
label: 'Unknown',
bg: 'bg-gray-100',
text: 'text-gray-600',
text: 'text-gray-600'
};
return (
<span
className={`px-2 py-1 text-xs font-semibold rounded-full ${bg} ${text}`}
>
<span className={`px-2 py-1 text-xs font-semibold rounded-full ${bg} ${text}`}>
{label}
</span>
);
},
meta: {
headerClassName: 'w-[100px]',
cellClassName: 'text-center',
},
cellClassName: 'text-center'
}
},
{
accessorFn: (row) => row.execution_date,
@ -183,7 +182,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
header: ({ column }) => <DataGridColumnHeader title="Execution Date" column={column} />,
enableSorting: true,
enableHiding: false,
cell: ({ row }) => moment(row.original.execution_date).format('DD/MM/YYYY HH:mm:ss')
cell: ({ row }) => moment(row.original.execution_date).format('DD/MM/YYYY HH:mm')
},
{
accessorFn: (row) => row.done_date,
@ -191,7 +190,8 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
header: ({ column }) => <DataGridColumnHeader title="Done Date" column={column} />,
enableSorting: true,
enableHiding: false,
cell: ({ row }) => row.original.done_date ? moment(row.original.done_date).format('DD/MM/YYYY HH:mm:ss') : ''
cell: ({ row }) =>
row.original.done_date ? moment(row.original.done_date).format('DD/MM/YYYY HH:mm') : ''
},
{
id: 'actions',
@ -220,7 +220,8 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
}
}
],
[]);
[]
);
const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => {
try {
@ -240,15 +241,13 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => {
enddate = filter[0].value.to;
}
formattedFilter = {
};
formattedFilter = {};
const response = await GetData(`${API_URL}/transaction/history`, {
limit,
page: page + 1,
with_deleted: false,
order_field: "execution_date",
order_field: 'execution_date',
order_direction: 'DESC',
filter: JSON.stringify(formattedFilter)
});