ok

2025-08-27 02:53:44 +07:00 · 2025-08-27 02:53:30 +07:00 · 2025-08-26 01:46:40 +07:00 · 2025-08-25 23:41:35 +07:00 · 2025-07-28 01:15:07 +07:00 · 2025-05-23 10:50:39 +07:00
30 changed files with 7266 additions and 4974 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/public/index.html
+++ b/public/index.html
@@ -28,6 +28,15 @@
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>KedaiMaster</title>
+    
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-2SKSCVFB2N"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){ dataLayer.push(arguments); }
+      gtag('js', new Date());
+      gtag('config', 'G-2SKSCVFB2N');
+    </script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -3,17 +3,17 @@
  "name": "jangan pernah ragukan pelanggan",
  "icons": [
    {
-      "src": "favicon.ico",
+      "src": "kedai.png",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
-      "src": "logo192.png",
+      "src": "kedai.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
-      "src": "logo512.png",
+      "src": "kedai.png",
      "type": "image/png",
      "sizes": "512x512"
    }
--- a/src/App.css
+++ b/src/App.css
@@ -3,12 +3,10 @@
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&ital,wght@0,200..800;1,200..800&display=swap");
 html,
 body {
-  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
 }

 .App {
-  /* overflow-x: hidden; */
 }

 .Cafe {
--- a/src/App.js
+++ b/src/App.js
@@ -71,6 +71,12 @@ function App() {
  const [depth, setDepth] = useState(-1);
  const [queue, setQueue] = useState([]);

+  const [newTransaction, setNewTransaction] = useState({});
+
+
+  const queryParams = new URLSearchParams(location.search);
+  const tokenParams = queryParams.get("token");
+  if(tokenParams) localStorage.setItem('auth', tokenParams)

  const validTransactionStates = [
    'new_transaction',
@@ -109,6 +115,10 @@ function App() {

    const handleStorageChange = () => {
      calculateTotalsFromLocalStorage();
+
+      if (!localStorage.getItem("lastTransaction")) {
+        setLastTransaction(null);
+      }
    };

    window.addEventListener("localStorageUpdated", handleStorageChange);
@@ -135,6 +145,7 @@ function App() {
      return;
    }

+    setModal('transaction_confirmed', { transactionId: lastTransaction.transactionId })
    const myLastTransaction = await checkIsMyTransaction(lastTransaction.transactionId);
    console.log(myLastTransaction)
    if (myLastTransaction.isMyTransaction) {
@@ -219,7 +230,7 @@ function App() {
      });
    } else {
      socket.emit("checkUserToken", {
-        token: getLocalStorage("auth"),
+        token: getLocalStorage("auth") || tokenParams,
        shopId,
      });
    }
@@ -236,24 +247,23 @@ function App() {
    });

    socket.on("transaction_confirmed", async (data) => {
-      console.log("transaction notification: " + data);
+      console.log(JSON.stringify(data));
      setModal("transaction_confirmed", data);

      localStorage.setItem('cart', []);

-      const startTime = Date.now(); // Capture the start time
-      const timeout = 10000; // 10 seconds timeout in milliseconds
+      // const startTime = Date.now(); // Capture the start time
+      // const timeout = 10000; // 10 seconds timeout in milliseconds

      calculateTotalsFromLocalStorage();

-      while (localStorage.getItem("lastTransaction") === null) {
-        if (Date.now() - startTime > timeout) {
-          return; // Exit the function and don't proceed further
-        }
-
-        await new Promise((resolve) => setTimeout(resolve, 1000)); // Wait 1 second
-      }
+      // while (localStorage.getItem("lastTransaction") === null) {
+      //   if (Date.now() - startTime > timeout) {
+      //     return; // Exit the function and don't proceed further
+      //   }

+      //   await new Promise((resolve) => setTimeout(resolve, 1000)); // Wait 1 second
+      // }

      // If 'lastTransaction' exists, proceed
      const lastTransaction = JSON.parse(localStorage.getItem("lastTransaction"));
@@ -270,17 +280,23 @@ function App() {
      setModal("transaction_success", data);

      // If 'lastTransaction' exists, proceed
-      localStorage.removeItem("lastTransaction");
-
-      if (lastTransaction != null) {
+      if (localStorage.getItem("lastTransaction")) {
        setLastTransaction(null);
-        console.log('remove last transaction')
+        localStorage.removeItem("lastTransaction");
+        window.dispatchEvent(new Event("localStorageUpdated"));
      }
    });

    socket.on("transaction_end", async (data) => {
      console.log("transaction notification");
      setModal("transaction_end", data);
+
+      // If 'lastTransaction' exists, proceed
+      if (localStorage.getItem("lastTransaction")) {
+        setLastTransaction(null);
+        localStorage.removeItem("lastTransaction");
+        window.dispatchEvent(new Event("localStorageUpdated"));
+      }
    });

    socket.on("payment_claimed", async (data) => {
@@ -289,8 +305,15 @@ function App() {
    });

    socket.on("transaction_failed", async (data) => {
-      console.log("transaction notification");
+      console.log(JSON.stringify(data));
      setModal("transaction_failed", data);
+
+      // If 'lastTransaction' exists, proceed
+      if (localStorage.getItem("lastTransaction")) {
+        setLastTransaction(null);
+        localStorage.removeItem("lastTransaction");
+        window.dispatchEvent(new Event("localStorageUpdated"));
+      }
    });


@@ -378,30 +401,32 @@ function App() {
    };
  }, [socket, shopId]);

-  async function checkIfStillViewingOtherTransaction() {
+  async function checkIfStillViewingOtherTransaction(data) {

    console.log("transaction notification");
    console.log(modalContent);

    let response;
    response = await getTransactionsFromCafe(shopId, 0, true);
-    transactionList.current = response;
    console.log(response);

    // Get current URL's search parameters inside the socket event handler
    const searchParams = new URLSearchParams(location.search);
    let transaction_info = searchParams.get("transactionId") || ''; // Get transactionId or set it to empty string
-    console.log(transaction_info);  // Log the updated transaction_info

+    if(response[0].transactionId != transaction_info) transactionList.current = response;
    
    let depthh = transactionList.current.findIndex(
      item => item.transactionId.toString() === transaction_info.toString()
    );
-    if(depthh == 0 && transaction_info.toString() != '') depthh = 1;
+
+    if (transaction_info != response[0].transactionId)
      setDepth(depthh);
+    else setModal("new_transaction", data);
+
    console.log(transaction_info == response[0].transactionId)
    // If transaction_info is an empty string, set the modal
-    if (transaction_info.toString() == '' || transaction_info.toString() == response[0].transactionId) return false;
+    if (transaction_info.toString() == '') return false;
    else return true;
  }

@@ -409,12 +434,15 @@ function App() {
    // This will ensure that searchParams and transaction_info get updated on each render
    socket.on("transaction_created", async (data) => {
      console.log("transaction notification");
-      const isViewingOtherTransaction = await checkIfStillViewingOtherTransaction();
+      setNewTransaction(data);
+
+      if(!location.pathname.endsWith('/transactions')){
+      const isViewingOtherTransaction = await checkIfStillViewingOtherTransaction(data);
      // If transaction_info is an empty string, set the modal
      if (!isViewingOtherTransaction) {
        setModal("new_transaction", data);
      }
-
+    }
      // Show browser notification
      let permission = Notification.permission;
      if (permission !== "granted") return;
@@ -429,12 +457,15 @@ function App() {
    socket.on("transaction_canceled", async (data) => {
      console.log("transaction notification");

-      const isViewingOtherTransaction = await checkIfStillViewingOtherTransaction();
+      setNewTransaction(data);
+      if(location.pathname != '/transactions'){
+      const isViewingOtherTransaction = await checkIfStillViewingOtherTransaction(data);
      // If transaction_info is an empty string, set the modal
      if (!isViewingOtherTransaction) {
        setModal("new_transaction", data);
        navigate(`?transactionId=${data.transactionId}`, { replace: true });
      }
+      }
    });

    // Clean up the socket event listener on unmount or when dependencies change
@@ -444,17 +475,6 @@ function App() {
    };
  }, [socket, shopId, location]);  // Ensure location is in the dependencies to respond to changes in the URL

-  // useEffect(() => {
-  //   if (user.cafeId != null && user.cafeId !== shopId) {
-  //     // Preserve existing query parameters
-  //     const currentParams = new URLSearchParams(location.search).toString();
-
-  //     // Navigate to the new cafeId while keeping existing params
-  //     navigate(`/${user.cafeId}?${currentParams}`, { replace: true });
-  //   }
-
-  // }, [user, shopId]);
-
  function handleMoveToTransaction(direction, from) {
    console.log(direction);
    console.log(from);
@@ -683,36 +703,6 @@ function App() {
                  totalPrice={totalPrice}
                  lastTransaction={lastTransaction}
                />
-                {/* <Footer
-                  showTable={true}
-                  shopId={shopIdentifier}
-                  table={table}
-                  cartItemsLength={totalItemsCount}
-                  selectedPage={0}
-                /> */}
-              </>
-            }
-          />
-          <Route
-            path="/:shopIdentifier/:tableCode?/search"
-            element={
-              <>
-                <SearchResult
-                  cafeId={shopId}
-                  sendParam={handleSetParam}
-                  user={user}
-                  shopItems={shopItems}
-                  guestSides={guestSides}
-                  guestSideOfClerk={guestSideOfClerk}
-                  removeConnectedGuestSides={rmConnectedGuestSides}
-                  setModal={setModal} // Pass the function to open modal
-                />
-                {/* <Footer
-                  shopId={shopIdentifier}
-                  table={table}
-                  cartItemsLength={totalItemsCount}
-                  selectedPage={1}
-                /> */}
              </>
            }
          />
@@ -732,12 +722,6 @@ function App() {
                  shopItems={shopItems}
                  setShopItems={setShopItems}
                />
-                {/* <Footer
-                  shopId={shopIdentifier}
-                  table={table}
-                  cartItemsLength={totalItemsCount}
-                  selectedPage={2}
-                /> */}
              </>
            }
          />
@@ -771,6 +755,8 @@ function App() {
                  sendParam={handleSetParam}
                  deviceType={deviceType}
                  paymentUrl={shop.qrPayment}
+                  setModal={setModal}
+                  newTransaction={newTransaction}
                />
                {/* <Footer
                  shopId={shopIdentifier}
--- a/src/Apppp.js
+++ b/src/Apppp.js
@@ -44,10 +44,10 @@ const App = () => {

    useEffect(() => {
        const shopId = window.location.pathname.split('/')[1]; // Get shopId from the URL
-        const userId = localStorage.getItem('userId');
+        const user_id = localStorage.getItem('user_id');

-        // Connect to Socket.IO if userId is present
-        // if (userId) {
+        // Connect to Socket.IO if user_id is present
+        // if (user_id) {
            // connectSocket(shopId, 1);
        // }

--- a/src/components/DailyCharts.js
+++ b/src/components/DailyCharts.js
@@ -23,41 +23,50 @@ const DailyCharts = ({ incomeGraph, transactionGraph, materialGraph, colors, typ
        "21-24",
      ];
      console.log(dayData)
+        const sumSold = (transactions) =>
+          Array.isArray(transactions) ? transactions.reduce((acc, t) => acc + t.sold, 0) : transactions.transaction || 0;
+
+        const sumTotal = (transactions) =>
+          Array.isArray(transactions) ? transactions.reduce((acc, t) => acc + t.totalPrice, 0) : transactions.income || 0;
+
+        const sumOutcome = (transactions) =>
+          Array.isArray(transactions) ? transactions.reduce((acc, t) => acc + t.materialOutcome || t.price, 0) : transactions.outcome || 0;
+
      let seriesData = []
      if (graphFilter == 'transactions') {
        seriesData = [
-        dayData.hour0To3Transactions.reduce((acc, t) => acc + t.sold, 0),
-        dayData.hour3To6Transactions.reduce((acc, t) => acc + t.sold, 0),
-        dayData.hour6To9Transactions.reduce((acc, t) => acc + t.sold, 0),
-        dayData.hour9To12Transactions.reduce((acc, t) => acc + t.sold, 0),
-        dayData.hour12To15Transactions.reduce((acc, t) => acc + t.sold, 0),
-        dayData.hour15To18Transactions.reduce((acc, t) => acc + t.sold, 0),
-        dayData.hour18To21Transactions.reduce((acc, t) => acc + t.sold, 0),
-        dayData.hour21To24Transactions.reduce((acc, t) => acc + t.sold, 0),
+          sumSold(dayData?.hour0To3Transactions),
+          sumSold(dayData?.hour3To6Transactions),
+          sumSold(dayData?.hour6To9Transactions),
+          sumSold(dayData?.hour9To12Transactions),
+          sumSold(dayData?.hour12To15Transactions),
+          sumSold(dayData?.hour15To18Transactions),
+          sumSold(dayData?.hour18To21Transactions),
+          sumSold(dayData?.hour21To24Transactions),
        ];
      }
      else if (graphFilter == 'income') {
        seriesData = [
-          dayData.hour0To3Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
-          dayData.hour3To6Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
-          dayData.hour6To9Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
-          dayData.hour9To12Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
-          dayData.hour12To15Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
-          dayData.hour15To18Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
-          dayData.hour18To21Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
-          dayData.hour21To24Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
+          sumTotal(dayData?.hour0To3Transactions),
+          sumTotal(dayData?.hour3To6Transactions),
+          sumTotal(dayData?.hour6To9Transactions),
+          sumTotal(dayData?.hour9To12Transactions),
+          sumTotal(dayData?.hour12To15Transactions),
+          sumTotal(dayData?.hour15To18Transactions),
+          sumTotal(dayData?.hour18To21Transactions),
+          sumTotal(dayData?.hour21To24Transactions),
        ];
      }
      else if (graphFilter == 'outcome') {
        seriesData = [
-          dayData.hour3To6MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
-          dayData.hour6To9MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
-          dayData.hour0To3MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
-          dayData.hour9To12MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
-          dayData.hour12To15MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
-          dayData.hour15To18MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
-          dayData.hour18To21MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
-          dayData.hour21To24MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
+          sumOutcome(dayData?.hour0To3MaterialIds),
+          sumOutcome(dayData?.hour3To6MaterialIds),
+          sumOutcome(dayData?.hour6To9MaterialIds),
+          sumOutcome(dayData?.hour9To12MaterialIds),
+          sumOutcome(dayData?.hour12To15MaterialIds),
+          sumOutcome(dayData?.hour15To18MaterialIds),
+          sumOutcome(dayData?.hour18To21MaterialIds),
+          sumOutcome(dayData?.hour21To24MaterialIds),
        ];
      }
      return {
@@ -134,7 +143,7 @@ const DailyCharts = ({ incomeGraph, transactionGraph, materialGraph, colors, typ
                          {(indexx === 0 || (formatDate(chartData[indexx - 1].date).month !== month && type != 'weekly')) && month}
                        </>
                      ) : (
-                        'Kemarin'
+                        'Hari ini'
                      )}

                    </div>
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -108,7 +108,7 @@ const ProfileImage = styled.img`
  width: 60px;
  height: 60px;
  border-radius: 50%;
-  object-fit: contain;
+  object-fit: cover;
  cursor: pointer;
  z-index: 199;
  animation: ${(props) => {
@@ -359,7 +359,7 @@ const Header = ({
              {shopId && user.roleId == 1 && (
                <Child onClick={goToAdminCafes}>Dashboard</Child>)}
              {shopId &&
-                user.userId == shopOwnerId &&
+                user.user_id == shopOwnerId &&
                user.username !== undefined &&
                user.roleId === 1 && (
                  <>
@@ -368,7 +368,7 @@ const Header = ({
                      {shopName}
                      </Child>
                      <Child>
-                        Mode pengembangan &nbsp;
+                        Mode Edit &nbsp;
                        <Switch
                          borderRadius={0}
                          checked={isEditMode}
@@ -377,7 +377,7 @@ const Header = ({
                      </Child>
                      <Child onClick={() => setModal("reports")}>Lihat laporan</Child>
                      <Child onClick={() => setModal("add_material")}>
-                        Kelola bahan baku
+                        Kelola stok
                      </Child>

                      <Child hasChildren>
@@ -423,7 +423,7 @@ const Header = ({
                    <Child>{shopName}</Child>

                    <Child>
-                      Mode pengembangan&nbsp;
+                      Mode Edit&nbsp;
                      <Switch
                        borderRadius={0}
                        checked={isEditMode}
@@ -431,7 +431,7 @@ const Header = ({
                      />
                    </Child>
                    <Child onClick={() => setModal("add_material")}>
-                      Kelola bahan baku
+                      Kelola stok
                    </Child>

                    <Child hasChildren>
--- a/src/components/Item.js
+++ b/src/components/Item.js
@@ -200,7 +200,7 @@ const Item = ({
                    lineHeight: '1rem',
                    justifyContent: 'center'
                  }}>
-                    Promo {(((initialPrice - promoPrice) / initialPrice) * 100).toFixed(0)}%
+                    Promo
                  </div>

                  <div style={{ display: 'flex' }}>
--- a/src/components/ItemConfig.js
+++ b/src/components/ItemConfig.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import styles from "./Modal.module.css";
-import { getImageUrl } from "../helpers/itemHelper.js";
+import { ThreeDots } from "react-loader-spinner";
+

 const ItemConfig = ({
    name: initialName,
@@ -24,6 +25,9 @@ const ItemConfig = ({
    const fileInputRef = useRef(null);
    const textareaRef = useRef(null);

+    const [isSaving, setIsSaving] = useState(false);
+
+
    useEffect(() => {

        // Prevent scrolling when modal is open
@@ -79,18 +83,27 @@ const ItemConfig = ({
            return () => textarea.removeEventListener("input", handleResize);
        }
    }, [textareaRef.current]);
+    const handleCreate = async () => {
+        setIsSaving(true);
+        try {
+            await handleCreateItem(itemName, itemPrice, selectedImage, previewUrl, itemDescription, itemPromoPrice);
+            document.body.style.overflow = "auto";
+        } finally {
+            setIsSaving(false);
+        }
+    };

-    const handleCreate = () => {
-        console.log(itemPromoPrice)
-        handleCreateItem(itemName, itemPrice, selectedImage, previewUrl, itemDescription, itemPromoPrice);
-        document.body.style.overflow = "auto";
-    };
-    const handleUpdate = () => {
-        console.log(itemName, itemPrice, selectedImage, itemDescription, itemPromoPrice)
-        handleUpdateItem(itemName, itemPrice, selectedImage, itemDescription, itemPromoPrice);
+    const handleUpdate = async () => {
+        setIsSaving(true);
+        try {
+            await handleUpdateItem(itemName, itemPrice, selectedImage, itemDescription, itemPromoPrice);
            document.body.style.overflow = "auto";
+        } finally {
+            setIsSaving(false);
+        }
    };

+
    return (
        <div onClick={handleOverlayClick} style={{ position: 'fixed', width: '100vw', height: '100vh', left: 0, bottom: 0, display: 'flex', flexDirection: 'column-reverse', zIndex: 301, backgroundColor: '#00000061' }}>
            <div onClick={handleContentClick} style={{ display: 'flex', flexDirection: 'column', padding: '15px', backgroundColor: 'white', borderRadius: '20px 20px 0 0', overflowY: 'auto' }}>
@@ -205,12 +218,35 @@ const ItemConfig = ({
                        onBlur={(e) => e.target.style.borderColor = '#ccc'}
                    />
                </div>
+                <div
+                    onClick={() => {
+                        if (!isSaving) {
+                            isBeingEdit ? handleUpdate() : handleCreate();
+                        }
+                    }}
+                    style={{
+                        width: '100%',
+                        height: '40px',
+                        alignContent: 'center',
+                        textAlign: 'center',
+                        borderRadius: '10px',
+                        border: '1px solid #60d37e',
+                        color: isSaving ? '#aaa' : '#60d37e',
+                        backgroundColor: 'white',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        cursor: isSaving ? 'not-allowed' : 'pointer'
+                    }}
+                >
+                    {isSaving ? (

-                <div style={{ width: '100%', height: '35px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                    <div onClick={() => {isBeingEdit ? handleUpdate() : handleCreate()} } style={{ width: '100%', height: '40px', alignContent: 'center', textAlign: 'center', borderRadius: '10px', border: '1px solid #60d37e', color: '#60d37e', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                        {isBeingEdit? 'Simpan' : 'Buat Item'}
-                    </div>
+                        <ThreeDots height={20} width={20} />
+                    ) : (
+                        isBeingEdit ? 'Simpan' : 'Buat Item'
+                    )}
                </div>
+
            </div>
        </div>
    );
--- a/src/components/ItemLister.js
+++ b/src/components/ItemLister.js
@@ -598,7 +598,7 @@ const ItemLister = ({
  return (
    <>
      {(items.length > 0 ||
-        (user && (user.cafeId == shopId || user.userId == shopOwnerId))) && (
+        (user && (user.cafeId == shopId || user.user_id == shopOwnerId))) && (
          <div
            key={itemTypeId}
            className={`${styles["item-lister"]} ${isEdit ? styles["fullscreen"] : ""
@@ -713,15 +713,6 @@ const ItemLister = ({
                    }
                    imageUrl={getImageUrl("uploads/assets/addnew.png")}
                  />
-                  {/* {typeImage != null && !previewUrl.includes(typeImage) && (
-                <ItemType
-                  rectangular={true}
-                  onClick={(previewUrl, selectedImage) =>
-                    handleImageChange(previewUrl, selectedImage)
-                  }
-                  imageUrl={getImageUrl(typeImage)}
-                />
-              )} */}

                  <ItemType
                    rectangular={true}
@@ -857,7 +848,6 @@ const ItemLister = ({
                    );
                  })}
                </div>
-                <button onClick={() => setIsFirstStep(false)} style={{ width: '100%', height: '40px', borderRadius: '20px' }}>selanjutnya</button>
              </>
            )}
            {(isEdit && !isFirstStep || !isEdit) &&
@@ -866,7 +856,7 @@ const ItemLister = ({
                  <h2 className={styles["item-list-title"]}>{items && items.length < 1 ? 'Buat item' : 'Daftar item'}</h2></div>}
                <div className={styles["item-list"]}>
                  {user && (
-                    user.userId == shopOwnerId || user.cafeId == shopId) &&
+                    user.user_id == shopOwnerId || user.cafeId == shopId) &&
                    isEditMode && (
                      <>
                        {!isAddingNewItem && (
@@ -1113,7 +1103,7 @@ const ItemLister = ({

                  {user &&
                    user.roleId == 1 &&
-                    user.userId == shopOwnerId &&
+                    user.user_id == shopOwnerId &&
                    isEdit && (
                      <>
                        {/* <button
--- a/src/components/ItemLister.module.css
+++ b/src/components/ItemLister.module.css
@@ -24,60 +24,8 @@
  /* padding: 10px; */
  /* max-height: calc(3 * (25vw - 20px) + 20px); */
  overflow-y: auto;
-  height: calc(49vw - 20px);
 }

-@media (min-height: 0px) {
-  .grid-container {
-    height: 27vh;
-  }
-}
-@media (min-height: 630px) {
-  .grid-container {
-    height: 27vh;
-  }
-}
-@media (min-height: 636px) {
-  .grid-container {
-    height: 29vh;
-  }
-}
-@media (min-height: 650px) {
-  .grid-container {
-    height: 34vh;
-  }
-}
-@media (min-height: 705px) {
-  .grid-container {
-    height: 37vh;
-  }
-}
-@media (min-height: 735px) {
-  .grid-container {
-    height: 38vh;
-  }
-}
-@media (min-height: 759px) {
-  .grid-container {
-    height: 40vh;
-  }
-}
-@media (min-height: 819px) {
-  .grid-container {
-    height: 44vh;
-  }
-}
-
-@media (min-height: 830px) {
-  .grid-container {
-    height: 47vh;
-  }
-}
-@media (min-height: 892px) {
-  .grid-container {
-    height: 49vh;
-  }
-}

 .title-container {
  display: flex;
--- a/src/components/ItemTypeLister.js
+++ b/src/components/ItemTypeLister.js
@@ -103,7 +103,7 @@ const ItemTypeLister = ({
        {isEditMode &&
          !isAddingNewItem &&
          user && (
-          user.userId == shopOwnerId || user.cafeId == shopId) && (
+          user.user_id == shopOwnerId || user.cafeId == shopId) && (
            <ItemType
              onClick={toggleAddNewItem}
              name={"buat baru"}
@@ -111,7 +111,7 @@ const ItemTypeLister = ({
            />
          )}
        {user &&(
-          user.userId == shopOwnerId || user.cafeId == shopId) &&
+          user.user_id == shopOwnerId || user.cafeId == shopId) &&
          isAddingNewItem && (
            <>
              <ItemLister
@@ -141,7 +141,7 @@ const ItemTypeLister = ({
          itemTypes.map(
            (itemType) =>
              (
-                itemType.itemList.length > 0 || (user &&  (user.userId == shopOwnerId || user.cafeId == shopId))) && (
+                itemType.itemList.length > 0 || (user &&  (user.user_id == shopOwnerId || user.cafeId == shopId))) && (
                <ItemType
                  key={itemType.itemTypeId}
                  name={itemType.name}
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -88,7 +88,7 @@ const Modal = ({ user, shop, isOpen, onClose, modalContent, deviceType, setModal
        {modalContent === "create_tenant" && <CreateTenant shopId={shop.cafeId} />}
        {modalContent === "edit_tables" && <TablesPage shop={shop} />}
        {modalContent === "new_transaction" && (
-          <Transaction propsShopId={shop.cafeId} handleMoveToTransaction={handleMoveToTransaction} depth={depth} shopImg={shopImg} />
+          <Transaction propsShopId={shop.cafeId} handleMoveToTransaction={handleMoveToTransaction} depth={depth} shopImg={shopImg} setModal={setModal}/>
        )}
        {modalContent === "transaction_canceled" && (
          <Transaction propsShopId={shop.cafeId} />
--- a/src/components/Modal.module.css
+++ b/src/components/Modal.module.css
@@ -36,3 +36,4 @@
 .closeButton:hover {
  color: #f44336; /* Change color on hover for better UX */
 }
+
--- a/src/components/MusicPlayer.js
+++ b/src/components/MusicPlayer.js
@@ -479,7 +479,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
            className={`expandable-container ${expanded ? "expanded" : ""}`}
            ref={expandableContainerRef}
          >
-            {user.cafeId == shopId || user.userId == shopOwnerId && (
+            {user.cafeId == shopId || user.user_id == shopOwnerId && (
              <>
                <div className="auth-box">
                  <div
--- a/src/helpers/cafeHelpers.js
+++ b/src/helpers/cafeHelpers.js
@@ -106,10 +106,10 @@ export async function getCafeByIdentifier(cafeIdentifyName) {
    return -1;
  }
 }
-export async function getOwnedCafes(userId) {
+export async function getOwnedCafes(user_id) {
  try {
    const response = await fetch(
-      `${API_BASE_URL}/cafe/get-cafe-by-ownerId/` + userId,
+      `${API_BASE_URL}/cafe/get-cafe-by-ownerId/` + user_id,
      {
        method: "POST",
        headers: {
--- a/src/pages/CafePage.js
+++ b/src/pages/CafePage.js
@@ -19,6 +19,8 @@ import { MusicPlayer } from "../components/MusicPlayer";
 import ItemLister from "../components/ItemLister";
 import Header from "../components/Header";

+import Switch from "react-switch";
+
 import { ThreeDots } from "react-loader-spinner";

 import { getLocalStorage, updateLocalStorage, removeLocalStorage } from "../helpers/localStorageHelpers";
@@ -77,17 +79,28 @@ function CafePage({

  const [beingEditedType, setBeingEditedType] = useState(0);

-  const checkWelcomePageConfig = () => {
-    const parsedConfig = JSON.parse(welcomePageConfig);
-    if (parsedConfig.isWelcomePageActive == "true") {
-      const clicked = sessionStorage.getItem("getStartedClicked");
-      if (!clicked) {
-        sessionStorage.setItem("getStartedClicked", true);
-        document.body.style.overflow = "hidden";
-        setIsStarted(true);
+  // const checkWelcomePageConfig = () => {
+  //   const parsedConfig = JSON.parse(welcomePageConfig);
+  //   if (parsedConfig.isWelcomePageActive == "true") {
+  //     const clicked = sessionStorage.getItem("getStartedClicked");
+  //     if (!clicked) {
+  //       sessionStorage.setItem("getStartedClicked", true);
+  //       document.body.style.overflow = "hidden";
+  //       setIsStarted(true);
+  //     }
+  //   }
+  // };
+
+  useEffect(() => {
+    if (window.gtag && shopIdentifier) {
+      window.gtag('event', 'page_view', {
+        page_title: `Cafe - ${shopIdentifier}`,
+        page_location: window.location.href,
+        page_path: `/` + shopIdentifier,
+        shop_id: shopId || null, // opsional jika kamu mau track ID juga
+      });
    }
-    }
-  };
+  }, [shopIdentifier]);

  useEffect(() => {
    if (welcomePageConfig) {
@@ -100,16 +113,16 @@ function CafePage({
        isActive: parsedConfig.isWelcomePageActive === "true",
      });
    }
-    checkWelcomePageConfig();
+    // checkWelcomePageConfig();
  }, [welcomePageConfig]);


  useEffect(() => {
    function fetchData() {
-      console.log(user.userId == shopOwnerId)
+      console.log(user.user_id == shopOwnerId)
      setModal("create_item");
-
    }
+
    console.log(getLocalStorage('auth'))
    if (getLocalStorage("auth") != null) {
      const executeFetch = async () => {
@@ -118,7 +131,7 @@ function CafePage({
        }
        console.log(user)
        console.log('open')
-        if (user.length != 0 && user.userId == shopOwnerId && shopItems.length == 0) fetchData();
+        if (user.length != 0 && user.user_id == shopOwnerId && shopItems.length == 0) fetchData();
      };
      executeFetch();
    }
@@ -243,8 +256,31 @@ function CafePage({
              isSpotifyNeedLogin={isSpotifyNeedLogin}
              queue={queue}
              setModal={setModal}
+            />{
+  user.username !== undefined &&
+  (user.cafeId === shopId || user.user_id === shopOwnerId) &&
+  (user.roleId === 1 || user.roleId === 2) && (
+    <div style={{
+      backgroundColor: '#5c7c5c',
+      padding: '7px 28px',
+      margin: '0 10px',
+      borderRadius: '15px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      textShadow: '2px 2px 4px rgba(0, 0, 0, 0.7)',
+      fontSize: '16px'
+    }}>
+      Mode Edit&nbsp;
+      <Switch
+        borderRadius={0}
+        checked={isEditMode}
+        onChange={() => setIsEditMode(!isEditMode)}
      />
-                <div></div>
+    </div>
+  )
+}
+
            <ItemTypeLister
              user={user}
              shopOwnerId={shopOwnerId}
--- a/src/pages/Cart.js
+++ b/src/pages/Cart.js
@@ -444,6 +444,18 @@ export default function Invoice({ shopId, setModal, table, sendParam, deviceType
                )}

                <div className={styles.NoteContainer}>
+                  <span>Atas Nama :</span>
+                  <span></span>
+                </div>
+
+                <div className={styles.NoteContainer} >
+                  <input
+                    className={styles.NoteInput}
+                    placeholder="Tambahkan catatan..."
+                  />
+                </div>
+
+                <div className={styles.NoteContainer}style={{height: '18px'}}>
                  <span>Catatan :</span>
                  <span></span>
                </div>
--- a/src/pages/CreateClerk.js
+++ b/src/pages/CreateClerk.js
@@ -28,7 +28,7 @@ const CreateClerk = ({ shopId }) => {
    try {
      const create = await createClerks(shopId || cafeIdParam, username, password);

-      if (create) setMessage('Clerk created successfully');
+      if (create) {setMessage('Clerk created successfully');}
      else setMessage('Failed to create clerk');
    } catch (error) {
      setMessage('Error creating clerk');
--- a/src/pages/Dashboard
+++ b/src/pages/Dashboard
@@ -49,7 +49,7 @@ const Dashboard = ({ user, setModal }) => {
      // Create admin functionality
      createCafeOwner(newItem.email, newItem.username, newItem.password)
        .then((newitem) => {
-          setItems([...items, { userId: newitem.userId, name: newitem.username }]);
+          setItems([...items, { user_id: newitem.user_id, name: newitem.username }]);
          setIsCreating(false);
          setNewItem({ name: "", type: "" });
        })
--- a/src/pages/Dashboard.js
+++ b/src/pages/Dashboard.js
@@ -71,9 +71,9 @@ const LinktreePage = ({ user, setModal }) => {

  // Handle manual coupon code check
  const handleGetkCoupons = async () => {
-    const result = await getUserCoupons();
-    setCoupons(result.coupons);
-    console.log(result)
+    // const result = await getUserCoupons();
+    // setCoupons(result.coupons);
+    // console.log(result)
  };

  // Handle user transactions
@@ -95,24 +95,20 @@ const LinktreePage = ({ user, setModal }) => {
    }
  };

-  // Handle login
-  const handleLogin = async () => {
-    try {
-      setError(false);
-      setLoading(true);
-      const response = await loginUser(username, password);
-      if (response.success) {
-        localStorage.setItem('auth', response.token);
-        console.log(response)
-        window.location.href = response.cafeIdentifyName ? `/${response.cafeIdentifyName}` : '/';
-      } else {
-        setError(true);
-      }
-    } catch (error) {
-      setError(true);
-    } finally {
-      setLoading(false);
-    }
+  const handleLogin = () => {
+    const baseUrl = "https://kediritechnopark.com/";
+    const modal = "product";
+    const productId = 1;
+
+    const authorizedUri = "https://kedaimaster.com?token=";
+    const unauthorizedUri = `${baseUrl}?modal=${modal}&product_id=${productId}`;
+
+    const url =
+      `${baseUrl}?modal=${modal}&product_id=${productId}` +
+      `&authorized_uri=${encodeURIComponent(authorizedUri)}` +
+      `&unauthorized_uri=${encodeURIComponent(unauthorizedUri)}`;
+
+    window.location.href = url;
  };

  // Handle logout
@@ -152,7 +148,7 @@ const LinktreePage = ({ user, setModal }) => {
    try {
      if (user.roleId < 1) {
        const newOwner = await createCafeOwner(newItem.email, newItem.username, newItem.password);
-        setItems([...items, { userId: newOwner.userId, name: newOwner.username }]);
+        setItems([...items, { user_id: newOwner.user_id, name: newOwner.username }]);
      } else {
        const newCafe = await createCafe(newItem.name);
        setItems([...items, { cafeId: newCafe.cafeId, name: newCafe.name }]);
@@ -202,7 +198,7 @@ const LinktreePage = ({ user, setModal }) => {
  ];
  console.log(items)

-  const selectedItems = items?.items?.find(item => (item.userId || item.cafeId) === selectedItemId);
+  const selectedItems = items?.items?.find(item => (item.user_id || item.cafeId) === selectedItemId);

  // If the selected tenant is found, extract the cafes
  const selectedSubItems = selectedItems?.subItems || [];
@@ -278,7 +274,7 @@ const LinktreePage = ({ user, setModal }) => {
                      ))}
                  </div>
                </div>
-                gratis 3 bulan pertama
+                gratis 1 bulan pertama
              </div>
              :
              <div className={styles.mainHeading}>
@@ -290,57 +286,20 @@ const LinktreePage = ({ user, setModal }) => {
                    ))}
                  </div>
                </div>
-                Gratis 3 bulan pertama
+                Gratis 1 bulan pertama
              </div>
            }
            <div className={styles.subHeading}>
              Solusi berbasis web untuk memudahkan pengelolaan kedai, dengan fitur yang mempermudah pemilik, kasir, dan tamu berinteraksi.
            </div>

-            {getLocalStorage('auth') == null && (
              <div className={styles.LoginForm}>
                <div className={`${styles.FormUsername} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : ''}`}>                  
-                  <label htmlFor="username" className={styles.usernameLabel}>---- Masuk -----------------------------</label>
-                  <input
-                    id="username"
-                    placeholder="username"
-                    maxLength="30"
-                    className={!error ? styles.usernameInput : styles.usernameInputError}
-                    value={username}
-                    onChange={(e) => setUsername(e.target.value)}
-                  />
-                  <button onClick={() => { setInputtingPassword(true); setWasInputtingPassword(true) }} className={styles.claimButton}>
-                    <span>➜</span>
-                  </button>
-                </div>
-
-                <div className={`${styles.FormPassword} ${inputtingPassword ? styles.animateForm : wasInputtingPassword ? styles.reverseForm : styles.idleForm}`}>
-                  <span>
-                    <label onClick={() => setInputtingPassword(false)} htmlFor="password" className={styles.usernameLabel}> &lt;--- &lt;-- Kembali </label>
-                    <label htmlFor="password" className={styles.usernameLabel}> &nbsp; ----- &nbsp; </label>
-                    <label onClick={() => setModal('reset-password', { username: username })} className={styles.usernameLabel}>
-                      lupa password?
-                    </label>
-                  </span>
-                  <input
-                    id="password"
-                    placeholder="password"
-                    type="password"
-                    maxLength="30"
-                    className={!error ? styles.usernameInput : styles.usernameInputError}
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                  />
-                  <button
-                    onClick={handleLogin}
-                    className={`${styles.claimButton} ${loading ? styles.loading : ''}`}
-                    disabled={loading}
-                  >
-                    <span>{loading ? 'Loading...' : 'Masuk'}</span>
+                  <button onClick={() => handleLogin()} className={styles.claimButton}>
+                    <span>Masuk</span>
                  </button>
                </div>
              </div>
-            )}

            <div className={styles.footer}>
              <div className={styles.footerLinks}>
--- a/src/pages/Invoice.module.css
+++ b/src/pages/Invoice.module.css
@@ -191,7 +191,7 @@

 .NoteInput {
  width: 78vw;
-  height: 12vw;
+  height: 18px;
  border-radius: 20px;
  margin: 0 auto;
  padding: 10px;
--- a/src/pages/Join.js
+++ b/src/pages/Join.js
@@ -110,7 +110,7 @@ const LinktreePage = ({ data, setModal }) => {
          </div>
          <div className={styles.linktreeForm}>
            <button onClick={()=>window.open("https://api.whatsapp.com/send?phone=6281318894994&text=Saya%20ingin%20coba%20gratis%203%20bulan")} className={styles.claimButton}>
-              <span>Dapatkan voucher gratis 3 bulan</span>
+              <span>Dapatkan voucher gratis 1 bulan</span>
            </button>
          </div>
          <div className={styles.footer}>
--- a/src/pages/LinktreePage.module.css
+++ b/src/pages/LinktreePage.module.css
@@ -338,7 +338,6 @@
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
-  margin-top: 2rem;
 }

 .footerLinks {
--- a/src/pages/MaterialList.js
+++ b/src/pages/MaterialList.js
@@ -231,7 +231,7 @@ const SetPaymentQr = ({ cafeId }) => {
        <></>
      ) : (
        <>
-          <h3 className={styles.title}>Bahan baku</h3>
+          <h3 className={styles.title}>Stok</h3>
          <Carousel items={materials} onSelect={(e) => setSelectedMaterialIndex(e)} selectedIndex={selectedMaterialIndex} />
          {selectedMaterialIndex !== -1 ? (
            <>
--- a/src/pages/Reports.js
+++ b/src/pages/Reports.js
@@ -13,10 +13,6 @@ import MultiSwitch from "react-multi-switch-toggle";
 import DailyCharts from '../components/DailyCharts.js';
 import PeriodCharts from '../components/PeriodCharts.js';

-import Coupon from "../components/Coupon.js";
-
-import CreateCouponPage from "./CreateCoupon.js";
-
 const RoundedRectangle = ({
  onClick,
  title,
@@ -82,7 +78,7 @@ const RoundedRectangle = ({
  };

  const percentageStyle = {
-    fontSize: "16px",
+    fontSize: "14px",
    display: "flex",
    alignItems: "center",
    textAlign: "right",
@@ -282,11 +278,11 @@ const App = ({ forCafe = true, cafeId = -1,
    if (amount >= 1_000_000_000) {
      // Format for billions
      const billions = amount / 1_000_000_000;
-      return billions.toFixed(0) + "b"; // No decimal places for billions
+      return billions.toFixed(0) + "m"; // No decimal places for billions
    } else if (amount >= 1_000_000) {
      // Format for millions
      const millions = amount / 1_000_000;
-      return millions.toFixed(2).replace(/\.00$/, "") + "m"; // Two decimal places, remove trailing '.00'
+      return millions.toFixed(2).replace(/\.00$/, "") + "jt"; // Two decimal places, remove trailing '.00'
    } else if (amount >= 1_000) {
      // Format for thousands
      const thousands = amount / 1_000;
@@ -312,7 +308,7 @@ const App = ({ forCafe = true, cafeId = -1,
    filterTexts[["yesterday", "weekly", "monthly", "yearly"].indexOf(filter)];

  const [resetKey, setResetKey] = useState(0); // A key to force re-render
-  const [texts, setTexts] = useState(['Buat bisnis']); // initially show only first 3 texts
+  const [texts, setTexts] = useState([]); // initially show only first 3 texts
  const [fullTexts, setFullTexts] = useState(null); // initially show only first 3 texts
  const [fullTextsVisible, setFullTextsVisible] = useState(null); // initially show only first 3 texts

@@ -322,22 +318,20 @@ const App = ({ forCafe = true, cafeId = -1,
      let updatedFullTexts;
      if (otherCafes.length === 0) {
        // Only include the role-specific option if user.roleId is 1
-        updatedFullTexts = user.roleId == 1 ? [["Buat Bisnis", 0]] : [];
+        updatedFullTexts = user.roleId == 1 ? [[0]] : [];
        setSelectedCafeId(-1);
      } else if (otherCafes.length === 1) {
        updatedFullTexts = [
-          [otherCafes[0].cafeIdentifyName || otherCafes[0].username, otherCafes[0].cafeId || otherCafes[0].userId],
-          // Only add the "Buat Bisnis" option for user.roleId == 1
-          ...(user.roleId == 1 ? [["Buat Bisnis", -1]] : [])
+          [otherCafes[0].cafeIdentifyName || otherCafes[0].username, otherCafes[0].cafeId || otherCafes[0].user_id],
        ];

        setSelectedCafeId(otherCafes[0].cafeId); // Get the cafeId (second part of the pair)
      } else {
        updatedFullTexts = [
          ["semua", 0], // First entry is "semua"
-          ...otherCafes.map(item => [item.cafeIdentifyName || item.username, item.cafeId || item.userId]), // Map over cafes to get name and cafeId pairs
-          // Only add "Buat Bisnis +" option for user.roleId == 1
-          ...(user.roleId == 1 ? [["Buat Bisnis +", -1]] : [])
+          ...otherCafes.map(item => [item.cafeIdentifyName || item.username, item.cafeId || item.user_id]), // Map over cafes to get name and cafeId pairs
+
+          ...(user.roleId == 1 ? [] : [])
        ];

        setSelectedCafeId(0);
@@ -411,10 +405,10 @@ const App = ({ forCafe = true, cafeId = -1,

    console.log(analytics)
    if (user && user.roleId === 0 && analytics) {
-      // Filter the analytics items based on userId
+      // Filter the analytics items based on user_id
      if (selectedItem[1] != 0 && selectedItem[1] != -1) {
        const filteredData = analytics.items.filter(
-        (data) => data.userId === nextSelectedId
+          (data) => data.user_id === nextSelectedId
        );

        // Extract coupons from the filtered data
@@ -511,7 +505,7 @@ const App = ({ forCafe = true, cafeId = -1,
          marginTop: '30px'
        }}>
          <MultiSwitch
-            texts={["Kemarin", "Minggu ini", "Bulan ini", "Tahun ini"]}
+            texts={["Hari ini", "Minggu ini", "Bulan ini", "Tahun ini"]}
            selectedSwitch={["yesterday", "weekly", "monthly", "yearly"].indexOf(
              filter
            )}
@@ -615,9 +609,11 @@ const App = ({ forCafe = true, cafeId = -1,
            >
              <div style={{ marginRight: "5px", fontSize: "1.2em" }}>ⓘ</div>
              <h6 style={{ margin: 0, textAlign: "left", fontSize: '10px', fontWeight: 500 }}>
-                {(filter == 'yesterday' || filter == 'weekly') ?
+                {(filter == 'weekly') ?
                  `Data dihitung dengan membandingkan
-                ${comparisonText} hari terakhir dengan ${comparisonText} hari sebelumnya, dengan penghitungan dimulai dari data kemarin.`
+                7 hari terakhir dengan 7 hari sebelumnya, dengan penghitungan dimulai dari data kemarin.`
+                  :
+                  (filter == 'yesterday') ? `Data dihitung dengan membandingkan antara hari ini dan kemarin.`
                  :
                  (filter == 'monthly') ? `Data dihitung dengan membandingkan antara awal hingga akhir bulan ini dan bulan lalu, dengan penghitungan berakhir pada data kemarin.` : `Data dihitung dengan membandingkan antara awal hingga akhir tahun ini dan tahun lalu, dengan penghitungan berakhir pada data kemarin.`}
              </h6>
@@ -632,7 +628,7 @@ const App = ({ forCafe = true, cafeId = -1,
              }
              style={{ color: 'black', position: 'relative' }}
            >
-              <div>Item laku</div>
+              <div>Penjualan</div>
            </div>
            <div
              className={`${styles.filterSelector} ${circularFilter == 'material' ? '' : styles.filterSelectorInactive}
@@ -719,77 +715,6 @@ const App = ({ forCafe = true, cafeId = -1,
            <PeriodCharts type={filter} graphFilter={graphFilter} aggregatedCurrentReports={analytics?.aggregatedCurrentReports} aggregatedPreviousReports={analytics?.aggregatedPreviousReports} colors={colors} />
          }
        </div>
-      }
-      {!forCafe && selectedCafeId == -1 && user.roleId == 1 &&
-        <div style={{
-          textAlign: "center",
-        }}>
-          <div
-            style={{
-              display: "flex",
-              flexWrap: "wrap",
-              justifyContent: "center",
-              padding: "20px",
-            }}
-          >
-
-            <RoundedRectangle
-              title={"Masukkan nama bisnis"}
-              width="calc(100% - 10px)"
-            >
-              <input
-                value={itemName}
-                onChange={(e) => setItemName(e.target.value)}
-                style={{
-                  width: '70%',
-                  fontSize: '25px',
-                  borderRadius: '7px',
-                  border: '1px solid black'
-                }}
-              />
-            </RoundedRectangle>
-
-
-            <RoundedRectangle
-              title={"Buat Bisnis"}
-              width="calc(100% - 10px)"
-              onClick={handleClick}
-            />
-          </div>
-        </div>
-      }
-      {!forCafe &&
-      <>
-      <div className={`${styles.couponContainer}`}>
-        <div>
-          {!forCafe &&
-            <div className={styles.dateSelectorWrapper} style={{ fontSize: '13px' }}>
-              <div
-                className={`${styles.dateSelector} ${styles.dateSelectorActive}`} style={{ position: 'relative', width: 'calc(32vw - 30px)' }}
-              >
-                <div style={{ position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: `1px solid green` }}></div>
-                <div
-                  style={{ color: 'black' }}>
-                  Voucher
-                </div>
-              </div>
-            </div>
-          }
-        </div>
-      </div>
-      <div style={{ padding: '25px', paddingTop: '0', paddingBottom: '0' }}>
-          {/* <h1>{couponList.length}</h1> */}
-        {couponList && couponList.map((coupon) => {
-          return <Coupon
-            code={coupon?.code || null}
-            value={coupon?.discountValue}
-            period={coupon?.discountPeriods}
-            expiration={coupon?.discountEndDate}
-          />
-        })}
-        <button className={`${styles.addCoupon}`} onClick={() => setModal('claim-coupon')}>Tambahkan Voucher</button>
-      </div>
-      </>
      }
    </div>
  );
--- a/src/pages/Transaction.js
+++ b/src/pages/Transaction.js
@@ -11,7 +11,7 @@ import { getTables } from "../helpers/tableHelper";
 import TableCanvas from "../components/TableCanvas";
 import { useSearchParams } from "react-router-dom";

-export default function Transactions({ propsShopId, sendParam, deviceType, handleMoveToTransaction, depth, shopImg }) {
+export default function Transactions({ propsShopId, sendParam, deviceType, handleMoveToTransaction, depth, shopImg, setModal }) {
  const { shopId, tableId } = useParams();
  if (sendParam) sendParam({ shopId, tableId });

@@ -231,13 +231,29 @@ export default function Transactions({ propsShopId, sendParam, deviceType, handl
                </div>
              ))}
            </div>
+
+              {!transaction.is_paid && transaction.confirmed > -1 &&
+                <div
+                  onClick={() => {
+                    localStorage.setItem('lastTransaction', JSON.stringify(transaction));
+                    setModal("message", { captMessage: 'Silahkan tambahkan pesanan', descMessage: 'Pembayaran akan ditambahkan ke transaksi sebelumnya.' }, null, null);
+
+                    // Dispatch the custom event
+                    window.dispatchEvent(new Event("localStorageUpdated"));
+                  }}
+                  className={styles["addNewItem"]}
+                >
+                  Tambah pesanan
+                </div>
+              }
+
            <h2 className={styles["Transactions-detail"]}>
              {transaction.serving_type === "pickup"
                ? "Ambil sendiri"
                : `Diantar ke ${transaction.Table ? transaction.Table.tableNo : "N/A"
                }`}
            </h2>
-            {transaction.notes != null && (
+            {transaction.notes != '' && (
              <>
                <div className={styles.NoteContainer}>
                  <span>Note :</span>
--- a/src/pages/Transaction_confirmed.js
+++ b/src/pages/Transaction_confirmed.js
@@ -192,7 +192,7 @@ export default function Transactions({
              ))}
            </ul>

-            {transaction.payment_type != 'paylater/cash' && transaction.payment_type != 'paylater/cashless' &&
+            {(transaction.payment_type != 'paylater/cash' && transaction.payment_type != 'paylater/cashless') &&
              <div
              onClick={() => {
                localStorage.setItem('lastTransaction', JSON.stringify(transaction));
--- a/src/pages/Transactions.js
+++ b/src/pages/Transactions.js
@@ -18,7 +18,7 @@ import ButtonWithReplica from "../components/ButtonWithReplica";
 dayjs.extend(utc);
 dayjs.extend(timezone);

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

@@ -34,12 +34,14 @@ useEffect(() => {
    setMatchedItems(searchAndAggregateItems(transactions, searchTerm));
  }, [searchTerm, transactions]);

-
  useEffect(() => {
    const fetchTransactions = async () => {
      try {
+
+        //   response = await getMyTransactions(shopId || propsShopId, 5);
+        // setMyTransactions(response);
        setLoading(true);
-        let response = await getTransactionsFromCafe(shopId || propsShopId, 5, false);
+        let response = await getTransactionsFromCafe(shopId || propsShopId, -1, false);

        setLoading(false);
        if (response) setTransactions(response);
@@ -47,18 +49,19 @@ useEffect(() => {
        console.error("Error fetching transactions:", error);
      }
    };
-
+    console.log(deviceType)
    fetchTransactions();
-  }, [deviceType]);
+  }, [deviceType, newTransaction]);

  const calculateTotalPrice = (detailedTransactions) => {
    return detailedTransactions.reduce((total, dt) => {
      return total + dt.qty * (dt.promoPrice ? dt.promoPrice : dt.price);
    }, 0);
  };
-
 const calculateAllTransactionsTotal = (transactions) => {
-    return transactions.reduce((grandTotal, transaction) => {
+  return transactions
+    .filter(transaction => transaction.confirmed > 1) // Filter transactions where confirmed > 1
+    .reduce((grandTotal, transaction) => {
      return grandTotal + calculateTotalPrice(transaction.DetailedTransactions);
    }, 0);
 };
@@ -66,15 +69,20 @@ const searchAndAggregateItems = (transactions, searchTerm) => {
  if (!searchTerm.trim()) return [];

  const normalizedTerm = searchTerm.trim().toLowerCase();
+  // Map with key = `${itemId}-${confirmedGroup}` to keep confirmed groups separate
  const aggregatedItems = new Map();

  transactions.forEach(transaction => {
+    // Determine confirmed group as a string key
+    const confirmedGroup = transaction.confirmed >= 0  && transaction.confirmed > 1 ? 'confirmed_gt_1' : 'confirmed_le_1';
+
    transaction.DetailedTransactions.forEach(detail => {
      const itemName = detail.Item.name;
      const itemNameLower = itemName.toLowerCase();

      if (itemNameLower.includes(normalizedTerm)) {
-        const key = detail.itemId;
+        // Combine itemId and confirmedGroup to keep them separated
+        const key = `${detail.itemId}-${confirmedGroup}`;

        if (!aggregatedItems.has(key)) {
          aggregatedItems.set(key, {
@@ -82,6 +90,7 @@ const searchAndAggregateItems = (transactions, searchTerm) => {
            name: itemName,
            totalQty: 0,
            totalPrice: 0,
+            confirmedGroup, // Keep track of which group this belongs to
          });
        }

@@ -91,11 +100,12 @@ const searchAndAggregateItems = (transactions, searchTerm) => {
      }
    });
  });
-
+console.log(aggregatedItems.values())
  return Array.from(aggregatedItems.values());
 };


+
  const handleConfirm = async (transactionId) => {
    setIsPaymentLoading(true);
    try {
@@ -103,7 +113,7 @@ const searchAndAggregateItems = (transactions, searchTerm) => {
      if (result) {
        setTransactions(prev =>
          prev.map(t =>
-            t.transactionId === transactionId ? { ...t, confirmed: 1 } : t
+            t.transactionId === transactionId ? result : t
          )
        );
      }
@@ -144,7 +154,7 @@ const searchAndAggregateItems = (transactions, searchTerm) => {
  return (
    <div className={styles.Transactions}>
      <h2 className={styles["Transactions-title"]}>
-        Daftar transaksi Rp {calculateAllTransactionsTotal(transactions)}
+        Transaksi selesai Rp {calculateAllTransactionsTotal(transactions)}
      </h2>

      <input
@@ -162,7 +172,7 @@ const searchAndAggregateItems = (transactions, searchTerm) => {

        {matchedItems.length > 0 && matchedItems.map(item => (
          <div
-    key={item.itemId}
+ key={`${item.itemId}-${item.confirmedGroup}`}
             className={styles.RoundedRectangle}
            style={{ overflow: "hidden" }}
          >
@@ -188,7 +198,7 @@ const searchAndAggregateItems = (transactions, searchTerm) => {
              <div className={styles['receipt-header']}>
                {transaction.confirmed === 1 ? (
                  <ColorRing className={styles['receipt-logo']} />
-                ) : transaction.confirmed === -1 || transaction.confirmed === -2 ? (
+                ) : transaction.confirmed === -1 && !transaction.is_paid || transaction.confirmed === -2 && !transaction.is_paid ? (
                  <div style={{ display: 'flex', justifyContent: 'center', margin: '16px 0px' }}>
                    <svg
                      style={{ width: '60px', transform: 'Rotate(45deg)' }}
@@ -205,9 +215,9 @@ const searchAndAggregateItems = (transactions, searchTerm) => {
                      />
                    </svg>
                  </div>
-                ) : transaction.confirmed === 2 ? (
+                ) : transaction.confirmed === 2 && !transaction.is_paid ? (
                  <ColorRing className={styles['receipt-logo']} />
-                ) : transaction.confirmed === 3 ? (
+                ) : transaction.confirmed === 3 || transaction.is_paid ? (
                  <div>
                    <svg
                      height="60px"
@@ -242,15 +252,15 @@ const searchAndAggregateItems = (transactions, searchTerm) => {

                <div className={styles['receipt-info']}>
                  {deviceType == 'clerk' ?
-                    <h3>{transaction.confirmed === 1 ? (
+                    <h3>{transaction.confirmed === 1 && !transaction.is_paid ? (
                      "Silahkan Cek Pembayaran"
-                    ) : transaction.confirmed === -1 ? (
+                    ) : transaction.confirmed === -1 && !transaction.is_paid ? (
                      "Dibatalkan Oleh Kasir"
-                    ) : transaction.confirmed === -2 ? (
+                    ) : transaction.confirmed === -2 && !transaction.is_paid ? (
                      "Dibatalkan Oleh Pelanggan"
-                    ) : transaction.confirmed === 2 ? (
+                    ) : transaction.confirmed === 2 && !transaction.is_paid ? (
                      "Sedang Diproses"
-                    ) : transaction.confirmed === 3 ? (
+                    ) : transaction.confirmed === 3 || transaction.is_paid ? (
                      "Transaksi Sukses"
                    ) : (
                      "Silahkan Cek Ketersediaan"
@@ -299,6 +309,20 @@ const searchAndAggregateItems = (transactions, searchTerm) => {
                  </li>
                ))}
              </ul>
+              {!transaction.is_paid && transaction.confirmed > -1 &&
+                <div
+                  onClick={() => {
+                    localStorage.setItem('lastTransaction', JSON.stringify(transaction));
+                    setModal("message", { captMessage: 'Silahkan tambahkan pesanan', descMessage: 'Pembayaran akan ditambahkan ke transaksi sebelumnya.' }, null, null);
+
+                    // Dispatch the custom event
+                    window.dispatchEvent(new Event("localStorageUpdated"));
+                  }}
+                  className={styles["addNewItem"]}
+                >
+                  Tambah pesanan
+                </div>
+              }
              <h2 className={styles["Transactions-detail"]}>
                {transaction.serving_type === "pickup"
                  ? "Self pickup"
@@ -331,7 +355,7 @@ const searchAndAggregateItems = (transactions, searchTerm) => {
              </div>

              <div className={styles.TotalContainer}>
-                {(deviceType == 'clerk' && (transaction.confirmed == 0 || transaction.confirmed == 1 || transaction.confirmed == 2)) &&
+                {(deviceType == 'clerk' && !transaction.is_paid && (transaction.confirmed == 0 || transaction.confirmed == 1 || transaction.confirmed == 2)) &&
                  <button
                    className={styles.PayButton}
                    onClick={() => handleConfirm(transaction.transactionId)}
Author	SHA1	Message	Date
Vassshhh	ba896106d4	ok	2025-08-27 02:53:44 +07:00
Vassshhh	e039fc8acc	ok	2025-08-27 02:53:30 +07:00
Vassshhh	dd0227ab80	ok	2025-08-26 01:46:40 +07:00
Vassshhh	67cf759b31	ok	2025-08-25 23:41:35 +07:00
Vassshhh	53e091d3a4	ok	2025-07-28 01:15:07 +07:00
everythingonblack	3a431b1b14	ok	2025-05-23 10:50:39 +07:00
everythingonblack	69a07be3cd	ok	2025-05-22 16:43:50 +07:00
everythingonblack	b012517568	ok	2025-05-22 02:15:12 +07:00
everythingonblack	3e35468f2c	ok	2025-05-21 16:52:38 +07:00
everythingonblack	df7c4f737c	ok	2025-05-20 17:47:43 +07:00