From 5a2b9b2f860d75978748d87d305d6eda3efac4f5 Mon Sep 17 00:00:00 2001
From: zadit <75159257+insvrgent@users.noreply.github.com>
Date: Wed, 30 Oct 2024 03:32:48 +0700
Subject: [PATCH] ok banget

---
 src/App.js                             |   3 +-
 src/components/Item.js                 |   4 +-
 src/components/Item.module.css         |   6 +-
 src/components/ItemLister.js           | 108 ++++++++++++++++++---
 src/components/ItemTypeLister.js       |   2 +-
 src/components/Modal.js                |   6 +-
 src/config.js                          |   2 +-
 src/helpers/materialMutationHelpers.js |   1 +
 src/helpers/transactionHelpers.js      |   4 +-
 src/pages/GuidePage.js                 |   4 +-
 src/pages/MaterialList.js              |  63 +++++++++---
 src/pages/MaterialMutationsPage.js     |   4 +-
 src/pages/Reports.js                   | 127 ++++++++++---------------
 src/pages/Transactions.js              |  10 +-
 src/pages/WelcomePage.css              |   4 +
 src/pages/WelcomePage.js               |  20 +++-
 src/pages/WelcomePageEditor.css        |   2 +-
 src/pages/WelcomePageEditor.js         |   4 +-
 18 files changed, 244 insertions(+), 130 deletions(-)

