feat(UC07 & 08): add routes each page

frontend/src/AppRoutes.tsx

@@ -12,22 +12,25 @@ import SignUpTenant from "./pages/SignUpTenant";
 import SignUpCashier from "./pages/SignUpCashier";
 import RegisterTable from "./pages/RegisterTable";
 import ChooseRolePage from "./pages/RolePage";
+import OrderDetails from "./pages/ManageOrderTenant";
 
+const orderid = 1;
 export default function AppRoutes() {
     return (
         <Routes>
             <Route path="/" element={<Homepage />} />
             <Route path="/role" element={<ChooseRolePage />} />
-            <Route path="/login" element={<LoginPage />} />
+            {/* <Route path="/login" element={<LoginPage />} /> */}
             <Route path="/login/customer" element={<RegisterTable />} />
             <Route path="/signup/tenant" element={<SignUpTenant />} />
             <Route path="/signup/cashier" element={<SignUpCashier />} />
-            <Route path="/tenant" element={<TenantInfo />} />
+            <Route path="/tenant" element={<TenantInfo tenantid={2} />} />
             <Route path="/cart" element={<ShoppingCart />} />
             <Route path="/order/list" element={<OrderList />} />
             <Route path="/order/summary" element={<OrderSummary />} />
-            <Route path="/order/manage" element={<PageManageOrder />} />
-            <Route path="/menu/manage" element={<PageManageMenu />} />
+            <Route path="/tenantpage/orders" element={<PageManageOrder />} />
+            <Route path="/tenantpage/menus" element={<PageManageMenu />} />
+            <Route path="/tenantpage/orders/:orderid" element={<OrderDetails />} />
         </Routes>
     );
 }

frontend/src/components/BackButton.tsx

