g

src/pages/Invoice.js

@@ -60,7 +60,7 @@ export default function Invoice({ sendParam, deviceType }) {
         email,
         isCash ? "cash" : "cashless",
         orderType,
-        tableNumber,
+        tableNumber
       );
     } else if (deviceType == "guestSide") {
       const pay = await handlePaymentFromGuestSide(
@@ -68,14 +68,14 @@ export default function Invoice({ sendParam, deviceType }) {
         email,
         isCash ? "cash" : "cashless",
         orderType,
-        tableNumber,
+        tableNumber
       );
     } else if (deviceType == "guestDevice") {
       const pay = await handlePaymentFromGuestDevice(
         shopId,
         isCash ? "cash" : "cashless",
         orderType,
-        tableNumber,
+        tableNumber
       );
     }
 

src/pages/Invoice.module.css

@@ -99,6 +99,19 @@
   cursor: pointer;
 }
 
+.Confirm {
+  display: flex;
+  justify-content: space-between;
+  width: 80vw;
+  margin: 0 auto;
+  font-family: "Poppins", sans-serif;
+  font-weight: 600;
+  font-style: normal;
+  font-size: 1.5em;
+  padding: 10px 0;
+  margin-bottom: 17px;
+}
+
 .RoundedRectangle {
   border-radius: 20px;
   padding-top: 5px;

src/pages/Transactions.js

@@ -0,0 +1,104 @@
+import React, { useEffect, useState } from "react";
+import styles from "./Transactions.module.css";
+import { useParams } from "react-router-dom";
+import { ColorRing } from "react-loader-spinner";
+import { getTransactions } from "../helpers/transactionHelpers";
+
+export default function Transactions({ propsShopId, sendParam, deviceType }) {
+  const { shopId, tableId } = useParams();
+  if (sendParam) sendParam({ shopId, tableId });
+
+  const [transactions, setTransactions] = useState([]);
+  const [isPaymentLoading, setIsPaymentLoading] = useState(false);
+
+  useEffect(() => {
+    const fetchTransactions = async () => {
+      try {
+        const response = await getTransactions(shopId || propsShopId, 5);
+        console.log("modallll");
+        console.log(response);
+        setTransactions(response);
+      } catch (error) {
+        console.error("Error fetching transactions:", error);
+      }
+    };
+
+    fetchTransactions();
+  }, [shopId]);
+
+  const calculateTotalPrice = (detailedTransactions) => {
+    return detailedTransactions.reduce((total, dt) => {
+      return total + dt.qty * dt.Item.price;
+    }, 0);
+  };
+
+  const handlePayment = async (isCash) => {
+    setIsPaymentLoading(true);
+    try {
+      // Implement payment logic here
+      console.log(`Processing ${isCash ? "cash" : "cashless"} payment`);
+      // Simulate payment process
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+    } catch (error) {
+      console.error("Error processing payment:", error);
+    } finally {
+      setIsPaymentLoading(false);
+    }
+  };
+
+  return (
+    <div className={styles.Transactions}>
+      <div style={{ marginTop: "30px" }}></div>
+      <h2 className={styles["Transactions-title"]}>Transactions</h2>
+      <div style={{ marginTop: "30px" }}></div>
+      <div>
+        {transactions.map((transaction) => (
+          <div
+            key={transaction.transactionId}
+            className={styles.RoundedRectangle}
+          >
+            <h2 className={styles["Transactions-detail"]}>
+              Transaction ID: {transaction.transactionId}
+            </h2>
+            <h2 className={styles["Transactions-detail"]}>
+              Payment Type: {transaction.payment_type}
+            </h2>
+            <ul>
+              {transaction.DetailedTransactions.map((detail) => (
+                <li key={detail.detailedTransactionId}>
+                  <span>{detail.Item.name}</span> - {detail.qty} x Rp{" "}
+                  {detail.Item.price}
+                </li>
+              ))}
+            </ul>
+            <h2 className={styles["Transactions-detail"]}>
+              {transaction.serving_type === "pickup"
+                ? "Diambil di kasir"
+                : `Diantar ke meja nomor ${
+                    transaction.Table ? transaction.Table.tableNo : "N/A"
+                  }`}
+            </h2>
+            <div className={styles.TotalContainer}>
+              <span>Total:</span>
+              <span>
+                Rp {calculateTotalPrice(transaction.DetailedTransactions)}
+              </span>
+            </div>
+            <div className={styles.TotalContainer}>
+              <button
+                className={styles.PayButton}
+                onClick={() => handlePayment(false)}
+              >
+                {isPaymentLoading ? (
+                  <ColorRing height="50" width="50" color="white" />
+                ) : (
+                  "Confirm"
+                )}
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/pages/Transactions.module.css

@@ -0,0 +1,120 @@
+.Transactions {
+  overflow-x: hidden;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: rgba(88, 55, 50, 1);
+  background-color: #e9e9e9;
+}
+
+.Transactions-title {
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+  font-size: 32px;
+  color: rgba(88, 55, 50, 1);
+  text-align: left;
+  margin-left: 20px;
+  margin-top: 17px;
+}
+
+.Transactions-detail {
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+  font-size: 20px;
+  color: rgba(88, 55, 50, 1);
+  text-align: left;
+  margin-left: 20px;
+  margin-top: 17px;
+}
+
+.PaymentOption {
+  overflow-x: hidden;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: rgba(88, 55, 50, 1);
+  border-radius: 15px 15px 0 0;
+
+  position: fixed;
+  bottom: 75px;
+  right: 0;
+  left: 0;
+}
+
+.PaymentOptionMargin {
+  z-index: -1;
+  overflow-x: hidden;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: rgba(88, 55, 50, 1);
+
+  position: relative;
+  height: 229.39px;
+}
+
+.TotalContainer {
+  display: flex;
+  justify-content: space-between;
+  width: 80vw;
+  margin: 0 auto;
+  font-family: "Poppins", sans-serif;
+  font-weight: 600;
+  font-style: normal;
+  font-size: 1.5em;
+  padding: 10px 0;
+  margin-bottom: 17px;
+}
+
+.PayButton {
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+  font-size: 32px;
+
+  width: 80vw;
+  height: 18vw;
+  border-radius: 50px;
+  background-color: rgba(88, 55, 50, 1);
+  color: white;
+  border: none;
+  margin: 0px auto;
+  cursor: pointer;
+  margin-bottom: 23px;
+}
+
+.Pay2Button {
+  text-align: center;
+  color: rgba(88, 55, 50, 1);
+  font-size: 1em;
+  margin-bottom: 25px;
+  cursor: pointer;
+}
+
+.Confirm {
+  display: flex;
+  justify-content: space-between;
+  width: 80vw;
+  margin: 0 auto;
+  font-family: "Poppins", sans-serif;
+  font-weight: 600;
+  font-style: normal;
+  font-size: 1.5em;
+  padding: 10px 0;
+  margin-bottom: 17px;
+}
+
+.RoundedRectangle {
+  border-radius: 20px;
+  padding-top: 5px;
+  margin: 26px;
+  background-color: #f9f9f9;
+}