ok

src/pages/Transactions.js

@@ -114,18 +114,43 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
                 setSelectedTable(transaction.Table || { tableId: 0 })
               }
             >
+              
+            <div className={styles['receipt-header']}>
+              <div className={styles['receipt-info']}>
+                <h3>{transaction.confirmed === 1 ? (
+                      "Silahkan cek pembayaran"
+                    ) : transaction.confirmed === -1 ? (
+                      "Declined"
+                    ) : transaction.confirmed === -2 ? (
+                      "Canceled"
+                    ) : transaction.confirmed === 2 ? (
+                      "Sedang diproses"
+                    ) : transaction.confirmed === 3 ? (
+                      "Transaction success"
+                    ) : (
+                      "Silahkan cek ketersediaan"
+                    )}</h3>
+                    
+                <p>Transaction ID: {transaction.transactionId}</p>
+                <p>Payment Type: {transaction.payment_type}</p>
+              </div>
+            </div>
+            <div className={styles['dotted-line']}>
+              <div className={styles['circle-left']}>
+                
+                  </div>
+              <div className={styles['line']} ></div>
+              <div className={styles['circle-right']} >
+                
+              </div>
+            </div>
+           
               {transaction.paymentClaimed && transaction.confirmed < 2 && (
                 <div className={styles.RibbonBanner}>
                   <img src={"https://i.imgur.com/yt6osgL.png"}></img>
                   <h1>payment claimed</h1>
                 </div>
               )}
-              <h2 className={styles["Transactions-detail"]}>
-                Transaction ID: {transaction.transactionId}
-              </h2>
-              <h2 className={styles["Transactions-detail"]}>
-                Payment Type: {transaction.payment_type}
-              </h2>
               <ul>
                 {transaction.DetailedTransactions.map((detail) => (
                   <li key={detail.detailedTransactionId}>
@@ -141,6 +166,23 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
                       transaction.Table ? transaction.Table.tableNo : "N/A"
                     }`}
               </h2>
+              
+            {transaction.notes != "" && (
+              <>
+                <div className={styles.NoteContainer}>
+                  <span>Note :</span>
+                  <span></span>
+                </div>
+
+                <div className={styles.NoteContainer}>
+                  <textarea
+                    className={styles.NoteInput}
+                    value={transaction.notes}
+                    disabled
+                  />
+                </div>
+              </>
+            )}
               <div className={styles.TotalContainer}>
                 <span>Total:</span>
                 <span>