ok

src/App.js

@@ -71,6 +71,8 @@ function App() {
   const [depth, setDepth] = useState(-1);
   const [queue, setQueue] = useState([]);
 
+  const [newTransaction, setNewTransaction] = useState({});
+
 
   const validTransactionStates = [
     'new_transaction',
@@ -139,7 +141,7 @@ function App() {
       return;
     }
 
-      setModal('transaction_confirmed',{transactionId: lastTransaction.transactionId})
+    setModal('transaction_confirmed', { transactionId: lastTransaction.transactionId })
     const myLastTransaction = await checkIsMyTransaction(lastTransaction.transactionId);
     console.log(myLastTransaction)
     if (myLastTransaction.isMyTransaction) {
@@ -241,7 +243,7 @@ function App() {
     });
 
     socket.on("transaction_confirmed", async (data) => {
-      console.log( JSON.stringify(data));
+      console.log(JSON.stringify(data));
       setModal("transaction_confirmed", data);
 
       localStorage.setItem('cart', []);
@@ -341,7 +343,7 @@ function App() {
         setDeviceType("guestDevice");
       } else {
         console.log(data)
-        if(data.data.user.cafeId != null) navigate(`/${data.data.user.cafeIdentityName}`, { replace: true });
+        if (data.data.user.cafeId != null) navigate(`/${data.data.user.cafeIdentityName}`, { replace: true });
         setUser(data.data.user);
         if (data.data.latestOpenBillTransaction != null) localStorage.setItem('lastTransaction', JSON.stringify(data.data.latestOpenBillTransaction))
         if (
@@ -395,30 +397,32 @@ function App() {
     };
   }, [socket, shopId]);
 
-  async function checkIfStillViewingOtherTransaction() {
+  async function checkIfStillViewingOtherTransaction(data) {
 
     console.log("transaction notification");
     console.log(modalContent);
 
     let response;
     response = await getTransactionsFromCafe(shopId, 0, true);
-    transactionList.current = response;
     console.log(response);
 
     // Get current URL's search parameters inside the socket event handler
     const searchParams = new URLSearchParams(location.search);
     let transaction_info = searchParams.get("transactionId") || ''; // Get transactionId or set it to empty string
-    console.log(transaction_info);  // Log the updated transaction_info
 
+    if(response[0].transactionId != transaction_info) transactionList.current = response;
     
     let depthh = transactionList.current.findIndex(
       item => item.transactionId.toString() === transaction_info.toString()
     );
-    if(depthh == 0 && transaction_info.toString() != '') depthh = 1;
+
-    setDepth(depthh);
+    if (transaction_info != response[0].transactionId)
+      setDepth(depthh);
+    else setModal("new_transaction", data);
+
     console.log(transaction_info == response[0].transactionId)
     // If transaction_info is an empty string, set the modal
-    if (transaction_info.toString() == '' || transaction_info.toString() == response[0].transactionId) return false;
+    if (transaction_info.toString() == '') return false;
     else return true;
   }
 
@@ -426,12 +430,15 @@ function App() {
     // This will ensure that searchParams and transaction_info get updated on each render
     socket.on("transaction_created", async (data) => {
       console.log("transaction notification");
-      const isViewingOtherTransaction = await checkIfStillViewingOtherTransaction();
+      setNewTransaction(data);
+
+      if(!location.pathname.endsWith('/transactions')){
+      const isViewingOtherTransaction = await checkIfStillViewingOtherTransaction(data);
       // If transaction_info is an empty string, set the modal
       if (!isViewingOtherTransaction) {
         setModal("new_transaction", data);
       }
-
+    }
       // Show browser notification
       let permission = Notification.permission;
       if (permission !== "granted") return;
@@ -446,12 +453,15 @@ function App() {
     socket.on("transaction_canceled", async (data) => {
       console.log("transaction notification");
 
-      const isViewingOtherTransaction = await checkIfStillViewingOtherTransaction();
+      setNewTransaction(data);
+      if(location.pathname != '/transactions'){
+      const isViewingOtherTransaction = await checkIfStillViewingOtherTransaction(data);
       // If transaction_info is an empty string, set the modal
       if (!isViewingOtherTransaction) {
         setModal("new_transaction", data);
         navigate(`?transactionId=${data.transactionId}`, { replace: true });
       }
+      }
     });
 
     // Clean up the socket event listener on unmount or when dependencies change
@@ -489,7 +499,7 @@ function App() {
         : from; // If already at the end, stay on the current transactionId
     } else if (direction === 'previous') {
 
-    setDepth(currentIndex -1);
+      setDepth(currentIndex - 1);
       // If we're not at the first transaction, get the previous transactionId
       newTransactionId = currentIndex > 0
         ? transactionList.current[currentIndex - 1].transactionId
@@ -789,6 +799,7 @@ function App() {
                   deviceType={deviceType}
                   paymentUrl={shop.qrPayment}
                   setModal={setModal}
+                  newTransaction={newTransaction}
                 />
                 {/* <Footer
                   shopId={shopIdentifier}

src/index.js

@@ -6,9 +6,9 @@ import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 // Disable console methods
-// console.log = () => {};
+console.log = () => {};
-// console.warn = () => {};
+console.warn = () => {};
-// console.error = () => {};
+console.error = () => {};
 
 root.render(
   <React.StrictMode>

src/pages/Dashboard.js

@@ -297,7 +297,6 @@ const LinktreePage = ({ user, setModal }) => {
               Solusi berbasis web untuk memudahkan pengelolaan kedai, dengan fitur yang mempermudah pemilik, kasir, dan tamu berinteraksi.
             </div>
 
-            {getLocalStorage('auth') == null && (
               <div className={styles.LoginForm}>
                 <div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>
                   <label htmlFor="username" className={styles.usernameLabel}>---- Masuk -----------------------------</label>
@@ -340,7 +339,6 @@ const LinktreePage = ({ user, setModal }) => {
                   </button>
                 </div>
               </div>
-            )}
 
             <div className={styles.footer}>
               <div className={styles.footerLinks}>

src/pages/Transaction.js

@@ -253,7 +253,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType, handl
                 : `Diantar ke ${transaction.Table ? transaction.Table.tableNo : "N/A"
                 }`}
             </h2>
-            {transaction.notes != null && (
+            {transaction.notes != '' && (
               <>
                 <div className={styles.NoteContainer}>
                   <span>Note :</span>

src/pages/Transactions.js

@@ -18,7 +18,7 @@ import ButtonWithReplica from "../components/ButtonWithReplica";
 dayjs.extend(utc);
 dayjs.extend(timezone);
 
-export default function Transactions({ shop, shopId, propsShopId, sendParam, deviceType, paymentUrl, setModal }) {
+export default function Transactions({ shop, shopId, propsShopId, sendParam, deviceType, paymentUrl, setModal, newTransaction }) {
   const { shopIdentifier, tableId } = useParams();
   if (sendParam) sendParam({ shopIdentifier, tableId });
 
@@ -34,38 +34,38 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
     setMatchedItems(searchAndAggregateItems(transactions, searchTerm));
   }, [searchTerm, transactions]);
 
-
   useEffect(() => {
     const fetchTransactions = async () => {
       try {
+
+        //   response = await getMyTransactions(shopId || propsShopId, 5);
+        // setMyTransactions(response);
         setLoading(true);
         let response = await getTransactionsFromCafe(shopId || propsShopId, 5, false);
 
         setLoading(false);
         if (response) setTransactions(response);
-
-
-        //   response = await getMyTransactions(shopId || propsShopId, 5);
-        // setMyTransactions(response);
       } catch (error) {
         console.error("Error fetching transactions:", error);
       }
     };
 
     fetchTransactions();
-  }, [deviceType]);
+  }, [deviceType, newTransaction]);
 
   const calculateTotalPrice = (detailedTransactions) => {
     return detailedTransactions.reduce((total, dt) => {
       return total + dt.qty * (dt.promoPrice ? dt.promoPrice : dt.price);
     }, 0);
   };
-
+const calculateAllTransactionsTotal = (transactions) => {
-  const calculateAllTransactionsTotal = (transactions) => {
+  return transactions
-    return transactions.reduce((grandTotal, transaction) => {
+    .filter(transaction => transaction.confirmed > 1) // Filter transactions where confirmed > 1
+    .reduce((grandTotal, transaction) => {
       return grandTotal + calculateTotalPrice(transaction.DetailedTransactions);
     }, 0);
-  };
+};
+
   const searchAndAggregateItems = (transactions, searchTerm) => {
     if (!searchTerm.trim()) return [];
 
@@ -148,7 +148,7 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
   return (
     <div className={styles.Transactions}>
       <h2 className={styles["Transactions-title"]}>
-        Daftar transaksi Rp {calculateAllTransactionsTotal(transactions)}
+        Transaksi selesai Rp {calculateAllTransactionsTotal(transactions)}
       </h2>
 
       <input