ok

public/styles.css

@@ -0,0 +1,20 @@
+/* Default styles - for mobile view */
+#wrapper {
+    width: 100%;
+    max-width: 375px; /* Mobile width ratio */
+    margin: 0 auto;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+  
+  /* Desktop view - simulate mobile ratio on desktop */
+  @media (min-width: 1024px) {
+    #wrapper {
+      width: 100%;
+      max-width: 375px; /* Keep mobile width ratio on desktop */
+      margin: 0 auto;
+      padding: 10px;
+      box-sizing: border-box;
+    }
+  }
+  

src/components/Modal.js

@@ -35,6 +35,7 @@ import CreateUserWithCoupon from "../pages/CreateUserWithCoupon";
 const Modal = ({ user, shop, isOpen, onClose, modalContent, setModal, handleMoveToTransaction,welcomePageConfig, onModalCloseFunction }) => {
   
   const [shopImg, setShopImg] = useState('');
+  const [updateKey, setUpdateKey] = useState(0);
 
   useEffect(() => {
     if (welcomePageConfig) {
@@ -43,6 +44,10 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, setModal, handleMove
     }
   }, [welcomePageConfig]);
   
+  useEffect(() => {
+    setUpdateKey(updateKey+1);
+  }, [shop]);
+
   if (!isOpen) return null;
 
   // Function to handle clicks on the overlay
@@ -63,7 +68,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, setModal, handleMove
   };
   if(modalContent == '') handleOverlayClick();
   return (
-    <div onClick={handleOverlayClick} className={styles.modalOverlay}>
+    <div key={updateKey} onClick={handleOverlayClick} className={styles.modalOverlay}>
       <div className={styles.modalContent} onClick={handleContentClick}>
         
       {modalContent === "edit_account" && <AccountUpdatePage user={user} />}

src/components/TablesPage.js

@@ -87,12 +87,16 @@ const SetPaymentQr = ({ shop }) => {
       fontsize,
       fontcolor,
       fontPosition: initialFontPos,
+      cafeIdentifyName: shop.cafeIdentifyName != cafeIdentifyNameUpdate ? cafeIdentifyNameUpdate : null
     };
 
     // Call saveCafeDetails function with the updated details object
     saveCafeDetails(shop.cafeId, details)
       .then((response) => {
         console.log("Cafe details saved:", response);
+        if (shop.cafeIdentifyName != cafeIdentifyNameUpdate) {
+          window.location.href = `/${cafeIdentifyNameUpdate}?modal=edit_tables`;
+        }
       })
       .catch((error) => {
         console.error("Error saving cafe details:", error);
@@ -206,7 +210,7 @@ const SetPaymentQr = ({ shop }) => {
   const checkIfNameIsUsed = async (newIdentifyName) => {
     // Replace this with your actual API call
     try {
-      const response = await fetch(API_BASE_URL+`/cafe/check-identifyName/${newIdentifyName}`);
+      const response = await fetch(API_BASE_URL + `/cafe/check-identifyName/${newIdentifyName}`);
       console.log(response)
       if (response.ok) {
         setIsLoading(false);
@@ -671,10 +675,27 @@ const SetPaymentQr = ({ shop }) => {
               }
               </p>
             </div>
+            {identifyNameResponse == 199 &&
+              <div style={{ position: 'absolute', height: '100%', width: '100%', top: 0, left: 0, zIndex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: '#252525a8', borderRadius: '8px' }}>
+                <div style={{ width: '80%', backgroundColor: 'white', borderRadius: '8px' }}>
+                  <h3>ⓘ</h3>
+                  <p style={{ padding: '0px 14px 14px 14px' }}>Perubahan alamat bisnis akan menyebabkan seluruh QR kode identifikasi kedai atau meja yang telah dicetak sebelumnya menjadi tidak berlaku.</p>
+                  <div style={{ display: 'flex', justifyContent: 'space-around' }}>
+                    <div
+                      onClick={() => { setIdentifyNameResponse(200); }} style={styles.changeButton}>Batal
+                    </div>
+                    <div
+                      onClick={() => { setIsConfigCafeIdentityName(false); setIdentifyNameResponse(200); }} style={styles.changeButton}>Terapkan
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+            }
             <div style={styles.resultMessage}>
               <p>{cafeIdentifyNameUpdate != shop.cafeIdentifyName && identifyNameResponse == 200 && !isLoading ?
                 <div
-                  onClick={() => setIsConfigCafeIdentityName(false)} style={styles.changeButton2}>Terapkan
+                  onClick={() => { setIdentifyNameResponse(199) }} style={styles.changeButton2}>Terapkan
                 </div>
                 :
                 '----------'}</p>
@@ -698,6 +719,23 @@ const SetPaymentQr = ({ shop }) => {
               </div> */}
           </>
         )}
+      <div style={{ height: 110, position: 'relative', scale: '80%', transformOrigin: 'left', left: 0, width: '125%', border: '1px solid black', borderRadius: '8px' }}>
+        <div style={{ padding: '16px 12px', height: '84px', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
+          <div style={{height: '27.4px'}}><input style={{fontSize: '17.6px'}} value={shop.name}></input> menu</div>
+          <img style={{ width: '48px', height: '48px' }} src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s'></img>
+        </div>
+      </div>
+      <>
+          <div style={styles.uploadMessage}>
+            <p>Klik untuk ganti nama</p>
+          </div>
+          <div style={styles.resultMessage}>
+            <p>-----------------</p>
+            <div
+              onClick={() => { setIsConfigCafeIdentityName(true); cafeIdentifyNameRef.current && cafeIdentifyNameRef.current.focus(); }} style={styles.changeButton}>Ganti
+            </div>
+          </div>
+        </> 
       <div
         id="qr-code-container"
         style={{
@@ -947,7 +985,13 @@ const SetPaymentQr = ({ shop }) => {
             }
           </div>
           <div style={styles.buttonContainer}>
-            <button onClick={handleSave} style={styles.saveButton}>
+            <button
+              onClick={handleSave}
+              style={{
+                ...styles.saveButton,
+                backgroundColor: isconfigcafeidentityname ? 'rgb(125, 125, 125)' : styles.saveButton.backgroundColor
+              }}
+            >
               Simpan
             </button>
             <button onClick={() => setIsViewingQR(true)} style={styles.saveButton}>
@@ -1042,7 +1086,7 @@ const styles = {
   },
   resultMessage: {
     marginTop: "-24px",
-    marginBottom: "10px",
+    // marginBottom: "10px",
     textAlign: "left",
     display: 'flex',
     justifyContent: 'space-between'

src/helpers/cafeHelpers.js

@@ -220,6 +220,9 @@ export async function saveCafeDetails(cafeId, details) {
     }
     if (details.qrSize) formData.append("scale", details.qrSize);
 
+    if (details.cafeIdentifyName) formData.append("cafeIdentifyName", details.cafeIdentifyName);
+    console.log(details.cafeIdentifyName)
+
     const response = await fetch(`${API_BASE_URL}/cafe/set-cafe/${cafeId}`, {
       method: "PUT",
       headers: {