siang ok

src/App.js

@@ -163,6 +163,10 @@ function App() {
     handleModalFromURL();
   }, [shopId]);
 
+  useEffect(() => {
+    console.log(shopId + tableId);
+  }, [navigate]);
+
   // Function to open the modal
   const setModal = (content) => {
     setIsModalOpen(true);

src/components/Header.js

@@ -212,6 +212,7 @@ const Child = styled.div`
 const Header = ({
   HeaderText,
   shopId,
+  tableId,
   showProfile,
   user,
   isEdit,
@@ -221,7 +222,7 @@ const Header = ({
   removeConnectedGuestSides,
 }) => {
   const { goToLogin, goToGuestSideLogin, goToAdminCafes } =
-    useNavigationHelpers(shopId);
+    useNavigationHelpers(shopId, tableId);
   const [showRectangle, setShowRectangle] = useState(false);
   const [animate, setAnimate] = useState("");
   const rectangleRef = useRef(null);

src/pages/CafePage.js

@@ -33,6 +33,7 @@ function CafePage({
   const token = searchParams.get("token");
   const { shopId, tableId } = useParams();
   sendParam({ shopId, tableId });
+
   const navigate = useNavigate();
 
   const [loading, setLoading] = useState(true);
@@ -97,6 +98,7 @@ function CafePage({
             isEdit={() => setModal("edit")}
             isLogout={handleLogout}
             shopId={shopId}
+            tableId={tableId}
             user={user}
             guestSides={guestSides}
             guestSideOfClerk={guestSideOfClerk}

src/pages/Cart.js

@@ -10,10 +10,10 @@ import { getItemsByCafeId } from "../helpers/cartHelpers"; // Import getItemsByC
 import Modal from "../components/Modal"; // Import the reusable Modal component
 
 export default function Cart({ sendParam, totalItemsCount, deviceType }) {
-  const { shopId } = useParams();
-  sendParam(shopId);
+  const { shopId, tableId } = useParams();
+  sendParam({ shopId, tableId });
 
-  const { goToShop, goToInvoice } = useNavigationHelpers(shopId);
+  const { goToShop, goToInvoice } = useNavigationHelpers(shopId, tableId);
   const [cartItems, setCartItems] = useState([]);
   const [totalPrice, setTotalPrice] = useState(0);
   const [orderType, setOrderType] = useState("pickup");
@@ -186,9 +186,14 @@ export default function Cart({ sendParam, totalItemsCount, deviceType }) {
             onChange={handleOrderTypeChange}
           >
             <option value="pickup">Pickup</option>
-            <option value="serve">Serve</option>
+            {tableId == null && <option value="serve">Serve</option>}
+
+            {/* tableId harus di check terlebih dahulu untuk mendapatkan tableNo */}
+            {tableId != null && (
+              <option value="serve">Serve to table {tableId}</option>
+            )}
           </select>
-          {orderType === "serve" && (
+          {orderType === "serve" && tableId == null && (
             <input
               type="text"
               placeholder="Table Number"

src/pages/Invoice.js

@@ -12,7 +12,9 @@ import {
 } from "../helpers/transactionHelpers";
 
 export default function Invoice({ sendParam, deviceType }) {
-  const { shopId } = useParams();
+  const { shopId, tableId } = useParams();
+  sendParam({ shopId, tableId });
+
   const location = useLocation(); // Use useLocation hook instead of useSearchParams
   const searchParams = new URLSearchParams(location.search); // Pass location.search directly
 
@@ -20,10 +22,6 @@ export default function Invoice({ sendParam, deviceType }) {
   const orderType = searchParams.get("orderType");
   const tableNumber = searchParams.get("tableNumber");
 
-  useEffect(() => {
-    sendParam(shopId);
-  }, [sendParam, shopId]);
-
   const [cartItems, setCartItems] = useState([]);
   const [totalPrice, setTotalPrice] = useState(0);
   const [isPaymentLoading, setIsPaymentLoading] = useState(false); // State for payment button loading animation

src/pages/LoginPage.js

@@ -1,16 +1,17 @@
-import React from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
-import './LoginPage.css';
-import RouletteWheel from '../components/RouletteWheel';
-import { loginUser } from '../helpers/userHelpers'; // Import from userHelper.js
+import React from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import "./LoginPage.css";
+import RouletteWheel from "../components/RouletteWheel";
+import { loginUser } from "../helpers/userHelpers"; // Import from userHelper.js
 
 const LoginPage = () => {
   const navigate = useNavigate();
   const location = useLocation(); // Use useLocation hook instead of useSearchParams
   const searchParams = new URLSearchParams(location.search); // Pass location.search directly
 
-  const next = searchParams.get('next');
-  console.log(next);
+  const next = searchParams.get("next");
+  const table = searchParams.get("table");
+
   const handleLogin = async (email, username, password) => {
     try {
       const response = await loginUser(username, password);
@@ -21,14 +22,32 @@ const LoginPage = () => {
         if (response.cafeId !== null) {
           navigate(`/${response.cafeId}`);
         } else {
-          if (next) navigate(`/${next}`);
-          else navigate('/');
+          let destination = "/";
+
+          // Validate parameters and construct the destination URL
+          if (table && !next) {
+            console.error(
+              'Parameter "table" requires "next" to be present in the URL.',
+            );
+            // Navigate to a default route or handle this case as needed
+            navigate("/");
+            return;
+          }
+
+          if (next) {
+            destination = `/${next}`;
+            if (table) {
+              destination += `?table=${table}`;
+            }
+          }
+
+          navigate(destination, { replace: true });
         }
       } else {
-        console.error('Login failed');
+        console.error("Login failed");
       }
     } catch (error) {
-      console.error('Error occurred while logging in:', error.message);
+      console.error("Error occurred while logging in:", error.message);
     }
   };
 

src/pages/SearchResult.js

@@ -9,8 +9,9 @@ import Header from "../components/Header";
 
 function SearchResult({ user, shopItems, sendParam }) {
   const [searchParams] = useSearchParams();
-  const { shopId } = useParams();
-  sendParam(shopId);
+  const { shopId, tableId } = useParams();
+  sendParam({ shopId, tableId });
+
   const [searchValue, setSearchValue] = useState(
     "dwadawa vvwqd21qb13 4kfawfdwa dhawldhawr dliawbdjawndlks",
   );
@@ -39,7 +40,12 @@ function SearchResult({ user, shopItems, sendParam }) {
   return (
     <div className="App">
       <header className="App-header">
-        <Header HeaderText={"Search"} shopId={shopId} user={user} />
+        <Header
+          HeaderText={"Search"}
+          shopId={shopId}
+          tableId={tableId}
+          user={user}
+        />
         <div style={{ marginTop: "5px" }}></div>
         <SearchInput
           shopId={shopId}