ok

src/components/TablesPage.js

@@ -259,7 +259,7 @@ const SetPaymentQr = ({ shop }) => {
             <div
               style={{
                 height: 28,
-                left: isconfigcafeidentityname ? 0:69,
+                left: isconfigcafeidentityname ? 0 : 69,
                 right: 0,
                 top: 5,
                 position: 'absolute',
@@ -328,7 +328,6 @@ const SetPaymentQr = ({ shop }) => {
                   >
                     {window.location.hostname}/
                   </div>
-
                   <input
                     ref={cafeIdentifyNameRef}
                     style={{
@@ -344,16 +343,24 @@ const SetPaymentQr = ({ shop }) => {
                       paddingLeft: isconfigcafeidentityname ? '10px' : '0', // Adjust padding when focused
                       borderLeft: isconfigcafeidentityname ? '1px solid #ccc' : '0', // Adjust border when focused
                     }}
-                    onChange={(e)=>setCafeIdentifyNameUpdate(e.target.value)}
+                    onChange={(e) => {
+                      // Convert to lowercase, replace spaces with underscores, and remove invalid characters
+                      const updatedValue = e.target.value
+                        .toLowerCase() // Convert input to lowercase
+                        .replace(/ /g, '_') // Replace spaces with underscores
+                        .replace(/[^a-z0-9_]/g, ''); // Remove characters that are not lowercase letters, numbers, or underscores
+                      setCafeIdentifyNameUpdate(updatedValue);
+                    }}
                     value={cafeIdentifyNameUpdate}
                     onFocus={() => {
                       setIsConfigCafeIdentityName(true); // Set the state to true when input is focused
                     }}
                     onBlur={() => {
                       setIsConfigCafeIdentityName(false); // Set the state to false when input loses focus
-                      setCafeIdentifyNameUpdate(cafeIdentifyNameDefault)
+                      setCafeIdentifyNameUpdate(cafeIdentifyNameDefault); // Reset to default value on blur
                     }} // Handle blur event to reset the state
                   />
+
                 </div>
               </div>
               <div
@@ -600,10 +607,10 @@ const SetPaymentQr = ({ shop }) => {
         </div>
       </div>
 
-      
+
 
       {!isconfigcafeidentityname ? <div
-        onClick={() => {setIsConfigCafeIdentityName(true); cafeIdentifyNameRef.current && cafeIdentifyNameRef.current.focus()}} // Open the config modal
+        onClick={() => { setIsConfigCafeIdentityName(true); cafeIdentifyNameRef.current && cafeIdentifyNameRef.current.focus() }} // Open the config modal
         style={{
           backgroundColor: '#303034',
           right: 0,
@@ -618,8 +625,10 @@ const SetPaymentQr = ({ shop }) => {
       >
         Ganti alamat kedai
       </div> : (
-        <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', 
-        marginBottom: '10px' }}>
+        <div style={{
+          display: 'flex', justifyContent: 'space-between', width: '100%',
+          marginBottom: '10px'
+        }}>
           <div
             onClick={() => setIsConfigCafeIdentityName(false)} // Close the config modal
             style={{
@@ -641,7 +650,7 @@ const SetPaymentQr = ({ shop }) => {
               setCafeIdentifyNameDefault(cafeIdentifyNameUpdate)
               // Handle save functionality here
               setIsConfigCafeIdentityName(false); // Close after saving
-              
+
             }}
             style={{
               backgroundColor: '#303034',