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

fix blank page on null data and set default value to 'Not Found'

Browse Source
This commit is contained in:
Wikzyy
2025-05-07 17:45:36 +07:00
parent 873d516988
commit 49ebe79a02
2 changed files with 168 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,12 +6,12 @@ import { apiConfig } from '@/config/api.config';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import moment from 'moment'; import moment from 'moment';
import { import {
Dialog, Dialog,
DialogBody, DialogBody,
DialogContent, DialogContent,
DialogDescription, DialogDescription,
DialogHeader, DialogHeader,
DialogTitle DialogTitle
} from '@/components/ui/dialog'; } from '@/components/ui/dialog';
import TransactionLogViewer from './DetailTransactionLog'; import TransactionLogViewer from './DetailTransactionLog';
@ -29,125 +29,182 @@ const statusMap: Record<StatusCode, StatusInfo> = {
W: { label: 'Waiting Schedule', bg: 'bg-yellow-100', text: 'text-yellow-600' }, W: { label: 'Waiting Schedule', bg: 'bg-yellow-100', text: 'text-yellow-600' },
O: { label: 'On Process', bg: 'bg-blue-100', text: 'text-blue-600' }, O: { label: 'On Process', bg: 'bg-blue-100', text: 'text-blue-600' },
F: { label: 'Fail', bg: 'bg-red-100', text: 'text-red-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) => { export const renderStatusBadge = (statusRaw: string | null | undefined) => {
const status = statusRaw as StatusCode; const status = statusRaw as StatusCode;
const { label, bg, text } = statusMap[status] ?? { const { label, bg, text } = statusMap[status] ?? {
label: 'Unknown', label: 'Unknown',
bg: 'bg-gray-100', bg: 'bg-gray-100',
text: 'text-gray-600', text: 'text-gray-600'
}; };
return ( 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>
{label} );
</span>
);
}; };
const DetailTransaction = () => { const DetailTransaction = () => {
const { GetData } = useCallApi(); const { GetData } = useCallApi();
const { const {
showDetailDialog, showDetailDialog,
setShowDetailDialog, setShowDetailDialog,
selectedTransactionId, selectedTransactionId,
setShowDetailLogDialog, setShowDetailLogDialog,
setDetailLogData setDetailLogData
} = useTransactionContext(); } = useTransactionContext();
const [transactionDetails, setTransactionDetails] = useState<any>(null); const [transactionDetails, setTransactionDetails] = useState<any>(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => { useEffect(() => {
const fetchTransactionDetails = async () => { const fetchTransactionDetails = async () => {
if (selectedTransactionId) { setIsLoading(true);
try { if (selectedTransactionId) {
const response = await GetData(`${API_URL}/transaction/history/${selectedTransactionId}`, { try {
id: selectedTransactionId const response = await GetData(
}); `${API_URL}/transaction/history/${selectedTransactionId}`,
// console.log(response?.data); {
setTransactionDetails(response?.data); id: selectedTransactionId
} catch (error) {
console.error('Error fetching transaction', error);
}
} }
}; );
// console.log(response?.data);
if (showDetailDialog && selectedTransactionId) { setTransactionDetails(response?.data);
fetchTransactionDetails(); } catch (error) {
console.error('Error fetching transaction', error);
} finally {
setIsLoading(false);
} }
}, [showDetailDialog, selectedTransactionId, GetData]); }
};
const [activeTab, setActiveTab] = useState('detail'); // 'detail', 'log', 'approve' if (showDetailDialog && selectedTransactionId) {
fetchTransactionDetails();
}
}, [showDetailDialog, selectedTransactionId, GetData]);
return ( const [activeTab, setActiveTab] = useState('detail'); // 'detail', 'log', 'approve'
<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
<DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden"> const resetForm = () => {
<DialogHeader> setTransactionDetails(null);
<DialogTitle>Transaction Details</DialogTitle> };
</DialogHeader>
<DialogBody> useEffect(() => {
{/* Tab Content */} if (!showDetailDialog) {
<div className="py-4 overflow-y-auto max-h-[400px]"> resetForm();
<div className="space-y-4"> }
<div className="border rounded-lg overflow-x-auto"> }, [showDetailDialog]);
<table className="min-w-full table-auto">
<thead> return (
<tr className="bg-gray-100"> <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
<th className="px-4 py-2 text-left text-sm text-gray-500">Username</th> <DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
<th className="px-4 py-2 text-left text-sm text-gray-500">Fullname</th> <DialogHeader>
<th className="px-4 py-2 text-left text-sm text-gray-500">Amount</th> <DialogTitle>Transaction Details</DialogTitle>
<th className="px-4 py-2 text-left text-sm text-gray-500">Status</th> </DialogHeader>
<th className="px-4 py-2 text-left text-sm text-gray-500">Process Date</th> <DialogBody>
<th className="px-4 py-2 text-left text-sm text-gray-500">Invoice Number</th> {/* Tab Content */}
<th className="px-4 py-2 text-left text-sm text-gray-500">Actions</th> <div className="py-4 overflow-y-auto max-h-[400px]">
<div className="space-y-4">
</tr> <div className="border rounded-lg overflow-x-auto">
</thead> {isLoading ? (
<tbody> <div className="flex flex-col items-center justify-center p-8">
{transactionDetails?.log && transactionDetails?.log.length > 0 ? ( <div className="animate-pulse flex space-x-4 w-full">
transactionDetails.log.map((log: { id: number, customer: any, amount: number, remark: string, reference: string, request_date: string, payment_response: string, status: string}, index: number) => ( <div className="flex-1 space-y-4 py-1">
<tr key={index} className="border-t"> <div className="h-4 bg-gray-200 rounded w-3/4"></div>
<td className="px-4 py-2 text-sm text-gray-500">{log.customer.username ?? '-'}</td> <div className="space-y-2">
<td className="px-4 py-2 text-sm text-gray-500">{log.customer.fullname ?? '-'}</td> <div className="h-4 bg-gray-200 rounded"></div>
<td className="px-4 py-2 text-sm text-gray-500">{log.amount ?? '-'}</td> <div className="h-4 bg-gray-200 rounded w-5/6"></div>
<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
</td>
</tr>
)}
</tbody>
</table>
</div>
</div> </div>
</div>
</div> </div>
</DialogBody> <p className="mt-4 text-gray-500">Loading Provider Details...</p>
</DialogContent> </div>
</Dialog> ) : (
); <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
</td>
</tr>
)}
</tbody>
</table>
)}
</div>
</div>
</div>
</DialogBody>
</DialogContent>
</Dialog>
);
}; };
export default DetailTransaction; export default DetailTransaction;

2
src/pages/disbursement/history-transaction/blocks/ListToolbar.tsx
View File

@ -31,7 +31,7 @@ const ListToolbar = () => {
const handleFilterData = useCallback(() => { const handleFilterData = useCallback(() => {
try { try {
table.getColumn('transaction_date')?.setFilterValue(trxDate); table.getColumn('execution_date')?.setFilterValue(trxDate);
} catch (error) { } catch (error) {
toast.error('Error applying filter'); toast.error('Error applying filter');
console.error('Error applying filter:', error); console.error('Error applying filter:', error);