From bf7ea19d808843bb2c36136a0682cd87c9c238de Mon Sep 17 00:00:00 2001
From: everythingonblack <zaditgans671555@gmail.com>
Date: Tue, 13 May 2025 09:42:04 +0700
Subject: [PATCH] ok

---
 src/App.js                           |  44 ++++-
 src/components/ButtonWithReplica.css |   6 +
 src/components/Modal.js              |   2 +-
 src/helpers/transactionHelpers.js    |  16 +-
 src/pages/Cart.js                    |   3 +-
 src/pages/Invoice.module.css         |   3 +-
 src/pages/Transaction_confirmed.js   |  17 +-
 src/pages/Transaction_pending.js     |   2 +-
 src/pages/Transactions.js            | 280 +++++++++++++++------------
 src/pages/Transactions.module.css    |   2 +-
 10 files changed, 238 insertions(+), 137 deletions(-)

diff --git a/src/App.js b/src/App.js
index 34d5ebc..265b578 100644
--- a/src/App.js
+++ b/src/App.js
@@ -27,6 +27,7 @@ import { getTableByCode } from "./helpers/tableHelper.js";
 
 import {
   getTransactionsFromCafe,
+  checkIsMyTransaction
 } from "./helpers/transactionHelpers";
 import {
   getConnectedGuestSides,
@@ -82,6 +83,7 @@ function App() {
     'transaction_failed',
   ];
 
+
   const calculateTotalsFromLocalStorage = () => {
     const { totalCount, totalPrice } = calculateTotals(shopId);
     setTotalItemsCount(totalCount);
@@ -93,24 +95,55 @@ function App() {
     console.log(lastTransaction);
 
     if (lastTransaction != null) {
+      console.log(lastTransaction)
       setLastTransaction(lastTransaction);
     }
   };
 
   useEffect(() => {
-
-    calculateTotalsFromLocalStorage();
-
+    const init = async () => {
+      await checkLastTransaction();
+    };
+  
+    init(); // call the async function
+  
     const handleStorageChange = () => {
       calculateTotalsFromLocalStorage();
     };
-
+  
     window.addEventListener("localStorageUpdated", handleStorageChange);
-
+  
     return () => {
       window.removeEventListener("localStorageUpdated", handleStorageChange);
     };
   }, [shopId]);
+  
+  const checkLastTransaction = async () => {
+    const { totalCount, totalPrice } = calculateTotals(shopId);
+    setTotalItemsCount(totalCount);
+    setTotalPrice(totalPrice);
+  
+    const lastTransactionStr = localStorage.getItem("lastTransaction");
+  
+    if (!lastTransactionStr) return;
+  
+    const lastTransaction = JSON.parse(lastTransactionStr);
+    console.log(lastTransaction);
+  
+    if (!lastTransaction || !lastTransaction.transactionId) {
+      localStorage.removeItem("lastTransaction");
+      return;
+    }
+  
+    const myLastTransaction = await checkIsMyTransaction(lastTransaction.transactionId);
+    console.log(myLastTransaction)
+    if (myLastTransaction.isMyTransaction) {
+      setLastTransaction(lastTransaction);
+    } else {
+      localStorage.removeItem("lastTransaction");
+    }
+  };
+  
 
   const handleSetParam = async ({ shopIdentifier, tableCode }) => {
     setShopIdentifier(shopIdentifier);
@@ -728,6 +761,7 @@ setDepth(depthh);
                   shopId={shopId}
                   sendParam={handleSetParam}
                   deviceType={deviceType}
+                  paymentUrl={shop.qrPayment}
                 />
                 {/* <Footer
                   shopId={shopIdentifier}
diff --git a/src/components/ButtonWithReplica.css b/src/components/ButtonWithReplica.css
index 183ebd1..223baae 100644
--- a/src/components/ButtonWithReplica.css
+++ b/src/components/ButtonWithReplica.css
@@ -3,6 +3,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  
+  border: none;
+  margin: 0 auto;
+  cursor: pointer;
+  display: block;
+  text-align: center;
 }
 
 .button {
diff --git a/src/components/Modal.js b/src/components/Modal.js
index 6a7c7a9..91f48f0 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -100,7 +100,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal
         {modalContent === "transaction_pending" && <Transaction_pending deviceType={deviceType}/>}
         {modalContent === "transaction_item" && <Transaction_item />}
         {modalContent === "transaction_confirmed" && (
-          <Transaction_confirmed  deviceType={deviceType} paymentUrl={shop.qrPayment} />
+          <Transaction_confirmed  deviceType={deviceType} paymentUrl={shop.qrPayment} setModal={setModal}/>
         )}
         {modalContent === "payment_claimed" && (
           <Payment_claimed paymentUrl={shop.qrPayment} />
diff --git a/src/helpers/transactionHelpers.js b/src/helpers/transactionHelpers.js
index 0079ed3..8a42a02 100644
--- a/src/helpers/transactionHelpers.js
+++ b/src/helpers/transactionHelpers.js
@@ -151,7 +151,21 @@ export async function getTransaction(transactionId) {
     console.error("Error:", error);
   }
 }
-
+export async function checkIsMyTransaction(transactionId){
+  const token = getLocalStorage("auth");
+  const response = await fetch(
+    `${API_BASE_URL}/transaction/check-is-my-transaction/${transactionId}`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    }
+  );
+  const res = await response.json();
+  return res;
+}
 export async function getMyTransactions() {
   try {
     const token = getLocalStorage("auth");
diff --git a/src/pages/Cart.js b/src/pages/Cart.js
index 01c8aa1..5035952 100644
--- a/src/pages/Cart.js
+++ b/src/pages/Cart.js
@@ -270,6 +270,7 @@ export default function Invoice({ shopId, setModal, table, sendParam, deviceType
         textareaRef.current.value,
         socketId
       );
+      localStorage.removeItem('lastTransaction')
     }
     else
 
@@ -459,7 +460,7 @@ export default function Invoice({ shopId, setModal, table, sendParam, deviceType
                 {transactionData.payment_type != 'paylater' ?
                   <>
                     <div onClick={() => setModal('transaction_item', { transactionId: transactionData.transactionId })} className={styles.AddedLastTransaction}>
-                      Pesanan akan ditambahkan ke transaksi sebelumnya
+                      Pembayaran akan ditambahkan ke transaksi sebelumnya
                     </div>
                     <div className={styles.CancelAddedLastTransaction} onClick={() => { window.location.reload(); localStorage.removeItem('lastTransaction') }}>
                       <svg
diff --git a/src/pages/Invoice.module.css b/src/pages/Invoice.module.css
index 400a3c1..9d3d123 100644
--- a/src/pages/Invoice.module.css
+++ b/src/pages/Invoice.module.css
@@ -146,9 +146,8 @@
 .RoundedRectangle {
   border-radius: 20px;
   padding-top: 5px;
-  margin: 26px;
+  margin: 12px;
   background-color: #f9f9f9;
-  margin-bottom: -20px;
 }
 
 .EmailContainer {
diff --git a/src/pages/Transaction_confirmed.js b/src/pages/Transaction_confirmed.js
index 1a82a53..a8fa8ed 100644
--- a/src/pages/Transaction_confirmed.js
+++ b/src/pages/Transaction_confirmed.js
@@ -19,6 +19,7 @@ export default function Transactions({
   sendParam,
   deviceType,
   paymentUrl,
+  setModal
 }) {
   const { shopId, tableId } = useParams();
   if (sendParam) sendParam({ shopId, tableId });
@@ -165,7 +166,7 @@ export default function Transactions({
                 <ColorRing className={styles['receipt-logo']} />
               }
               <div className={styles['receipt-info']}>
-                {transaction.payment_type == 'cashless' || transaction.payment_type == 'paylater/cashless' ? <h3>silahkan bayar dengan QRIS</h3> : transaction.payment_type == 'cash' || transaction.payment_type == 'paylater/cash' ? <h3>silahkan bayar ke kasir</h3> : transaction.DetailedTransactions.some(transaction => transaction.additionalNumber > 0) ? <h3>Item sukses ditambahkan</h3> : <h3>open bill disetujui</h3>}
+                {transaction.payment_type == 'cashless' || transaction.payment_type == 'paylater/cashless' ? <h3>Silahkan bayar dengan QRIS</h3> : transaction.payment_type == 'cash' || transaction.payment_type == 'paylater/cash' ? <h3>silahkan bayar ke kasir</h3> : transaction.DetailedTransactions.some(transaction => transaction.additionalNumber > 0) ? <h3>Item sukses ditambahkan</h3> : <h3>open bill disetujui</h3>}
                 <p>Transaction ID: {transaction.transactionId}</p>
                 <p>Payment Type: {transaction.payment_type}</p>
               </div>
@@ -193,9 +194,17 @@ export default function Transactions({
 
             {transaction.payment_type != 'paylater/cash' && transaction.payment_type != 'paylater/cashless' &&
               <div
-                onClick={() => {
-                  localStorage.setItem('lastTransaction', JSON.stringify(transaction));
-                }} className={styles["addNewItem"]}>Tambah pesanan</div>
+              onClick={() => {
+                localStorage.setItem('lastTransaction', JSON.stringify(transaction));
+                setModal("message", { captMessage: 'Silahkan tambahkan pesanan', descMessage: 'Pembayaran akan ditambahkan ke transaksi sebelumnya.' }, null, null);
+
+                // Dispatch the custom event
+                window.dispatchEvent(new Event("localStorageUpdated"));
+              }}
+              className={styles["addNewItem"]}
+            >
+              Tambah pesanan
+            </div>          
             }
 
             <h2 className={styles["Transactions-detail"]}>
diff --git a/src/pages/Transaction_pending.js b/src/pages/Transaction_pending.js
index 3eeca0e..0816aca 100644
--- a/src/pages/Transaction_pending.js
+++ b/src/pages/Transaction_pending.js
@@ -135,7 +135,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType, handl
             <div className={styles['receipt-header']}>
               <ColorRing className={styles['receipt-logo']} />
               <div className={styles['receipt-info']}>
-                <h3>memeriksa ketersediaan</h3>
+                <h3>Memeriksa Ketersediaan</h3>
                 <p>ID Transaksi: {transaction.transactionId}</p>
                 <p>Pembayaran: {transaction.payment_type}</p>
                 <p>{transaction.serving_type === "pickup"
diff --git a/src/pages/Transactions.js b/src/pages/Transactions.js
index f1aff72..e934af9 100644
--- a/src/pages/Transactions.js
+++ b/src/pages/Transactions.js
@@ -9,6 +9,7 @@ import {
   getTransactionsFromCafe,
 } from "../helpers/transactionHelpers";
 import { getTables } from "../helpers/tableHelper";
+import ButtonWithReplica from "../components/ButtonWithReplica";
 import TableCanvas from "../components/TableCanvas";
 
 import dayjs from 'dayjs';
@@ -16,90 +17,79 @@ import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 
 
-export default function Transactions({ shop, shopId, propsShopId, sendParam, deviceType }) {
+export default function Transactions({ shop, shopId, propsShopId, sendParam, deviceType, paymentUrl }) {
   const { shopIdentifier, tableId } = useParams();
   if (sendParam) sendParam({ shopIdentifier, tableId });
 
   dayjs.extend(utc);
   dayjs.extend(timezone);
 
-  const [tables, setTables] = useState([]);
-  const [selectedTable, setSelectedTable] = useState(null);
   const [transactions, setTransactions] = useState([]);
-  const [myTransactions, setMyTransactions] = useState([]);
   const [isPaymentLoading, setIsPaymentLoading] = useState(false);
+  const [isPaymentOpen, setIsPaymentOpen] = useState(false);
 
   useEffect(() => {
     const fetchTransactions = async () => {
-      try {
-        let response;
-        response = await getTransactionsFromCafe(shopId || propsShopId, 5, false);
-        console.log(response)
-        if(response) {
-          setTransactions(response);
-        return;
+      if (deviceType == 'clerk') {
+        try {
+          let response;
+          response = await getTransactionsFromCafe(shopId || propsShopId, 5, false);
+          console.log(response)
+          if (response) {
+            setTransactions(response);
+            return;
+          }
+        } catch (error) {
+          console.error("Error fetching transactions:", error);
         }
-      } catch (error) {
-        console.error("Error fetching transactions:", error);
       }
-      try {
-        let response;
-        response = await getMyTransactions(shopId || propsShopId, 5);
-        console.log(response)
-        const combinedTransactions = [];
+      else {
+        try {
+          let response;
+          response = await getMyTransactions(shopId || propsShopId, 5);
+          console.log(response)
+          const combinedTransactions = [];
 
-        response.forEach(cafe => {
+          response.forEach(cafe => {
             const { cafeId, name: cafeName, transactions } = cafe;
-        
-            transactions.forEach(transaction => {
-                const newTransaction = {
-                    ...transaction,
-                    cafeId,
-                    cafeName,
-                    DetailedTransactions: transaction.detailedTransactions // Rename here
-                };
-                delete newTransaction.detailedTransactions; // Remove the old key
-                combinedTransactions.push(newTransaction);
-            });
-        });
-        
-        // combinedTransactions now contains all transactions with cafe info and renamed key
-        console.log(combinedTransactions)
 
-        // combinedTransactions now contains all transactions with cafe info
-        setTransactions(combinedTransactions);
-      } catch (error) {
-        console.error("Error fetching transactions:", error);
+            transactions.forEach(transaction => {
+              const newTransaction = {
+                ...transaction,
+                cafeId,
+                cafeName,
+                DetailedTransactions: transaction.detailedTransactions // Rename here
+              };
+              delete newTransaction.detailedTransactions; // Remove the old key
+              combinedTransactions.push(newTransaction);
+            });
+          });
+
+          // combinedTransactions now contains all transactions with cafe info and renamed key
+          console.log(combinedTransactions)
+
+          // combinedTransactions now contains all transactions with cafe info
+          setTransactions(combinedTransactions);
+        } catch (error) {
+          console.error("Error fetching transactions:", error);
+        }
       }
     };
 
     fetchTransactions();
-  }, [shopId || propsShopId]);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const fetchedTables = await getTables(shopId || propsShopId);
-        setTables(fetchedTables);
-      } catch (error) {
-        console.error("Error fetching tables:", error);
-      }
-    };
-
-    fetchData();
-  }, [shopId || propsShopId]);
+  }, [deviceType]);
 
   const calculateTotalPrice = (detailedTransactions) => {
     return detailedTransactions.reduce((total, dt) => {
       return total + dt.qty * (dt.promoPrice ? dt.promoPrice : dt.price);
     }, 0);
   };
-  
-const calculateAllTransactionsTotal = (transactions) => {
-  return transactions.reduce((grandTotal, transaction) => {
-    return grandTotal + calculateTotalPrice(transaction.DetailedTransactions);
-  }, 0);
-};
+
+  const calculateAllTransactionsTotal = (transactions) => {
+    return transactions.reduce((grandTotal, transaction) => {
+      return grandTotal + calculateTotalPrice(transaction.DetailedTransactions);
+    }, 0);
+  };
 
   const handleConfirm = async (transactionId) => {
     setIsPaymentLoading(true);
@@ -146,8 +136,8 @@ const calculateAllTransactionsTotal = (transactions) => {
   return (
     <div className={styles.Transactions}>
       <div style={{ marginTop: "30px" }}></div>
-      <h2 className={styles["Transactions-title"]}>Daftar transaksi 
-      Rp {calculateAllTransactionsTotal(transactions)} </h2>
+      <h2 className={styles["Transactions-title"]}>Daftar transaksi
+        Rp {calculateAllTransactionsTotal(transactions)} </h2>
       <div style={{ marginTop: "30px" }}></div>
       {/* <TableCanvas tables={tables} selectedTable={selectedTable} /> */}
       <div className={styles.TransactionListContainer} style={{ padding: '0 20px 0 20px' }}>
@@ -156,9 +146,7 @@ const calculateAllTransactionsTotal = (transactions) => {
             <div
               key={transaction.transactionId}
               className={styles.RoundedRectangle}
-              onClick={() =>
-                setSelectedTable(transaction.Table || { tableId: 0 })
-              }
+              style={{ overflow: 'hidden' }}
             >
 
               <div className={styles['receipt-header']}>
@@ -192,19 +180,34 @@ const calculateAllTransactionsTotal = (transactions) => {
 
 
                 <div className={styles['receipt-info']}>
-                  <h3>{transaction.confirmed === 1 ? (
-                    "Silahkan cek pembayaran"
-                  ) : transaction.confirmed === -1 ? (
-                    "Dibatalkan oleh kasir"
-                  ) : transaction.confirmed === -2 ? (
-                    "Dibatalkan oleh pelanggan"
-                  ) : transaction.confirmed === 2 ? (
-                    "Sedang diproses"
-                  ) : transaction.confirmed === 3 ? (
-                    "Transaction success"
-                  ) : (
-                    "Silahkan cek ketersediaan"
-                  )}</h3>
+                  {deviceType == 'clerk' ?
+                    <h3>{transaction.confirmed === 1 ? (
+                      "Silahkan Cek Pembayaran"
+                    ) : transaction.confirmed === -1 ? (
+                      "Dibatalkan Oleh Kasir"
+                    ) : transaction.confirmed === -2 ? (
+                      "Dibatalkan Oleh Pelanggan"
+                    ) : transaction.confirmed === 2 ? (
+                      "Sedang Diproses"
+                    ) : transaction.confirmed === 3 ? (
+                      "Transaksi Sukses"
+                    ) : (
+                      "Silahkan Cek Ketersediaan"
+                    )}</h3>
+                    :
+                    <h3>{transaction.confirmed === 1 ? (
+                      "Silahkan Bayar Dengan QRIS"
+                    ) : transaction.confirmed === -1 ? (
+                      "Dibatalkan Oleh Kasir"
+                    ) : transaction.confirmed === -2 ? (
+                      "Dibatalkan Oleh Pelanggan"
+                    ) : transaction.confirmed === 2 ? (
+                      "Sedang diproses"
+                    ) : transaction.confirmed === 3 ? (
+                      "Transaksi Sukses"
+                    ) : (
+                      "Memeriksa Ketersediaan "
+                    )}</h3>}
 
                   <p>Transaction ID: {transaction.transactionId}</p>
                   <p>Payment Type: {transaction.payment_type}</p>
@@ -230,7 +233,7 @@ const calculateAllTransactionsTotal = (transactions) => {
               <ul>
                 {transaction.DetailedTransactions.map((detail) => (
                   <li key={detail.detailedTransactionId}>
-                  <span>{detail.Item.name}</span> - {detail.qty < 1 ? 'tidak tersedia' : `${detail.qty} x Rp
+                    <span>{detail.Item.name}</span> - {detail.qty < 1 ? 'tidak tersedia' : `${detail.qty} x Rp
                   ${detail.promoPrice ? detail.promoPrice : detail.price}`}
                   </li>
                 ))}
@@ -266,60 +269,95 @@ const calculateAllTransactionsTotal = (transactions) => {
                 </span>
               </div>
               <div className={styles.TotalContainer}>
+                {(deviceType == 'clerk' && (transaction.confirmed == 0 || transaction.confirmed == 1 || transaction.confirmed == 2)) ||
+                  (deviceType == 'guestDevice' && (transaction.confirmed == 0))&&
+                  <button
+                    className={styles.PayButton}
+                    onClick={() => handleConfirm(transaction.transactionId)}
+                    disabled={isPaymentLoading}
+                  >
+                    {deviceType === "clerk" ? (
+                      isPaymentLoading ? (
+                        <ColorRing height="50" width="50" color="white" />
+                      ) : transaction.confirmed === 1 ? (
+                        "Konfirmasi Telah Bayar"
+                      ) : transaction.confirmed === 2 ? (
+                        "Confirm item is ready"
+                      ) : (
+                        "Confirm availability"
+                      )
+                    ) :
+                      isPaymentLoading ? (
+                        <ColorRing height="50" width="50" color="white" />
+                      ) : (
+                        "Transaction success"
+                      )}
+
+                  </button>
+                }
+
+                {transaction.payment_type != 'cash' && transaction.payment_type != 'paylater/cash' &&
+                  <ButtonWithReplica
+                    paymentUrl={paymentUrl}
+                    price={
+                      "Rp" + calculateTotalPrice(transaction.DetailedTransactions)
+                    }
+                    disabled={isPaymentLoading}
+                    isPaymentLoading={isPaymentLoading}
+                    handleClick={() => handleConfirm(transaction.transactionId)}
+                    Open={() => setIsPaymentOpen(transaction.transactionId)}
+                    isPaymentOpen={isPaymentOpen == transaction.transactionId}
+                  >
+                    {
+                      isPaymentLoading ? null : isPaymentOpen == transaction.transactionId ? (
+                        transaction.paymentClaimed ? (
+                          <>
+                            <div style={{ position: 'absolute', left: '15px', top: '9px' }}>
+                              <ColorRing height="20" width="20" className={styles['receipt-logo']} />
+                            </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Menunggu konfirmasi
+                          </>
+                        ) : 'Klaim telah bayar'
+                      ) : 'Tampilkan QR'
+                    }
+
+                  </ButtonWithReplica>
+                }
+              </div>
+
+              {transaction.payment_type == 'cash' ?
                 <button
                   className={styles.PayButton}
-                  onClick={() => handleConfirm(transaction.transactionId)}
+                  onClick={() => handleDecline(transaction.transactionId)}
                   disabled={
-                    isPaymentLoading || // Disable if loading
-                    (deviceType === "clerk" &&
-                      transaction.confirmed !== 1 &&
-                      transaction.confirmed !== 2 &&
-                      transaction.confirmed !== 0) || // Disable for clerk when not Confirm has paid, Confirm item is ready, or Confirm availability
-                    (deviceType !== "clerk" &&
-                      transaction.confirmed !== 1 &&
-                      transaction.paymentClaimed) || // Disable for buyer when not Claim has paid
-                    transaction.confirmed === 3 || // Disable if Transaction success
-                    transaction.confirmed === -1 || // Disable if Declined
-                    transaction.confirmed === -2 || // Disable if Canceled
-                    transaction.confirmed === 2 || // Disable if In process
-                    (transaction.confirmed === 1 && transaction.paymentClaimed) // Disable if verifying payment
-                  }
+                    transaction.confirmed === -1 ||
+                    transaction.confirmed === 3 ||
+                    isPaymentLoading
+                  } // Disable button if confirmed (1) or declined (-1) or
                 >
-                  {deviceType === "clerk" ? (
-                    isPaymentLoading ? (
-                      <ColorRing height="50" width="50" color="white" />
-                    ) : transaction.confirmed === 1 ? (
-                      "Confirm has paid"
-                    ) : transaction.confirmed === -1 ? (
-                      "Declined"
-                    ) : transaction.confirmed === -2 ? (
-                      "Canceled"
-                    ) : transaction.confirmed === 2 ? (
-                      "Confirm item is ready"
-                    ) : transaction.confirmed === 3 ? (
-                      "Transaction success"
-                    ) : (
-                      "Confirm availability"
-                    )
-                  ) : isPaymentLoading ? (
+                  {isPaymentLoading ? (
                     <ColorRing height="50" width="50" color="white" />
-                  ) : transaction.confirmed === 1 &&
-                    !transaction.paymentClaimed ? (
-                    "Claim has paid"
-                  ) : transaction.confirmed === 1 &&
-                    transaction.paymentClaimed ? (
-                    "Verifying your payment"
                   ) : transaction.confirmed === -1 ? (
-                    "Declined"
+                    "Ditolak" // Display "Declined" if the transaction is declined (-1)
                   ) : transaction.confirmed === -2 ? (
-                    "Canceled"
-                  ) : transaction.confirmed === 2 ? (
-                    "In process"
+                    "Dibatalkan" // Display "Declined" if the transaction is declined (-1)
                   ) : (
-                    "Transaction success"
+                    "Batalkan" // Display "Confirm availability" if the transaction is not confirmed (0)
                   )}
                 </button>
-              </div>
+                :
+                ((transaction.payment_type != 'paylater/cash' && transaction.payment_type != 'paylater/cashless' || isPaymentOpen) &&
+                  <h5
+                    className={`${styles.DeclineButton}`}
+                    onClick={() =>
+                      isPaymentOpen
+                        ? setIsPaymentOpen(false)
+                        : handleDecline(transaction.transactionId)
+                    }
+                  >
+                    {isPaymentOpen ? "kembali" : "batalkan"}
+                  </h5>
+                )
+              }
               {transaction.confirmed == 0 && (
                 <h5
                   className={styles.DeclineButton}
diff --git a/src/pages/Transactions.module.css b/src/pages/Transactions.module.css
index b69db2e..6002bde 100644
--- a/src/pages/Transactions.module.css
+++ b/src/pages/Transactions.module.css
@@ -134,7 +134,7 @@
   position: relative;
   border-radius: 20px;
   padding: 15px; /* Adjusted for better spacing */
-  margin: 26px;
+  margin: 12px;
   background-color: #f9f9f9;
 }