ok

2025-05-15 15:49:40 +07:00
parent e51987443c
commit f6482d24d2
1 changed files with 123 additions and 101 deletions
--- a/src/pages/Transactions.js
+++ b/src/pages/Transactions.js
@@ -8,71 +8,38 @@ import {
  declineTransaction,
  getTransactionsFromCafe,
 } from "../helpers/transactionHelpers";
-import { getTables } from "../helpers/tableHelper";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+
 import ButtonWithReplica from "../components/ButtonWithReplica";
-import TableCanvas from "../components/TableCanvas";
-
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-import timezone from 'dayjs/plugin/timezone';

+dayjs.extend(utc);
+dayjs.extend(timezone);

 export default function Transactions({ shop, shopId, propsShopId, sendParam, deviceType, paymentUrl }) {
  const { shopIdentifier, tableId } = useParams();
  if (sendParam) sendParam({ shopIdentifier, tableId });

-  dayjs.extend(utc);
-  dayjs.extend(timezone);
-
  const [transactions, setTransactions] = useState([]);
  const [isPaymentLoading, setIsPaymentLoading] = useState(false);
  const [isPaymentOpen, setIsPaymentOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+const [matchedItems, setMatchedItems] = useState([]);
+
+useEffect(() => {
+  setMatchedItems(searchAndAggregateItems(transactions, searchTerm));
+}, [searchTerm, transactions]);
+

  useEffect(() => {
    const fetchTransactions = async () => {
-      if (deviceType == 'clerk') {
-        try {
-          let response;
-          response = await getTransactionsFromCafe(shopId || propsShopId, 5, false);
-          console.log(response)
-          if (response) {
-            setTransactions(response);
-            return;
-          }
-        } catch (error) {
-          console.error("Error fetching transactions:", error);
-        }
-      }
-      else {
-        try {
-          let response;
-          response = await getMyTransactions(shopId || propsShopId, 5);
-          console.log(response)
-          const combinedTransactions = [];
-
-          response.forEach(cafe => {
-            const { cafeId, name: cafeName, transactions } = cafe;
-
-            transactions.forEach(transaction => {
-              const newTransaction = {
-                ...transaction,
-                cafeId,
-                cafeName,
-                DetailedTransactions: transaction.detailedTransactions // Rename here
-              };
-              delete newTransaction.detailedTransactions; // Remove the old key
-              combinedTransactions.push(newTransaction);
-            });
-          });
-
-          // combinedTransactions now contains all transactions with cafe info and renamed key
-          console.log(combinedTransactions)
-
-          // combinedTransactions now contains all transactions with cafe info
-          setTransactions(combinedTransactions);
-        } catch (error) {
-          console.error("Error fetching transactions:", error);
-        }
+      try {
+        let response = await getTransactionsFromCafe(shopId || propsShopId, 5, false);
+        console.log(response)
+        if (response) setTransactions(response);
+      } catch (error) {
+        console.error("Error fetching transactions:", error);
      }
    };

@@ -90,18 +57,48 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
      return grandTotal + calculateTotalPrice(transaction.DetailedTransactions);
    }, 0);
  };
+const searchAndAggregateItems = (transactions, searchTerm) => {
+  if (!searchTerm.trim()) return [];
+
+  const normalizedTerm = searchTerm.trim().toLowerCase();
+  const aggregatedItems = new Map();
+
+  transactions.forEach(transaction => {
+    transaction.DetailedTransactions.forEach(detail => {
+      const itemName = detail.Item.name;
+      const itemNameLower = itemName.toLowerCase();
+
+      if (itemNameLower.includes(normalizedTerm)) {
+        const key = detail.itemId;
+
+        if (!aggregatedItems.has(key)) {
+          aggregatedItems.set(key, {
+            itemId: detail.itemId,
+            name: itemName,
+            totalQty: 0,
+            totalPrice: 0,
+          });
+        }
+
+        const current = aggregatedItems.get(key);
+        current.totalQty += detail.qty;
+        current.totalPrice += detail.qty * (detail.promoPrice || detail.price);
+      }
+    });
+  });
+
+  return Array.from(aggregatedItems.values());
+};
+

  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
+      const result = await confirmTransaction(transactionId);
+      if (result) {
+        setTransactions(prev =>
+          prev.map(t =>
+            t.transactionId === transactionId ? { ...t, confirmed: 1 } : t
          )
        );
      }
@@ -115,14 +112,11 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
  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
-              ? c // Set to confirmed
-              : transaction
+      const result = await declineTransaction(transactionId);
+      if (result) {
+        setTransactions(prev =>
+          prev.map(t =>
+            t.transactionId === transactionId ? result : t
          )
        );
      }
@@ -135,12 +129,40 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev

  return (
    <div className={styles.Transactions}>
-      <div style={{ marginTop: "30px" }}></div>
-      <h2 className={styles["Transactions-title"]}>Daftar transaksi
-        Rp {calculateAllTransactionsTotal(transactions)} </h2>
-      <div style={{ marginTop: "30px" }}></div>
-      {/* <TableCanvas tables={tables} selectedTable={selectedTable} /> */}
-      <div className={styles.TransactionListContainer} style={{ padding: '0 20px 0 20px' }}>
+      <h2 className={styles["Transactions-title"]}>
+        Daftar transaksi Rp {calculateAllTransactionsTotal(transactions)}
+      </h2>
+
+      <input
+  type="text"
+  placeholder="Cari nama item..."
+  value={searchTerm}
+  onChange={(e) => setSearchTerm(e.target.value)}
+  style={{ border:'0px',height: '42px',borderRadius: '15px', margin: '7px auto 10px', width: '88%', paddingLeft: '8px' }}
+/>
+
+
+
+      {/* Existing Transactions List (keep all your JSX below unchanged) */}
+      <div className={styles.TransactionListContainer} style={{ padding: '0 8px' }}>
+
+{matchedItems.length > 0 && matchedItems.map(item => (
+  <div
+    key={item.itemId}
+    className={styles.RoundedRectangle}
+    style={{ overflow: "hidden" }}
+  >
+    <ul>
+      <li>
+        <strong>{item.name}</strong> x {item.totalQty}
+      </li>
+    </ul>
+    <div className={styles.TotalContainer}>
+      <span>Total:</span>
+      <span>Rp {item.totalPrice}</span>
+    </div>
+  </div>
+))}
        {transactions &&
          transactions.map((transaction) => (
            <div
@@ -173,31 +195,31 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
                  <ColorRing className={styles['receipt-logo']} />
                ) : transaction.confirmed === 3 ? (
                  <div>
-                  <svg
-                    height="60px"
-                    width="60px"
-                    version="1.1"
-                    id="Layer_1"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlnsXlink="http://www.w3.org/1999/xlink"
-                    viewBox="0 0 506.4 506.4"
-                    xmlSpace="preserve"
-                    fill="#000000"
-                    style={{marginTop: '12px', marginBottom: '12px'}}
-                  >
-                    <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
-                    <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
-                    <g id="SVGRepo_iconCarrier">
-                      <circle style={{ fill: '#54B265' }} cx="253.2" cy="253.2" r="249.2" />
-                      <path
-                        style={{ fill: '#F4EFEF' }}
-                        d="M372.8,200.4l-11.2-11.2c-4.4-4.4-12-4.4-16.4,0L232,302.4l-69.6-69.6c-4.4-4.4-12-4.4-16.4,0 L134.4,244c-4.4,4.4-4.4,12,0,16.4l89.2,89.2c4.4,4.4,12,4.4,16.4,0l0,0l0,0l10.4-10.4l0.8-0.8l121.6-121.6 C377.2,212.4,377.2,205.2,372.8,200.4z"
-                      ></path>
-                      <path d="M253.2,506.4C113.6,506.4,0,392.8,0,253.2S113.6,0,253.2,0s253.2,113.6,253.2,253.2S392.8,506.4,253.2,506.4z M253.2,8 C118,8,8,118,8,253.2s110,245.2,245.2,245.2s245.2-110,245.2-245.2S388.4,8,253.2,8z"></path>
-                      <path d="M231.6,357.2c-4,0-8-1.6-11.2-4.4l-89.2-89.2c-6-6-6-16,0-22l11.6-11.6c6-6,16.4-6,22,0l66.8,66.8L342,186.4 c2.8-2.8,6.8-4.4,11.2-4.4c4,0,8,1.6,11.2,4.4l11.2,11.2l0,0c6,6,6,16,0,22L242.8,352.4C239.6,355.6,235.6,357.2,231.6,357.2z M154,233.6c-2,0-4,0.8-5.6,2.4l-11.6,11.6c-2.8,2.8-2.8,8,0,10.8l89.2,89.2c2.8,2.8,8,2.8,10.8,0l132.8-132.8c2.8-2.8,2.8-8,0-10.8 l-11.2-11.2c-2.8-2.8-8-2.8-10.8,0L234.4,306c-1.6,1.6-4,1.6-5.6,0l-69.6-69.6C158,234.4,156,233.6,154,233.6z"></path>
-                    </g>
-                  </svg>
-                </div>
+                    <svg
+                      height="60px"
+                      width="60px"
+                      version="1.1"
+                      id="Layer_1"
+                      xmlns="http://www.w3.org/2000/svg"
+                      xmlnsXlink="http://www.w3.org/1999/xlink"
+                      viewBox="0 0 506.4 506.4"
+                      xmlSpace="preserve"
+                      fill="#000000"
+                      style={{ marginTop: '12px', marginBottom: '12px' }}
+                    >
+                      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+                      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
+                      <g id="SVGRepo_iconCarrier">
+                        <circle style={{ fill: '#54B265' }} cx="253.2" cy="253.2" r="249.2" />
+                        <path
+                          style={{ fill: '#F4EFEF' }}
+                          d="M372.8,200.4l-11.2-11.2c-4.4-4.4-12-4.4-16.4,0L232,302.4l-69.6-69.6c-4.4-4.4-12-4.4-16.4,0 L134.4,244c-4.4,4.4-4.4,12,0,16.4l89.2,89.2c4.4,4.4,12,4.4,16.4,0l0,0l0,0l10.4-10.4l0.8-0.8l121.6-121.6 C377.2,212.4,377.2,205.2,372.8,200.4z"
+                        ></path>
+                        <path d="M253.2,506.4C113.6,506.4,0,392.8,0,253.2S113.6,0,253.2,0s253.2,113.6,253.2,253.2S392.8,506.4,253.2,506.4z M253.2,8 C118,8,8,118,8,253.2s110,245.2,245.2,245.2s245.2-110,245.2-245.2S388.4,8,253.2,8z"></path>
+                        <path d="M231.6,357.2c-4,0-8-1.6-11.2-4.4l-89.2-89.2c-6-6-6-16,0-22l11.6-11.6c6-6,16.4-6,22,0l66.8,66.8L342,186.4 c2.8-2.8,6.8-4.4,11.2-4.4c4,0,8,1.6,11.2,4.4l11.2,11.2l0,0c6,6,6,16,0,22L242.8,352.4C239.6,355.6,235.6,357.2,231.6,357.2z M154,233.6c-2,0-4,0.8-5.6,2.4l-11.6,11.6c-2.8,2.8-2.8,8,0,10.8l89.2,89.2c2.8,2.8,8,2.8,10.8,0l132.8-132.8c2.8-2.8,2.8-8,0-10.8 l-11.2-11.2c-2.8-2.8-8-2.8-10.8,0L234.4,306c-1.6,1.6-4,1.6-5.6,0l-69.6-69.6C158,234.4,156,233.6,154,233.6z"></path>
+                      </g>
+                    </svg>
+                  </div>
                ) : (

                  <ColorRing className={styles['receipt-logo']} />
@@ -316,7 +338,7 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
                  </button>
                }

-                {deviceType == 'guestDevice' &&  transaction.confirmed < 2 && transaction.payment_type != 'cash' && transaction.payment_type != 'paylater/cash' &&
+                {deviceType == 'guestDevice' && transaction.confirmed < 2 && transaction.payment_type != 'cash' && transaction.payment_type != 'paylater/cash' &&
                  <ButtonWithReplica
                    paymentUrl={paymentUrl}
                    price={
@@ -344,7 +366,7 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
                }
              </div>

-              {deviceType == 'guestDevice' && transaction.confirmed >=0 && transaction.confirmed < 2 && transaction.payment_type == 'cash' ?
+              {deviceType == 'guestDevice' && transaction.confirmed >= 0 && transaction.confirmed < 2 && transaction.payment_type == 'cash' ?
                <button
                  className={styles.PayButton}
                  onClick={() => handleDecline(transaction.transactionId)}