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

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,58 +73,59 @@ 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 &&
-          <div
+          transactions.map((transaction) => (
-            key={transaction.transactionId}
+            <div
-            className={styles.RoundedRectangle}
+              key={transaction.transactionId}
-            onClick={() =>
+              className={styles.RoundedRectangle}
-              setSelectedTable(transaction.Table || { tableId: 0 })
+              onClick={() =>
-            }
+                setSelectedTable(transaction.Table || { tableId: 0 })
-          >
+              }
-            <h2 className={styles["Transactions-detail"]}>
+            >
-              Transaction ID: {transaction.transactionId}
+              <h2 className={styles["Transactions-detail"]}>
-            </h2>
+                Transaction ID: {transaction.transactionId}
-            <h2 className={styles["Transactions-detail"]}>
+              </h2>
-              Payment Type: {transaction.payment_type}
+              <h2 className={styles["Transactions-detail"]}>
-            </h2>
+                Payment Type: {transaction.payment_type}
-            <ul>
+              </h2>
-              {transaction.DetailedTransactions.map((detail) => (
+              <ul>
-                <li key={detail.detailedTransactionId}>
+                {transaction.DetailedTransactions.map((detail) => (
-                  <span>{detail.Item.name}</span> - {detail.qty} x Rp{" "}
+                  <li key={detail.detailedTransactionId}>
-                  {detail.Item.price}
+                    <span>{detail.Item.name}</span> - {detail.qty} x Rp{" "}
-                </li>
+                    {detail.Item.price}
-              ))}
+                  </li>
-            </ul>
+                ))}
-            <h2 className={styles["Transactions-detail"]}>
+              </ul>
-              {transaction.serving_type === "pickup"
+              <h2 className={styles["Transactions-detail"]}>
-                ? "Diambil di kasir"
+                {transaction.serving_type === "pickup"
-                : `Diantar ke meja nomor ${
+                  ? "Diambil di kasir"
-                    transaction.Table ? transaction.Table.tableNo : "N/A"
+                  : `Diantar ke meja nomor ${
-                  }`}
+                      transaction.Table ? transaction.Table.tableNo : "N/A"
-            </h2>
+                    }`}
-            <div className={styles.TotalContainer}>
+              </h2>
-              <span>Total:</span>
+              <div className={styles.TotalContainer}>
-              <span>
+                <span>Total:</span>
-                Rp {calculateTotalPrice(transaction.DetailedTransactions)}
+                <span>
-              </span>
+                  Rp {calculateTotalPrice(transaction.DetailedTransactions)}
+                </span>
+              </div>
+              <div className={styles.TotalContainer}>
+                <button
+                  className={styles.PayButton}
+                  onClick={() => handleConfirm(transaction.transactionId)}
+                  disabled={transaction.confirmed || isPaymentLoading} // Disable button if confirmed or loading
+                >
+                  {isPaymentLoading ? (
+                    <ColorRing height="50" width="50" color="white" />
+                  ) : transaction.confirmed ? (
+                    "Confirmed" // Display "Confirmed" if the transaction is confirmed
+                  ) : (
+                    "Confirm" // Display "Confirm" otherwise
+                  )}
+                </button>
+              </div>
             </div>
-            <div className={styles.TotalContainer}>
+          ))}
-              <button
-                className={styles.PayButton}
-                onClick={() => handleConfirm(transaction.transactionId)}
-                disabled={transaction.confirmed || isPaymentLoading} // Disable button if confirmed or loading
-              >
-                {isPaymentLoading ? (
-                  <ColorRing height="50" width="50" color="white" />
-                ) : transaction.confirmed ? (
-                  "Confirmed" // Display "Confirmed" if the transaction is confirmed
-                ) : (
-                  "Confirm" // Display "Confirm" otherwise
-                )}
-              </button>
-            </div>
-          </div>
-        ))}
       </div>
     </div>
   );