diff --git a/backend/src/services/api/joinedOrderPayment.ts b/backend/src/services/api/joinedOrderPayment.ts
index e883382076c23a4f64291cadbcb6c2e2bc081934..6db3138f77ed5e3c3befffaf60c9215b8ebd6cac 100644
--- a/backend/src/services/api/joinedOrderPayment.ts
+++ b/backend/src/services/api/joinedOrderPayment.ts
@@ -12,7 +12,7 @@ export default function joinedOrderPayment() {
const paymentData = paymentResponse.data.data;
// Perform the join based on the specified conditions
- const result = orderData.map((order: { id: number; id_table: number; time: Date; status: string; }) => {
+ const result = orderData.map((order: { id: number; id_table: number; time: Date; status: string; id_tenant: string }) => {
const matchingPayment = paymentData.find((payment: { id_order: number; }) => payment.id_order === order.id);
return {
@@ -22,6 +22,7 @@ export default function joinedOrderPayment() {
time: order.time,
orderStatus: order.status,
paymentStatus: matchingPayment ? matchingPayment.status : null,
+ tenantId: order.id_tenant,
};
});
diff --git a/frontend/src/pages/ManageOrderTenant.tsx b/frontend/src/pages/ManageOrderTenant.tsx
index 6b5b8de0e003326b79287bc73f8619f38ad8778a..7e7141c9c1381fb8ee3ebffbf5983af758cc7fdd 100644
--- a/frontend/src/pages/ManageOrderTenant.tsx
+++ b/frontend/src/pages/ManageOrderTenant.tsx
@@ -1,7 +1,6 @@
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";
@@ -10,8 +9,6 @@ import ProfileDropDown from "../components/ProfileDropDown";
import Axios from "axios";
import { useParams } from "react-router-dom";
-type id = number;
-
interface Order {
id: number,
status: string,
@@ -138,6 +135,86 @@ export default function OrderDetails() {
console.log(joinedOrderDetailsData);
+ //Const for state Button
+ const [buttonState, setButtonState] = useState({
+ label: "Waiting for Payment",
+ disabled: true,
+ color: "mealshub-greenpalet",
+ onClick: () => { },
+ });
+
+ useEffect(() => {
+ getOrderSummaryData();
+ }, []);
+
+ useEffect(() => {
+ // Update button state based on payment and order status
+ if (joinedOrderDetailsData.length > 0) {
+ const paymentStatus = joinedOrderDetailsData[0].paymentstatus;
+ const orderStatus = joinedOrderDetailsData[0].orderstatus;
+
+ if (paymentStatus === "Waiting for Confirmation") {
+ setButtonState({
+ label: "Waiting for Payment",
+ disabled: true,
+ color: "mealshub-greenpalet",
+ onClick: () => { },
+ });
+ } else if (paymentStatus === "Confirmed" && orderStatus === "Waiting for Payment") {
+ setButtonState({
+ label: "Prepare Order",
+ disabled: false,
+ color: "mealshub-red",
+ onClick: handlePrepareOrder,
+ });
+ } else if (paymentStatus === "Confirmed" && orderStatus === "Prepared") {
+ setButtonState({
+ label: "Complete Order",
+ disabled: false,
+ color: "mealshub-red",
+ onClick: handleCompleteOrder,
+ });
+ }
+ else if (paymentStatus === "Confirmed" && orderStatus === "Completed") {
+ setButtonState({
+ label: "Completed",
+ disabled: true,
+ color: "mealshub-greenpalet",
+ onClick: handleCompleteOrder,
+ });
+ }
+ }
+ }, [joinedOrderDetailsData]);
+
+ const handlePrepareOrder = async () => {
+ // Call API or perform actions to update order status to "Prepared"
+ await Axios.patch(`http://localhost:8000/orders/${orderid}`, {
+ status: "Prepared"
+ });
+ getOrderDetailsData();
+ // Set button state accordingly
+ setButtonState({
+ label: "Complete Order",
+ disabled: false,
+ color: "mealshub-red",
+ onClick: handleCompleteOrder,
+ });
+ };
+
+ const handleCompleteOrder = async () => {
+ // Call API or perform actions to update order status to "Completed"
+ await Axios.patch(`http://localhost:8000/orders/${orderid}`, {
+ status: "Completed"
+ });
+ getOrderDetailsData();
+ // Set button state accordingly
+ setButtonState({
+ label: "Completed",
+ disabled: true,
+ color: "mealshub-greenpalet",
+ onClick: () => { },
+ });
+ };
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">
@@ -174,6 +251,15 @@ export default function OrderDetails() {
<h2 className="text-mealshub-red text-3xl font-bold ms-16">Order Details</h2>
<OrderDetailsCard data={joinedOrderDetailsData} />
<OrderSummaryCard data={joinedOrderSummaryData} />
+ <div className="flex flex-col items-center">
+ <button
+ onClick={buttonState.onClick}
+ disabled={buttonState.disabled}
+ className={`mt-4 px-6 py-2 w-1/5 text-white text-lg font-semibold shadow-xl rounded-full bg-${buttonState.color}`}
+ >
+ {buttonState.label}
+ </button>
+ </div>
</div>
</div>
</div>
diff --git a/frontend/src/pages/PageManageMenu.tsx b/frontend/src/pages/PageManageMenu.tsx
index 0854b447eddcd1c2118df5990e0f7fd4b54dbe2b..7689b32224ec57d0febbd27879357c9b07b4fe02 100644
--- a/frontend/src/pages/PageManageMenu.tsx
+++ b/frontend/src/pages/PageManageMenu.tsx
@@ -12,20 +12,57 @@ import ProfileDropDown from "../components/ProfileDropDown";
import Axios from "axios";
+interface Product {
+ id: number,
+ image: string,
+ name: string,
+ description: string,
+ price: number,
+ id_tenant: number
+}
+
+interface ProductCard {
+ id: number,
+ image: string,
+ name: string,
+ description: string,
+ price: number
+}
+
export default function PageManageMenu() {
const idTenant = 1;
- const [data, setData] = useState([]);
+ const [MenuData, setMenuData] = useState<ProductCard[]>([]);
+
+ const getMenuData = async () => {
+ const tenantResponse = await Axios.get(`http://localhost:8000/tenants/${idTenant}`);
+ const productResponse = await Axios.get("http://localhost:8000/products");
+
+ const tenantData = tenantResponse.data.data;
+ const productData = productResponse.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 producttenant = productData.filter((product: Product) => product.id_tenant === tenantData.id);
+ const result = producttenant.map((product: Product) => {
+ return {
+ id: product.id,
+ image: product.image,
+ name: product.name,
+ description: product.description,
+ price: product.price
+ }
+ });
+
+ setMenuData(result);
- const getData = async () => {
- const res = await Axios.get("http://localhost:8000/products");
- setData(res.data.data);
};
useEffect(() => {
- getData();
+ getMenuData();
}, []);
- console.log(data);
+ console.log(MenuData);
+
const [menuToDelete, setMenuToDelete] = useState(null);
const [menuToEdit, setMenuToEdit] = useState(null);
@@ -68,13 +105,13 @@ export default function PageManageMenu() {
// Lakukan penghapusan menu menggunakan Axios
await Axios.delete(`http://localhost:8000/products/${menuId}`);
// Perbarui data setelah penghapusan
- getData();
+ getMenuData();
} catch (error) {
console.error('Error deleting menu:', error);
}
};
- const maxId = Math.max(...data.map((menu: any) => menu.id));
+ const maxId = Math.max(...MenuData.map((menu: any) => menu.id));
return (
// Create grid layout for sidebard, header, and main content
<div className="grid grid-cols-5 grid-rows-8 min-h-screen bg-mealshub-cream">
@@ -116,7 +153,7 @@ export default function PageManageMenu() {
Menu
</h2>
<div className="grid grid-cols-4 gap-6 h-4/5 my-6 mx-9 justify-items-center">
- {data.map((menus) => (
+ {MenuData.map((menus) => (
<div key={menus.id}>
<MenuCard
image={menus.image}
diff --git a/frontend/src/pages/PageManageOrder.tsx b/frontend/src/pages/PageManageOrder.tsx
index 94ad9aa615c34eee78c3d026df886c651a7905ab..add10095d31011cf0b086571902529b7ef957841 100644
--- a/frontend/src/pages/PageManageOrder.tsx
+++ b/frontend/src/pages/PageManageOrder.tsx
@@ -8,12 +8,15 @@ import joinedOrderPayment from "../../../backend/src/services/api/joinedOrderPay
export default function PageManageOrder() {
+ const tenantid = 1;
const [showProfileDropDown, setShowProfileDropDown] = useState(false);
const handleProfileClick = () => {
setShowProfileDropDown(!showProfileDropDown);
};
const data = joinedOrderPayment();
+ console.log(data);
+ const databytenant = data.filter((data: any) => data.tenantId == tenantid);
return (
// Create grid layout for sidebard, header, and main content
<div className="grid grid-cols-5 grid-rows-8 min-h-screen bg-mealshub-cream">
@@ -51,7 +54,7 @@ export default function PageManageOrder() {
)}
</div>
<div className="ms-20 mt-6 mb-9 py-4 w-11/12 bg-white rounded-3xl h-auto">
- <TableOrder data={data} />
+ <TableOrder data={databytenant} />
</div>
</div>
</div>