ok

src/App.css

@@ -36,7 +36,7 @@ body {
   height: 100%;
   width: 100%;
   background-image: url(https://i.ibb.co.com/F4FMw1jz/testuseonly.png);
-  z-index: 1000;
+  z-index: 0; /* align with item lister */
   filter: opacity(0.04);
   pointer-events: none;
 }
@@ -67,7 +67,7 @@ body {
 
 /* Ensure sticky cart bar stays above item overlays */
 .StickyCartBar {
-  z-index: 100 !important; /* Menurunkan z-index agar tidak menutupi material list */
+  z-index: 0 !important; /* align with item lister */
   position: fixed;
   bottom: 0;
   left: 0;

src/components/Header.js

@@ -23,7 +23,7 @@ const HeaderBar = styled.div`
   padding: 12px 14px;
   color: black;
   background-color: #ffffff;
-  z-index: 200;
+  z-index: ${(props) => (props.zIndexLevel !== undefined ? props.zIndexLevel : 200)};
   border: 1px solid #00000000;
   margin: 20px 12px;
   border-radius: 13px;
@@ -148,7 +148,7 @@ const Rectangle = styled.div`
   width: 240px;
   max-height: 75vh;
   background-color: white;
-  z-index: 198;
+  z-index: ${(props) => (props.baseZIndex !== undefined ? props.baseZIndex : 198)};
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
   border: 1px solid #f0f0f0;
   border-radius: 12px;
@@ -276,7 +276,9 @@ const Header = ({
   removeConnectedGuestSides,
   setIsEditMode,
   isEditMode,
-  HeaderMargin = '25px'
+  HeaderMargin = '25px',
+  zIndexLevel,
+  rectZIndex
 }) => {
   const { goToLogin, goToGuestSideLogin, goToAdminCafes } =
     useNavigationHelpers(shopId, tableCode);
@@ -354,7 +356,7 @@ const Header = ({
   };
   return (
     <HeaderBarbackground shopName={shopName}>
-      <HeaderBar HeaderMargin={HeaderMargin} shopName={shopName}>
+      <HeaderBar HeaderMargin={HeaderMargin} shopName={shopName} zIndexLevel={zIndexLevel}>
         <LeftGroup>
           <CafeAvatar
             src={shopImage && !shopImage.includes('undefined') ? shopImage : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s"}
@@ -378,7 +380,7 @@ const Header = ({
             <HamburgerIcon />
           </HamburgerButton>
           {showRectangle && (
-            <Rectangle ref={rectangleRef} animate={animate}>
+            <Rectangle ref={rectangleRef} animate={animate} baseZIndex={rectZIndex !== undefined ? rectZIndex : zIndexLevel}>
               <ChildContainer>
               {guestSideOfClerk && guestSideOfClerk.clerkUsername && (
                 <Child hasChildren>

src/components/ItemConfig.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
 import styles from "./Modal.module.css";
 import { getImageUrl } from "../helpers/itemHelper.js";
 
@@ -106,7 +107,7 @@ const ItemConfig = ({
         }
     };
 
-    return (
+    return createPortal(
         <div onClick={handleOverlayClick} className={styles.modalOverlay}>
             <div onClick={handleContentClick} className={styles.modalContent}>
                 <div className={styles.imageSection}>
@@ -208,7 +209,8 @@ const ItemConfig = ({
                     </div>
                 </div>
             </div>
-        </div>
+        </div>,
+        document.body
     );
 };
 

src/components/ItemTypeLister.css

@@ -97,7 +97,7 @@
   top: 0;
   right: 0;
   background-color: white;
-  z-index: 300;
+  z-index: 0; /* align with item lister */
   display: flex;
   flex-direction: column;
 }

src/components/Modal.js

@@ -1,4 +1,5 @@
 import React, {useState, useEffect} from "react";
+import { createPortal } from "react-dom";
 import styles from "./Modal.module.css";
 
 import AccountUpdatePage from "../components/AccountUpdatePage.js";
@@ -75,7 +76,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal
     event.stopPropagation();
   };
   if(modalContent == '') handleOverlayClick();
-  return (
+  return createPortal(
     <div key={updateKey} onClick={handleOverlayClick} className={styles.modalOverlay}>
       <div className={`${styles.modalContent} ${(modalContent === 'edit_tables' || modalContent === 'payment_option' || modalContent === 'create_clerk') ? styles.modalContentWide : ''}`} onClick={handleContentClick}>
         
@@ -132,7 +133,8 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal
         {modalContent === "message" && <Message handleYes={onModalYesFunction} handleNo={handleNo}/>}
         {modalContent === "player-prompt" && <PlayerPrompt cafeId={shop.cafeId} setModal={setModal} handleClose={handleOverlayClick} welcomePageConfig={shop.welcomePageConfig}/>}
       </div>
-    </div>
+    </div>,
+    document.body
   );
 };
 

src/components/MusicPlayer.css

@@ -31,14 +31,14 @@
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
 
   border-radius: 0 0 15px 15px;
-  z-index: 1;
+  z-index: 0; /* align with item lister */
 }
 
 .current-name {
   white-space: nowrap;
   pointer-events: none;
   position: relative;
-  z-index: 2;
+  z-index: 1;
   text-align: left;
   margin: 35px 30px;
   font-size: 16px;
@@ -70,7 +70,7 @@
 .current-artist {
   pointer-events: none;
   position: relative;
-  z-index: 2;
+  z-index: 1;
   text-align: left;
   margin: -32px 30px;
   font-size: 18px;
@@ -83,7 +83,7 @@
 .progress-container {
   pointer-events: none;
   position: relative;
-  z-index: 2;
+  z-index: 1;
   text-align: left;
   margin: 12px 30px;
 }
@@ -318,4 +318,3 @@
 .search-button.clicked {
   background-color: #d0c7b3; /* The color when clicked */
 }
-

src/components/Watermark.module.css

@@ -1,5 +1,5 @@
 .watermark {
-    z-index: 5;
+    z-index: 0; /* align with item lister */
     margin-top: 30px;
     background-color: rgb(222, 237, 100);
     font-weight: 700;
@@ -28,7 +28,7 @@
 /* Media query for desktop */
 @media (min-width: 768px) { /* Adjust the min-width as needed */
     .watermark {
-        z-index: 5;
+        z-index: 0; /* align with item lister */
         margin-top: 30px;
         background-color: rgb(222, 237, 100);
         font-weight: 700;

src/pages/CafePage.js

@@ -246,6 +246,8 @@ function CafePage({
                   removeConnectedGuestSides={removeConnectedGuestSides}
                   setIsEditMode={(e) => setIsEditMode(e)}
                   isEditMode={isEditMode}
+                  zIndexLevel={9000}
+                  rectZIndex={9000}
                 />
                 <MusicPlayer
                   socket={socket}