ok

src/pages/Transaction_confirmed.js

@@ -124,9 +124,6 @@ export default function Transactions({
 
   return (
     <div className={styles.Transactions}>
-      <div style={{ marginTop: "30px" }}></div>
-      <h2 className={styles["Transactions-title"]}>Transactions</h2>
-      {/* <TableCanvas tables={tables} selectedTable={selectedTable} /> */}
       <div className={styles.TransactionListContainer}>
         {transaction && (
           <div
@@ -137,6 +134,24 @@ export default function Transactions({
             }
             style={{ overflow: "hidden" }}
           >
+            
+            <div className={styles['receipt-header']}>
+              <ColorRing className={styles['receipt-logo']} />
+              <div className={styles['receipt-info']}>
+                <h3>silahkan bayar ke kasir</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>
+
             <h2 className={styles["Transactions-detail"]}>
               Transaction ID: {transaction.transactionId}
             </h2>
@@ -209,8 +224,7 @@ export default function Transactions({
               >
                 {transaction.payment_type == 'cash' || isPaymentLoading ? (
                   <>
-                  {transaction.payment_type == 'cash' && <p>tunggu konfirmasi</p>}
-                  <ColorRing height="50" width="50" color="white" />
+                  {transaction.payment_type == 'cash' && <p>Bayar nanti</p>}
                   </>
                 ) : isPaymentOpen ? (
                   "Claim has paid" // Display "Confirm has paid" if the transaction is confirmed (1)