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

update

Browse Source
This commit is contained in:
wayanrivan
2025-05-19 15:00:58 +07:00
parent 496ecc2505
commit 30971718bf
2 changed files with 124 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/pages/transaction/approval-transaction/blocks/DetailApprovalTransaction.tsx
View File

@ -107,6 +107,35 @@ const DetailApprovalTransaction = () => {
return null; return null;
}; };
const [formattedJson, setFormattedJson] = useState('');
const [highlightedJson, setHighlightedJson] = useState('');
useEffect(() => {
const obj = { a: 1, 'b': 'foo', c: [false, 'false', null, 'null', { d: { e: 1.3e5, f: '1.3e5' } }] };
const str = JSON.stringify(obj, undefined, 4);
setFormattedJson(str);
setHighlightedJson(syntaxHighlight(str));
}, []);
function syntaxHighlight(json: any) {
json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])"(\s:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match: any) {
let cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span className="' + cls + '">' + match + '</span>';
});
}
return ( return (
<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}> <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
@ -666,7 +695,7 @@ const DetailApprovalTransaction = () => {
{transactionDetails?.log && transactionDetails?.log.length > 0 ? ( {transactionDetails?.log && transactionDetails?.log.length > 0 ? (
transactionDetails.log.map((log: { type: string, request_endpoint: string, status: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => ( transactionDetails.log.map((log: { type: string, request_endpoint: string, status: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
<tr key={index} className="border-t"> <tr key={index} className="border-t">
<td className="px-4 py-2 text-sm text-gray-500">{log.type}</td> <td className="px-4 py-2 text-sm text-gray-500">{log.type || ''}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_date <td className="px-4 py-2 text-sm text-gray-500">{log.request_date
? new Date(log.request_date).toLocaleDateString('en-GB', { ? new Date(log.request_date).toLocaleDateString('en-GB', {
day: '2-digit', day: '2-digit',
@ -689,9 +718,30 @@ const DetailApprovalTransaction = () => {
hour12: false hour12: false
}) })
: ''}</td> : ''}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_body}</td> <td className="px-4 py-2 text-sm text-gray-500">
<td className="px-4 py-2 text-sm text-gray-500">{log.response_body}</td> <pre
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint}</td> dangerouslySetInnerHTML={{
__html: syntaxHighlight(
typeof (log.request_body ?? '') === 'string'
? (log.request_body ?? '')
: JSON.stringify(log.request_body ?? '', null, 4)
),
}}
/>
</td>
<td className="px-4 py-2 text-sm text-gray-500">
<pre
dangerouslySetInnerHTML={{
__html: syntaxHighlight(
typeof (log.response_body ?? '') === 'string'
? (log.response_body ?? '')
: JSON.stringify(log.response_body ?? '', null, 4)
),
}}
/>
</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint || ''}</td>
</tr> </tr>
)) ))
) : ( ) : (
@ -792,7 +842,7 @@ const DetailApprovalTransaction = () => {
{transactionDetails?.p24 && transactionDetails?.p24.length > 0 ? ( {transactionDetails?.p24 && transactionDetails?.p24.length > 0 ? (
transactionDetails.p24.map((log: { request_endpoint: string, type: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => ( transactionDetails.p24.map((log: { request_endpoint: string, type: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
<tr key={index} className="border-t"> <tr key={index} className="border-t">
<td className="px-4 py-2 text-sm text-gray-500">{log.type}</td> <td className="px-4 py-2 text-sm text-gray-500">{log.type ?? ''}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_date <td className="px-4 py-2 text-sm text-gray-500">{log.request_date
? new Date(log.request_date).toLocaleDateString('en-GB', { ? new Date(log.request_date).toLocaleDateString('en-GB', {
day: '2-digit', day: '2-digit',
@ -816,9 +866,30 @@ const DetailApprovalTransaction = () => {
hour12: false hour12: false
}) })
: ''}</td> : ''}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_body}</td> <td className="px-4 py-2 text-sm text-gray-500">
<td className="px-4 py-2 text-sm text-gray-500">{log.response_body}</td> <pre
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? '-'}</td> dangerouslySetInnerHTML={{
__html: syntaxHighlight(
typeof (log.request_body ?? '') === 'string'
? (log.request_body ?? '')
: JSON.stringify(log.request_body ?? '', null, 4)
),
}}
/>
</td>
<td className="px-4 py-2 text-sm text-gray-500">
<pre
dangerouslySetInnerHTML={{
__html: syntaxHighlight(
typeof (log.response_body ?? '') === 'string'
? (log.response_body ?? '')
: JSON.stringify(log.response_body ?? '', null, 4)
),
}}
/>
</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? ''}</td>
</tr> </tr>
)) ))
) : ( ) : (

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

@ -49,6 +49,7 @@ const DetailTransaction = () => {
id: selectedTransactionId id: selectedTransactionId
}); });
setTransactionDetails(response?.data); setTransactionDetails(response?.data);
// console.log(response?.data);
// console.log(selectedTransactionId); // console.log(selectedTransactionId);
} catch (error) { } catch (error) {
console.error('Error fetching transaction', error); console.error('Error fetching transaction', error);
@ -165,14 +166,14 @@ const DetailTransaction = () => {
<DialogBody> <DialogBody>
{/* Tabs Navigation */} {/* Tabs Navigation */}
<div className="flex border-b border-gray-200"> <div className="flex border-b border-gray-200">
{transactionDetails?.kind == 'P' && ( {/* {transactionDetails?.kind == 'P' && ( */}
<button <button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'detail' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`} className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'detail' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
onClick={() => setActiveTab('detail')} onClick={() => setActiveTab('detail')}
> >
Detail Transaction Detail Transaction
</button> </button>
)} {/* )} */}
<button <button
className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'origincustomer' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`} className={`py-2 px-4 font-medium text-sm focus:outline-none ${activeTab === 'origincustomer' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
@ -724,7 +725,7 @@ const DetailTransaction = () => {
<th className="px-4 py-2 text-left text-sm text-gray-500">Type</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Type</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Date</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Response Date</th>
{/* <th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th> */} <th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
</tr> </tr>
@ -733,7 +734,7 @@ const DetailTransaction = () => {
{transactionDetails?.log && transactionDetails?.log.length > 0 ? ( {transactionDetails?.log && transactionDetails?.log.length > 0 ? (
transactionDetails.log.map((log: { type: string, request_endpoint: string, status: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => ( transactionDetails.log.map((log: { type: string, request_endpoint: string, status: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
<tr key={index} className="border-t"> <tr key={index} className="border-t">
<td className="px-4 py-2 text-sm text-gray-500">{log.type}</td> <td className="px-4 py-2 text-sm text-gray-500">{log.type || ''}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_date <td className="px-4 py-2 text-sm text-gray-500">{log.request_date
? new Date(log.request_date).toLocaleDateString('en-GB', { ? new Date(log.request_date).toLocaleDateString('en-GB', {
day: '2-digit', day: '2-digit',
@ -756,19 +757,30 @@ const DetailTransaction = () => {
hour12: false hour12: false
}) })
: ''}</td> : ''}</td>
{/* <td className="px-4 py-2 text-sm text-gray-500">{log.request_body}</td> */}
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
<pre <pre
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: syntaxHighlight( __html: syntaxHighlight(
typeof log.response_body === 'string' typeof (log.request_body ?? '') === 'string'
? log.response_body ? (log.request_body ?? '')
: JSON.stringify(log.response_body, null, 4) : JSON.stringify(log.request_body ?? '', null, 4)
), ),
}} }}
/> />
</td> </td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint}</td> <td className="px-4 py-2 text-sm text-gray-500">
<pre
dangerouslySetInnerHTML={{
__html: syntaxHighlight(
typeof (log.response_body ?? '') === 'string'
? (log.response_body ?? '')
: JSON.stringify(log.response_body ?? '', null, 4)
),
}}
/>
</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint || ''}</td>
</tr> </tr>
)) ))
) : ( ) : (
@ -860,7 +872,7 @@ const DetailTransaction = () => {
<th className="px-4 py-2 text-left text-sm text-gray-500">Type</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Type</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Request Date</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Date</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Response Date</th>
{/* <th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th> */} <th className="px-4 py-2 text-left text-sm text-gray-500">Response Body</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Response Code</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Request Endpoint</th>
</tr> </tr>
@ -869,7 +881,7 @@ const DetailTransaction = () => {
{transactionDetails?.p24 && transactionDetails?.p24.length > 0 ? ( {transactionDetails?.p24 && transactionDetails?.p24.length > 0 ? (
transactionDetails.p24.map((log: { request_endpoint: string, type: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => ( transactionDetails.p24.map((log: { request_endpoint: string, type: string; request_date: string; response_date: string; request_body: string; response_body: string; response_code: number }, index: number) => (
<tr key={index} className="border-t"> <tr key={index} className="border-t">
<td className="px-4 py-2 text-sm text-gray-500">{log.type}</td> <td className="px-4 py-2 text-sm text-gray-500">{log.type ?? ''}</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_date <td className="px-4 py-2 text-sm text-gray-500">{log.request_date
? new Date(log.request_date).toLocaleDateString('en-GB', { ? new Date(log.request_date).toLocaleDateString('en-GB', {
day: '2-digit', day: '2-digit',
@ -893,19 +905,30 @@ const DetailTransaction = () => {
hour12: false hour12: false
}) })
: ''}</td> : ''}</td>
{/* <td className="px-4 py-2 text-sm text-gray-500">{log.request_body}</td> */}
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
<pre <pre
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: syntaxHighlight( __html: syntaxHighlight(
typeof log.response_body === 'string' typeof (log.request_body ?? '') === 'string'
? log.response_body ? (log.request_body ?? '')
: JSON.stringify(log.response_body, null, 4) : JSON.stringify(log.request_body ?? '', null, 4)
), ),
}} }}
/> />
</td> </td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? '-'}</td> <td className="px-4 py-2 text-sm text-gray-500">
<pre
dangerouslySetInnerHTML={{
__html: syntaxHighlight(
typeof (log.response_body ?? '') === 'string'
? (log.response_body ?? '')
: JSON.stringify(log.response_body ?? '', null, 4)
),
}}
/>
</td>
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? ''}</td>
</tr> </tr>
)) ))
) : ( ) : (