diff --git a/src/App.js b/src/App.js
index 90f51b5..57a460f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -96,7 +96,6 @@ function App() {
         if (response.status === 200) {
           setShop(cafe);
           setShopItems(data);
-
           // Filter out unavailable items
           const filteredData = data
             .map((itemType) => ({
@@ -220,7 +219,7 @@ function App() {
           localStorage.getItem("settings")
         )
           setModal("complete_account");
-        if (data.data.user.cafeId == shopId) {
+        if (data.data.user.cafeId == shopId || data.data.isTheOwner) {
           const connectedGuestSides = await getConnectedGuestSides();
           setGuestSides(connectedGuestSides.sessionDatas);
           console.log("getting guest side");
diff --git a/src/components/Item.js b/src/components/Item.js
index 874de52..5769a80 100644
--- a/src/components/Item.js
+++ b/src/components/Item.js
@@ -8,6 +8,7 @@ const Item = ({
   price: initialPrice,
   qty: initialQty,
   imageUrl,
+  imageFile,
   id,
   onPlusClick,
   onNegativeClick,
@@ -17,7 +18,7 @@ const Item = ({
   isAvailable,
   isBeingEdit,
 }) => {
-  const [selectedImage, setSelectedImage] = useState(null);
+  const [selectedImage, setSelectedImage] = useState(imageFile);
   const [previewUrl, setPreviewUrl] = useState(imageUrl);
   const [itemQty, setItemQty] = useState(blank ? 0 : initialQty);
   const [itemName, setItemName] = useState(initialName);
@@ -219,6 +220,7 @@ const Item = ({
                 style={{
                   backgroundColor: "white",
                   width: "150px",
+                  color: '#73a585'
                 }}
                 onClick={isBeingEdit ? handleUpdate : handleCreate}
               >
diff --git a/src/components/Item.module.css b/src/components/Item.module.css
index 0634860..e005257 100644
--- a/src/components/Item.module.css
+++ b/src/components/Item.module.css
@@ -143,12 +143,15 @@
 
 .itemQty {
   display: flex;
-  align-items: center;
+  align-items: end;
   font-size: 0.9rem;
   margin-left: 5px;
+  color: rgb(115, 165, 133);
+  fill: rgb(115, 165, 133);
 }
 
 .itemQtyValue {
+  margin-bottom: 8px;
   font-family: "Poppins", sans-serif;
   font-style: normal;
   font-weight: 600;
@@ -174,7 +177,6 @@
   background-color: #ffffff;
     border: 2px solid #73a585;
     /* border: none; */
-    color: #73a585;
     display: inline-block;
     font-size: 16px;
     font-weight: 600;
diff --git a/src/components/ItemLister.js b/src/components/ItemLister.js
index 18daa01..005a575 100644
--- a/src/components/ItemLister.js
+++ b/src/components/ItemLister.js
@@ -188,6 +188,7 @@ const ItemLister = ({
           : item
       )
     );
+    setisEditItem(0);
   };
   const onUpdateItem = (itemId, name, price, image) => {
     if (isEdit)
@@ -350,17 +351,41 @@ const ItemLister = ({
                 isEdit ? styles.border : styles.noborder
               }`}
               value={editedTypeName}
+              placeholder="type name"
               onChange={(e) => setEditedTypeName(e.target.value)}
               disabled={!isEdit}
             />
             {isEditMode && !isEdit && (
-              <>
-                <button
-                  className={styles["edit-typeItem-button"]}
-                  onClick={toggleEditTypeItem}
-                >
-                  Edit
-                </button>
+              <><div 
+              style={{ 
+                width: '32px', 
+                height: '32px', // Add a height to the div
+                display: 'flex', // Use flexbox
+                justifyContent: 'center', // Center horizontally
+                alignItems: 'center', // Center vertically
+                cursor: 'pointer' 
+              }}
+              onClick={toggleEditTypeItem} // Move onClick here for the whole div
+            >
+              <svg
+                fill="#000000"
+                viewBox="0 0 32 32"
+                style={{ fillRule: 'evenodd', clipRule: 'evenodd', strokeLinejoin: 'round', strokeMiterlimit: 2 }}
+                version="1.1"
+                xmlSpace="preserve"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlnsSerif="http://www.serif.com/"
+                xmlnsXlink="http://www.w3.org/1999/xlink"
+              >
+                <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+                <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
+                <g id="SVGRepo_iconCarrier">
+                  <path d="M12.965,5.462c0,-0 -2.584,0.004 -4.979,0.008c-3.034,0.006 -5.49,2.467 -5.49,5.5l0,13.03c0,1.459 0.579,2.858 1.611,3.889c1.031,1.032 2.43,1.611 3.889,1.611l13.003,0c3.038,-0 5.5,-2.462 5.5,-5.5c0,-2.405 0,-5.004 0,-5.004c0,-0.828 -0.672,-1.5 -1.5,-1.5c-0.827,-0 -1.5,0.672 -1.5,1.5l0,5.004c0,1.381 -1.119,2.5 -2.5,2.5l-13.003,0c-0.663,-0 -1.299,-0.263 -1.768,-0.732c-0.469,-0.469 -0.732,-1.105 -0.732,-1.768l0,-13.03c0,-1.379 1.117,-2.497 2.496,-2.5c2.394,-0.004 4.979,-0.008 4.979,-0.008c0.828,-0.002 1.498,-0.675 1.497,-1.503c-0.001,-0.828 -0.675,-1.499 -1.503,-1.497Z"></path>
+                  <path d="M20.046,6.411l-6.845,6.846c-0.137,0.137 -0.232,0.311 -0.271,0.501l-1.081,5.152c-0.069,0.329 0.032,0.671 0.268,0.909c0.237,0.239 0.577,0.343 0.907,0.277l5.194,-1.038c0.193,-0.039 0.371,-0.134 0.511,-0.274l6.845,-6.845l-5.528,-5.528Zm1.415,-1.414l5.527,5.528l1.112,-1.111c1.526,-1.527 1.526,-4.001 -0,-5.527c-0.001,-0 -0.001,-0.001 -0.001,-0.001c-1.527,-1.526 -4.001,-1.526 -5.527,-0l-1.111,1.111Z"></path>
+                </g>
+              </svg>
+            </div>
+            
               </>
             )}
           </div>
@@ -562,11 +587,37 @@ const ItemLister = ({
                           />
                         )}
                         <h3>
-                          {item.availability ? "available" : "unavailable"}
+                        &nbsp;{item.availability ? "available" : "unavailable"} &nbsp;
                         </h3>
-                        <button onClick={() => editItem(item.itemId)}>
-                          edit
-                        </button>
+                        <div 
+              style={{ 
+                width: '32px', 
+                height: '32px', // Add a height to the div
+                display: 'flex', // Use flexbox
+                justifyContent: 'center', // Center horizontally
+                alignItems: 'center', // Center vertically
+                cursor: 'pointer' 
+              }}
+              onClick={() => editItem(item.itemId)}
+            >
+              <svg
+                fill="white"
+                viewBox="0 0 32 32"
+                style={{ fillRule: 'evenodd', clipRule: 'evenodd', strokeLinejoin: 'round', strokeMiterlimit: 2 }}
+                version="1.1"
+                xmlSpace="preserve"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlnsSerif="http://www.serif.com/"
+                xmlnsXlink="http://www.w3.org/1999/xlink"
+              >
+                <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+                <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
+                <g id="SVGRepo_iconCarrier">
+                  <path d="M12.965,5.462c0,-0 -2.584,0.004 -4.979,0.008c-3.034,0.006 -5.49,2.467 -5.49,5.5l0,13.03c0,1.459 0.579,2.858 1.611,3.889c1.031,1.032 2.43,1.611 3.889,1.611l13.003,0c3.038,-0 5.5,-2.462 5.5,-5.5c0,-2.405 0,-5.004 0,-5.004c0,-0.828 -0.672,-1.5 -1.5,-1.5c-0.827,-0 -1.5,0.672 -1.5,1.5l0,5.004c0,1.381 -1.119,2.5 -2.5,2.5l-13.003,0c-0.663,-0 -1.299,-0.263 -1.768,-0.732c-0.469,-0.469 -0.732,-1.105 -0.732,-1.768l0,-13.03c0,-1.379 1.117,-2.497 2.496,-2.5c2.394,-0.004 4.979,-0.008 4.979,-0.008c0.828,-0.002 1.498,-0.675 1.497,-1.503c-0.001,-0.828 -0.675,-1.499 -1.503,-1.497Z"></path>
+                  <path d="M20.046,6.411l-6.845,6.846c-0.137,0.137 -0.232,0.311 -0.271,0.501l-1.081,5.152c-0.069,0.329 0.032,0.671 0.268,0.909c0.237,0.239 0.577,0.343 0.907,0.277l5.194,-1.038c0.193,-0.039 0.371,-0.134 0.511,-0.274l6.845,-6.845l-5.528,-5.528Zm1.415,-1.414l5.527,5.528l1.112,-1.111c1.526,-1.527 1.526,-4.001 -0,-5.527c-0.001,-0 -0.001,-0.001 -0.001,-0.001c-1.527,-1.526 -4.001,-1.526 -5.527,-0l-1.111,1.111Z"></path>
+                </g>
+              </svg>
+            </div>
                       </div>
                     )}
 
@@ -578,6 +629,7 @@ const ItemLister = ({
                       price={item.price}
                       qty={item.qty}
                       imageUrl={item.image}
+                      imageFile={item.selectedImage}
                       onPlusClick={() => handlePlusClick(item.itemId)}
                       onNegativeClick={() => handleNegativeClick(item.itemId)}
                       onRemoveClick={() => handleRemoveClick(item.itemId)}
@@ -614,11 +666,37 @@ const ItemLister = ({
                           />
                         )}
                         <h3>
-                          {item.availability ? "available" : "unavailable"}
+                        &nbsp;{item.availability ? "available" : "unavailable"}&nbsp;
                         </h3>
-                        <button onClick={() => editItem(item.itemId)}>
-                          edit
-                        </button>
+                        <div 
+              style={{ 
+                width: '32px', 
+                height: '32px', // Add a height to the div
+                display: 'flex', // Use flexbox
+                justifyContent: 'center', // Center horizontally
+                alignItems: 'center', // Center vertically
+                cursor: 'pointer' 
+              }}
+              onClick={() => editItem(item.itemId)}
+            >
+              <svg
+                fill="white"
+                viewBox="0 0 32 32"
+                style={{ fillRule: 'evenodd', clipRule: 'evenodd', strokeLinejoin: 'round', strokeMiterlimit: 2 }}
+                version="1.1"
+                xmlSpace="preserve"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlnsSerif="http://www.serif.com/"
+                xmlnsXlink="http://www.w3.org/1999/xlink"
+              >
+                <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+                <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
+                <g id="SVGRepo_iconCarrier">
+                  <path d="M12.965,5.462c0,-0 -2.584,0.004 -4.979,0.008c-3.034,0.006 -5.49,2.467 -5.49,5.5l0,13.03c0,1.459 0.579,2.858 1.611,3.889c1.031,1.032 2.43,1.611 3.889,1.611l13.003,0c3.038,-0 5.5,-2.462 5.5,-5.5c0,-2.405 0,-5.004 0,-5.004c0,-0.828 -0.672,-1.5 -1.5,-1.5c-0.827,-0 -1.5,0.672 -1.5,1.5l0,5.004c0,1.381 -1.119,2.5 -2.5,2.5l-13.003,0c-0.663,-0 -1.299,-0.263 -1.768,-0.732c-0.469,-0.469 -0.732,-1.105 -0.732,-1.768l0,-13.03c0,-1.379 1.117,-2.497 2.496,-2.5c2.394,-0.004 4.979,-0.008 4.979,-0.008c0.828,-0.002 1.498,-0.675 1.497,-1.503c-0.001,-0.828 -0.675,-1.499 -1.503,-1.497Z"></path>
+                  <path d="M20.046,6.411l-6.845,6.846c-0.137,0.137 -0.232,0.311 -0.271,0.501l-1.081,5.152c-0.069,0.329 0.032,0.671 0.268,0.909c0.237,0.239 0.577,0.343 0.907,0.277l5.194,-1.038c0.193,-0.039 0.371,-0.134 0.511,-0.274l6.845,-6.845l-5.528,-5.528Zm1.415,-1.414l5.527,5.528l1.112,-1.111c1.526,-1.527 1.526,-4.001 -0,-5.527c-0.001,-0 -0.001,-0.001 -0.001,-0.001c-1.527,-1.526 -4.001,-1.526 -5.527,-0l-1.111,1.111Z"></path>
+                </g>
+              </svg>
+            </div>
                       </div>
                     )}
 
diff --git a/src/components/ItemTypeLister.js b/src/components/ItemTypeLister.js
index 0544267..e48b727 100644
--- a/src/components/ItemTypeLister.js
+++ b/src/components/ItemTypeLister.js
@@ -114,7 +114,7 @@ const ItemTypeLister = ({
                 shopId={shopId}
                 shopOwnerId={shopOwnerId}
                 user={user}
-                typeName={"add new"}
+                typeName={""}
                 itemList={items}
                 isEditMode={true}
                 handleCreateItem={(itemTypeId, name, price, selectedImage) => createItem(shopId, name, price, selectedImage,itemTypeId)}
diff --git a/src/components/Modal.js b/src/components/Modal.js
index bcc9236..08dfd79 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -62,13 +62,13 @@ const Modal = ({ shop, isOpen, onClose, modalContent, setModal }) => {
           <PaymentOptions shopId={shop.cafeId} />
         )}
         {modalContent === "add_material" && (
-          <MaterialList cafeId={shop.cafeId} />
+          <MaterialList handleClose={handleOverlayClick} cafeId={shop.cafeId} />
         )}
         {modalContent === "update_stock" && (
-          <MaterialMutationsPage cafeId={shop.cafeId} />
+          <MaterialMutationsPage  handleClose={handleOverlayClick} cafeId={shop.cafeId} />
         )}
         {modalContent === "welcome_config" && <WelcomePageEditor cafeId={shop.cafeId} welcomePageConfig={shop.welcomePageConfig} />}
-        {modalContent === "reports" && <Reports cafeId={shop.cafeId} />}
+        {modalContent === "reports" && <Reports handleClose={handleOverlayClick} cafeId={shop.cafeId} />}
       </div>
     </div>
   );
diff --git a/src/config.js b/src/config.js
index 967c5ce..6cf67cc 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,5 +1,5 @@
 // src/config.js
 
-const API_BASE_URL = 'https://api.kedaimaster.com';
+const API_BASE_URL = 'https://dev.api.kedaimaster.com';
 
 export default API_BASE_URL;
diff --git a/src/helpers/materialMutationHelpers.js b/src/helpers/materialMutationHelpers.js
index 9cf799d..f9a1744 100644
--- a/src/helpers/materialMutationHelpers.js
+++ b/src/helpers/materialMutationHelpers.js
@@ -26,6 +26,7 @@ export const createMaterialMutation = async (materialId, data) => {
         body: JSON.stringify({
           newStock: data.get("newStock"),
           reason: data.get("reason"),
+          priceAtp: data.get("priceAtp"),
         }),
       }
     );
diff --git a/src/helpers/transactionHelpers.js b/src/helpers/transactionHelpers.js
index c31f34f..b23b1bb 100644
--- a/src/helpers/transactionHelpers.js
+++ b/src/helpers/transactionHelpers.js
@@ -173,11 +173,11 @@ export async function getMyTransactions(shopId, demand) {
     console.error("Error:", error);
   }
 }
-export async function getTransactions(shopId, demand) {
+export async function getTransactionsFromCafe(shopId, demand) {
   try {
     const token = getLocalStorage("auth");
     const response = await fetch(
-      `${API_BASE_URL}/transaction/get-transactions/${shopId}?demandLength=${demand}`,
+      `${API_BASE_URL}/transaction/get-transactions-from-cafe/${shopId}?demandLength=${demand}`,
       {
         method: "GET",
         headers: {
diff --git a/src/pages/GuidePage.js b/src/pages/GuidePage.js
index 6b3ca9d..1376b79 100644
--- a/src/pages/GuidePage.js
+++ b/src/pages/GuidePage.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import './GuidePage.css';
-
+import API_BASE_URL from '../config.js';
 const GuidePage = ({ guideType }) => {
   const renderGuideContent = () => {
     switch (guideType) {
@@ -10,7 +10,7 @@ const GuidePage = ({ guideType }) => {
             <h2>Setup Guide</h2>
             <p>1. Turn on edit mode and create item type</p>
             <video
-              src="https://api.kedaimaster.com/uploads/create_item_guide_1.mkv"
+              src={`${API_BASE_URL}/uploads/create_item_guide_1.mkv`}
               autoPlay
               muted
               loop
diff --git a/src/pages/MaterialList.js b/src/pages/MaterialList.js
index 006a10b..8b3a4b5 100644
--- a/src/pages/MaterialList.js
+++ b/src/pages/MaterialList.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import API_BASE_URL from "../config.js";
 import {
   getMaterials,
@@ -10,7 +10,7 @@ import {
   getMaterialMutations,
 } from "../helpers/materialMutationHelpers";
 
-const MaterialList = ({ cafeId }) => {
+const MaterialList = ({ cafeId, handleClose }) => {
   const [materials, setMaterials] = useState([]);
   const [mutations, setMutations] = useState([]);
   const [newMaterialName, setNewMaterialName] = useState("");
@@ -21,9 +21,12 @@ const MaterialList = ({ cafeId }) => {
   const [error, setError] = useState(null);
   const [showForm, setShowForm] = useState(false);
   const [selectedMaterialId, setSelectedMaterialId] = useState(null);
+  const [latestMutation, setLatestMutation] = useState([]);
   const [currentQuantity, setCurrentQuantity] = useState(0);
+  const [currentPrice, setCurrentPrice] = useState(0);
   const [quantityChange, setQuantityChange] = useState(0);
   const [sortOrder, setSortOrder] = useState("desc");
+  const priceInputRef = useRef(null);
 
   useEffect(() => {
     const fetchMaterials = async () => {
@@ -69,9 +72,13 @@ const MaterialList = ({ cafeId }) => {
               : latest,
           materialMutations[0]
         );
+        setLatestMutation(latestMutation);
         setCurrentQuantity(latestMutation.newStock);
+        setCurrentPrice(latestMutation.priceAtp);
       } else {
         setCurrentQuantity(0); // Default value if no mutations exist
+        setLatestMutation({newStock: 0});
+        setCurrentPrice(0);
       }
     }
   }, [selectedMaterialId, mutations]);
@@ -174,6 +181,10 @@ const MaterialList = ({ cafeId }) => {
   const handleQuantityChange = (change) => {
     setQuantityChange((prev) => prev + change);
   };
+  // useEffect to log the latest quantityChange value
+  useEffect(() => {
+    if(quantityChange >= latestMutation.newStock) priceInputRef.current.focus();
+  }, [quantityChange]);
 
   const handleUpdateStock = async () => {
     if (selectedMaterialId) {
@@ -182,6 +193,7 @@ const MaterialList = ({ cafeId }) => {
         const newStock = currentQuantity + quantityChange;
         const formData = new FormData();
         formData.append("newStock", newStock);
+        formData.append("priceAtp", currentPrice);
         formData.append("reason", "Stock update");
 
         await createMaterialMutation(selectedMaterialId, formData);
@@ -209,7 +221,7 @@ const MaterialList = ({ cafeId }) => {
 
   return (
     <div style={styles.container}>
-      <h1 style={styles.heading}>Materials List</h1>
+      <h1 style={styles.heading}>Stok barang</h1>
 
       {error && <p style={styles.error}>{error}</p>}
       {loading && <p>Loading materials and mutations...</p>}
@@ -220,7 +232,7 @@ const MaterialList = ({ cafeId }) => {
           style={styles.toggleButton}
           disabled={loading}
         >
-          {showForm ? "Hide Form" : "Add New Material"}
+          {showForm ? "Batalkan" : "Tambah barang"}
         </button>
       )}
 
@@ -291,7 +303,13 @@ const MaterialList = ({ cafeId }) => {
                 (material) => material.materialId === selectedMaterialId
               ) === 0
             }
-            style={styles.navigationButton}
+            style={{...styles.navigationButton, 
+              backgroundColor: 
+                !selectedMaterialId ||
+                materials.findIndex((material) => material.materialId === selectedMaterialId) === 0
+                  ? '#a3a3a3'
+                  : '#5b81ff',
+            }}
           >
             {"<"}
           </button>
@@ -319,6 +337,7 @@ const MaterialList = ({ cafeId }) => {
                   <button style={styles.quantityDisplay}>
                     {currentQuantity + quantityChange}
                   </button>
+                    
                   <button
                     onClick={() => handleQuantityChange(1)}
                     style={styles.quantityButton}
@@ -326,6 +345,8 @@ const MaterialList = ({ cafeId }) => {
                     +
                   </button>
                 </div>
+                  <p>harga per {currentMaterial.unit}</p>
+                  <input ref={priceInputRef} disabled={(currentQuantity+quantityChange) <= latestMutation.newStock} value={currentPrice} onChange={(e)=>setCurrentPrice(e.target.value)} style={styles.priceAtp}/>
                 <button
                   onClick={handleUpdateStock}
                   style={styles.updateMutation}
@@ -357,7 +378,13 @@ const MaterialList = ({ cafeId }) => {
               ) ===
                 materials.length - 1
             }
-            style={styles.navigationButton}
+            style={{...styles.navigationButton, 
+              backgroundColor: 
+                !selectedMaterialId ||
+                materials.findIndex((material) => material.materialId === selectedMaterialId) === materials.length - 1
+                  ? '#a3a3a3'
+                  : '#5b81ff',
+            }}
           >
             {">"}
           </button>
@@ -394,19 +421,19 @@ const MaterialList = ({ cafeId }) => {
           )}
         </div>
       )}
+      <div class="ItemLister_PaymentOption__YZlDL"><div style={{marginTop:'20px'}} onClick={handleClose} class="ItemLister_Pay2Button__+MIxX">Kembali</div></div>
     </div>
   );
 };
 
 const styles = {
   container: {
-    paddingLeft: "10px",
-    paddingRight: "10px",
-    maxWidth: "800px",
-    margin: "0 auto",
-    height: "100%", // Adjust height based on your needs
-    overflowY: "auto", // Enables vertical scrolling
-    backgroundColor: "white",
+    position: 'fixed',
+    height: '100vh',
+    width: '100vw',
+    top: 0,
+    right: 0,
+    backgroundColor: 'rgb(207, 207, 207)'
   },
   heading: {
     textAlign: "center",
@@ -569,6 +596,16 @@ const styles = {
     textAlign: "center",
     margin: "0 5px",
   },
+  priceAtp: {
+    padding: "8px 12px",
+    border: "1px solid #ddd",
+    borderRadius: "5px",
+    textAlign: 'left',
+    backgroundColor: "#fff",
+    color: "#000",
+    fontSize: "16px",
+    margin: "0 5px",
+  },
   updateMutation: {
     marginTop: "10px",
     padding: "12px 20px",
diff --git a/src/pages/MaterialMutationsPage.js b/src/pages/MaterialMutationsPage.js
index 6bff12f..be293aa 100644
--- a/src/pages/MaterialMutationsPage.js
+++ b/src/pages/MaterialMutationsPage.js
@@ -141,7 +141,7 @@ const styles = {
   },
 };
 
-const MaterialMutationPage = ({ cafeId }) => {
+const MaterialMutationPage = ({ cafeId, handleClose }) => {
   const [materials, setMaterials] = useState([]);
   const [mutations, setMutations] = useState([]);
   const [selectedMaterialId, setSelectedMaterialId] = useState("");
@@ -331,6 +331,8 @@ const MaterialMutationPage = ({ cafeId }) => {
           </div>
         ))}
       </div>
+      
+      <div class="ItemLister_PaymentOption__YZlDL"><div style={{marginTop:'20px'}} onClick={handleClose} class="ItemLister_Pay2Button__+MIxX">Kembali</div></div>
     </div>
   );
 };
diff --git a/src/pages/Reports.js b/src/pages/Reports.js
index 14439cf..928ea69 100644
--- a/src/pages/Reports.js
+++ b/src/pages/Reports.js
@@ -17,6 +17,7 @@ const RoundedRectangle = ({
   title,
   value,
   percentage,
+  invert,
   fontSize = "15px",
   loading = false,
   children, // Assuming this is a React component or JSX
@@ -73,7 +74,7 @@ const RoundedRectangle = ({
     display: "flex",
     alignItems: "center",
     textAlign: "right",
-    color: loading ? "black" : percentage > 0 ? "#007bff" : "red",
+    color: loading ? "black" : percentage >= 0 ? (invert ? "red" : "#2fd45e") : (invert ? "#2fd45e" : "red"),
   };
 
   const arrowStyle = {
@@ -102,7 +103,8 @@ const RoundedRectangle = ({
   );
 };
 
-const App = ({ cafeId }) => {
+const App = ({ cafeId, 
+  handleClose }) => {
   const [favouriteItems, setFavouriteItems] = useState([]);
   const [analytics, setAnalytics] = useState({});
   const [loading, setLoading] = useState(true);
@@ -128,7 +130,7 @@ const App = ({ cafeId }) => {
   }, [filter]);
 
   const [sold, percentage] = analytics[filter] || [0, 0];
-  const filteredItems = analytics.currentFavoriteItems || [];
+  const filteredItems = analytics.items || [];
 
   const totalSold = filteredItems.reduce((sum, item) => sum + item.count, 0);
   const colors = [
@@ -187,7 +189,7 @@ const App = ({ cafeId }) => {
     setFilter(filterMap[selectedItem]);
   }
 
-  const filterTexts = ["1 day", "7 days", "30 days", "365 days"];
+  const filterTexts = ["1", "7", "30", "365"];
   const comparisonText =
     filterTexts[["daily", "weekly", "monthly", "yearly"].indexOf(filter)];
   const formatDate = (isoDateString) => {
@@ -201,11 +203,18 @@ const App = ({ cafeId }) => {
   };
 
   return (
-    <div className={styles.Transactions} style={{ backgroundColor: "#cfcfcf" }}>
+    <div style={{
+      position: 'fixed',
+      height: '100vh',
+      width: '100vw',
+      top: 0,
+      right: 0,
+      backgroundColor: 'rgb(207, 207, 207)'}}
+      >
       <h2 className={styles["Transactions-title"]}>Reports</h2>
       <div style={{ textAlign: "center" }}>
         <MultiSwitch
-          texts={["Yesterday", "Last 7", "Last 30", "Last 365"]}
+          texts={["Yesterday", "This week", "This Month", "This year"]}
           selectedSwitch={["daily", "weekly", "monthly", "yearly"].indexOf(
             filter
           )}
@@ -229,62 +238,56 @@ const App = ({ cafeId }) => {
         >
           <RoundedRectangle
             bgColor="#E3F5FF"
-            title="Transactions"
-            value={analytics.transactionCount}
-            percentage={roundToInteger(analytics.transactionGrowth)}
+            title="Pendapatan"
+            fontSize="12px"
+            value={!loading && "Rp" + formatIncome(analytics?.totalIncome)}
+            percentage={roundToInteger(analytics.growthIncome)}
+            invert={false}
+            loading={loading}
+          />
+
+<RoundedRectangle
+            bgColor="#E5ECF6"
+            title="Pengeluaran"
+            fontSize="12px"
+            value={!loading && "Rp" + formatIncome(analytics?.currentOutcome)}
+            percentage={roundToInteger(analytics.growthOutcome)}
+            invert={true}
             loading={loading}
           />
           <RoundedRectangle
             bgColor="#E5ECF6"
-            title="Income"
-            fontSize="12px"
-            value={!loading && "Rp" + formatIncome(analytics?.totalIncome)}
-            percentage={roundToInteger(analytics.incomeGrowth)}
+            title="Transaksi"
+            value={analytics.totalTransactions}
+            percentage={roundToInteger(analytics.growthTransactions)}
+            invert={false}
             loading={loading}
           />
-
-          {analytics?.currentFavoriteItems &&
-            analytics?.currentFavoriteItems.length > 0 && (
+          {analytics?.items &&
+            analytics?.items.length > 0 && (
               <RoundedRectangle
-                bgColor="#E5ECF6"
-                title={"Fav item"}
-                value={analytics?.currentFavoriteItems[0]?.name}
+                bgColor="#E3F5FF"
+                title={"Item favorit"}
+                value={analytics?.items[0]?.name}
+                loading={loading}
+              />
+            )}
+            {(!analytics?.items ||
+              analytics?.items.length === 0) && (
+              <RoundedRectangle
+                bgColor="#E5ECF6"
+                title={"Item favorit"}
+                value={"-"}
                 loading={loading}
               />
             )}
-          {(!analytics?.currentFavoriteItems ||
-            analytics?.currentFavoriteItems.length === 0) && (
-            <RoundedRectangle
-              bgColor="#E5ECF6"
-              title={"No fav item"}
-              value={"-"}
-              loading={loading}
-            />
-          )}
-          {analytics?.previousFavoriteItem !== null && (
-            <RoundedRectangle
-              bgColor="#E3F5FF"
-              title={"Fav before"}
-              value={analytics?.previousFavoriteItem?.name}
-              loading={loading}
-            />
-          )}
-          {analytics?.previousFavoriteItem === null && (
-            <RoundedRectangle
-              bgColor="#E3F5FF"
-              title={"No fav item"}
-              value={"-"}
-              loading={loading}
-            />
-          )}
-
           <div
             style={{ display: "flex", alignItems: "center", margin: "10px" }}
           >
             <div style={{ marginRight: "5px", fontSize: "1.2em" }}>ⓘ</div>
             <h6 style={{ margin: 0, textAlign: "left" }}>
-              Growth percentages are based on comparing the last{" "}
-              {comparisonText} with the preceding {comparisonText}.
+            Persentase pertumbuhan dihitung dengan membandingkan periode{" "}
+              {comparisonText} terakhir dengan {comparisonText} hari sebelumnya.
             </h6>
           </div>
         </div>
@@ -324,36 +327,8 @@ const App = ({ cafeId }) => {
           </div>
         </div>
 
-        <h3 className={styles["Transactions-title"]}>Stock changes</h3>
-
-        {analytics.materialMutations?.length > 0 &&
-          analytics?.materialMutations.map((item, index) => (
-            <RoundedRectangle
-              key={index}
-              bgColor="rgb(59 59 59 / 41%)"
-              title={item.name}
-            >
-              <div
-                style={{
-                  display: "flex",
-                  flexWrap: "wrap",
-                  justifyContent: "left",
-                  padding: "20px",
-                }}
-              >
-                {item.mutations.map((mutation, mutationIndex) => (
-                  <RoundedRectangle
-                    bgColor="rgb(59 59 59 / 41%)"
-                    key={mutationIndex}
-                    isChildren={true}
-                    title={`from ${mutation.oldStock} to ${mutation.newStock}`}
-                    value={formatDate(mutation.changeDate)}
-                  />
-                ))}
-              </div>
-            </RoundedRectangle>
-          ))}
       </div>
+      <div class="ItemLister_PaymentOption__YZlDL"><div style={{marginTop:'20px'}} onClick={handleClose} class="ItemLister_Pay2Button__+MIxX">Kembali</div></div>
     </div>
   );
 };
diff --git a/src/pages/Transactions.js b/src/pages/Transactions.js
index e6a15e5..658a755 100644
--- a/src/pages/Transactions.js
+++ b/src/pages/Transactions.js
@@ -4,9 +4,9 @@ import { useParams } from "react-router-dom";
 import { ColorRing } from "react-loader-spinner";
 import {
   getMyTransactions,
-  getTransactions,
   confirmTransaction,
   declineTransaction,
+  getTransactionsFromCafe,
 } from "../helpers/transactionHelpers";
 import { getTables } from "../helpers/tableHelper";
 import TableCanvas from "../components/TableCanvas";
@@ -18,17 +18,17 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
   const [tables, setTables] = useState([]);
   const [selectedTable, setSelectedTable] = useState(null);
   const [transactions, setTransactions] = useState([]);
+  const [myTransactions, setMyTransactions] = useState([]);
   const [isPaymentLoading, setIsPaymentLoading] = useState(false);
 
   useEffect(() => {
     const fetchTransactions = async () => {
       try {
         let response;
-        if (deviceType == "clerk")
-          response = await getTransactions(shopId || propsShopId, 5);
-        else if (deviceType == "guestDevice")
+          response = await getTransactionsFromCafe(shopId || propsShopId, 5);
+          setTransactions(response);
           response = await getMyTransactions(shopId || propsShopId, 5);
-        setTransactions(response);
+        setMyTransactions(response);
       } catch (error) {
         console.error("Error fetching transactions:", error);
       }
diff --git a/src/pages/WelcomePage.css b/src/pages/WelcomePage.css
index 592ef00..3f04067 100644
--- a/src/pages/WelcomePage.css
+++ b/src/pages/WelcomePage.css
@@ -17,6 +17,10 @@
   margin-bottom: 20px;
 }
 
+.fileInput {
+  display: none;
+}
+
 .circular-image {
   width: 100%;
   height: 100%;
diff --git a/src/pages/WelcomePage.js b/src/pages/WelcomePage.js
index 4def678..db57f3a 100644
--- a/src/pages/WelcomePage.js
+++ b/src/pages/WelcomePage.js
@@ -1,5 +1,5 @@
 // WelcomePage.js
-import React from "react";
+import React,{useRef} from "react";
 import "./WelcomePage.css";
 
 const WelcomePage = ({
@@ -9,7 +9,12 @@ const WelcomePage = ({
   welcomingText,
   backgroundColor,
   textColor,
+  onImageChange
 }) => {
+  const fileInputRef = useRef(null);
+  const handleImageClick = () => {
+    fileInputRef.current.click();
+  };
   return (
     <div
       className={`welcome-page ${isFullscreen ? "fullscreen" : ""}`} // Corrected the className syntax
@@ -19,11 +24,20 @@ const WelcomePage = ({
     >
       <div
         style={{
-          backgroundColor: image ? "transparent" : "black",
+          backgroundColor: image ? "transparent" : "black",position:'relative'
         }}
         className="image-container"
       >
-        {image && <img src={image} alt="Welcome" className="circular-image" />} {/* Added conditional rendering */}
+        {!isFullscreen &&
+        <div onClick={handleImageClick} style={{width: '100%', height: '100%', position:'absolute'}}>
+          <h1 style={{textAlign:'left'}}>
+            {image ? "Click To Change Image" : "Click To Add Image"}
+          </h1>
+          <input 
+            ref={fileInputRef} style={{display: 'none', width:'100%', height: '100%'}}type="file" accept="image/*" onChange={onImageChange} />
+        </div>
+        }
+        {image && <img  src={image} alt="Welcome" className="circular-image" />} {/* Added conditional rendering */}
       </div>
       <h1 className="welcoming-text" style={{ color: textColor }}>
         {welcomingText}
diff --git a/src/pages/WelcomePageEditor.css b/src/pages/WelcomePageEditor.css
index a83a0e2..bde0686 100644
--- a/src/pages/WelcomePageEditor.css
+++ b/src/pages/WelcomePageEditor.css
@@ -7,7 +7,7 @@
   padding: 20px;
   border: 1px solid #ddd;
   border-radius: 8px;
-  background-color: #f9f9f9;
+  background-color: rgb(207, 207, 207);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   overflow: hidden;
 }
diff --git a/src/pages/WelcomePageEditor.js b/src/pages/WelcomePageEditor.js
index 3aefb91..7af1b95 100644
--- a/src/pages/WelcomePageEditor.js
+++ b/src/pages/WelcomePageEditor.js
@@ -79,7 +79,6 @@ const WelcomePageEditor = ({ cafeId, welcomePageConfig }) => {
     >
       <h2>Edit Welcome Page</h2>
       <div style={{ display: "flex", flexDirection: "column" }}>
-        <input type="file" accept="image/*" onChange={handleImageChange} />
         <textarea
           value={welcomingText}
           onChange={handleTextChange}
@@ -120,7 +119,7 @@ const WelcomePageEditor = ({ cafeId, welcomePageConfig }) => {
         </button>
       </div>
       <div
-        style={{ width: "100%", height: "100%", position: "relative", flex: 1 }}
+        style={{ width: "100%", height: "100%", position: "relative", flex: 1, borderRadius: '15px' }}
       >
         <WelcomePage
           image={image}
@@ -129,6 +128,7 @@ const WelcomePageEditor = ({ cafeId, welcomePageConfig }) => {
           textColor={textColor}
           onGetStarted={() => setIsFullscreen(false)}
           isFullscreen={isFullscreen}
+          onImageChange={handleImageChange}
         />
         <div style={{ position: "absolute", bottom: 0, right: 0 }}>
           <svg