ok

src/components/TablesPage.js

@@ -225,6 +225,34 @@ const SetPaymentQr = ({ shop }) => {
     }
   };
 
+  const [inputValue, setInputValue] = useState(shop.name);
+  const inputRef = useRef(null);
+
+  // Monospace font for accurate character width calculation
+  const monospaceFont = 'monospace';
+
+  // Minimum width for the input field
+  const minWidth = 100; // Minimum width in pixels (adjust as necessary)
+
+  // Function to handle input change and adjust the width
+  const handleInputNameChange = (e) => {
+    setInputValue(e.target.value);
+  };
+
+  // Resize the input width based on the number of characters typed
+  useEffect(() => {
+    if (inputRef.current) {
+      // Get the width of a single character
+      const characterWidth = 10; // You can adjust this value based on the actual font size
+
+      // Calculate the required width based on the number of characters
+      const newWidth = characterWidth * inputValue?.length + 30;
+
+      // Set the input width, ensuring it doesn't go below the minimum width
+      inputRef.current.style.width = `${Math.max(newWidth, minWidth)}px`;
+    }
+  }, [inputValue]); // Trigger effect when the input value changes
+
   return (
     <div style={styles.container}>
       <h3 style={styles.title}>Identifikasi kedai</h3>
@@ -719,23 +747,38 @@ 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: 110, position: 'relative', scale: '80%', transformOrigin: 'left', left: 0, width: '125%', border: '1px solid black', borderRadius: '8px' }}>
-          <div style={{height: '27.4px'}}><input style={{fontSize: '17.6px'}} value={shop.name}></input> menu</div>
+      <div style={{ padding: '16px 12px', height: '84px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-          <img style={{ width: '48px', height: '48px' }} src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s'></img>
+        <div style={{ height: '27.4px', fontSize: '17.6px', fontFamily: 'monospace', fontWeight: '500', color: 'rgba(88, 55, 50, 1)' }}>
+          <input
+            ref={inputRef}
+            style={{
+              fontSize: '17.6px',
+              fontFamily: 'monospace',  // Monospace font ensures each character has the same width
+              fontWeight: '500',
+              minWidth: `${minWidth}px`, // Minimum width for the input
+            }}
+            value={inputValue}
+            onChange={handleInputNameChange}
+          />
+          &nbsp;menu
         </div>
+        <img style={{ width: '48px', height: '48px' }} src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s' />
       </div>
+    </div>
+
       <>
-          <div style={styles.uploadMessage}>
+        <div style={styles.uploadMessage}>
-            <p>Klik untuk ganti nama</p>
+          <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 style={styles.resultMessage}>
+        </div>
-            <p>-----------------</p>
+      </>
-            <div
-              onClick={() => { setIsConfigCafeIdentityName(true); cafeIdentifyNameRef.current && cafeIdentifyNameRef.current.focus(); }} style={styles.changeButton}>Ganti
-            </div>
-          </div>
-        </> 
       <div
         id="qr-code-container"
         style={{