pagi

src/components/Footer.js

@@ -28,6 +28,12 @@ export default function Footer({
     }
   };
 
+  const handleHapusMeja = (event) => {
+    event.stopPropagation(); // Ensure click event doesn't propagate
+    goToNonTable();
+    setIsStretched(false);
+  };
+
   const handleClickOutside = (event) => {
     if (scanMejaRef.current && !scanMejaRef.current.contains(event.target)) {
       setIsStretched(false);
@@ -111,7 +117,7 @@ export default function Footer({
             />
           )}
           {tableId && isStretched && (
-            <button onClick={goToNonTable} className={styles.hapusMejaBtn}>
+            <button onClick={handleHapusMeja} className={styles.hapusMejaBtn}>
               Hapus Meja
             </button>
           )}

src/components/SearchInput.js

@@ -26,9 +26,7 @@ const Searchinput = styled.input`
   outline: none;
   background-color: white;
   border: 1px solid #ccc;
-  transition:
-    background-color 0.3s ease,
-    border-color 0.3s ease;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
 
   &:focus {
     background-color: lightgray;
@@ -44,7 +42,12 @@ const SearchIcon = styled.svg`
   pointer-events: none;
 `;
 
-export default function SearchInput({ shopId, autofocus, onSearchChange }) {
+export default function SearchInput({
+  shopId,
+  tableId,
+  autofocus,
+  onSearchChange,
+}) {
   const [songName, setSongName] = useState("");
   const [debouncedSongName, setDebouncedSongName] = useState("");
   const navigate = useNavigate();
@@ -68,14 +71,18 @@ export default function SearchInput({ shopId, autofocus, onSearchChange }) {
   useEffect(() => {
     if (siteLoaded) {
       //Start the timer
-      if (autofocus)
-        navigate(`/${shopId}/search?query=${encodeURIComponent(songName)}`);
-      else if (songName != "")
-        navigate(`/${shopId}/search?query=${encodeURIComponent(songName)}`);
+      let url = "";
+      if (autofocus || songName != "") {
+        url = tableId
+          ? `/${shopId}/${tableId}/search?query=${encodeURIComponent(songName)}`
+          : `/${shopId}/search?query=${encodeURIComponent(songName)}`;
+        navigate(url);
+      }
 
       if (autofocus) {
         if (songName == "") {
-          navigate(`/${shopId}`);
+          if (tableId) navigate(`/${shopId}/${tableId}`);
+          else navigate(`/${shopId}`);
         }
       }
       if (onSearchChange) onSearchChange(songName);

src/components/TableCanvas.js

@@ -35,6 +35,7 @@ const TableCanvas = ({
 
   useEffect(() => {
     if (
+      !tables ||
       tables.length === 0 ||
       canvasSize.width === 0 ||
       canvasSize.height === 0

src/components/TableMaps.js

@@ -365,26 +365,27 @@ const TableCanvas = ({ shopId }) => {
           }}
         >
           <ul style={{ listStyleType: "none", padding: 0, margin: 0 }}>
-            {tables.map((table) => (
-              <li
-                key={table.tableId}
-                style={{
-                  backgroundColor: "white",
-                  marginBottom: "10px",
-                  padding: "10px",
-                  borderRadius: "4px",
-                  boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
-                }}
-                onClick={() => handleSelect(table)}
-              >
-                {
-                  table.tableNo === 0
-                    ? "Clerk" // Display "Clerk" if tableNo is 0
-                    : `Table ${table.tableNo}` // Display "Table {tableNo}" otherwise
-                }{" "}
-                - Position: ({table.xposition}, {table.yposition})
-              </li>
-            ))}
+            {tables &&
+              tables.map((table) => (
+                <li
+                  key={table.tableId}
+                  style={{
+                    backgroundColor: "white",
+                    marginBottom: "10px",
+                    padding: "10px",
+                    borderRadius: "4px",
+                    boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+                  }}
+                  onClick={() => handleSelect(table)}
+                >
+                  {
+                    table.tableNo === 0
+                      ? "Clerk" // Display "Clerk" if tableNo is 0
+                      : `Table ${table.tableNo}` // Display "Table {tableNo}" otherwise
+                  }{" "}
+                  - Position: ({table.xposition}, {table.yposition})
+                </li>
+              ))}
           </ul>
         </div>
       </div>