diff --git a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
index 47bee3c..9ad9ed3 100644
--- a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
+++ b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
@@ -30,6 +30,7 @@ const DetailTransaction = () => {
     } = useTransactionContext();
 
     const [transactionDetails, setTransactionDetails] = useState<any>(null);
+    const [edtl, setEdtl] = useState<any>(null);
 
     const [showResend, setResend] = useState(false);
 
@@ -48,8 +49,14 @@ const DetailTransaction = () => {
                     const response = await GetData(`${API_URL}/transaction/history/detail/${selectedTransactionId}`, {
                         id: selectedTransactionId
                     });
-                    setTransactionDetails(response?.data);
-                    // console.log(response?.data);
+                    // setTransactionDetails(response?.data);
+                    if (response?.data.result_edtl) {
+                        setTransactionDetails(response?.data.detail)
+                        setEdtl(response?.data.result_edtl.data)
+                    } else {
+                        setTransactionDetails(response?.data)
+                    }
+                    // console.log(response?.data.result_edtl.data);
                     // console.log(selectedTransactionId);
                 } catch (error) {
                     console.error('Error fetching transaction', error);
@@ -127,35 +134,6 @@ const DetailTransaction = () => {
         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 (
         <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
             <DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
@@ -326,6 +304,38 @@ const DetailTransaction = () => {
                                             {transactionDetails?.purchase?.product?.provider?.description ?? "-"}
                                         </p>
                                     </div>
+
+                                    <div>
+                                        <p className="text-sm text-gray-500">Token KWh EDTL </p>
+                                        <p className="font-medium">
+                                            {edtl.tokenDec ?? "-"}
+                                        </p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Meter SN</p>
+                                        <p className="font-medium">
+                                            {edtl.meterSn ?? "-"}
+                                        </p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Power Steps Desc</p>
+                                        <p className="font-medium">
+                                            {edtl.powerStepsDesc ?? "-"}
+                                        </p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Customer Name</p>
+                                        <p className="font-medium">
+                                            {edtl.customerName ?? "-"}
+                                        </p>
+                                    </div>
+                                    <div>
+                                        <p className="text-sm text-gray-500">Customer Addr</p>
+                                        <p className="font-medium">
+                                            {edtl.customerAddr ?? "-"}
+                                        </p>
+                                    </div>
+
                                     <div>
                                         <p className="text-sm text-gray-500">Provider Type</p>
                                         <p className="font-medium">