ok

src/pages/Transactions.js

@@ -8,72 +8,39 @@ 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);
+        let response = await getTransactionsFromCafe(shopId || propsShopId, 5, false);
         console.log(response)
-          if (response) {
-            setTransactions(response);
-            return;
-          }
+        if (response) setTransactions(response);
       } 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);
-        }
-      }
     };
 
     fetchTransactions();
@@ -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
@@ -183,7 +205,7 @@ export default function Transactions({ shop, shopId, propsShopId, sendParam, dev
                       viewBox="0 0 506.4 506.4"
                       xmlSpace="preserve"
                       fill="#000000"
-                    style={{marginTop: '12px', marginBottom: '12px'}}
+                      style={{ marginTop: '12px', marginBottom: '12px' }}
                     >
                       <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
                       <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
@@ -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)}