update
This commit is contained in:
wayanrivan
@ -107,34 +107,34 @@ const DetailApprovalTransaction = () => {
|
||||
return null;
|
||||
};
|
||||
|
||||
const [formattedJson, setFormattedJson] = useState('');
|
||||
const [highlightedJson, setHighlightedJson] = useState('');
|
||||
// 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));
|
||||
}, []);
|
||||
// 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, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
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>';
|
||||
});
|
||||
}
|
||||
// function syntaxHighlight(json: any) {
|
||||
// json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
// 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 (
|
||||
@ -719,26 +719,15 @@ const DetailApprovalTransaction = () => {
|
||||
})
|
||||
: ''}</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">
|
||||
<pre
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: syntaxHighlight(
|
||||
typeof (log.request_body ?? '') === 'string'
|
||||
? (log.request_body ?? '')
|
||||
: JSON.stringify(log.request_body ?? '', null, 4)
|
||||
),
|
||||
}}
|
||||
/>
|
||||
{
|
||||
JSON.stringify(log.request_body ?? '', null, 2)
|
||||
}
|
||||
|
||||
</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)
|
||||
),
|
||||
}}
|
||||
/>
|
||||
{
|
||||
JSON.stringify(log.response_body ?? '', null, 2)
|
||||
}
|
||||
</td>
|
||||
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint || ''}</td>
|
||||
@ -867,26 +856,15 @@ const DetailApprovalTransaction = () => {
|
||||
})
|
||||
: ''}</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">
|
||||
<pre
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: syntaxHighlight(
|
||||
typeof (log.request_body ?? '') === 'string'
|
||||
? (log.request_body ?? '')
|
||||
: JSON.stringify(log.request_body ?? '', null, 4)
|
||||
),
|
||||
}}
|
||||
/>
|
||||
{
|
||||
JSON.stringify(log.request_body ?? '', null, 2)
|
||||
}
|
||||
|
||||
</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)
|
||||
),
|
||||
}}
|
||||
/>
|
||||
{
|
||||
JSON.stringify(log.response_body ?? '', null, 2)
|
||||
}
|
||||
</td>
|
||||
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? ''}</td>
|
||||
|
||||
@ -126,34 +126,34 @@ const DetailTransaction = () => {
|
||||
return null;
|
||||
};
|
||||
|
||||
const [formattedJson, setFormattedJson] = useState('');
|
||||
const [highlightedJson, setHighlightedJson] = useState('');
|
||||
// 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));
|
||||
}, []);
|
||||
// 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, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
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>';
|
||||
});
|
||||
}
|
||||
// function syntaxHighlight(json: any) {
|
||||
// json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
// 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 (
|
||||
<Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
|
||||
@ -780,26 +780,15 @@ const DetailTransaction = () => {
|
||||
})
|
||||
: ''}</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">
|
||||
<pre
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: syntaxHighlight(
|
||||
typeof (log.request_body ?? '') === 'string'
|
||||
? (log.request_body ?? '')
|
||||
: JSON.stringify(log.request_body ?? '', null, 4)
|
||||
),
|
||||
}}
|
||||
/>
|
||||
{
|
||||
JSON.stringify(log.request_body ?? '', null, 2)
|
||||
}
|
||||
|
||||
</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)
|
||||
),
|
||||
}}
|
||||
/>
|
||||
{
|
||||
JSON.stringify(log.response_body ?? '', null, 2)
|
||||
}
|
||||
</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" && (
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold">Approval Logs</h3>
|
||||
{transactionDetails?.log_approve.length === 0 ? (
|
||||
<p className="text-sm text-gray-500">No data available</p>
|
||||
) : (
|
||||
<div className="border rounded-lg overflow-x-auto">
|
||||
<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">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">Updated At</th> */}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{transactionDetails?.log_approve && transactionDetails?.log_approve.length > 0 ? (
|
||||
transactionDetails.log_approve.map((log: { created_at: string; status: string; updated_at: string }, index: number) => (
|
||||
<tr key={index} className="border-t">
|
||||
<td className="px-4 py-2 font-medium">
|
||||
{(() => {
|
||||
let status;
|
||||
if (log.status === 'W') {
|
||||
status = 'WAITING';
|
||||
} else if (log.status === 'Y') {
|
||||
status = 'APPROVE';
|
||||
} else if (log.status === 'N') {
|
||||
status = 'REJECT';
|
||||
} else if (log.status === 'T') {
|
||||
status = 'NO NEED';
|
||||
}
|
||||
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
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-semibold">Approval Logs</h3>
|
||||
{transactionDetails?.log_approve.length === 0 ? (
|
||||
<p className="text-sm text-gray-500">No data available</p>
|
||||
) : (
|
||||
<div className="border rounded-lg overflow-x-auto">
|
||||
<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">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">Updated At</th> */}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{transactionDetails?.log_approve && transactionDetails?.log_approve.length > 0 ? (
|
||||
transactionDetails.log_approve.map((log: { created_at: string; status: string; updated_at: string }, index: number) => (
|
||||
<tr key={index} className="border-t">
|
||||
<td className="px-4 py-2 font-medium">
|
||||
{(() => {
|
||||
let status;
|
||||
if (log.status === 'W') {
|
||||
status = 'WAITING';
|
||||
} else if (log.status === 'Y') {
|
||||
status = 'APPROVE';
|
||||
} else if (log.status === 'N') {
|
||||
status = 'REJECT';
|
||||
} else if (log.status === 'T') {
|
||||
status = 'NO NEED';
|
||||
}
|
||||
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>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={3} className="px-4 py-2 text-center text-sm text-gray-500">
|
||||
No logs available
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'p24' && (
|
||||
<div className="space-y-4">
|
||||
@ -928,26 +917,15 @@ const DetailTransaction = () => {
|
||||
})
|
||||
: ''}</td>
|
||||
<td className="px-4 py-2 text-sm text-gray-500">
|
||||
<pre
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: syntaxHighlight(
|
||||
typeof (log.request_body ?? '') === 'string'
|
||||
? (log.request_body ?? '')
|
||||
: JSON.stringify(log.request_body ?? '', null, 4)
|
||||
),
|
||||
}}
|
||||
/>
|
||||
{
|
||||
JSON.stringify(log.request_body ?? '', null, 2)
|
||||
}
|
||||
|
||||
</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)
|
||||
),
|
||||
}}
|
||||
/>
|
||||
{
|
||||
JSON.stringify(log.response_body ?? '', null, 2)
|
||||
}
|
||||
</td>
|
||||
|
||||
<td className="px-4 py-2 text-sm text-gray-500">{log.request_endpoint ?? ''}</td>
|
||||
|
||||
Reference in New Issue
Block a user