ok

src/pages/Payment_claimed.js

@@ -0,0 +1,99 @@
+import React, { useState, useEffect, useRef } from "react";
+import { ColorRing } from "react-loader-spinner";
+import jsQR from "jsqr";
+import QRCode from "qrcode.react";
+import styles from "./Transactions.module.css";
+import { getImageUrl } from "../helpers/itemHelper";
+import { useSearchParams } from "react-router-dom";
+import {
+  getTransaction,
+  handleConfirmHasPaid,
+} from "../helpers/transactionHelpers";
+
+export default function Transaction_pending() {
+  const [searchParams] = useSearchParams();
+  const [transaction, setTransaction] = useState(null);
+
+  useEffect(() => {
+    const transactionId = searchParams.get("transactionId") || "";
+
+    const fetchData = async () => {
+      try {
+        const fetchedTransaction = await getTransaction(transactionId);
+        setTransaction(fetchedTransaction);
+        console.log(transaction);
+      } catch (error) {
+        console.error("Error fetching transaction:", error);
+      }
+    };
+    fetchData();
+  }, [searchParams]);
+
+  const calculateTotalPrice = (detailedTransactions) => {
+    if (!Array.isArray(detailedTransactions)) return 0;
+
+    return detailedTransactions.reduce((total, dt) => {
+      if (
+        dt.Item &&
+        typeof dt.Item.price === "number" &&
+        typeof dt.qty === "number"
+      ) {
+        return total + dt.Item.price * dt.qty;
+      }
+      return total;
+    }, 0);
+  };
+
+  return (
+    <div className={styles.Transactions}>
+      <div style={{ marginTop: "30px" }}></div>
+      <h2 className={styles["Transactions-title"]}>Payment Claimed</h2>
+      <div style={{ marginTop: "30px" }}></div>
+      <div className={styles.TransactionListContainer}>
+        {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"
+                ? "Self pickup"
+                : `Serve to ${
+                    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={() => handleConfirmHasPaid(transaction.transactionId)}
+              ></button>
+            </div>
+            {transaction.confirmed == 0 && (
+              <h5 className={styles.DeclineButton}>decline</h5>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/pages/Reports.js

@@ -1,6 +1,10 @@
 import React, { useEffect, useState } from "react";
 import { ThreeDots } from "react-loader-spinner";
-import { getFavourite, getAnalytics } from "../helpers/transactionHelpers.js";
+import {
+  getFavourite,
+  getAnalytics,
+  getIncome,
+} from "../helpers/transactionHelpers.js";
 import CircularDiagram from "./CircularDiagram";
 import styles from "./Transactions.module.css";
 
@@ -104,6 +108,7 @@ const App = ({ cafeId }) => {
         setLoading(true);
         const items = await getFavourite(cafeId);
         const analyticsData = await getAnalytics(cafeId);
+        const incomeData = await getIncome(cafeId);
         if (items) setFavouriteItems(items);
         if (analyticsData) setAnalytics(analyticsData);
         console.log(analyticsData);
@@ -250,10 +255,10 @@ const App = ({ cafeId }) => {
             />
           )}
           <RoundedRectangle
-            bgColor={viewStock ?  "#979797" : "#E5ECF6"}
+            bgColor={viewStock ? "#979797" : "#E5ECF6"}
             title="Stok"
-            value={viewStock ? '‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ˅' : '‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ˄'}  // Corrected ternary operator syntax
-            onClick={() => setViewStock(!viewStock)}  // onClick should be a function
+            value={viewStock ? "‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ˅" : "‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ˄"} // Corrected ternary operator syntax
+            onClick={() => setViewStock(!viewStock)} // onClick should be a function
           />
           <RoundedRectangle
             bgColor="#E3F5FF"

src/pages/Transaction.js

@@ -0,0 +1,172 @@
+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 {
+  getTransaction,
+  confirmTransaction,
+  declineTransaction,
+} from "../helpers/transactionHelpers";
+import { getTables } from "../helpers/tableHelper";
+import TableCanvas from "../components/TableCanvas";
+import { useSearchParams } from "react-router-dom";
+
+export default function Transactions({ propsShopId, sendParam, deviceType }) {
+  const { shopId, tableId } = useParams();
+  if (sendParam) sendParam({ shopId, tableId });
+
+  const [tables, setTables] = useState([]);
+  const [selectedTable, setSelectedTable] = useState(null);
+  const [isPaymentLoading, setIsPaymentLoading] = useState(false);
+  const [searchParams] = useSearchParams();
+  const [transaction, setTransaction] = useState(null);
+
+  useEffect(() => {
+    const transactionId = searchParams.get("transactionId") || "";
+
+    const fetchData = async () => {
+      try {
+        const fetchedTransaction = await getTransaction(transactionId);
+        setTransaction(fetchedTransaction);
+        console.log(transaction);
+      } catch (error) {
+        console.error("Error fetching transaction:", error);
+      }
+    };
+    fetchData();
+  }, [searchParams]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const fetchedTables = await getTables(shopId || propsShopId);
+        setTables(fetchedTables);
+      } catch (error) {
+        console.error("Error fetching tables:", error);
+      }
+    };
+
+    fetchData();
+  }, [shopId || propsShopId]);
+
+  const calculateTotalPrice = (detailedTransactions) => {
+    return detailedTransactions.reduce((total, dt) => {
+      return total + dt.qty * dt.Item.price;
+    }, 0);
+  };
+
+  const handleConfirm = async (transactionId) => {
+    setIsPaymentLoading(true);
+    try {
+      const c = await confirmTransaction(transactionId);
+      // if (c) {
+      //   // Update the confirmed status locally
+      //   setTransactions((prevTransactions) =>
+      //     prevTransactions.map((transaction) =>
+      //       transaction.transactionId === transactionId
+      //         ? { ...transaction, confirmed: 1 } // Set to confirmed
+      //         : transaction
+      //     )
+      //   );
+      // }
+    } catch (error) {
+      console.error("Error processing payment:", error);
+    } finally {
+      setIsPaymentLoading(false);
+    }
+  };
+
+  const handleDecline = async (transactionId) => {
+    setIsPaymentLoading(true);
+    try {
+      const c = await declineTransaction(transactionId);
+      // if (c) {
+      //   // Update the confirmed status locally
+      //   setTransactions((prevTransactions) =>
+      //     prevTransactions.map((transaction) =>
+      //       transaction.transactionId === transactionId
+      //         ? { ...transaction, confirmed: -1 } // Set to confirmed
+      //         : transaction
+      //     )
+      //   );
+      // }
+    } 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>
+      {/* <TableCanvas tables={tables} selectedTable={selectedTable} /> */}
+      <div className={styles.TransactionListContainer}>
+        {transaction && (
+          <div
+            key={transaction.transactionId}
+            className={styles.RoundedRectangle}
+            onClick={() =>
+              setSelectedTable(transaction.Table || { tableId: 0 })
+            }
+          >
+            <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"
+                ? "Self pickup"
+                : `Serve to ${
+                    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={() => handleConfirm(transaction.transactionId)}
+                disabled={transaction.confirmed !== 0 || isPaymentLoading} // Disable button if confirmed (1) or declined (-1) or loading
+              >
+                {isPaymentLoading ? (
+                  <ColorRing height="50" width="50" color="white" />
+                ) : transaction.confirmed === 1 ? (
+                  "Confirm has paid" // Display "Confirmed" if the transaction is confirmed (1)
+                ) : transaction.confirmed === -1 ? (
+                  "Declined" // Display "Declined" if the transaction is declined (-1)
+                ) : (
+                  "Confirm availability" // Display "Confirm" if the transaction is not confirmed (0)
+                )}
+              </button>
+            </div>
+            {transaction.confirmed == 0 && (
+              <h5
+                className={styles.DeclineButton}
+                onClick={() => handleDecline(transaction.transactionId)}
+              >
+                decline
+              </h5>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/pages/Transaction_confirmed.js

@@ -179,7 +179,10 @@ export default function Transaction_pending({ paymentUrl }) {
             </div>
           )}
 
-          <button onClick={handleClaimHasPaid} className={styles.PayButton}>
+          <button
+            onClick={() => handleClaimHasPaid(transaction.transactionId)}
+            className={styles.PayButton}
+          >
             I've already paid
           </button>
           <div style={{ marginBottom: "20px" }}></div>