diff --git a/src/App.js b/src/App.js
index 57a460f..5fdd428 100644
--- a/src/App.js
+++ b/src/App.js
@@ -96,6 +96,7 @@ function App() {
         if (response.status === 200) {
           setShop(cafe);
           setShopItems(data);
+          console.log(data)
           // Filter out unavailable items
           const filteredData = data
             .map((itemType) => ({
@@ -424,6 +425,7 @@ function App() {
                   shopName={shop.name}
                   shopOwnerId={shop.ownerId}
                   shopItems={shopItems}
+                  setShopItems={setShopItems}
                   shopClerks={shopClerks}
                   socket={socket}
                   user={user}
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 17601a0..1eb0251 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -63,14 +63,14 @@ export default function Footer({
           </div>
 
           {/* Search Icon */}
-          <div onClick={goToSearch} className={styles["footer-icon"]}>
+          {/* <div onClick={goToSearch} className={styles["footer-icon"]}>
             <svg
               viewBox="0 0 34 34"
               style={{ fill: selectedPage === 1 ? "black" : "#8F8787" }}
             >
               <path d="M20.8333 18.3333H19.5167L19.05 17.8833C20.6833 15.9833 21.6667 13.5167 21.6667 10.8333C21.6667 4.85 16.8167 0 10.8333 0C4.85 0 0 4.85 0 10.8333C0 16.8167 4.85 21.6667 10.8333 21.6667C13.5167 21.6667 15.9833 20.6833 17.8833 19.05L18.3333 19.5167V20.8333L26.6667 29.15L29.15 26.6667L20.8333 18.3333ZM10.8333 18.3333C6.68333 18.3333 3.33333 14.9833 3.33333 10.8333C3.33333 6.68333 6.68333 3.33333 10.8333 3.33333C14.9833 3.33333 18.3333 6.68333 18.3333 10.8333C18.3333 14.9833 14.9833 18.3333 10.8333 18.3333Z" />
             </svg>
-          </div>
+          </div> */}
 
           {/* Cart Icon */}
           <div onClick={goToCart} className={styles["footer-icon"]}>
diff --git a/src/components/Header.js b/src/components/Header.js
index ee8c13f..5245dd5 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -330,11 +330,11 @@ const Header = ({
               )}
               {user.username !== undefined && (
                 <Child onClick={() => setModal("edit_account")}>
-                  Edit profile
+                  Ubah profil
                 </Child>
               )}
               {shopId && user.roleId == 1 && (
-                    <Child onClick={goToAdminCafes}>see your {user.userId == shopOwnerId ? 'other' : ''} cafes</Child>)}
+                    <Child onClick={goToAdminCafes}>Dashboard</Child>)}
               {shopId &&
                 user.userId == shopOwnerId &&
                 user.username !== undefined &&
@@ -349,7 +349,7 @@ const Header = ({
 
                       <div class="toggle-switch">
                         <label class="toggle-switch-label" for="toggleSwitch">
-                          Edit Mode
+                          Mode edit
                         </label>
                         <Switch
                           checked={isEditMode}
@@ -358,18 +358,18 @@ const Header = ({
                       </div>
 
                       <Child onClick={() => setModal("welcome_config")}>
-                        welcoming page
+                        Halaman sambutan
                       </Child>
                       <Child onClick={() => setModal("add_material")}>
-                        stock
+                        Stok
                       </Child>
                       <Child onClick={() => setModal("edit_tables")}>
-                        table maps
+                        Denah meja
                       </Child>
                       <Child hasChildren>
-                        clerks
+                        Kasir
                         <Child onClick={() => setModal("create_clerk")}>
-                          + Add clerk
+                          + Tambah
                         </Child>
                         {shopClerks &&
                           shopClerks.map((key, index) => (
@@ -388,10 +388,10 @@ const Header = ({
                           ))}
                       </Child>
                       <Child onClick={() => setModal("payment_option")}>
-                        payment options
+                        Opsi pembayaran
                       </Child>
 
-                      <Child onClick={() => setModal("reports")}>reports</Child>
+                      <Child onClick={() => setModal("reports")}>Laporan</Child>
                     </Child>
                   </>
                 )}
@@ -403,7 +403,7 @@ const Header = ({
 
                     <div class="toggle-switch">
                       <label class="toggle-switch-label" for="toggleSwitch">
-                        Edit Mode
+                        Mode edit
                       </label>
                       <Switch
                         checked={isEditMode}
@@ -411,15 +411,15 @@ const Header = ({
                       />
                     </div>
                     <Child onClick={() => setModal("add_material")}>
-                      stock
+                      stok
                     </Child>
                     {user.username !== undefined &&
                       user.roleId == 2 &&
                       user.cafeId == shopId && (
                         <Child hasChildren>
-                          connected guest sides
+                          Tablet tamu
                           <Child onClick={goToGuestSideLogin}>
-                            + Add guest side
+                            + Tambah
                           </Child>
                           {guestSides &&
                             guestSides.map((key, index) => (
@@ -439,7 +439,7 @@ const Header = ({
                         </Child>
                       )}
 
-                    <Child onClick={() => setModal("reports")}>reports</Child>
+                    <Child onClick={() => setModal("reports")}>Laporan</Child>
                   </Child>
                 )}
               {user.username !== undefined && (
diff --git a/src/components/Item.js b/src/components/Item.js
index 5769a80..930d4aa 100644
--- a/src/components/Item.js
+++ b/src/components/Item.js
@@ -87,7 +87,7 @@ const Item = ({
   const handleNameChange = (event) => {
     setItemName(event.target.value);
   };
-
+    
   return (
     <div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""}`}>
       {!forInvoice && (
diff --git a/src/components/Item.module.css b/src/components/Item.module.css
index e005257..44d2826 100644
--- a/src/components/Item.module.css
+++ b/src/components/Item.module.css
@@ -35,8 +35,8 @@
 }
 
 .itemImage {
-  width: 139px;
-  height: 149px;
+  width: 119px;
+  height: 129px;
   border-radius: 10px;
   margin-right: 10px;
   object-fit: cover;
@@ -45,8 +45,8 @@
 
 .imageContainer {
   position: relative;
-  width: 139px;
-  height: 149px;
+  width: 119px;
+  height: 129px;
 }
 
 .overlay {
@@ -124,7 +124,7 @@
   font-weight: 600;
   width: calc(100% - 15px); /* Adjust the width to prevent overflow */
   font-size: 0.9rem;
-  margin-bottom: 35px;
+  /* margin-bottom: 35px; */
   margin-left: 5px;
   color: #d9c61c;
   background-color: transparent;
@@ -143,19 +143,19 @@
 
 .itemQty {
   display: flex;
-  align-items: end;
+  align-items: center;
   font-size: 0.9rem;
   margin-left: 5px;
   color: rgb(115, 165, 133);
   fill: rgb(115, 165, 133);
+  height: 40px;
 }
 
 .itemQtyValue {
-  margin-bottom: 8px;
   font-family: "Poppins", sans-serif;
   font-style: normal;
   font-weight: 600;
-  margin-top: 5px;
+  margin-top: 19px;
   margin-left: 5px;
   margin-right: 5px;
   width: 25px;
@@ -197,7 +197,7 @@
 .plusNegative {
   width: 35px;
   height: 35px;
-  margin-top: -10px;
+  margin: 2.5px 0 -0.5px 0px;
 }
 
 .remove {
diff --git a/src/components/ItemLister.js b/src/components/ItemLister.js
index 005a575..c85a78d 100644
--- a/src/components/ItemLister.js
+++ b/src/components/ItemLister.js
@@ -18,17 +18,22 @@ import ItemType from "./ItemType.js";
 import { createItemType } from "../helpers/itemHelper.js";
 
 const ItemLister = ({
+  index,
+  indexTotal,
   itemTypeId,
-  typeVisibility=true,
+  typeVisibility = true,
   refreshTotal,
   shopId,
   shopOwnerId,
   user,
   typeName,
   typeImage,
+  setShopItems,
   itemList,
   forCart,
   forInvoice,
+  moveItemTypeUp,
+  moveItemTypeDown,
   isEditMode,
   handleCreateItem,
   handleUpdateItem,
@@ -155,7 +160,7 @@ const ItemLister = ({
     setPreviewUrl(previewUrl);
   };
 
-  const onCreateItem = (itemName, itemPrice, selectedImage, previewUrl) => {
+  const onCreateItem = async (itemName, itemPrice, selectedImage, previewUrl) => {
     if (isEdit)
       setItemsToCreate((prevItems) => [
         ...prevItems,
@@ -165,9 +170,28 @@ const ItemLister = ({
           price: itemPrice,
           selectedImage,
           image: previewUrl,
+          availability: true
         },
       ]);
-    else handleCreateItem(itemTypeId, itemName, itemPrice, selectedImage);
+    else {
+      const newItem = await handleCreateItem(itemTypeId, itemName, itemPrice, selectedImage);
+
+      console.log(newItem)
+      if (newItem) {
+        setShopItems((prevShopItems) => {
+          return prevShopItems.map((itemType) => {
+            // Check if the itemTypeId matches
+            if (itemType.itemTypeId === itemTypeId) {
+              return {
+                ...itemType,
+                itemList: [...itemType.itemList, newItem], // Add the new item to the itemList
+              };
+            }
+            return itemType; // Return the unchanged item type
+          });
+        });
+      }
+    }
 
     console.log(items);
     console.log(itemsToCreate);
@@ -197,7 +221,7 @@ const ItemLister = ({
     console.log(itemsToUpdate);
   };
 
-  const handleChange = (itemId) => {
+  const handleChange = async (itemId) => {
     console.log(itemId);
     const itemIndex = items.findIndex((item) => item.itemId === itemId);
     if (itemIndex === -1) return; // Item not found
@@ -220,13 +244,29 @@ const ItemLister = ({
       // If isEdit, add item to the list of items to update
       setItemsToUpdate((prev) => [...prev, { itemId, newAvailability }]);
     } else {
-      // If not isEdit, immediately execute the update
-      executeUpdateAvailability(
-        itemId,
-        newAvailability,
-        updatedItems,
-        itemIndex
-      );
+
+      await executeUpdateAvailability(itemId, newAvailability);
+
+      // Update shopItems state
+      setShopItems((prevShopItems) => {
+        return prevShopItems.map((itemType) => {
+          // Map through the itemList to find the item by itemId and update its availability
+          const updatedItemList = itemType.itemList.map((item) => {
+            if (item.itemId === itemId) {
+              return {
+                ...item,
+                availability: newAvailability, // Update the availability
+              };
+            }
+            return item; // Return unchanged item
+          });
+
+          return {
+            ...itemType,
+            itemList: updatedItemList, // Update the itemList with modified item
+          };
+        });
+      });
     }
     console.log(itemsToUpdate);
   };
@@ -260,7 +300,8 @@ const ItemLister = ({
     try {
       console.log(isVisible);
       if (itemTypeId) {
-        await updateItemType(
+        // Call the updateItemType function
+        const updatedItemType = await updateItemType(
           shopId,
           itemTypeId,
           typeNameInputRef.current.value,
@@ -269,6 +310,21 @@ const ItemLister = ({
           isVisible
         );
 
+        // Update shopItems state
+        setShopItems((prevShopItems) => {
+          return prevShopItems.map((itemType) => {
+            if (itemType.itemTypeId === itemTypeId) {
+              return {
+                ...itemType,
+                name: updatedItemType.name || typeNameInputRef.current.value, // Update name if provided
+                image: updatedItemType.image || itemType.image, // Update image if provided
+                visibility: updatedItemType.visibility !== undefined ? updatedItemType.visibility : isVisible, // Update visibility if provided
+              };
+            }
+            return itemType; // Return unchanged item type
+          });
+        });
+
         // Iterate through itemsToUpdate and call the API
         for (const {
           itemId,
@@ -277,33 +333,129 @@ const ItemLister = ({
           price,
           image,
         } of itemsToUpdate) {
-          if (newAvailability != undefined)
+          if (newAvailability != undefined) {
             await executeUpdateAvailability(
               itemId,
               newAvailability,
               items,
               items.findIndex((item) => item.itemId === itemId)
             );
-          else await handleUpdateItem(itemId, name, price, image);
+
+            // Update shopItems state
+            setShopItems((prevShopItems) => {
+              return prevShopItems.map((itemType) => {
+                // Map through the itemList to find the item by itemId and update its availability
+                const updatedItemList = itemType.itemList.map((item) => {
+                  if (item.itemId === itemId) {
+                    return {
+                      ...item,
+                      availability: newAvailability, // Update the availability
+                    };
+                  }
+                  return item; // Return unchanged item
+                });
+
+                return {
+                  ...itemType,
+                  itemList: updatedItemList, // Update the itemList with modified item
+                };
+              });
+            });
+          }
+          else {
+
+            // Call the handleUpdateItem function
+            const updatedItem = await handleUpdateItem(itemId, name, price, image);
+
+            // Update shopItems state
+            setShopItems((prevShopItems) => {
+              return prevShopItems.map((itemType) => {
+                // Map through the itemList to find the item by itemId and update it
+                const updatedItemList = itemType.itemList.map((item) => {
+                  if (item.itemId === itemId) {
+                    return {
+                      ...item,
+                      name: updatedItem.name || name, // Update fields as needed
+                      price: updatedItem.price || price,
+                      image: updatedItem.image || image,
+                    };
+                  }
+                  return item; // Return unchanged item
+                });
+
+                return {
+                  ...itemType,
+                  itemList: updatedItemList, // Update the itemList with modified item
+                };
+              });
+            });
+          }
         }
+        console.log(itemsToCreate)
         for (const { name, price, selectedImage } of itemsToCreate) {
-          handleCreateItem(itemTypeId, name, price, selectedImage);
+          const newItem = await handleCreateItem(itemTypeId, name, price, selectedImage);
+          console.log(newItem)
+          if (newItem) {
+            setShopItems((prevShopItems) => {
+              return prevShopItems.map((itemType) => {
+                // Check if the itemTypeId matches
+                if (itemType.itemTypeId === itemTypeId) {
+                  return {
+                    ...itemType,
+                    itemList: [...itemType.itemList, newItem], // Add the new item to the itemList
+                  };
+                }
+                return itemType; // Return the unchanged item type
+              });
+            });
+          }
         }
       } else {
-        console.log(selectedImage)
-        console.log(previewUrl)
-        const itemType = await createItemType(
-          shopId,
-          editedTypeName,
-          selectedImage,
-          previewUrl
-        );
-        console.log(itemType);
-        for (const { name, price, selectedImage } of itemsToCreate) {
-          handleCreateItem(itemType.itemTypeId, name, price, selectedImage);
+        console.log(selectedImage);
+        console.log(previewUrl);
+
+        try {
+          // Call the createItemType function
+          const newItemType = await createItemType(shopId, editedTypeName, selectedImage, previewUrl);
+
+          // Update shopItems state with the new item type
+          setShopItems((prevShopItems) => [
+            ...prevShopItems,
+            {
+              itemTypeId: newItemType.itemTypeId, // API should return this
+              name: newItemType.name,
+              image: newItemType.image,
+              cafeId: shopId, // Adjust as necessary
+              itemList: [], // Start with an empty itemList
+            },
+          ]);
+
+          // Loop through itemsToCreate and create each item
+          for (const { name, price, selectedImage } of itemsToCreate) {
+            // Call handleCreateItem to create a new item
+            const newItem = await handleCreateItem(newItemType.itemTypeId, name, price, selectedImage);
+
+            // If the item was created successfully, update the shopItems state
+            if (newItem) {
+              setShopItems((prevShopItems) =>
+                prevShopItems.map((itemType) => {
+                  if (itemType.itemTypeId === newItemType.itemTypeId) {
+                    return {
+                      ...itemType,
+                      itemList: [...itemType.itemList, newItem], // Add the new item to the itemList
+                    };
+                  }
+                  return itemType; // Return unchanged item type
+                })
+              );
+            }
+          }
+        } catch (error) {
+          console.error("Error creating item type or items:", error);
         }
       }
       // Clear the itemsToUpdate after saving
+      setItemsToCreate([]);
       setItemsToUpdate([]);
       setIsEditing(false);
       if (handleUnEdit) handleUnEdit();
@@ -337,69 +489,118 @@ const ItemLister = ({
     <>
       {(items.length > 0 ||
         (user && (user.cafeId == shopId || user.userId == shopOwnerId))) && (
-        <div
-          className={`${styles["item-lister"]} ${
-            isEdit ? styles["fullscreen"] : ""
-          }`}
-          style={{ paddingBottom: isEdit ? "28vh" : "" }}
-        >
-          <div className={styles["title-container"]}>
-            {isEdit && <ItemType blank={true} imageUrl={previewUrl} />}
-            <input
-              ref={typeNameInputRef}
-              className={`${styles.title} ${
-                isEdit ? styles.border : styles.noborder
+          <div
+          key={itemTypeId}
+            className={`${styles["item-lister"]} ${isEdit ? styles["fullscreen"] : ""
               }`}
-              value={editedTypeName}
-              placeholder="type name"
-              onChange={(e) => setEditedTypeName(e.target.value)}
-              disabled={!isEdit}
-            />
-            {isEditMode && !isEdit && (
-              <><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>
-          {isEdit && (
-            <div className={styles["grid-container"]}>
-              <ItemType
-                rectangular={true}
-                blank={true}
-                onClick={(previewUrl, selectedImage) =>
-                  handleImageChange(previewUrl, selectedImage)
-                }
-                imageUrl={getImageUrl("uploads/addnew.png")}
+            style={{ paddingBottom: isEdit ? "28vh" : "" }}
+          >
+            <div className={styles["title-container"]}>
+              {isEdit && <ItemType blank={true} imageUrl={previewUrl} />}
+              <input
+                ref={typeNameInputRef}
+                className={`${styles.title} ${isEdit ? styles.border : styles.noborder
+                  }`}
+                value={editedTypeName}
+                placeholder="Nama tipe"
+                onChange={(e) => setEditedTypeName(e.target.value)}
+                disabled={!isEdit}
               />
-              {/* {typeImage != null && !previewUrl.includes(typeImage) && (
+              {isEditMode && !isEdit && (
+                <>
+                  <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={index==0?null:()=>moveItemTypeUp(itemTypeId)} // Move onClick here for the whole div
+                  >
+                    <svg
+                      viewBox="0 0 16 16"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="#000000"
+                      style={{ width: '100%', height: '100%' }} // Ensure SVG fits the div
+                    >
+                      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+                      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
+                      <g id="SVGRepo_iconCarrier">
+                        <path d="m 1 11 c 0 -0.265625 0.105469 -0.519531 0.292969 -0.707031 l 6 -6 c 0.390625 -0.390625 1.023437 -0.390625 1.414062 0 l 6 6 c 0.1875 0.1875 0.292969 0.441406 0.292969 0.707031 s -0.105469 0.519531 -0.292969 0.707031 c -0.390625 0.390625 -1.023437 0.390625 -1.414062 0 l -5.292969 -5.292969 l -5.292969 5.292969 c -0.390625 0.390625 -1.023437 0.390625 -1.414062 0 c -0.1875 -0.1875 -0.292969 -0.441406 -0.292969 -0.707031 z m 0 0" fill={index===0?"gray":"#2e3436"}></path>
+                      </g>
+                    </svg>
+                  </div>
+                  <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={index==indexTotal-1?null:()=>moveItemTypeDown(itemTypeId)} // Move onClick here for the whole div
+                  >
+                    <svg
+                      viewBox="0 0 16 16"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="#000000"
+                      style={{ width: '100%', height: '100%' }} // Ensure SVG fits the div
+                    >
+                      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+                      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
+                      <g id="SVGRepo_iconCarrier">
+                        <path d="m 1 5 c 0 -0.265625 0.105469 -0.519531 0.292969 -0.707031 c 0.390625 -0.390625 1.023437 -0.390625 1.414062 0 l 5.292969 5.292969 l 5.292969 -5.292969 c 0.390625 -0.390625 1.023437 -0.390625 1.414062 0 c 0.1875 0.1875 0.292969 0.441406 0.292969 0.707031 s -0.105469 0.519531 -0.292969 0.707031 l -6 6 c -0.390625 0.390625 -1.023437 0.390625 -1.414062 0 l -6 -6 c -0.1875 -0.1875 -0.292969 -0.441406 -0.292969 -0.707031 z m 0 0" fill={index===indexTotal-1?"gray":"#2e3436"}></path>
+                      </g>
+                    </svg>
+                  </div>
+
+                  <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>
+            {isEdit && (
+              <div className={styles["grid-container"]}>
+                <ItemType
+                  rectangular={true}
+                  blank={true}
+                  onClick={(previewUrl, selectedImage) =>
+                    handleImageChange(previewUrl, selectedImage)
+                  }
+                  imageUrl={getImageUrl("uploads/addnew.png")}
+                />
+                {/* {typeImage != null && !previewUrl.includes(typeImage) && (
                 <ItemType
                   rectangular={true}
                   onClick={(previewUrl, selectedImage) =>
@@ -409,364 +610,377 @@ const ItemLister = ({
                 />
               )} */}
 
-              <ItemType
-                rectangular={true}
-                onClick={(previewUrl, selectedImage) =>
-                  handleImageChange(previewUrl, selectedImage)
-                }
-                imageUrl={getImageUrl("uploads/beverage4.jpg")}
-              />
-              <ItemType
-                rectangular={true}
-                onClick={(previewUrl, selectedImage) =>
-                  handleImageChange(previewUrl, selectedImage)
-                }
-                imageUrl={getImageUrl("uploads/beverage1.png")}
-              />
-              <ItemType
-                rectangular={true}
-                onClick={(previewUrl, selectedImage) =>
-                  handleImageChange(previewUrl, selectedImage)
-                }
-                imageUrl={getImageUrl("uploads/beverage2.png")}
-              />
-              <ItemType
-                rectangular={true}
-                onClick={(previewUrl, selectedImage) =>
-                  handleImageChange(previewUrl, selectedImage)
-                }
-                imageUrl={getImageUrl("uploads/beverage3.png")}
-              />
-              <ItemType
-                rectangular={true}
-                onClick={(previewUrl, selectedImage) =>
-                  handleImageChange(previewUrl, selectedImage)
-                }
-                imageUrl={getImageUrl("uploads/snack5.jpg")}
-              />
-              <ItemType
-                rectangular={true}
-                onClick={(previewUrl, selectedImage) =>
-                  handleImageChange(previewUrl, selectedImage)
-                }
-                imageUrl={getImageUrl("uploads/dessert1.png")}
-              />
-              <ItemType
-                rectangular={true}
-                onClick={(previewUrl, selectedImage) =>
-                  handleImageChange(previewUrl, selectedImage)
-                }
-                imageUrl={getImageUrl("uploads/dessert2.jpg")}
-              />
-              <ItemType
-                rectangular={true}
-                onClick={(previewUrl, selectedImage) =>
-                  handleImageChange(previewUrl, selectedImage)
-                }
-                imageUrl={getImageUrl("uploads/food4.jpg")}
-              />
-              <ItemType
-                rectangular={true}
-                onClick={(previewUrl, selectedImage) =>
-                  handleImageChange(previewUrl, selectedImage)
-                }
-                imageUrl={getImageUrl("uploads/food1.png")}
-              />
-              <ItemType
-                rectangular={true}
-                onClick={(previewUrl, selectedImage) =>
-                  handleImageChange(previewUrl, selectedImage)
-                }
-                imageUrl={getImageUrl("uploads/food2.jpg")}
-              />
+                <ItemType
+                  rectangular={true}
+                  onClick={(previewUrl, selectedImage) =>
+                    handleImageChange(previewUrl, selectedImage)
+                  }
+                  imageUrl={getImageUrl("uploads/beverage4.jpg")}
+                />
+                <ItemType
+                  rectangular={true}
+                  onClick={(previewUrl, selectedImage) =>
+                    handleImageChange(previewUrl, selectedImage)
+                  }
+                  imageUrl={getImageUrl("uploads/beverage1.png")}
+                />
+                <ItemType
+                  rectangular={true}
+                  onClick={(previewUrl, selectedImage) =>
+                    handleImageChange(previewUrl, selectedImage)
+                  }
+                  imageUrl={getImageUrl("uploads/beverage2.png")}
+                />
+                <ItemType
+                  rectangular={true}
+                  onClick={(previewUrl, selectedImage) =>
+                    handleImageChange(previewUrl, selectedImage)
+                  }
+                  imageUrl={getImageUrl("uploads/beverage3.png")}
+                />
+                <ItemType
+                  rectangular={true}
+                  onClick={(previewUrl, selectedImage) =>
+                    handleImageChange(previewUrl, selectedImage)
+                  }
+                  imageUrl={getImageUrl("uploads/snack5.jpg")}
+                />
+                <ItemType
+                  rectangular={true}
+                  onClick={(previewUrl, selectedImage) =>
+                    handleImageChange(previewUrl, selectedImage)
+                  }
+                  imageUrl={getImageUrl("uploads/dessert1.png")}
+                />
+                <ItemType
+                  rectangular={true}
+                  onClick={(previewUrl, selectedImage) =>
+                    handleImageChange(previewUrl, selectedImage)
+                  }
+                  imageUrl={getImageUrl("uploads/dessert2.jpg")}
+                />
+                <ItemType
+                  rectangular={true}
+                  onClick={(previewUrl, selectedImage) =>
+                    handleImageChange(previewUrl, selectedImage)
+                  }
+                  imageUrl={getImageUrl("uploads/food4.jpg")}
+                />
+                <ItemType
+                  rectangular={true}
+                  onClick={(previewUrl, selectedImage) =>
+                    handleImageChange(previewUrl, selectedImage)
+                  }
+                  imageUrl={getImageUrl("uploads/food1.png")}
+                />
+                <ItemType
+                  rectangular={true}
+                  onClick={(previewUrl, selectedImage) =>
+                    handleImageChange(previewUrl, selectedImage)
+                  }
+                  imageUrl={getImageUrl("uploads/food2.jpg")}
+                />
 
-              <ItemType
-                rectangular={true}
-                onClick={(previewUrl, selectedImage) =>
-                  handleImageChange(previewUrl, selectedImage)
-                }
-                imageUrl={getImageUrl("uploads/food3.png")}
-              />
-              <ItemType
-                rectangular={true}
-                onClick={(previewUrl, selectedImage) =>
-                  handleImageChange(previewUrl, selectedImage)
-                }
-                imageUrl={getImageUrl("uploads/packet1.png")}
-              />
-              <ItemType
-                rectangular={true}
-                onClick={(previewUrl, selectedImage) =>
-                  handleImageChange(previewUrl, selectedImage)
-                }
-                imageUrl={getImageUrl("uploads/packet2.png")}
-              />
-              <ItemType
-                rectangular={true}
-                onClick={(previewUrl, selectedImage) =>
-                  handleImageChange(previewUrl, selectedImage)
-                }
-                imageUrl={getImageUrl("uploads/snack1.png")}
-              />
-              <ItemType
-                rectangular={true}
-                onClick={(previewUrl, selectedImage) =>
-                  handleImageChange(previewUrl, selectedImage)
-                }
-                imageUrl={getImageUrl("uploads/snack2.png")}
-              />
-              <ItemType
-                rectangular={true}
-                onClick={(previewUrl, selectedImage) =>
-                  handleImageChange(previewUrl, selectedImage)
-                }
-                imageUrl={getImageUrl("uploads/snack3.png")}
-              />
-              <ItemType
-                rectangular={true}
-                onClick={(previewUrl, selectedImage) =>
-                  handleImageChange(previewUrl, selectedImage)
-                }
-                imageUrl={getImageUrl("uploads/snack4.png")}
-              />
-            </div>
-          )}
+                <ItemType
+                  rectangular={true}
+                  onClick={(previewUrl, selectedImage) =>
+                    handleImageChange(previewUrl, selectedImage)
+                  }
+                  imageUrl={getImageUrl("uploads/food3.png")}
+                />
+                <ItemType
+                  rectangular={true}
+                  onClick={(previewUrl, selectedImage) =>
+                    handleImageChange(previewUrl, selectedImage)
+                  }
+                  imageUrl={getImageUrl("uploads/packet1.png")}
+                />
+                <ItemType
+                  rectangular={true}
+                  onClick={(previewUrl, selectedImage) =>
+                    handleImageChange(previewUrl, selectedImage)
+                  }
+                  imageUrl={getImageUrl("uploads/packet2.png")}
+                />
+                <ItemType
+                  rectangular={true}
+                  onClick={(previewUrl, selectedImage) =>
+                    handleImageChange(previewUrl, selectedImage)
+                  }
+                  imageUrl={getImageUrl("uploads/snack1.png")}
+                />
+                <ItemType
+                  rectangular={true}
+                  onClick={(previewUrl, selectedImage) =>
+                    handleImageChange(previewUrl, selectedImage)
+                  }
+                  imageUrl={getImageUrl("uploads/snack2.png")}
+                />
+                <ItemType
+                  rectangular={true}
+                  onClick={(previewUrl, selectedImage) =>
+                    handleImageChange(previewUrl, selectedImage)
+                  }
+                  imageUrl={getImageUrl("uploads/snack3.png")}
+                />
+                <ItemType
+                  rectangular={true}
+                  onClick={(previewUrl, selectedImage) =>
+                    handleImageChange(previewUrl, selectedImage)
+                  }
+                  imageUrl={getImageUrl("uploads/snack4.png")}
+                />
+                {Array.from({ length: 16 }, (_, index) => {
+                  const sampleNumber = index + 1; // To get numbers from 1 to 16
+                  return (
+                    <ItemType
+                      key={sampleNumber}
+                      rectangular={true}
+                      onClick={(previewUrl, selectedImage) =>
+                        handleImageChange(previewUrl, selectedImage)
+                      }
+                      imageUrl={getImageUrl(`uploads/samples/sample (${sampleNumber}).png`)}
+                    />
+                  );
+                })}
+              </div>
+            )}
 
-          <div className={styles["item-list"]}>
-            {user &&(
-              user.userId == shopOwnerId || user.cafeId == shopId) &&
-              isEditMode && (
-                <>
-                  {!isAddingNewItem && (
-                    <button
-                      className={styles["add-item-button"]}
-                      onClick={toggleAddNewItem}
-                      style={{
-                        display: "inline-block",
-                        height: "159px",
-                        fontSize: "50px",
-                      }}
-                    >
-                      +
-                    </button>
-                  )}
-                  {isAddingNewItem && (
-                    <>
+            <div className={styles["item-list"]}>
+              {user && (
+                user.userId == shopOwnerId || user.cafeId == shopId) &&
+                isEditMode && (
+                  <>
+                    {!isAddingNewItem && (
                       <button
                         className={styles["add-item-button"]}
                         onClick={toggleAddNewItem}
+                        style={{
+                          display: "inline-block",
+                          height: "159px",
+                          fontSize: "50px",
+                        }}
+                      >
+                        +
+                      </button>
+                    )}
+                    {isAddingNewItem && (
+                      <>
+                        <button
+                          className={styles["add-item-button"]}
+                          onClick={toggleAddNewItem}
+                          style={{ display: "inline-block" }}
+                        >
+                          batal
+                        </button>
+                        <Item blank={true} handleCreateItem={onCreateItem} />
+                      </>
+                    )}
+                  </>
+                )}
+
+              {itemsToCreate.map((item) => {
+                return !forCart || (forCart && item.qty > 0) ? (
+                  <>
+                    {isEditItem == item.itemId && (
+                      <button
+                        className={styles["add-item-button"]}
+                        onClick={() => editItem(0)}
                         style={{ display: "inline-block" }}
                       >
-                        cancel
+                        batal
                       </button>
-                      <Item blank={true} handleCreateItem={onCreateItem} />
-                    </>
-                  )}
-                </>
-              )}
+                    )}
+                    <div className={styles["itemWrapper"]}>
+                      {isEditMode && isEditItem != item.itemId && (
+                        <div className={styles["editModeLayout"]}>
+                          {isEditMode && (
+                            <Switch
+                              onChange={() => handleChange(item.itemId)}
+                              checked={item.availability}
+                            />
+                          )}
+                          <h3>
+                            &nbsp;{item.availability ? "tersedia" : "tidak tersedia"} &nbsp;
+                          </h3>
+                          <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>
+                      )}
 
-            {itemsToCreate.map((item) => {
-              return !forCart || (forCart && item.qty > 0) ? (
-                <>
-                  {isEditItem == item.itemId && (
+                      <Item
+                        key={item.itemId}
+                        forCart={forCart}
+                        forInvoice={forInvoice}
+                        name={item.name}
+                        price={item.price}
+                        qty={item.qty}
+                        imageUrl={item.image}
+                        imageFile={item.selectedImage}
+                        onPlusClick={() => handlePlusClick(item.itemId)}
+                        onNegativeClick={() => handleNegativeClick(item.itemId)}
+                        onRemoveClick={() => handleRemoveClick(item.itemId)}
+                        isBeingEdit={isEditItem == item.itemId}
+                        isAvailable={item.availability}
+                        handleUpdateItem={(name, price, image) =>
+                          updateItemInCreate(item.itemId, name, price, image)
+                        }
+                      />
+                    </div>
+                  </>
+                ) : null;
+              })}
+
+              {items.map((item) => {
+                return !forCart || (forCart && item.qty > 0) ? (
+                  <>
+                    {isEditItem == item.itemId && (
+                      <button
+                        className={styles["add-item-button"]}
+                        onClick={() => editItem(0)}
+                        style={{ display: "inline-block" }}
+                      >
+                        batal
+                      </button>
+                    )}
+                    <div className={styles["itemWrapper"]}>
+                      {isEditMode && isEditItem != item.itemId && (
+                        <div className={styles["editModeLayout"]}>
+                          {isEditMode && (
+                            <Switch
+                              onChange={() => handleChange(item.itemId)}
+                              checked={item.availability}
+                            />
+                          )}
+                          <h3>
+                            &nbsp;{item.availability ? "tersedia" : "tidak tersedia"}&nbsp;
+                          </h3>
+                          <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>
+                      )}
+
+                      <Item
+                        key={item.itemId}
+                        forCart={forCart}
+                        forInvoice={forInvoice}
+                        name={item.name}
+                        price={item.price}
+                        qty={item.qty}
+                        imageUrl={
+                          itemTypeId ? getImageUrl(item.image) : item.image
+                        }
+                        onPlusClick={() => handlePlusClick(item.itemId)}
+                        onNegativeClick={() => handleNegativeClick(item.itemId)}
+                        onRemoveClick={() => handleRemoveClick(item.itemId)}
+                        isBeingEdit={isEditItem == item.itemId}
+                        isAvailable={item.availability}
+                        handleUpdateItem={(name, price, image) =>
+                          onUpdateItem(item.itemId, name, price, image)
+                        }
+                      />
+                    </div>
+                  </>
+                ) : null;
+              })}
+
+              {user &&
+                user.roleId == 1 &&
+                user.userId == shopOwnerId &&
+                isEdit && (
+                  <>
                     <button
                       className={styles["add-item-button"]}
-                      onClick={() => editItem(0)}
-                      style={{ display: "inline-block" }}
+                      onClick={handleRemoveType}
                     >
-                      cancel
+                      Remove
                     </button>
-                  )}
-                  <div className={styles["itemWrapper"]}>
-                    {isEditMode && isEditItem != item.itemId && (
-                      <div className={styles["editModeLayout"]}>
-                        {isEditMode && (
-                          <Switch
-                            onChange={() => handleChange(item.itemId)}
-                            checked={item.availability}
-                          />
-                        )}
-                        <h3>
-                        &nbsp;{item.availability ? "available" : "unavailable"} &nbsp;
-                        </h3>
-                        <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>
-                    )}
-
-                    <Item
-                      key={item.itemId}
-                      forCart={forCart}
-                      forInvoice={forInvoice}
-                      name={item.name}
-                      price={item.price}
-                      qty={item.qty}
-                      imageUrl={item.image}
-                      imageFile={item.selectedImage}
-                      onPlusClick={() => handlePlusClick(item.itemId)}
-                      onNegativeClick={() => handleNegativeClick(item.itemId)}
-                      onRemoveClick={() => handleRemoveClick(item.itemId)}
-                      isBeingEdit={isEditItem == item.itemId}
-                      isAvailable={item.availability}
-                      handleUpdateItem={(name, price, image) =>
-                        updateItemInCreate(item.itemId, name, price, image)
-                      }
-                    />
-                  </div>
-                </>
-              ) : null;
-            })}
-
-            {items.map((item) => {
-              return !forCart || (forCart && item.qty > 0) ? (
-                <>
-                  {isEditItem == item.itemId && (
-                    <button
-                      className={styles["add-item-button"]}
-                      onClick={() => editItem(0)}
-                      style={{ display: "inline-block" }}
-                    >
-                      cancel
-                    </button>
-                  )}
-                  <div className={styles["itemWrapper"]}>
-                    {isEditMode && isEditItem != item.itemId && (
-                      <div className={styles["editModeLayout"]}>
-                        {isEditMode && (
-                          <Switch
-                            onChange={() => handleChange(item.itemId)}
-                            checked={item.availability}
-                          />
-                        )}
-                        <h3>
-                        &nbsp;{item.availability ? "available" : "unavailable"}&nbsp;
-                        </h3>
-                        <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>
-                    )}
-
-                    <Item
-                      key={item.itemId}
-                      forCart={forCart}
-                      forInvoice={forInvoice}
-                      name={item.name}
-                      price={item.price}
-                      qty={item.qty}
-                      imageUrl={
-                        itemTypeId ? getImageUrl(item.image) : item.image
-                      }
-                      onPlusClick={() => handlePlusClick(item.itemId)}
-                      onNegativeClick={() => handleNegativeClick(item.itemId)}
-                      onRemoveClick={() => handleRemoveClick(item.itemId)}
-                      isBeingEdit={isEditItem == item.itemId}
-                      isAvailable={item.availability}
-                      handleUpdateItem={(name, price, image) =>
-                        onUpdateItem(item.itemId, name, price, image)
-                      }
-                    />
-                  </div>
-                </>
-              ) : null;
-            })}
-
-            {user &&
-              user.roleId == 1 &&
-              user.userId == shopOwnerId &&
-              isEdit && (
-                <>
-                  <button
-                    className={styles["add-item-button"]}
-                    onClick={handleRemoveType}
-                  >
-                    Remove
-                  </button>
-                </>
-              )}
-          </div>
-          {isEdit && (
-            <div className={styles.PaymentOption}>
-              <div className={styles.TotalContainer}>
-                <span>Pengaturan</span>
-                <span></span>
-              </div>
-              <div className={styles.OptionContainer}>
-                <span>sembunyikan semua</span>
-                <span>
-                  <Switch
-                    onChange={() => setIsVisible(!isVisible)}
-                    checked={!isVisible}
-                  />
-                </span>
-              </div>
-              <button onClick={handleSaveType} className={styles.PayButton}>
-                {false ? (
-                  <ColorRing height="50" width="50" color="white" />
-                ) : (
-                  "Simpan"
+                  </>
                 )}
-              </button>
-              <div className={styles.Pay2Button} onClick={resetItems}>
-                Kembali
-              </div>
             </div>
-          )}
-        </div>
-      )}
+            {isEdit && (
+              <div className={styles.PaymentOption}>
+                <div className={styles.TotalContainer}>
+                  <span>Pengaturan</span>
+                  <span></span>
+                </div>
+                <div className={styles.OptionContainer}>
+                  <span>sembunyikan semua</span>
+                  <span>
+                    <Switch
+                      onChange={() => setIsVisible(!isVisible)}
+                      checked={!isVisible}
+                    />
+                  </span>
+                </div>
+                <button onClick={handleSaveType} className={styles.PayButton}>
+                  {false ? (
+                    <ColorRing height="50" width="50" color="white" />
+                  ) : (
+                    "Simpan"
+                  )}
+                </button>
+                <div className={styles.Pay2Button} onClick={resetItems}>
+                  Kembali
+                </div>
+              </div>
+            )}
+          </div>
+        )}
     </>
   );
 };
diff --git a/src/components/ItemLister.module.css b/src/components/ItemLister.module.css
index 3803883..21685fb 100644
--- a/src/components/ItemLister.module.css
+++ b/src/components/ItemLister.module.css
@@ -35,15 +35,15 @@
 
 .title {
   background-color: transparent;
-  font-family: "Poppins", sans-serif;
-  font-weight: 500;
-  font-style: normal;
-  font-size: 28px;
-  color: rgba(88, 55, 50, 1);
-  text-align: left;
-  width: calc(70% - 10px);
-  padding-left: 10px;
-  text-transform: capitalize;
+    font-family: "Poppins", sans-serif;
+    font-weight: 500;
+    font-style: normal;
+    font-size: 22px;
+    color: rgba(88, 55, 50, 1);
+    text-align: left;
+    width: calc(70% - 10px);
+    padding-left: 10px;
+    text-transform: capitalize;
 }
 
 .edit-typeItem-button {
diff --git a/src/components/ItemType.js b/src/components/ItemType.js
index 8197b8c..6ffd366 100644
--- a/src/components/ItemType.js
+++ b/src/components/ItemType.js
@@ -5,16 +5,21 @@ export default function ItemType({
   onClick,
   onCreate,
   blank,
-  name: initialName = "",
+  name,
   imageUrl,
   selected,
   rectangular,
 }) {
   const inputRef = useRef(null);
-  const [name, setName] = useState(initialName);
+  const [namee, setName] = useState(name);
   const [selectedImage, setSelectedImage] = useState(null);
   const [previewUrl, setPreviewUrl] = useState(imageUrl);
 
+  // Effect to update local state when name prop changes
+  useEffect(() => {
+    setName(name);
+  }, [name]);
+
   useEffect(() => {
     if (blank && inputRef.current) {
       inputRef.current.focus();
@@ -26,12 +31,10 @@ export default function ItemType({
       const reader = new FileReader();
       reader.onloadend = () => {
         onClick(reader.result, selectedImage);
-        // setPreviewUrl(reader.result);
       };
       reader.readAsDataURL(selectedImage);
     } else {
       setPreviewUrl(imageUrl);
-      // onClick(getImageUrl(imageUrl));
     }
   }, [selectedImage, imageUrl]);
 
@@ -51,14 +54,14 @@ export default function ItemType({
       return;
     }
 
-    onCreate(name, selectedImage);
+    onCreate(namee, selectedImage);
   };
 
   return (
     <div
       className={
         styles[
-          name
+          namee
             ? "item-type"
             : rectangular
             ? "item-type-rectangular"
@@ -78,10 +81,10 @@ export default function ItemType({
       >
         <img
           src={previewUrl}
-          alt={name}
+          alt={namee}
           className={styles["item-type-image"]}
         />
-        {blank && (
+        {blank && rectangular && (
           <div className={styles["item-type-image-container"]}>
             <input
               type="file"
@@ -97,7 +100,7 @@ export default function ItemType({
         <input
           ref={inputRef}
           className={`${styles["item-type-name"]} ${styles.noborder}`}
-          value={name}
+          value={namee}
           onChange={handleNameChange}
           disabled={true}
           style={{
@@ -106,11 +109,6 @@ export default function ItemType({
           }}
         />
       )}
-      {/* {blank && (
-        <button className={styles["item-type-create"]} onClick={handleCreate}>
-          create
-        </button>
-      )} */}
     </div>
   );
 }
diff --git a/src/components/ItemType.module.css b/src/components/ItemType.module.css
index 17ce2a8..ef5a5e7 100644
--- a/src/components/ItemType.module.css
+++ b/src/components/ItemType.module.css
@@ -1,14 +1,14 @@
 .item-type {
   width: calc(25vw - 20px);
-  height: calc(39vw - 20px);
-  margin: 1px 10px -5px;
+  height: calc(30vw - 20px);
+  margin: 1px 10px 0px;
   overflow: visible;
   text-align: center;
   align-items: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  position: relative; /* Ensure absolute positioning inside works */
+  position: relative;
 }
 .item-type-rectangular {
   width: calc(25vw - 20px);
@@ -34,8 +34,8 @@
 }
 .item-type-rect {
   position: relative;
-  height: 20vw;
-  width: 20vw;
+  height: 13vw;
+  width: 13vw;
   object-fit: cover;
   border-radius: 15px;
   background-color: #fff;
@@ -46,7 +46,6 @@
   font-family: "Poppins", sans-serif;
   font-weight: 500;
   font-style: normal;
-  margin-bottom: 10px; /* Adjust margin for spacing */
   font-size: 14px;
   color: #333;
   width: calc(25vw - 30px);
diff --git a/src/components/ItemTypeLister.css b/src/components/ItemTypeLister.css
index 11259a9..b311d46 100644
--- a/src/components/ItemTypeLister.css
+++ b/src/components/ItemTypeLister.css
@@ -3,6 +3,7 @@
   overflow-x: auto;
   white-space: nowrap;
   padding: 3px 0px;
+  margin-bottom: -5px;
 }
 
 .item-type-list {
diff --git a/src/components/ItemTypeLister.js b/src/components/ItemTypeLister.js
index e48b727..17423c6 100644
--- a/src/components/ItemTypeLister.js
+++ b/src/components/ItemTypeLister.js
@@ -9,6 +9,7 @@ const ItemTypeLister = ({
   shopId,
   shopOwnerId,
   user,
+  setShopItems,
   itemTypes,
   onFilterChange,
   filterId,
@@ -102,7 +103,7 @@ const ItemTypeLister = ({
           user.userId == shopOwnerId || user.cafeId == shopId) && (
             <ItemType
               onClick={toggleAddNewItem}
-              name={"create"}
+              name={"buat baru"}
               imageUrl={getImageUrl("uploads/addnew.png")}
             />
           )}
@@ -115,6 +116,7 @@ const ItemTypeLister = ({
                 shopOwnerId={shopOwnerId}
                 user={user}
                 typeName={""}
+                setShopItems={setShopItems}
                 itemList={items}
                 isEditMode={true}
                 handleCreateItem={(itemTypeId, name, price, selectedImage) => createItem(shopId, name, price, selectedImage,itemTypeId)}
@@ -127,9 +129,9 @@ const ItemTypeLister = ({
           )}
         {itemTypes && itemTypes.length > 0 && (
           <ItemType
-            name={"All"}
+            name={"semua"}
             onClick={() => onFilterChange(0)}
-            imageUrl={getImageUrl("uploads/1718732420960.png")}
+            imageUrl={getImageUrl("uploads/assets/All.png")}
           />
         )}
         {itemTypes &&
diff --git a/src/components/PaymentOptions.js b/src/components/PaymentOptions.js
index 0254135..768e58e 100644
--- a/src/components/PaymentOptions.js
+++ b/src/components/PaymentOptions.js
@@ -106,7 +106,7 @@ const SetPaymentQr = ({ shopId }) => {
 
   return (
     <div style={styles.container}>
-      <h2 style={styles.title}>Payment QRIS</h2>
+      <h2 style={styles.title}>QR pembayaran</h2>
       <div
         id="qr-code-container"
         ref={qrCodeContainerRef}
@@ -133,7 +133,7 @@ const SetPaymentQr = ({ shopId }) => {
         />
       </div>
       <div style={styles.resultMessage}>
-        {qrCodeDetected ? <p>QR Code Detected</p> : <p>No QR Code Detected</p>}
+        {qrCodeDetected ? <p>QR Code Detected</p> : <p>Tidak ada qr yang terdeteksi</p>}
       </div>
       <div style={styles.buttonContainer}>
         <button onClick={handleSave} style={styles.saveButton}>
@@ -141,9 +141,9 @@ const SetPaymentQr = ({ shopId }) => {
         </button>
       </div>
       <div style={styles.switchContainer}>
-        <h1>Double Check tem Availability</h1>
+        <h1>Pengecekan ketersediaan ganda</h1>
         <p style={styles.description}>
-          Turn on the switch for the clerk to double check before customer pay.
+        Nyalakan agar kasir memeriksa kembali ketersediaan produk sebelum pelanggan membayar.
         </p>
         <Switch onChange={handleChange} checked={isNeedConfirmation} />
       </div>
diff --git a/src/components/SearchInput.js b/src/components/SearchInput.js
index d4bee5a..27fa90e 100644
--- a/src/components/SearchInput.js
+++ b/src/components/SearchInput.js
@@ -120,7 +120,7 @@ export default function SearchInput({
         <Searchinput
           ref={inputRef}
           type="text"
-          placeholder="Search..."
+          placeholder="Cari apa ?"
           value={songName}
           onChange={handleChange}
           onBlur={handleBlur}
diff --git a/src/helpers/itemHelper.js b/src/helpers/itemHelper.js
index b95dad9..9efe006 100644
--- a/src/helpers/itemHelper.js
+++ b/src/helpers/itemHelper.js
@@ -245,6 +245,24 @@ export async function updateItemType(
   }
 }
 
+export const moveItemType = async (itemTypeId, targetItemTypeId, fromOrder, toOrder) => {
+  try {
+    const response = await fetch(`${API_BASE_URL}/item/moveType/${itemTypeId}/${targetItemTypeId}/${fromOrder}/${toOrder}`, {
+      method: 'PUT',
+      headers: {
+        Authorization: `Bearer ${getAuthToken()}`,
+      },
+    });
+    if (!response.ok) {
+      throw new Error('Failed to move item type');
+    }
+    return await response.json();
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};
+
 export async function deleteItemType(shopId, itemTypeId) {
   try {
     const response = await fetch(
diff --git a/src/pages/CafePage.js b/src/pages/CafePage.js
index 44f0bb5..2087a54 100644
--- a/src/pages/CafePage.js
+++ b/src/pages/CafePage.js
@@ -10,7 +10,7 @@ import {
 
 import "../App.css";
 
-import { getImageUrl, createItem, updateItem } from "../helpers/itemHelper.js";
+import { getImageUrl, createItem, updateItem, moveItemType } from "../helpers/itemHelper.js";
 import SearchInput from "../components/SearchInput";
 import ItemTypeLister from "../components/ItemTypeLister";
 import { MusicPlayer } from "../components/MusicPlayer";
@@ -30,6 +30,7 @@ function CafePage({
   welcomePageConfig,
   shopName,
   shopOwnerId,
+  setShopItems,
   shopItems,
   shopClerks,
   socket,
@@ -149,6 +150,40 @@ function CafePage({
 
     document.body.style.overflow = "auto";
   };
+
+  const moveItemTypeHandler = async (itemTypeId, direction, index) => {
+    const previousItems = [...shopItems];
+    
+    // Update local state immediately
+    const newItems = [...shopItems];
+  
+    let targetIndex;
+    if (direction === 'up' && index > 0) {
+      targetIndex = index - 1;
+    } else if (direction === 'down' && index < newItems.length - 1) {
+      targetIndex = index + 1;
+    }
+    console.log(index);
+    console.log(targetIndex);
+    if (targetIndex !== undefined) {
+      // Swap items
+      [newItems[index], newItems[targetIndex]] = [newItems[targetIndex], newItems[index]];
+      newItems[index].order = targetIndex;
+      newItems[targetIndex].order = index;
+    
+      setShopItems(newItems);
+  
+      // Call the API to move the item type
+      try {
+        await moveItemType(itemTypeId, previousItems[targetIndex].itemTypeId, index, targetIndex);
+      } catch (error) {
+        console.error('Error moving item type:', error);
+        // Revert the changes if the backend fails
+        setShopItems(previousItems);
+      }
+    }
+  };
+  
   if (loading)
     return (
       <div className="Loader">
@@ -204,6 +239,7 @@ function CafePage({
                   shopOwnerId={shopOwnerId}
                   shopId={shopId}
                   itemTypes={shopItems}
+                  setShopItems={setShopItems}
                   isEditMode={isEditMode}
                   onFilterChange={(e) => setFilterId(e)}
                   filterId={filterId}
@@ -217,8 +253,10 @@ function CafePage({
                     (itemType) =>
                       filterId == 0 || itemType.itemTypeId === filterId
                   )
-                  .map((itemType) => (
+                  .map((itemType, index) => (
                     <ItemLister
+                      index={index}
+                      indexTotal={shopItems.length}
                       shopId={shopId}
                       shopOwnerId={shopOwnerId}
                       user={user}
@@ -226,8 +264,11 @@ function CafePage({
                       itemTypeId={itemType.itemTypeId}
                       typeName={itemType.name}
                       typeImage={itemType.image}
+                      setShopItems={setShopItems}
                       itemList={itemType.itemList}
                       typeVisibility={itemType.visibility}
+                      moveItemTypeUp={(e)=>moveItemTypeHandler(e,'up', index)}
+                      moveItemTypeDown={(e)=>moveItemTypeHandler(e, 'down', index)}
                       isEditMode={isEditMode}
                       beingEditedType={beingEditedType}
                       setBeingEditedType={setBeingEditedType}
diff --git a/src/pages/Cart.js b/src/pages/Cart.js
index d2e93bd..be05bdf 100644
--- a/src/pages/Cart.js
+++ b/src/pages/Cart.js
@@ -150,7 +150,7 @@ export default function Invoice({ table, sendParam, deviceType, socket }) {
   return (
     <div className={styles.Invoice}>
       <div style={{ marginTop: "30px" }}></div>
-      <h2 className={styles["Invoice-title"]}>Cart</h2>
+      <h2 className={styles["Invoice-title"]}>Keranjang</h2>
       <div style={{ marginTop: "30px" }}></div>
       <div className={styles.RoundedRectangle}>
         {cartItems.map((itemType) => (
@@ -165,7 +165,7 @@ export default function Invoice({ table, sendParam, deviceType, socket }) {
 
 {table.tableNo != null && (
         <div className={styles.OrderTypeContainer}>
-            <span htmlFor="orderType">Serve to table {table.tableNo}</span>
+            <span htmlFor="orderType">Diantar ke meja {table.tableNo}</span>
           {/* <select
             id="orderType"
             value={orderType}
@@ -193,7 +193,7 @@ export default function Invoice({ table, sendParam, deviceType, socket }) {
         )}
 
         <div className={styles.NoteContainer}>
-          <span>Note :</span>
+          <span>Catatan :</span>
           <span></span>
         </div>
 
@@ -201,7 +201,7 @@ export default function Invoice({ table, sendParam, deviceType, socket }) {
           <textarea
             ref={textareaRef}
             className={styles.NoteInput}
-            placeholder="Add a note..."
+            placeholder="Tambahkan catatan..."
           />
         </div>
         <div className={styles.TotalContainer}>
@@ -211,21 +211,21 @@ export default function Invoice({ table, sendParam, deviceType, socket }) {
       </div>
       <div className={styles.PaymentOption}>
         <div className={styles.TotalContainer}>
-          <span>Payment Option</span>
+          <span>Opsi pembayaran</span>
           <span></span>
         </div>
         <button className={styles.PayButton} onClick={() => handlePay(false)}>
           {isPaymentLoading ? (
             <ColorRing height="50" width="50" color="white" />
           ) : (
-            "Cashless"
+            "Nontunai"
           )}
         </button>
         <div className={styles.Pay2Button} onClick={() => handlePay(true)}>
           {isPaymentLoading ? (
             <ColorRing height="12" width="12" color="white" />
           ) : (
-            "Cash"
+            "Tunai"
           )}
         </div>
       </div>
diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
index fed3d60..eca5a20 100644
--- a/src/pages/Dashboard.js
+++ b/src/pages/Dashboard.js
@@ -80,6 +80,31 @@ const Dashboard = ({ user, setModal }) => {
         });
     }
   };
+//   function calculateCafeMetrics(cafes) {
+//     let totalIncomeThisMonth = 0;
+//     let totalIncomeLastMonth = 0;
+
+//     cafes.forEach(cafe => {
+//         const currentIncome = cafe.totalIncome;
+//         const growth = cafe.growthIncome / 100;
+
+//         // Hitung keuntungan bulan lalu
+//         const lastMonthIncome = currentIncome / (1 + growth);
+        
+//         // Tambahkan ke total
+//         totalIncomeThisMonth += currentIncome;
+//         totalIncomeLastMonth += lastMonthIncome;
+//     });
+
+//     // Hitung growth total
+//     const totalGrowth = ((totalIncomeThisMonth - totalIncomeLastMonth) / totalIncomeLastMonth) * 100;
+
+//     return {
+//         totalIncomeThisMonth,
+//         totalIncomeLastMonth: totalIncomeLastMonth.toFixed(2),
+//         totalGrowth: totalGrowth.toFixed(2)
+//     };
+// }
 
   return (
     <>
@@ -100,7 +125,9 @@ const Dashboard = ({ user, setModal }) => {
               onClick={() => navigate("/" + item.cafeId)}
               className={styles.rectangle}
             >
-              {item.name || item.username}
+              <h1>{item.name || item.username}</h1>
+              
+              <div><h1>{item.report.totalIncome}</h1><h1>{item.report.totalIncome}</h1></div>
             </div>
           ))}
           {user && user.roleId < 1 ? (
diff --git a/src/pages/Reports.js b/src/pages/Reports.js
index 928ea69..bbdd279 100644
--- a/src/pages/Reports.js
+++ b/src/pages/Reports.js
@@ -211,10 +211,11 @@ const App = ({ cafeId,
       right: 0,
       backgroundColor: 'rgb(207, 207, 207)'}}
       >
-      <h2 className={styles["Transactions-title"]}>Reports</h2>
-      <div style={{ textAlign: "center" }}>
+      <h2 className={styles["Transactions-title"]}>Laporan</h2>
+      <div style={{ textAlign: "center", 
+    marginTop: '30px' }}>
         <MultiSwitch
-          texts={["Yesterday", "This week", "This Month", "This year"]}
+          texts={["kemarin", "minggu ini", "bulan ini", "tahun ini"]}
           selectedSwitch={["daily", "weekly", "monthly", "yearly"].indexOf(
             filter
           )}
diff --git a/src/pages/SearchResult.js b/src/pages/SearchResult.js
index 3653cbe..9a9c257 100644
--- a/src/pages/SearchResult.js
+++ b/src/pages/SearchResult.js
@@ -43,7 +43,7 @@ function SearchResult({ user, shopItems, sendParam }) {
   return (
     <div className="App">
       <header className="App-header">
-        <Header HeaderText={"Search"} />
+        <Header HeaderText={"Pencarian"} />
         <div style={{ marginTop: "5px" }}></div>
         <SearchInput
           shopId={shopId}
diff --git a/src/pages/Transaction_confirmed.js b/src/pages/Transaction_confirmed.js
index 9ac8a5c..d101986 100644
--- a/src/pages/Transaction_confirmed.js
+++ b/src/pages/Transaction_confirmed.js
@@ -229,7 +229,7 @@ export default function Transactions({
                   : handleDecline(transaction.transactionId)
               }
             >
-              {isPaymentOpen ? "back" : "cancel"}
+              {isPaymentOpen ? "kembali" : "batalkan"}
             </h5>
           </div>
         )}