diff --git a/frontend/src/components/OrderSummaryCard.tsx b/frontend/src/components/OrderSummaryCard.tsx
index fe556e37d0e01d04d7a4f973d69d0b4fb2fc0609..af106b5bd5c6e08fe083262f782638fe27725c40 100644
--- a/frontend/src/components/OrderSummaryCard.tsx
+++ b/frontend/src/components/OrderSummaryCard.tsx
@@ -4,11 +4,11 @@ type OrderSummaryCardProps = {
orderlist: (string | number)[][];
}
-export default function OrderSummaryCard({data}: {data: OrderSummaryCardProps[]}) {
- const orderdetails = data.map(({id,name, orderlist}) => {
+export default function OrderSummaryCard({ data, customer }: { data: OrderSummaryCardProps[], customer: boolean }) {
+ const orderdetails = data.map(({ id, name, orderlist }) => {
const orderList = () => {
const orderList = orderlist.map((order: any) => {
- const price = order[2].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
+ const price = order[2].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
return (
<div className="flex justify-between py-7">
<p className="w-full font-normal text-lg text-gray-500 text-left">{order[0]}</p>
@@ -17,30 +17,33 @@ export default function OrderSummaryCard({data}: {data: OrderSummaryCardProps[]}
</div>
)
})
-
+
return orderList
}
-
+
const totalPrice = () => {
let totalPrice = 0
orderlist.forEach((order: any) => {
totalPrice += order[2] * order[1]
})
-
+
return totalPrice.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
-
+
return (
<div className="flex bg-white md:flex-row mx-16">
<div className="flex flex-col w-full leading-normal">
<div className="flex justify-between border-b border-gray-300 py-5">
<h5 className="font-bold text-2xl text-gray-900">{name}</h5>
<div className="flex items-center">
- <a href={`/tenant/${id}`}>
- <svg xmlns="http://www.w3.org/2000/svg" width="13" height="22" viewBox="0 0 13 22" fill="none">
- <path d="M3.34838 21.5784C3.09007 21.8512 2.7613 22 2.37382 22C1.59887 22 0.976563 21.3551 0.976563 20.5366C0.976563 20.1274 1.14095 19.7554 1.411 19.4701L9.63018 10.9876L1.411 2.52988C1.14095 2.24464 0.976563 1.8602 0.976563 1.46336C0.976563 0.64487 1.59887 0 2.37382 0C2.7613 0 3.09007 0.148816 3.34838 0.421646L12.4834 9.84667C12.8122 10.1691 12.9648 10.566 12.9766 11C12.9766 11.434 12.8122 11.8061 12.4834 12.1409L3.34838 21.5784Z" fill="#020202"/>
- </svg>
- </a>
+ {customer && (
+ <a href={`/tenant/${id}`}>
+ <svg xmlns="http://www.w3.org/2000/svg" width="13" height="22" viewBox="0 0 13 22" fill="none">
+ <path d="M3.34838 21.5784C3.09007 21.8512 2.7613 22 2.37382 22C1.59887 22 0.976563 21.3551 0.976563 20.5366C0.976563 20.1274 1.14095 19.7554 1.411 19.4701L9.63018 10.9876L1.411 2.52988C1.14095 2.24464 0.976563 1.8602 0.976563 1.46336C0.976563 0.64487 1.59887 0 2.37382 0C2.7613 0 3.09007 0.148816 3.34838 0.421646L12.4834 9.84667C12.8122 10.1691 12.9648 10.566 12.9766 11C12.9766 11.434 12.8122 11.8061 12.4834 12.1409L3.34838 21.5784Z" fill="#020202" />
+ </svg>
+ </a>
+ )
+ }
</div>
</div>
<div className="border-b border-gray-300">
diff --git a/frontend/src/pages/ManageOrderTenant.tsx b/frontend/src/pages/ManageOrderTenant.tsx
index 6eadecfb00dd683ce8dbb5203e6e0b6258a37ecf..76ab837dccdf9a0ef127fef647d5b74f8d410ec1 100644
--- a/frontend/src/pages/ManageOrderTenant.tsx
+++ b/frontend/src/pages/ManageOrderTenant.tsx
@@ -8,6 +8,7 @@ import { useEffect, useState } from "react";
import ProfileDropDown from "../components/ProfileDropDown";
import Axios from "axios";
import { useParams } from "react-router-dom";
+import crypto from "crypto-js";
interface Order {
id: number,
@@ -41,13 +42,14 @@ interface Payment {
}
interface OrderSummary {
+ id: number,
name: string,
orderlist: (string | number)[][]
}
interface OrderDetails {
orderid: number,
- code: number,
+ code: string | null,
tableid: number,
time: Date,
orderstatus: string,
@@ -86,6 +88,7 @@ export default function OrderDetails() {
});
return {
+ id: tenant?.id || 0,
name: tenant?.name || 'Tenant Not Found',
orderlist: listproduct
};
@@ -115,18 +118,20 @@ export default function OrderDetails() {
const result = OrderDataArray.map((order: Order) => {
const matchingPayment = paymentData.find((payment: Payment) => payment.id_order === order.id);
+ // Hash the code (matchingPayment.id) using SHA-256 from crypto-js and take the first 5 characters
+ const hashedCode = matchingPayment ? crypto.SHA256(matchingPayment.id.toString()).toString().substring(0, 5) : null;
+
return {
orderid: order.id,
- code: matchingPayment.id,
+ code: hashedCode,
tableid: order.id_table,
time: order.time,
orderstatus: order.status,
- paymentstatus: matchingPayment.status
+ paymentstatus: matchingPayment ? matchingPayment.status : null
};
});
setJoinedOrderDetailsData(result);
-
};
useEffect(() => {
@@ -250,7 +255,7 @@ export default function OrderDetails() {
<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} />
+ <OrderSummaryCard data={joinedOrderSummaryData} customer={false} />
<div className="flex flex-col items-center">
<button
onClick={buttonState.onClick}
diff --git a/frontend/src/pages/ManagePayment.tsx b/frontend/src/pages/ManagePayment.tsx
index 8e800ac6d1a2c082dffc0179e617145b0719a99f..fd3ea61e2bbc0f3f5bf8e9c456ed24ad0f6dc89d 100644
--- a/frontend/src/pages/ManagePayment.tsx
+++ b/frontend/src/pages/ManagePayment.tsx
@@ -9,6 +9,7 @@ import { useEffect, useState } from "react";
import ConfirmPopUp from "../components/ConfirmPopUp";
import Axios from "axios";
import { useParams } from "react-router-dom";
+import crypto from "crypto-js";
interface Order {
id: number;
@@ -42,13 +43,14 @@ interface Payment {
}
interface OrderSummary {
- name: string;
- orderlist: (string | number)[][];
+ id: number,
+ name: string,
+ orderlist: (string | number)[][]
}
interface OrderDetails {
orderid: number;
- code: number;
+ code: string | null;
tableid: number;
time: Date;
orderstatus: string;
@@ -58,25 +60,19 @@ interface OrderDetails {
const ManagePayment = () => {
const { orderid } = useParams();
const paymentid = orderid;
- const [confirmed, setConfirmed] = useState(false);
const [showProfileDropDown, setShowProfileDropDown] = useState(false);
- const [showConfirmPopUp, setShowConfirmPopUp] = useState(false);
- const [joinedOrderDetailsData, setJoinedOrderDetailsData] = useState<
- OrderDetails[]
- >([]);
+
const [buttonState, setButtonState] = useState({
label: "Waiting for Payment",
disabled: true,
color: "mealshub-greenpalet",
onClick: () => { },
});
+ 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 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;
@@ -84,25 +80,73 @@ const ManagePayment = () => {
// 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,
- );
+ const matchingPayment = paymentData.find((payment: Payment) => payment.id_order === order.id);
+
+ // Hash the code (matchingPayment.id) using SHA-256 from crypto-js and take the first 5 characters
+ const hashedCode = matchingPayment ? crypto.SHA256(matchingPayment.id.toString()).toString().substring(0, 5) : null;
return {
orderid: order.id,
- code: matchingPayment.id,
+ code: hashedCode,
tableid: order.id_table,
time: order.time,
orderstatus: order.status,
- paymentstatus: matchingPayment.status,
+ paymentstatus: matchingPayment ? matchingPayment.status : null
};
});
setJoinedOrderDetailsData(result);
};
- const [joinedOrderSummaryData, setJoinedOrderSummaryData] = useState<
- OrderSummary[]
- >([]);
+
+ useEffect(() => {
+ getOrderDetailsData();
+ }, []);
+
+ console.log(joinedOrderDetailsData);
+
+ 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 || 'Product Not Found', orderProduct.num_product, product?.price || 0];
+ });
+
+ return {
+ id: tenant?.id || 0,
+ name: tenant?.name || 'Tenant Not Found',
+ orderlist: listproduct
+ };
+ });
+
+ setJoinedOrderSummaryData(result);
+
+ };
+
+ useEffect(() => {
+ getOrderDetailsData();
+ }, []);
+ useEffect(() => {
+ getOrderSummaryData();
+ }, []);
+
+ console.log(joinedOrderSummaryData);
const handleProfileClick = () => {
setShowProfileDropDown(!showProfileDropDown);
@@ -135,64 +179,6 @@ const ManagePayment = () => {
}
};
- 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(() => {
- getOrderDetailsData();
- }, []);
- useEffect(() => {
- getOrderSummaryData();
- }, []);
-
- console.log(joinedOrderSummaryData);
useEffect(() => {
// Update button state based on payment and order status
if (joinedOrderDetailsData.length > 0) {
@@ -257,7 +243,7 @@ const ManagePayment = () => {
Order Details
</h2>
<OrderDetailsCard data={joinedOrderDetailsData} />
- <OrderSummaryCard data={joinedOrderSummaryData} />
+ <OrderSummaryCard data={joinedOrderSummaryData} customer={false} />
<div className="flex mx-16 justify-center">
<button
onClick={buttonState.onClick}
diff --git a/frontend/src/pages/OrderSummary.tsx b/frontend/src/pages/OrderSummary.tsx
index 3a51405ece88b091c7affb107e70aac349860880..1355ea995d0fa79cb02246d163fb6baf11deb346 100644
--- a/frontend/src/pages/OrderSummary.tsx
+++ b/frontend/src/pages/OrderSummary.tsx
@@ -6,6 +6,7 @@ import BackButton from "../components/BackButton";
import { useEffect, useState } from "react";
import Axios from "axios";
import { useParams } from "react-router-dom";
+import crypto from "crypto-js";
interface Order {
id: number,
@@ -46,7 +47,7 @@ interface OrderSummary {
interface OrderDetails {
orderid: number,
- code: number,
+ code: string | null,
tableid: number,
time: Date,
orderstatus: string,
@@ -110,18 +111,20 @@ export default function OrderSummary() {
const result = OrderDataArray.map((order: Order) => {
const matchingPayment = paymentData.find((payment: Payment) => payment.id_order === order.id);
+ // Hash the code (matchingPayment.id) using SHA-256 from crypto-js and take the first 5 characters
+ const hashedCode = matchingPayment ? crypto.SHA256(matchingPayment.id.toString()).toString().substring(0, 5) : null;
+
return {
orderid: order.id,
- code: matchingPayment.id,
+ code: hashedCode,
tableid: order.id_table,
time: order.time,
orderstatus: order.status,
- paymentstatus: matchingPayment.status
+ paymentstatus: matchingPayment ? matchingPayment.status : null
};
});
setJoinedOrderDetailsData(result);
-
};
useEffect(() => {
@@ -151,7 +154,7 @@ export default function OrderSummary() {
<div className="ms-20 py-12 bg-white rounded-3xl">
<h2 className="text-mealshub-red text-3xl font-bold ms-16">Order Summary</h2>
<OrderDetailsCard data={joinedOrderDetailsData} />
- <OrderSummaryCard data={joinedOrderSummaryData} />
+ <OrderSummaryCard data={joinedOrderSummaryData} customer={true} />
{joinedOrderDetailsData.map((order) => {
if (order.paymentstatus === "Waiting for Confirmation") {
return (