diff --git a/src/components/ItemConfig.js b/src/components/ItemConfig.js
index d3c4c17..7b407c8 100644
--- a/src/components/ItemConfig.js
+++ b/src/components/ItemConfig.js
@@ -12,7 +12,8 @@ const ItemConfig = ({
     isBeingEdit,
     cancelEdit,
     handleCreateItem,
-    handleUpdateItem
+    handleUpdateItem,
+    handleDelete
 }) => {
     const [selectedImage, setSelectedImage] = useState();
     const [previewUrl, setPreviewUrl] = useState(imageUrl);
@@ -104,9 +105,12 @@ const ItemConfig = ({
                         />
                     </div>
                     <div style={{ width: '72%', height: '26vw', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                        <div onClick={() => handleChangeImage()} style={{ width: '140px', height: '40px', alignContent: 'center', textAlign: 'center', borderRadius: '10px', border: '1px solid #60d37e', color: '#60d37e', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                        <div onClick={() => handleChangeImage()} style={{ width: '140px', marginRight: '10px', height: '40px', alignContent: 'center', textAlign: 'center', borderRadius: '10px', border: '1px solid #60d37e', color: '#60d37e', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                             {isBeingEdit ? 'Ganti gambar' : 'Tambah gambar'}
                         </div>
+                        <div onClick={handleDelete} style={{ width: '76px', height: '40px', alignContent: 'center', textAlign: 'center', borderRadius: '10px', border: '1px solid rgb(211 96 96)', color: 'rgb(211 96 96)', backgroundColor: 'white', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                            Hapus
+                        </div>
                     </div>
                 </div>
 
diff --git a/src/components/ItemLister.js b/src/components/ItemLister.js
index d9294a6..22176c3 100644
--- a/src/components/ItemLister.js
+++ b/src/components/ItemLister.js
@@ -15,7 +15,7 @@ import {
   deleteItemType,
 } from "../helpers/itemHelper.js";
 import ItemType from "./ItemType.js";
-import { createItemType } from "../helpers/itemHelper.js";
+import { createItemType, updateItemDeletionStatus } from "../helpers/itemHelper.js";
 import ItemConfig from "./ItemConfig.js"
 
 const ItemLister = ({
@@ -169,8 +169,8 @@ const ItemLister = ({
   };
   const onEditItem = async (itemId, name, price, image, description, promoPrice) => {
     await updateItemInCreate(itemId, name, price, image, description, promoPrice);
-    setRandomKey(randomKey + 1); 
-    console.log(image) 
+    setRandomKey(randomKey + 1);
+    console.log(image)
     editItem(0);
   }
   const onCreateItem = async (itemName, itemPrice, selectedImage, previewUrl, description, promoPrice) => {
@@ -232,63 +232,63 @@ const ItemLister = ({
   };
   const onUpdateItem = async (itemId, name, price, image, description, promoPrice) => {
     if (isEdit)
-      setItemsToUpdate((prev) => [...prev, { itemId, name, price,promoPrice, image, description }]);
+      setItemsToUpdate((prev) => [...prev, { itemId, name, price, promoPrice, image, description }]);
     else {
       console.log(itemId, name, price, image, description)
       handleUpdateItem(itemId, name, price, image, description, promoPrice);
     }
-      const itemIndex = items.findIndex((item) => item.itemId === itemId);
-      if (itemIndex === -1) return; // Item not found
+    const itemIndex = items.findIndex((item) => item.itemId === itemId);
+    if (itemIndex === -1) return; // Item not found
 
-      // Create a copy of the current items array
-      const updatedItems = [...items];
-      const item = updatedItems[itemIndex];
-      console.log(item)
-      console.log(image)
-      // Toggle the availability locally
-      const readImage = (image) => {
-        return new Promise((resolve, reject) => {
-          // Check if image is a valid File or Blob object
-          if (!(image instanceof Blob)) {
-            return;
-          }
-      
-          const reader = new FileReader();
-          reader.onloadend = () => resolve(reader.result);
-          reader.onerror = (error) => reject(error);
-          reader.readAsDataURL(image);  // read the image as a data URL
-        });
-      };
-      
-      
-      let newImage = null;
-      if (image) {
-        try {
-          newImage = await readImage(image);
-          console.log(newImage);
-        } catch (error) {
-          console.error("Error reading image:", error);
+    // Create a copy of the current items array
+    const updatedItems = [...items];
+    const item = updatedItems[itemIndex];
+    console.log(item)
+    console.log(image)
+    // Toggle the availability locally
+    const readImage = (image) => {
+      return new Promise((resolve, reject) => {
+        // Check if image is a valid File or Blob object
+        if (!(image instanceof Blob)) {
+          return;
         }
+
+        const reader = new FileReader();
+        reader.onloadend = () => resolve(reader.result);
+        reader.onerror = (error) => reject(error);
+        reader.readAsDataURL(image);  // read the image as a data URL
+      });
+    };
+
+
+    let newImage = null;
+    if (image) {
+      try {
+        newImage = await readImage(image);
+        console.log(newImage);
+      } catch (error) {
+        console.error("Error reading image:", error);
       }
-      
-      updatedItems[itemIndex] = {
-        itemId: item.itemId,
-        name,
-        price,
-        description: description,
-        promoPrice: promoPrice,
-        availability: item.availability,
-        image: image ? newImage : item.image,
-        selectedImage: image ? newImage : null
-      };
-      
-      console.log(updatedItems)
+    }
+
+    updatedItems[itemIndex] = {
+      itemId: item.itemId,
+      name,
+      price,
+      description: description,
+      promoPrice: promoPrice,
+      availability: item.availability,
+      image: image ? newImage : item.image,
+      selectedImage: image ? newImage : null
+    };
+
+    console.log(updatedItems)
+
+    // Update the state with the local change
+    setItems(updatedItems);
+    setRandomKey(randomKey + 1);
 
-      // Update the state with the local change
-      setItems(updatedItems);
-      setRandomKey(randomKey + 1);
 
-    
     console.log(itemsToUpdate);
   };
 
@@ -509,7 +509,7 @@ const ItemLister = ({
           for (const { name, price, selectedImage, description } of itemsToCreate) {
             // Call handleCreateItem to create a new item
             const newItem = await handleCreateItem(newItemType.itemTypeId, name, price, selectedImage, description);
-            
+
             // If the item was created successfully, update the shopItems state
             if (newItem) {
               setShopItems((prevShopItems) =>
@@ -561,6 +561,40 @@ const ItemLister = ({
     setIsFirstStep(true);
   };
 
+  const handleItemDeletionToggle = async (itemId, willBeDeleted) => {
+    try {
+      editItem(0)
+      // 1. Await the API or helper that updates the deletion status
+      const updatedItem = await updateItemDeletionStatus(itemId, willBeDeleted);
+  
+      // 2. Update the local state with the new `willBeDeleted` status
+      setShopItems((prevShopItems) => {
+        return prevShopItems.map((itemType) => {
+          const updatedItemList = itemType.itemList.map((item) => {
+            if (item.itemId === itemId) {
+              return {
+                ...item,
+                willBeDeleted: updatedItem.willBeDeleted, // Update deletion status
+                name: item.name,
+                price: item.price,
+                image: item.image,
+              };
+            }
+            return item;
+          });
+  
+          return {
+            ...itemType,
+            itemList: updatedItemList,
+          };
+        });
+      });
+    } catch (error) {
+      console.error("Failed to update item deletion status:", error);
+      // Optional: show a user notification
+    }
+  };
+  
   return (
     <>
       {(items.length > 0 ||
@@ -873,7 +907,7 @@ const ItemLister = ({
                             imageUrl={item.image}
                             imageFile={item.selectedImage}
                             cancelEdit={() => editItem(0)}
-                            handleUpdateItem={(name, price, image, description, promoPrice) => { onEditItem(item.itemId, name, price, image, description, promoPrice);}
+                            handleUpdateItem={(name, price, image, description, promoPrice) => { onEditItem(item.itemId, name, price, image, description, promoPrice); }
                             }
                           />
                         )}
@@ -964,43 +998,58 @@ const ItemLister = ({
                           //   batal
                           // </button>
                           <ItemConfig
-                          isBeingEdit={true}
-                          name={item.name}
-                          price={item.price}
-                          promoPrice={item.promoPrice}
-                          description={item.description}
-                          imageUrl={itemTypeId ? getImageUrl(item.image) : item.image}
-                          imageFile={item.selectedImage}
-                          cancelEdit={() => editItem(0)}
-                          handleCreateItem={onCreateItem}
-                          handleUpdateItem={async (name, price, image, description, promoPrice) => {
-                            try {
-                              console.log(description);
-                              await onUpdateItem(item.itemId, name, price, image, description, promoPrice);
-                            } catch (error) {
-                              console.error("Error updating item:", error);
-                            }
-                          }}
-                        />
+                            isBeingEdit={true}
+                            name={item.name}
+                            price={item.price}
+                            promoPrice={item.promoPrice}
+                            description={item.description}
+                            imageUrl={itemTypeId ? getImageUrl(item.image) : item.image}
+                            imageFile={item.selectedImage}
+                            cancelEdit={() => editItem(0)}
+                            handleCreateItem={onCreateItem}
+                            handleUpdateItem={async (name, price, image, description, promoPrice) => {
+                              try {
+                                console.log(description);
+                                await onUpdateItem(item.itemId, name, price, image, description, promoPrice);
+                              } catch (error) {
+                                console.error("Error updating item:", error);
+                              }
+                            }}
+                            handleDelete={() => handleItemDeletionToggle(item.itemId, true)}
+                            />
 
                         )}
                         <div className={styles["itemWrapper"]}>
-                          {isEditMode && isEditItem != item.itemId && (
+                          {(isEditMode && isEditItem != item.itemId || item.willBeDeleted) && (
                             <div className={styles["editModeLayout"]}>
                               <div style={{ display: 'flex', alignItems: 'center', height: '40px', marginLeft: '7.5vw' }}>
-                                {isEditMode && (
+                                {!item.willBeDeleted && isEditMode && (
                                   <Switch
                                     onChange={() => handleChange(item.itemId)}
                                     checked={item.availability}
                                   />
                                 )}
-                                <h3>
-                                  &nbsp;{item.availability ? "Tersedia" : "Tidak tersedia"}
-                                </h3>
+                                {item.willBeDeleted ?
+
+                                  <h3 style={{ backgroundColor: 'black', padding: '13px 26px' }}>
+                                    Ditandai untuk dihapus
+                                  </h3>
+                                  :
+                                  <h3>
+                                    &nbsp;{item.availability ? "Tersedia" : "Tidak tersedia"}
+                                  </h3>
+                                }
                               </div>
 
-                              <div onClick={() => editItem(item.itemId)} style={{ display: 'flex', alignItems: 'center', height: '40px', marginRight: '7.5vw' }}>
-                                <div
+                              <div onClick={() => {
+                                if (!item.willBeDeleted) {
+                                  editItem(item.itemId);
+                                } else {
+                                  handleItemDeletionToggle(item.itemId, false);
+                                }
+                              }}
+                                style={{ display: 'flex', alignItems: 'center', height: '40px', marginRight: '7.5vw' }}>
+                                {!item.willBeDeleted && <div
                                   style={{
                                     width: '32px',
                                     height: '32px', // Add a height to the div
@@ -1028,14 +1077,15 @@ const ItemLister = ({
                                     </g>
                                   </svg>
                                 </div>
-                                <h3>Edit item</h3>
+                                }
+                                <h3>{item.willBeDeleted ? 'Batalkan' : 'Edit item'}</h3>
                               </div>
                             </div>
                           )}
 
                           <Item
                             key={item.itemId}
-                            last={index === indexTotal-1 && indexx === items.length - 1}
+                            last={index === indexTotal - 1 && indexx === items.length - 1}
                             forCart={forCart}
                             forInvoice={forInvoice}
                             name={item.name}
diff --git a/src/helpers/itemHelper.js b/src/helpers/itemHelper.js
index 77d4625..43adedc 100644
--- a/src/helpers/itemHelper.js
+++ b/src/helpers/itemHelper.js
@@ -176,6 +176,33 @@ export async function updateItemAvalilability(itemId, isAvailable) {
     throw error;
   }
 }
+
+export async function updateItemDeletionStatus(itemId, willBeDeleted) {
+  try {
+    const response = await fetch(
+      `${API_BASE_URL}/item/set-deletion/` + itemId,
+      {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${getAuthToken()}`,
+        },
+        body: JSON.stringify({ willBeDeleted: willBeDeleted }),
+      }
+    );
+
+    if (!response.ok) {
+      // throw new Error(`Error: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    console.log(data);
+    return data;
+  } catch (error) {
+    console.error("Failed to update item type:", error);
+    throw error;
+  }
+}
 export async function createItemType(shopId, name, selectedImage, previewUrl) {
   try {
     const formData = new FormData();
diff --git a/src/index.js b/src/index.js
index 6b1560b..a8e87ac 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,9 +6,9 @@ import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 // Disable console methods
-// console.log = () => {};
-// console.warn = () => {};
-// console.error = () => {};
+console.log = () => {};
+console.warn = () => {};
+console.error = () => {};
 
 root.render(
   <React.StrictMode>
diff --git a/src/pages/Transaction.js b/src/pages/Transaction.js
index 17a7d0f..d1c0a46 100644
--- a/src/pages/Transaction.js
+++ b/src/pages/Transaction.js
@@ -235,7 +235,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType, handl
                 : `Diantar ke ${transaction.Table ? transaction.Table.tableNo : "N/A"
                 }`}
             </h2>
-            {transaction.notes != "" && (
+            {transaction.notes != null && (
               <>
                 <div className={styles.NoteContainer}>
                   <span>Note :</span>