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-20 10:14:07 +07:00
parent 3bbe78b38a
commit 3e731b60b5
2 changed files with 139 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -107,34 +107,34 @@ const DetailApprovalTransaction = () => {
return null; return null;
}; };
const [formattedJson, setFormattedJson] = useState(''); // const [formattedJson, setFormattedJson] = useState('');
const [highlightedJson, setHighlightedJson] = useState(''); // const [highlightedJson, setHighlightedJson] = useState('');
useEffect(() => { // useEffect(() => {
const obj = { a: 1, 'b': 'foo', c: [false, 'false', null, 'null', { d: { e: 1.3e5, f: '1.3e5' } }] }; // 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); // const str = JSON.stringify(obj, undefined, 4);
setFormattedJson(str); // setFormattedJson(str);
setHighlightedJson(syntaxHighlight(str)); // setHighlightedJson(syntaxHighlight(str));
}, []); // }, []);
function syntaxHighlight(json: any) { // function syntaxHighlight(json: any) {
json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); // 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) { // 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'; // let cls = 'number';
if (/^"/.test(match)) { // if (/^"/.test(match)) {
if (/:$/.test(match)) { // if (/:$/.test(match)) {
cls = 'key'; // cls = 'key';
} else { // } else {
cls = 'string'; // cls = 'string';
} // }
} else if (/true|false/.test(match)) { // } else if (/true|false/.test(match)) {
cls = 'boolean'; // cls = 'boolean';
} else if (/null/.test(match)) { // } else if (/null/.test(match)) {
cls = 'null'; // cls = 'null';
} // }
return '<span className="' + cls + '">' + match + '</span>'; // return '<span className="' + cls + '">' + match + '</span>';
}); // });
} // }
return ( return (
@ -719,26 +719,15 @@ const DetailApprovalTransaction = () => {
}) })
: ''}</td> : ''}</td>
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
<pre {
dangerouslySetInnerHTML={{ JSON.stringify(log.request_body ?? '', null, 2)
__html: syntaxHighlight( }
typeof (log.request_body ?? '') === 'string'
? (log.request_body ?? '')
: JSON.stringify(log.request_body ?? '', null, 4)
),
}}
/>
</td> </td>
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
<pre {
dangerouslySetInnerHTML={{ JSON.stringify(log.response_body ?? '', null, 2)
__html: syntaxHighlight( }
typeof (log.response_body ?? '') === 'string'
? (log.response_body ?? '')
: JSON.stringify(log.response_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">{log.request_endpoint || ''}</td>
@ -867,26 +856,15 @@ const DetailApprovalTransaction = () => {
}) })
: ''}</td> : ''}</td>
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
<pre {
dangerouslySetInnerHTML={{ JSON.stringify(log.request_body ?? '', null, 2)
__html: syntaxHighlight( }
typeof (log.request_body ?? '') === 'string'
? (log.request_body ?? '')
: JSON.stringify(log.request_body ?? '', null, 4)
),
}}
/>
</td> </td>
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
<pre {
dangerouslySetInnerHTML={{ JSON.stringify(log.response_body ?? '', null, 2)
__html: syntaxHighlight( }
typeof (log.response_body ?? '') === 'string'
? (log.response_body ?? '')
: JSON.stringify(log.response_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">{log.request_endpoint ?? ''}</td>

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

@ -126,34 +126,34 @@ const DetailTransaction = () => {
return null; return null;
}; };
const [formattedJson, setFormattedJson] = useState(''); // const [formattedJson, setFormattedJson] = useState('');
const [highlightedJson, setHighlightedJson] = useState(''); // const [highlightedJson, setHighlightedJson] = useState('');
useEffect(() => { // useEffect(() => {
const obj = { a: 1, 'b': 'foo', c: [false, 'false', null, 'null', { d: { e: 1.3e5, f: '1.3e5' } }] }; // 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); // const str = JSON.stringify(obj, undefined, 4);
setFormattedJson(str); // setFormattedJson(str);
setHighlightedJson(syntaxHighlight(str)); // setHighlightedJson(syntaxHighlight(str));
}, []); // }, []);
function syntaxHighlight(json: any) { // function syntaxHighlight(json: any) {
json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); // 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) { // 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'; // let cls = 'number';
if (/^"/.test(match)) { // if (/^"/.test(match)) {
if (/:$/.test(match)) { // if (/:$/.test(match)) {
cls = 'key'; // cls = 'key';
} else { // } else {
cls = 'string'; // cls = 'string';
} // }
} else if (/true|false/.test(match)) { // } else if (/true|false/.test(match)) {
cls = 'boolean'; // cls = 'boolean';
} else if (/null/.test(match)) { // } else if (/null/.test(match)) {
cls = 'null'; // cls = 'null';
} // }
return '<span className="' + cls + '">' + match + '</span>'; // return '<span className="' + cls + '">' + match + '</span>';
}); // });
} // }
return ( return (
<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}> <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
@ -780,26 +780,15 @@ const DetailTransaction = () => {
}) })
: ''}</td> : ''}</td>
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
<pre {
dangerouslySetInnerHTML={{ JSON.stringify(log.request_body ?? '', null, 2)
__html: syntaxHighlight( }
typeof (log.request_body ?? '') === 'string'
? (log.request_body ?? '')
: JSON.stringify(log.request_body ?? '', null, 4)
),
}}
/>
</td> </td>
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
<pre {
dangerouslySetInnerHTML={{ JSON.stringify(log.response_body ?? '', null, 2)
__html: syntaxHighlight( }
typeof (log.response_body ?? '') === 'string'
? (log.response_body ?? '')
: JSON.stringify(log.response_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">{log.request_endpoint || ''}</td>
@ -819,67 +808,67 @@ const DetailTransaction = () => {
)} )}
{activeTab === 'approve' && transactionDetails?.kind == "P" && ( {activeTab === 'approve' && transactionDetails?.kind == "P" && (
<div className="space-y-4"> <div className="space-y-4">
<h3 className="font-semibold">Approval Logs</h3> <h3 className="font-semibold">Approval Logs</h3>
{transactionDetails?.log_approve.length === 0 ? ( {transactionDetails?.log_approve.length === 0 ? (
<p className="text-sm text-gray-500">No data available</p> <p className="text-sm text-gray-500">No data available</p>
) : ( ) : (
<div className="border rounded-lg overflow-x-auto"> <div className="border rounded-lg overflow-x-auto">
<table className="min-w-full table-auto"> <table className="min-w-full table-auto">
<thead> <thead>
<tr className="bg-gray-100"> <tr className="bg-gray-100">
<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">Status</th>
<th className="px-4 py-2 text-left text-sm text-gray-500">Date</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Date</th>
{/* <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th> */} {/* <th className="px-4 py-2 text-left text-sm text-gray-500">Updated At</th> */}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{transactionDetails?.log_approve && transactionDetails?.log_approve.length > 0 ? ( {transactionDetails?.log_approve && transactionDetails?.log_approve.length > 0 ? (
transactionDetails.log_approve.map((log: { created_at: string; status: string; updated_at: string }, index: number) => ( transactionDetails.log_approve.map((log: { created_at: string; status: string; updated_at: string }, index: number) => (
<tr key={index} className="border-t"> <tr key={index} className="border-t">
<td className="px-4 py-2 font-medium"> <td className="px-4 py-2 font-medium">
{(() => { {(() => {
let status; let status;
if (log.status === 'W') { if (log.status === 'W') {
status = 'WAITING'; status = 'WAITING';
} else if (log.status === 'Y') { } else if (log.status === 'Y') {
status = 'APPROVE'; status = 'APPROVE';
} else if (log.status === 'N') { } else if (log.status === 'N') {
status = 'REJECT'; status = 'REJECT';
} else if (log.status === 'T') { } else if (log.status === 'T') {
status = 'NO NEED'; status = 'NO NEED';
} }
return status; return status;
})()} })()}
</td>
<td className="px-4 py-2 text-sm text-gray-500">
{new Date(log.created_at).toLocaleString('sv-SE', {
timeZone: 'Asia/Jakarta', // kalau kamu mau waktu lokal (optional)
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
}).replace(' ', ' ')}
</td>
{/* <td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td> */}
</tr>
))
) : (
<tr>
<td colSpan={3} className="px-4 py-2 text-center text-sm text-gray-500">
No logs available
</td> </td>
<td className="px-4 py-2 text-sm text-gray-500">
{new Date(log.created_at).toLocaleString('sv-SE', {
timeZone: 'Asia/Jakarta', // kalau kamu mau waktu lokal (optional)
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
}).replace(' ', ' ')}
</td>
{/* <td className="px-4 py-2 text-sm text-gray-500">{log.updated_at}</td> */}
</tr> </tr>
)} ))
</tbody> ) : (
</table> <tr>
</div> <td colSpan={3} className="px-4 py-2 text-center text-sm text-gray-500">
)} No logs available
</div> </td>
)} </tr>
)}
</tbody>
</table>
</div>
)}
</div>
)}
{activeTab === 'p24' && ( {activeTab === 'p24' && (
<div className="space-y-4"> <div className="space-y-4">
@ -928,26 +917,15 @@ const DetailTransaction = () => {
}) })
: ''}</td> : ''}</td>
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
<pre {
dangerouslySetInnerHTML={{ JSON.stringify(log.request_body ?? '', null, 2)
__html: syntaxHighlight( }
typeof (log.request_body ?? '') === 'string'
? (log.request_body ?? '')
: JSON.stringify(log.request_body ?? '', null, 4)
),
}}
/>
</td> </td>
<td className="px-4 py-2 text-sm text-gray-500"> <td className="px-4 py-2 text-sm text-gray-500">
<pre {
dangerouslySetInnerHTML={{ JSON.stringify(log.response_body ?? '', null, 2)
__html: syntaxHighlight( }
typeof (log.response_body ?? '') === 'string'
? (log.response_body ?? '')
: JSON.stringify(log.response_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">{log.request_endpoint ?? ''}</td>