From 8a375b68e43ee9ea7df3b85e1bdfe7a828a8aee8 Mon Sep 17 00:00:00 2001
From: wayanrivan <rivanwayan867@gmail.com>
Date: Mon, 21 Jul 2025 10:16:31 +0700
Subject: [PATCH] update

---
 .../blocks/DetailTransaction.tsx              | 102 ++++++++++--------
 1 file changed, 56 insertions(+), 46 deletions(-)

diff --git a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
index a812094..4b0cda6 100644
--- a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
+++ b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx
@@ -50,14 +50,14 @@ const DetailTransaction = () => {
                         id: selectedTransactionId
                     });
                     // setTransactionDetails(response?.data);
-                    if (response?.data.result_edtl) {
+                    // console.log(response?.data.result_edtl)
+                    if (response?.data.result_edtl == undefined) {
+                        setTransactionDetails(response?.data)
+                        setEdtl(null);
+                    } else {
                         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);
                 }
@@ -134,6 +134,15 @@ const DetailTransaction = () => {
         return null;
     };
 
+    const formatTokenDec = (token) => {
+        if (token != null && token !== "") {
+            return token.match(/.{1,4}/g)?.join(" ");
+        } else {
+            return "-";
+        }
+    };
+
+
     return (
         <Dialog open={showDetailDialog} onOpenChange={setShowDetailDialog}>
             <DialogContent className="container-fixed max-w-[1024px] flex flex-col p-5 overflow-hidden">
@@ -305,48 +314,49 @@ const DetailTransaction = () => {
                                         </p>
                                     </div>
 
-                                    <div>
-                                        <p className="text-sm text-gray-500">Token KWh EDTL </p>
-                                        <p className="font-medium">
-                                            {(edtl.tokenDec ?? "-")
-                                                .match(/.{1,4}/g)  // bagi per 4 karakter
-                                                ?.join(" ")        // gabungkan dengan spasi
-                                            }
+                                    {edtl != null && (
+                                        <>
+                                            <div>
+                                                <p className="text-sm text-gray-500">Token KWh EDTL</p>
+                                                <p className="font-medium">
+                                                    {formatTokenDec(edtl.tokenDec)}
+                                                </p>
+                                            </div>
 
-                                        </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">Amount</p>
-                                        <p className="font-medium">
-                                             {edtl.customerPaymentAmount != null
-                                                ? new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(edtl.customerPaymentAmount)
-                                                : "-"}
-                                        </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">Amount</p>
+                                                <p className="font-medium">
+                                                    {edtl.customerPaymentAmount != null
+                                                        ? new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(edtl.customerPaymentAmount)
+                                                        : "-"}
+                                                </p>
+                                            </div>
+                                        </>
+                                    )}
 
                                     <div>
                                         <p className="text-sm text-gray-500">Provider Type</p>