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

add column status

Browse Source
This commit is contained in:
wayanrivan
2025-05-20 11:00:07 +07:00
parent 5ff80a0403
commit 267cae76e2
2 changed files with 89 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -683,7 +683,7 @@ const DetailApprovalTransaction = () => {
<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">Type</th> <th className="px-4 py-2 text-left text-sm text-gray-500">Transaction Status</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>
@ -695,7 +695,25 @@ 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">
{(() => {
let status;
if (log.status === 'C') {
status = 'COMPLETE';
} else if (log.status === 'F') {
status = 'FAILED';
} else if (log.status === 'O') {
status = 'ON PROCESS';
} else if (log.status === 'P') {
status = 'PENDING';
} else if (log.status === 'R') {
status = 'ROLLBACK';
} else if (log.status === 'S') {
status = 'REVERSAL';
}
return status;
})()}
</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',
@ -737,10 +755,10 @@ const DetailApprovalTransaction = () => {
<pre style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}> <pre style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
{(() => { {(() => {
try { try {
if (log.request_body === null) { if (log.response_body === null) {
return ''; return '';
} }
const parsed = JSON.parse(log.request_body); const parsed = JSON.parse(log.response_body);
return JSON.stringify(parsed, null, 2) ?? ''; return JSON.stringify(parsed, null, 2) ?? '';
} catch (e) { } catch (e) {
return log.response_body ?? ''; // fallback: tampilkan as-is jika gagal parse return log.response_body ?? ''; // fallback: tampilkan as-is jika gagal parse
@ -840,7 +858,7 @@ const DetailApprovalTransaction = () => {
<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">Type</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">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>
@ -850,9 +868,27 @@ const DetailApprovalTransaction = () => {
</thead> </thead>
<tbody> <tbody>
{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: { status: string,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">
{(() => {
let status;
if (log.status === 'C') {
status = 'COMPLETE';
} else if (log.status === 'F') {
status = 'FAILED';
} else if (log.status === 'O') {
status = 'ON PROCESS';
} else if (log.status === 'P') {
status = 'PENDING';
} else if (log.status === 'R') {
status = 'ROLLBACK';
} else if (log.status === 'S') {
status = 'REVERSAL';
}
return status;
})()}
</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',
@ -883,10 +919,10 @@ const DetailApprovalTransaction = () => {
if (log.response_code === null) { if (log.response_code === null) {
return ''; return '';
} }
const parsed = JSON.parse(log.request_body); const parsed = JSON.parse(log.response_body);
return JSON.stringify(parsed, null, 2); return JSON.stringify(parsed, null, 2);
} catch (e) { } catch (e) {
return log.request_body; // fallback: tampilkan as-is jika gagal parse return log.response_body; // fallback: tampilkan as-is jika gagal parse
} }
})()} })()}
</pre> </pre>

51
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);
@ -744,7 +745,7 @@ const DetailTransaction = () => {
<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">Type</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">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>
@ -756,7 +757,25 @@ 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">
{(() => {
let status;
if (log.status === 'C') {
status = 'COMPLETE';
} else if (log.status === 'F') {
status = 'FAILED';
} else if (log.status === 'O') {
status = 'ON PROCESS';
} else if (log.status === 'P') {
status = 'PENDING';
} else if (log.status === 'R') {
status = 'ROLLBACK';
} else if (log.status === 'S') {
status = 'REVERSAL';
}
return status;
})()}
</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',
@ -798,10 +817,10 @@ const DetailTransaction = () => {
<pre style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}> <pre style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
{(() => { {(() => {
try { try {
if (log.request_body === null) { if (log.response_body === null) {
return ''; return '';
} }
const parsed = JSON.parse(log.request_body); const parsed = JSON.parse(log.response_body);
return JSON.stringify(parsed, null, 2) ?? ''; return JSON.stringify(parsed, null, 2) ?? '';
} catch (e) { } catch (e) {
return log.response_body ?? ''; // fallback: tampilkan as-is jika gagal parse return log.response_body ?? ''; // fallback: tampilkan as-is jika gagal parse
@ -900,7 +919,7 @@ const DetailTransaction = () => {
<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">Type</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">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>
@ -910,9 +929,27 @@ const DetailTransaction = () => {
</thead> </thead>
<tbody> <tbody>
{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: { status: string,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">
{(() => {
let status;
if (log.status === 'C') {
status = 'COMPLETE';
} else if (log.status === 'F') {
status = 'FAILED';
} else if (log.status === 'O') {
status = 'ON PROCESS';
} else if (log.status === 'P') {
status = 'PENDING';
} else if (log.status === 'R') {
status = 'ROLLBACK';
} else if (log.status === 'S') {
status = 'REVERSAL';
}
return status;
})()}
</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',