ok

src/components/ItemLister.js

@@ -67,6 +67,8 @@ const ItemLister = ({
   const [itemsToCreate, setItemsToCreate] = useState([]);
   const [itemsToUpdate, setItemsToUpdate] = useState([]);
 
+  const [isFirstStep, setIsFirstStep] = useState(true);
+
   const handlePlusClick = (itemId) => {
     const updatedItems = items.map((item) => {
       if (item.itemId === itemId) {
@@ -483,6 +485,7 @@ const ItemLister = ({
     setItemsToUpdate([]);
     setIsEditing(false);
     if (handleUnEdit) handleUnEdit();
+    setIsFirstStep(true);
   };
 
   return (
@@ -495,6 +498,8 @@ const ItemLister = ({
               }`}
             style={{ paddingBottom: isEdit ? "28vh" : "" }}
           >
+            
+            { (isEdit && isFirstStep || !isEdit) &&
             <div className={styles["title-container"]}>
               {isEdit && <ItemType blank={true} imageUrl={previewUrl} />}
               <input
@@ -590,7 +595,9 @@ const ItemLister = ({
                 </>
               )}
             </div>
-            {isEdit && (
+}
+            {isEdit && isFirstStep && (
+              <>
               <div className={styles["grid-container"]}>
                 <ItemType
                   rectangular={true}
@@ -744,8 +751,13 @@ const ItemLister = ({
                   );
                 })}
               </div>
+              <button onClick={()=>setIsFirstStep(false)}style={{width: '100%', height: '40px', borderRadius: '20px'}}>selanjutnya</button>
+              </>
             )}
-
+            { (isEdit && !isFirstStep || !isEdit) &&
+            <>
+              {isEdit && <div style={{display: 'flex', justifyContent: 'space-between'}}><div onClick={()=>setIsFirstStep(true)}style={{color: 'black', fontSize: '50px', width: '30px'}}>&larr;</div>
+              <h3 style={{color: 'black'}}>Daftar item</h3><button style={{visibility: 'hidden', width: '30px'}}></button></div>}
             <div className={styles["item-list"]}>
               {user && (
                 user.userId == shopOwnerId || user.cafeId == shopId) &&
@@ -943,15 +955,18 @@ const ItemLister = ({
                 user.userId == shopOwnerId &&
                 isEdit && (
                   <>
-                    <button
+                    {/* <button
                       className={styles["add-item-button"]}
                       onClick={handleRemoveType}
                     >
                       Remove
-                    </button>
+                    </button> */}
                   </>
                 )}
+                
             </div>
+            </>
+            }
             {isEdit && (
               <div className={styles.PaymentOption}>
                 <div className={styles.TotalContainer}>