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:
+  transition: background-color 0.3s ease, border-color 0.3s ease;
-    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)
+      let url = "";
-        navigate(`/${shopId}/search?query=${encodeURIComponent(songName)}`);
+      if (autofocus || songName != "") {
-      else if (songName != "")
+        url = tableId
-        navigate(`/${shopId}/search?query=${encodeURIComponent(songName)}`);
+          ? `/${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,7 +365,8 @@ const TableCanvas = ({ shopId }) => {
           }}
         >
           <ul style={{ listStyleType: "none", padding: 0, margin: 0 }}>
-            {tables.map((table) => (
+            {tables &&
+              tables.map((table) => (
                 <li
                   key={table.tableId}
                   style={{

src/helpers/navigationHelpers.js

@@ -26,8 +26,17 @@ export const useNavigationHelpers = (shopId, tableId) => {
     navigate(url);
   };
   const goToScan = () => {
-    // Construct the base URL for the shop
+    // Construct the base URL
-    let url = `/scan`;
+    let url = "/scan";
+
+    // Append query parameters conditionally
+    const queryParams = new URLSearchParams();
+    if (shopId) queryParams.append("next", shopId);
+
+    // Set the URL with query parameters
+    if (queryParams.toString()) {
+      url += `?${queryParams.toString()}`;
+    }
 
     // Perform the navigation
     navigate(url);

src/pages/CafePage.js

@@ -110,7 +110,7 @@ function CafePage({
             removeConnectedGuestSides={removeConnectedGuestSides}
           />
           <div style={{ marginTop: "5px" }}></div>
-          <SearchInput shopId={shopId} />
+          <SearchInput shopId={shopId} tableId={tableId} />
           <div style={{ marginTop: "15px" }}></div>
           <ItemTypeLister
             user={user}

src/pages/SearchResult.js

@@ -16,7 +16,7 @@ function SearchResult({ user, shopItems, sendParam }) {
   sendParam({ shopId, tableId });
 
   const [searchValue, setSearchValue] = useState(
-    "dwadawa vvwqd21qb13 4kfawfdwa dhawldhawr dliawbdjawndlks",
+    "dwadawa vvwqd21qb13 4kfawfdwa dhawldhawr dliawbdjawndlks"
   );
 
   // Function to handle search input change
@@ -28,7 +28,7 @@ function SearchResult({ user, shopItems, sendParam }) {
     .map((itemType) => {
       // Filter items in the itemList based on searchValue
       const filteredItemList = itemType.itemList.filter((item) =>
-        item.name.toLowerCase().includes(searchValue.toLowerCase()),
+        item.name.toLowerCase().includes(searchValue.toLowerCase())
       );
 
       // Return itemType with only filtered items
@@ -47,6 +47,7 @@ function SearchResult({ user, shopItems, sendParam }) {
         <div style={{ marginTop: "5px" }}></div>
         <SearchInput
           shopId={shopId}
+          tableId={tableId}
           autofocus={true}
           onSearchChange={handleSearchChange}
         />

src/pages/Transactions.js

@@ -73,7 +73,8 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
       <div style={{ marginTop: "30px" }}></div>
       <TableCanvas tables={tables} selectedTable={selectedTable} />
       <div className={styles.TransactionListContainer}>
-        {transactions.map((transaction) => (
+        {transactions &&
+          transactions.map((transaction) => (
             <div
               key={transaction.transactionId}
               className={styles.RoundedRectangle}