-export default function BackButton() {
+export default function BackButton(props: any) {
     return (
-        <button type="button" className="absolute text-mealshub-red bg-white font-bold text-lg rounded-full text-sm px-3 py-3 text-center shadow-xl">
-            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 36 36" fill="none">
-                <path d="M7.875 16.875H30.375C30.6734 16.875 30.9595 16.9935 31.1705 17.2045C31.3815 17.4155 31.5 17.7016 31.5 18C31.5 18.2984 31.3815 18.5845 31.1705 18.7955C30.9595 19.0065 30.6734 19.125 30.375 19.125H7.875C7.57663 19.125 7.29048 19.0065 7.07951 18.7955C6.86853 18.5845 6.75 18.2984 6.75 18C6.75 17.7016 6.86853 17.4155 7.07951 17.2045C7.29048 16.9935 7.57663 16.875 7.875 16.875Z" fill="currentColor"/>
-                <path d="M8.34081 18L17.6716 27.3285C17.8828 27.5398 18.0015 27.8263 18.0015 28.125C18.0015 28.4238 17.8828 28.7103 17.6716 28.9215C17.4603 29.1328 17.1738 29.2514 16.8751 29.2514C16.5763 29.2514 16.2898 29.1328 16.0786 28.9215L5.95356 18.7965C5.84879 18.692 5.76567 18.5679 5.70895 18.4312C5.65224 18.2945 5.62305 18.148 5.62305 18C5.62305 17.852 5.65224 17.7055 5.70895 17.5688C5.76567 17.4322 5.84879 17.308 5.95356 17.2035L16.0786 7.07852C16.2898 6.86727 16.5763 6.7486 16.8751 6.7486C17.1738 6.7486 17.4603 6.86727 17.6716 7.07852C17.8828 7.28976 18.0015 7.57627 18.0015 7.87502C18.0015 8.17376 17.8828 8.46027 17.6716 8.67152L8.34081 18Z" fill="currentColor"/>
-            </svg>
-        </button>
+        <a href={props.page}>
+            <button type="button" className="absolute text-mealshub-red bg-white font-bold text-lg rounded-full text-sm px-3 py-3 text-center shadow-xl">
+                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 36 36" fill="none">
+                    <path d="M7.875 16.875H30.375C30.6734 16.875 30.9595 16.9935 31.1705 17.2045C31.3815 17.4155 31.5 17.7016 31.5 18C31.5 18.2984 31.3815 18.5845 31.1705 18.7955C30.9595 19.0065 30.6734 19.125 30.375 19.125H7.875C7.57663 19.125 7.29048 19.0065 7.07951 18.7955C6.86853 18.5845 6.75 18.2984 6.75 18C6.75 17.7016 6.86853 17.4155 7.07951 17.2045C7.29048 16.9935 7.57663 16.875 7.875 16.875Z" fill="currentColor" />
+                    <path d="M8.34081 18L17.6716 27.3285C17.8828 27.5398 18.0015 27.8263 18.0015 28.125C18.0015 28.4238 17.8828 28.7103 17.6716 28.9215C17.4603 29.1328 17.1738 29.2514 16.8751 29.2514C16.5763 29.2514 16.2898 29.1328 16.0786 28.9215L5.95356 18.7965C5.84879 18.692 5.76567 18.5679 5.70895 18.4312C5.65224 18.2945 5.62305 18.148 5.62305 18C5.62305 17.852 5.65224 17.7055 5.70895 17.5688C5.76567 17.4322 5.84879 17.308 5.95356 17.2035L16.0786 7.07852C16.2898 6.86727 16.5763 6.7486 16.8751 6.7486C17.1738 6.7486 17.4603 6.86727 17.6716 7.07852C17.8828 7.28976 18.0015 7.57627 18.0015 7.87502C18.0015 8.17376 17.8828 8.46027 17.6716 8.67152L8.34081 18Z" fill="currentColor" />
+                </svg>
+            </button>
+        </a>
     )
 }

frontend/src/components/Logo.tsx

@@ -3,13 +3,14 @@ import { Link } from "react-router-dom";
 interface LogoProps {
     height?: string;
     width?: string;
+    default: string;
 }
 
 export default function Logo(props: LogoProps) {
     const { height, width } = props;
 
     return (
-        <Link to={"/"}>
+        <a href={props.default}>
             <img
                 src="../../public/images/MealsHub.png"
                 alt="MealsHub"
@@ -17,6 +18,7 @@ export default function Logo(props: LogoProps) {
                     ${height ? `h-${height}` : ""} 
                     ${width ? `w-${width}` : ""}`}
             />
-        </Link>
+        </a>
+
     );
 }

frontend/src/components/ProductCard.tsx

@@ -3,17 +3,17 @@ import { useShoppingCart } from '../contexts/ShoppingCartContext';
 import { useLocalStorage } from '../hooks/useLocalStorage';
 
 interface ProductCardProps {
-    id : number,
+    id: number,
     image: string,
     name: string,
     description: string,
     price: number
 }
 
-export default function ProductCard({data}: {data: ProductCardProps[]}) {
-    const productlist = data.map(({id, image, name, description, price}) => {
+export default function ProductCard({ data }: { data: ProductCardProps[] }) {
+    const productlist = data.map(({ id, image, name, description, price }) => {
         const { getItemQuantity, increaseItemQuantity, removeItem } = useShoppingCart();
-        
+
         const [isAdded, setIsAdded] = useLocalStorage<boolean>(`product-${id}`, false);
 
         useEffect(() => {
@@ -46,18 +46,19 @@ export default function ProductCard({data}: {data: ProductCardProps[]}) {
                             </img>
                         </div>
                         <div className="flex flex-row items-center">
-                        <button
-                            type="button"
-                            className={`${isAdded ? 'text-mealshub-red hover:text-white border-2 border-mealshub-red hover:bg-mealshub-red' : 'text-white bg-mealshub-red hover:text-mealshub-red border-2 border-mealshub-red hover:bg-white'} font-bold text-lg rounded-full text-sm px-5 py-2.5 text-center`}
-                            onClick={handleClick}
-                        >
-                            {isAdded ? "Added" : "Add to Cart"}
-                        </button>
+                            <button
+                                type="button"
+                                className={`${isAdded ? 'text-mealshub-red hover:text-white border-2 border-mealshub-red hover:bg-mealshub-red' : 'text-white bg-mealshub-red hover:text-mealshub-red border-2 border-mealshub-red hover:bg-white'} font-bold text-lg rounded-full text-sm px-5 py-2.5 text-center`}
+                                onClick={handleClick}
+                            >
+                                {isAdded ? "Added" : "Add to Cart"}
+                            </button>
                         </div>
                     </div>
                 </div>
             </div>
-    )});
+        )
+    });
 
     return productlist;
 }
\ No newline at end of file

frontend/src/components/Sidebar.tsx

@@ -10,7 +10,7 @@ export default function Sidebar(props: any) {
                 >
                     <div className="flex flex-col w-52">
                         <a
-                            href="#"
+                            href={props[`page${index + 1}`]}
                             className="flex items-center rounded-lg group"
                         >
                             <div className="absolute group text-mealshub-orange">
@@ -60,7 +60,7 @@ export default function Sidebar(props: any) {
                 >
                     <div className="flex w-52">
                         <a
-                            href="#"
+                            href={props[`page${props.current}`]}
                             className="flex items-center rounded-lg group"
                         >
                             <div className="absolute group text-white">
@@ -112,11 +112,11 @@ export default function Sidebar(props: any) {
                 </svg>
             </button>
             <div className="fixed top-0 left-0 flex flex-col bg-white w-1/5 h-screen md:flex-col md:max-w-1/5 transition-transform -translate-x-full lg:translate-x-0 overflow-y-auto">
-                <a href="" className="flex flex-col items-center">
+                <div className="flex flex-col items-center">
                     <div className="flex items-center h-48 mb-4">
-                        <Logo height="48" width="48" />
+                        <Logo height="48" width="48" default={props.default} />
                     </div>
-                </a>
+                </div>
                 <div className="flex flex-col">
                     <ul className="flex flex-col space-y-2 font-medium text-xl text-mealshub-orange">
                         {menuItems}

frontend/src/components/TableOrder.tsx

@@ -299,7 +299,7 @@ function TableOrder({ data }: { data: Props[] }) {
                                         </td>
                                         <td className="px-6 py-4">
                                             <a
-                                                href="#"
+                                                href={`/tenantpage/orders/${record.orderId}`}
                                                 className="text-mealshub-blue hover:underline"
                                             >
                                                 Click for Details

frontend/src/main.tsx

@@ -3,31 +3,16 @@ import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import App from "./App.tsx";
 import "./index.css";
-import { AuthProvider } from "./hooks/useAuth.tsx";
-import { ShoppingCartProvider } from "./contexts/ShoppingCartContext";
-import { ToastContainer } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
+import AppRoutes from "./AppRoutes.tsx";
+// import { AuthProvider } from "./hooks/useAuth.tsx";
+// import { ShoppingCartProvider } from "./contexts/ShoppingCartContext";
+// import { ToastContainer } from "react-toastify";
+// import "react-toastify/dist/ReactToastify.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
         <BrowserRouter>
-            <AuthProvider>
-                <ShoppingCartProvider>
-                    <App />
-                    <ToastContainer
-                        position="bottom-right"
-                        autoClose={5000}
-                        hideProgressBar={false}
-                        newestOnTop={false}
-                        closeOnClick
-                        rtl={false}
-                        pauseOnFocusLoss
-                        draggable
-                        pauseOnHover
-                        theme="light"
-                    />
-                </ShoppingCartProvider>
-            </AuthProvider>
+            <AppRoutes />
         </BrowserRouter>
     </React.StrictMode>,
 );

frontend/src/pages/ManageOrderTenant.tsx

+import Sidebar from "../components/Sidebar";
+import OrderDetailsCard from "../components/OrderDetailsCard";
+import OrderSummaryCard from "../components/OrderSummaryCard";
+import WelcomingText from "../components/WelcomingText";
+import BackButton from "../components/BackButton";
+import Welcome from "../components/Welcome";
+import Profile from "../components/Profile";
+import { useEffect, useState } from "react";
+import ProfileDropDown from "../components/ProfileDropDown";
+import Axios from "axios";
+import { useParams } from "react-router-dom";
+
+type id = number;
+
+interface Order {
+    id: number,
+    status: string,
+    time: Date,
+    id_table: number,
+    id_tenant: number
+}
+
+interface OrderProduct {
+    num_product: number,
+    id_product: number,
+    id_order: number
+}
+
+interface Product {
+    id: number,
+    name: string,
+    price: number
+}
+
+interface Tenant {
+    id: number,
+    name: string
+}
+
+interface Payment {
+    id: number,
+    status: string,
+    id_order: number
+}
+
+interface OrderSummary {
+    name: string,
+    orderlist: (string | number)[][]
+}
+
+interface OrderDetails {
+    orderid: number,
+    code: number,
+    tableid: number,
+    time: Date,
+    orderstatus: string,
+    paymentstatus: string
+}
+
+export default function OrderDetails() {
+    const { orderid } = useParams();
+    const [showProfileDropDown, setShowProfileDropDown] = useState(false);
+
+    const handleProfileClick = () => {
+        setShowProfileDropDown(!showProfileDropDown);
+    };
+    const [joinedOrderSummaryData, setJoinedOrderSummaryData] = useState<OrderSummary[]>([]);
+
+    const getOrderSummaryData = async () => {
+        const orderResponse = await Axios.get(`http://localhost:8000/orders/${orderid}`);
+        const productResponse = await Axios.get("http://localhost:8000/products");
+        const orderProductResponse = await Axios.get("http://localhost:8000/orderproduct");
+        const tenantResponse = await Axios.get("http://localhost:8000/tenants");
+
+        const orderData = orderResponse.data.data;
+        const productData = productResponse.data.data;
+        const orderProductData = orderProductResponse.data.data;
+        const tenantData = tenantResponse.data.data;
+
+        // Perform the join based on the specified conditions
+        // OrderData is not an array, so we need to convert it into an array
+        const orderDataArray = [orderData];
+        const result = orderDataArray.map((order: Order) => {
+            const tenant = tenantData.find((tenant: Tenant) => tenant.id === order.id_tenant);
+            const orderproduct = orderProductData.filter((orderProduct: OrderProduct) => orderProduct.id_order === order.id);
+            const listproduct = orderproduct.map((orderProduct: OrderProduct) => {
+                const product = productData.find((product: Product) => product.id === orderProduct.id_product);
+                return [product.name, orderProduct.num_product, product.price];
+            })
+
+            return {
+                name: tenant.name,
+                orderlist: listproduct
+            }
+        });
+
+        setJoinedOrderSummaryData(result);
+
+    };
+
+    useEffect(() => {
+        getOrderSummaryData();
+    }, []);
+
+    console.log(joinedOrderSummaryData);
+
+    const [joinedOrderDetailsData, setJoinedOrderDetailsData] = useState<OrderDetails[]>([]);
+
+    const getOrderDetailsData = async () => {
+        const orderResponse = await Axios.get(`http://localhost:8000/orders/${orderid}`);
+        const paymentResponse = await Axios.get("http://localhost:8000/payments");
+
+        const orderData = orderResponse.data.data;
+        const paymentData = paymentResponse.data.data;
+
+        // Perform the join based on the specified conditions
+        const OrderDataArray = [orderData];
+        const result = OrderDataArray.map((order: Order) => {
+            const matchingPayment = paymentData.find((payment: Payment) => payment.id_order === order.id);
+
+            return {
+                orderid: order.id,
+                code: matchingPayment.id,
+                tableid: order.id_table,
+                time: order.time,
+                orderstatus: order.status,
+                paymentstatus: matchingPayment.status
+            };
+        });
+
+        setJoinedOrderDetailsData(result);
+
+    };
+
+    useEffect(() => {
+        getOrderDetailsData();
+    }, []);
+
+    console.log(joinedOrderDetailsData);
+
+    return (
+        // Create grid layout for sidebard, header, and main content
+        <div className="grid grid-cols-5 grid-rows-8 bg-mealshub-cream min-h-screen">
+            {/* Sidebar */}
+            <div className="col-span-1 row-span-8">
+                <Sidebar
+                    default="/tenantpage/menus"
+                    number={2}
+                    current={2}
+                    menu1="Menu"
+                    path1="M0 0H27V32H0V0ZM2.7 3.2V12H24.3V3.2H2.7ZM24.3 15.2H2.7V28.8H24.3V15.2ZM5.3946 6.4H8.1V9.6H8.0946V9.6064H5.3946V6.4ZM10.8 6.4H21.6V9.6H10.8V6.4Z"
+                    page1="/tenantpage/menus"
+                    menu2="Orders"
+                    path2="M4.10306 1.10306C3 2.20612 3 3.97929 3 7.52941V24.4706C3 28.0207 3 29.7939 4.10306 30.8969C5.20612 32 6.97929 32 10.5294 32H21.8235C25.3736 32 27.1468 32 28.2499 30.8969C29.3529 29.7939 29.3529 28.0207 29.3529 24.4706V7.52941C29.3529 3.97929 29.3529 2.20612 28.2499 1.10306C27.1468 -1.12197e-07 25.3736 0 21.8235 0H10.5294C6.97929 0 5.20612 -1.12197e-07 4.10306 1.10306ZM10.5294 7.52941C10.0302 7.52941 9.5514 7.72773 9.19839 8.08074C8.84538 8.43375 8.64706 8.91253 8.64706 9.41176C8.64706 9.911 8.84538 10.3898 9.19839 10.7428C9.5514 11.0958 10.0302 11.2941 10.5294 11.2941H21.8235C22.3228 11.2941 22.8015 11.0958 23.1546 10.7428C23.5076 10.3898 23.7059 9.911 23.7059 9.41176C23.7059 8.91253 23.5076 8.43375 23.1546 8.08074C22.8015 7.72773 22.3228 7.52941 21.8235 7.52941H10.5294ZM10.5294 15.0588C10.0302 15.0588 9.5514 15.2571 9.19839 15.6102C8.84538 15.9632 8.64706 16.4419 8.64706 16.9412C8.64706 17.4404 8.84538 17.9192 9.19839 18.2722C9.5514 18.6252 10.0302 18.8235 10.5294 18.8235H21.8235C22.3228 18.8235 22.8015 18.6252 23.1546 18.2722C23.5076 17.9192 23.7059 17.4404 23.7059 16.9412C23.7059 16.4419 23.5076 15.9632 23.1546 15.6102C22.8015 15.2571 22.3228 15.0588 21.8235 15.0588H10.5294ZM10.5294 22.5882C10.0302 22.5882 9.5514 22.7866 9.19839 23.1396C8.84538 23.4926 8.64706 23.9714 8.64706 24.4706C8.64706 24.9698 8.84538 25.4486 9.19839 25.8016C9.5514 26.1546 10.0302 26.3529 10.5294 26.3529H18.0588C18.5581 26.3529 19.0368 26.1546 19.3898 25.8016C19.7429 25.4486 19.9412 24.9698 19.9412 24.4706C19.9412 23.9714 19.7429 23.4926 19.3898 23.1396C19.0368 22.7866 18.5581 22.5882 18.0588 22.5882H10.5294Z"
+                    page2="/tenantpage/orders"
+                />
+            </div>
+            {/* Header */}
+            <div className="col-span-4">
+                <div className="row-span-1 ms-20 mt-9 py-3 w-11/12">
+                    <Welcome user="Aldaebaran" />
+                </div>
+                <div className="absolute top-0 right-0 mt-9 mx-12">
+                    <Profile image="/public/images/ProfileDefault.png" onProfileClick={handleProfileClick} />
+                </div>
+                <div className="absolute top-12 right-0 mt-9 mx-12">
+                    {showProfileDropDown && <ProfileDropDown name="Aldaebaran" email="Aldaebaran@example.com" />}
+                </div>
+                <div className="row-span-7 mt-6 mb-9 w-11/12">
+                    <div className="ms-4">
+                        <BackButton page="/tenantpage/orders" />
+                    </div>
+                    <div className="ms-20 py-12 bg-white rounded-3xl">
+                        <h2 className="text-mealshub-red text-3xl font-bold ms-16">Order Details</h2>
+                        <OrderDetailsCard data={joinedOrderDetailsData} />
+                        <OrderSummaryCard data={joinedOrderSummaryData} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file

frontend/src/pages/OrderDetailsTenant.tsx

-import Sidebar from "../components/Sidebar";
-import OrderDetailsCard from "../components/OrderDetailsCard";
-import OrderSummaryCard from "../components/OrderSummaryCard";
-import WelcomingText from "../components/WelcomingText";
-import BackButton from "../components/BackButton";
-import Welcome from "../components/Welcome";
-import Profile from "../components/Profile";
-import { useState } from "react";
-import ProfileDropDown from "../components/ProfileDropDown";
-
-export default function OrderDetails() {
-    const [showProfileDropDown, setShowProfileDropDown] = useState(false);
-
-    const handleProfileClick = () => {
-        setShowProfileDropDown(!showProfileDropDown);
-    };
-    return (
-        // Create grid layout for sidebard, header, and main content
-        <div className="grid grid-cols-5 grid-rows-8 bg-mealshub-cream min-h-screen">
-            {/* Sidebar */}
-            <div className="col-span-1 row-span-8">
-                <Sidebar number={2} current={1} menu1="Menu" path1="M0 0H27V32H0V0ZM2.7 3.2V12H24.3V3.2H2.7ZM24.3 15.2H2.7V28.8H24.3V15.2ZM5.3946 6.4H8.1V9.6H8.0946V9.6064H5.3946V6.4ZM10.8 6.4H21.6V9.6H10.8V6.4Z" menu2="Orders" path2="M4.10306 1.10306C3 2.20612 3 3.97929 3 7.52941V24.4706C3 28.0207 3 29.7939 4.10306 30.8969C5.20612 32 6.97929 32 10.5294 32H21.8235C25.3736 32 27.1468 32 28.2499 30.8969C29.3529 29.7939 29.3529 28.0207 29.3529 24.4706V7.52941C29.3529 3.97929 29.3529 2.20612 28.2499 1.10306C27.1468 -1.12197e-07 25.3736 0 21.8235 0H10.5294C6.97929 0 5.20612 -1.12197e-07 4.10306 1.10306ZM10.5294 7.52941C10.0302 7.52941 9.5514 7.72773 9.19839 8.08074C8.84538 8.43375 8.64706 8.91253 8.64706 9.41176C8.64706 9.911 8.84538 10.3898 9.19839 10.7428C9.5514 11.0958 10.0302 11.2941 10.5294 11.2941H21.8235C22.3228 11.2941 22.8015 11.0958 23.1546 10.7428C23.5076 10.3898 23.7059 9.911 23.7059 9.41176C23.7059 8.91253 23.5076 8.43375 23.1546 8.08074C22.8015 7.72773 22.3228 7.52941 21.8235 7.52941H10.5294ZM10.5294 15.0588C10.0302 15.0588 9.5514 15.2571 9.19839 15.6102C8.84538 15.9632 8.64706 16.4419 8.64706 16.9412C8.64706 17.4404 8.84538 17.9192 9.19839 18.2722C9.5514 18.6252 10.0302 18.8235 10.5294 18.8235H21.8235C22.3228 18.8235 22.8015 18.6252 23.1546 18.2722C23.5076 17.9192 23.7059 17.4404 23.7059 16.9412C23.7059 16.4419 23.5076 15.9632 23.1546 15.6102C22.8015 15.2571 22.3228 15.0588 21.8235 15.0588H10.5294ZM10.5294 22.5882C10.0302 22.5882 9.5514 22.7866 9.19839 23.1396C8.84538 23.4926 8.64706 23.9714 8.64706 24.4706C8.64706 24.9698 8.84538 25.4486 9.19839 25.8016C9.5514 26.1546 10.0302 26.3529 10.5294 26.3529H18.0588C18.5581 26.3529 19.0368 26.1546 19.3898 25.8016C19.7429 25.4486 19.9412 24.9698 19.9412 24.4706C19.9412 23.9714 19.7429 23.4926 19.3898 23.1396C19.0368 22.7866 18.5581 22.5882 18.0588 22.5882H10.5294Z" />
-            </div>
-            {/* Header */}
-            <div className="col-span-4">
-                <div className="row-span-1 ms-20 mt-9 py-3 w-11/12">
-                    <Welcome user="Aldaebaran" />
-                </div>
-                <div className="absolute top-0 right-0 mt-9 mx-12">
-                    <Profile image="/public/images/ProfileDefault.png" onProfileClick={handleProfileClick} />
-                </div>
-                <div className="absolute top-12 right-0 mt-9 mx-12">
-                    {showProfileDropDown && <ProfileDropDown name="Aldaebaran" email="Aldaebaran@example.com" />}
-                </div>
-                <div className="row-span-7 mt-6 mb-9 w-11/12">
-                    <div className="ms-4">
-                        <BackButton />
-                    </div>
-                    <div className="ms-20 py-12 bg-white rounded-3xl">
-                        <h2 className="text-mealshub-red text-3xl font-bold ms-16">Order Details</h2>
-                        <OrderDetailsCard />
-                        <OrderSummaryCard />
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
\ No newline at end of file

frontend/src/pages/PageManageMenu.tsx

@@ -81,12 +81,15 @@ export default function PageManageMenu() {
             {/* Sidebar */}
             <div className="col-span-1 row-span-8">
                 <Sidebar
+                    default="/tenantpage/menus"
                     number={2}
                     current={1}
                     menu1="Menu"
                     path1="M0 0H27V32H0V0ZM2.7 3.2V12H24.3V3.2H2.7ZM24.3 15.2H2.7V28.8H24.3V15.2ZM5.3946 6.4H8.1V9.6H8.0946V9.6064H5.3946V6.4ZM10.8 6.4H21.6V9.6H10.8V6.4Z"
+                    page1="/tenantpage/menus"
                     menu2="Orders"
                     path2="M4.10306 1.10306C3 2.20612 3 3.97929 3 7.52941V24.4706C3 28.0207 3 29.7939 4.10306 30.8969C5.20612 32 6.97929 32 10.5294 32H21.8235C25.3736 32 27.1468 32 28.2499 30.8969C29.3529 29.7939 29.3529 28.0207 29.3529 24.4706V7.52941C29.3529 3.97929 29.3529 2.20612 28.2499 1.10306C27.1468 -1.12197e-07 25.3736 0 21.8235 0H10.5294C6.97929 0 5.20612 -1.12197e-07 4.10306 1.10306ZM10.5294 7.52941C10.0302 7.52941 9.5514 7.72773 9.19839 8.08074C8.84538 8.43375 8.64706 8.91253 8.64706 9.41176C8.64706 9.911 8.84538 10.3898 9.19839 10.7428C9.5514 11.0958 10.0302 11.2941 10.5294 11.2941H21.8235C22.3228 11.2941 22.8015 11.0958 23.1546 10.7428C23.5076 10.3898 23.7059 9.911 23.7059 9.41176C23.7059 8.91253 23.5076 8.43375 23.1546 8.08074C22.8015 7.72773 22.3228 7.52941 21.8235 7.52941H10.5294ZM10.5294 15.0588C10.0302 15.0588 9.5514 15.2571 9.19839 15.6102C8.84538 15.9632 8.64706 16.4419 8.64706 16.9412C8.64706 17.4404 8.84538 17.9192 9.19839 18.2722C9.5514 18.6252 10.0302 18.8235 10.5294 18.8235H21.8235C22.3228 18.8235 22.8015 18.6252 23.1546 18.2722C23.5076 17.9192 23.7059 17.4404 23.7059 16.9412C23.7059 16.4419 23.5076 15.9632 23.1546 15.6102C22.8015 15.2571 22.3228 15.0588 21.8235 15.0588H10.5294ZM10.5294 22.5882C10.0302 22.5882 9.5514 22.7866 9.19839 23.1396C8.84538 23.4926 8.64706 23.9714 8.64706 24.4706C8.64706 24.9698 8.84538 25.4486 9.19839 25.8016C9.5514 26.1546 10.0302 26.3529 10.5294 26.3529H18.0588C18.5581 26.3529 19.0368 26.1546 19.3898 25.8016C19.7429 25.4486 19.9412 24.9698 19.9412 24.4706C19.9412 23.9714 19.7429 23.4926 19.3898 23.1396C19.0368 22.7866 18.5581 22.5882 18.0588 22.5882H10.5294Z"
+                    page2="/tenantpage/orders"
                 />
             </div>
             {/* Header */}

frontend/src/pages/PageManageOrder.tsx

@@ -20,12 +20,15 @@ export default function PageManageOrder() {
             {/* Sidebar */}
             <div className="col-span-1 row-span-8">
                 <Sidebar
+                    default="/tenantpage/menus"
                     number={2}
                     current={2}
                     menu1="Menu"
                     path1="M0 0H27V32H0V0ZM2.7 3.2V12H24.3V3.2H2.7ZM24.3 15.2H2.7V28.8H24.3V15.2ZM5.3946 6.4H8.1V9.6H8.0946V9.6064H5.3946V6.4ZM10.8 6.4H21.6V9.6H10.8V6.4Z"
+                    page1="/tenantpage/menus"
                     menu2="Orders"
                     path2="M4.10306 1.10306C3 2.20612 3 3.97929 3 7.52941V24.4706C3 28.0207 3 29.7939 4.10306 30.8969C5.20612 32 6.97929 32 10.5294 32H21.8235C25.3736 32 27.1468 32 28.2499 30.8969C29.3529 29.7939 29.3529 28.0207 29.3529 24.4706V7.52941C29.3529 3.97929 29.3529 2.20612 28.2499 1.10306C27.1468 -1.12197e-07 25.3736 0 21.8235 0H10.5294C6.97929 0 5.20612 -1.12197e-07 4.10306 1.10306ZM10.5294 7.52941C10.0302 7.52941 9.5514 7.72773 9.19839 8.08074C8.84538 8.43375 8.64706 8.91253 8.64706 9.41176C8.64706 9.911 8.84538 10.3898 9.19839 10.7428C9.5514 11.0958 10.0302 11.2941 10.5294 11.2941H21.8235C22.3228 11.2941 22.8015 11.0958 23.1546 10.7428C23.5076 10.3898 23.7059 9.911 23.7059 9.41176C23.7059 8.91253 23.5076 8.43375 23.1546 8.08074C22.8015 7.72773 22.3228 7.52941 21.8235 7.52941H10.5294ZM10.5294 15.0588C10.0302 15.0588 9.5514 15.2571 9.19839 15.6102C8.84538 15.9632 8.64706 16.4419 8.64706 16.9412C8.64706 17.4404 8.84538 17.9192 9.19839 18.2722C9.5514 18.6252 10.0302 18.8235 10.5294 18.8235H21.8235C22.3228 18.8235 22.8015 18.6252 23.1546 18.2722C23.5076 17.9192 23.7059 17.4404 23.7059 16.9412C23.7059 16.4419 23.5076 15.9632 23.1546 15.6102C22.8015 15.2571 22.3228 15.0588 21.8235 15.0588H10.5294ZM10.5294 22.5882C10.0302 22.5882 9.5514 22.7866 9.19839 23.1396C8.84538 23.4926 8.64706 23.9714 8.64706 24.4706C8.64706 24.9698 8.84538 25.4486 9.19839 25.8016C9.5514 26.1546 10.0302 26.3529 10.5294 26.3529H18.0588C18.5581 26.3529 19.0368 26.1546 19.3898 25.8016C19.7429 25.4486 19.9412 24.9698 19.9412 24.4706C19.9412 23.9714 19.7429 23.4926 19.3898 23.1396C19.0368 22.7866 18.5581 22.5882 18.0588 22.5882H10.5294Z"
+                    page2="/tenantpage/orders"
                 />
             </div>
             {/* Header */}