ok

src/components/Footer.module.css

@@ -68,7 +68,7 @@
   align-items: center;
   justify-content: center;
   transition: height 0.3s ease;
-  z-index: 200;
+  z-index: 197;
 }
 
 .scanMeja.stretched {

src/components/Header.js

@@ -30,7 +30,7 @@ const ProfileName = styled.h2`
   font-weight: 500;
   font-style: normal;
   font-size: 30px;
-  z-index: 11;
+  z-index: 199;
   overflow: hidden;
   white-space: nowrap;
   animation: ${(props) => {
@@ -92,7 +92,7 @@ const ProfileImage = styled.img`
   height: 60px;
   border-radius: 50%;
   cursor: pointer;
-  z-index: 12;
+  z-index: 199;
   animation: ${(props) => {
       if (props.animate === "grow") return g;
       if (props.animate === "shrink") return s;
@@ -165,7 +165,7 @@ const Rectangle = styled.div`
   width: 200px;
   max-height: 87vh; /* or another appropriate value */
   background-color: white;
-  z-index: 10;
+  z-index: 198;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   animation: ${(props) => (props.animate === "grow" ? grow : shrink)} 0.5s
     forwards;

src/components/ItemLister.js

@@ -28,6 +28,8 @@ const ItemLister = ({
   raw,
   handleCreateItem,
   handleUpdateItem,
+  beingEditedType,
+  setBeingEditedType,
 }) => {
   const [items, setItems] = useState(
     itemList.map((item) => ({
@@ -125,10 +127,12 @@ const ItemLister = ({
   const toggleAddNewItem = () => {
     setIsAddingNewItem((prev) => !prev);
     setOnEditItem(0);
+    setBeingEditedType(itemTypeId);
   };
   const editItem = (itemId) => {
     setIsAddingNewItem(false);
     setOnEditItem(itemId);
+    setBeingEditedType(itemTypeId);
   };
   const handleChange = async (itemId) => {
     // Find the item in the current items array
@@ -297,7 +301,10 @@ const ItemLister = ({
                       onPlusClick={() => handlePlusClick(item.itemId)}
                       onNegativeClick={() => handleNegativeClick(item.itemId)}
                       onRemoveClick={() => handleRemoveClick(item.itemId)}
-                      isBeingEdit={onEditItem == item.itemId}
+                      isBeingEdit={
+                        onEditItem == item.itemId &&
+                        beingEditedType == itemTypeId
+                      }
                       isAvailable={item.availability}
                       handleUpdateItem={(name, price, image) =>
                         handleUpdateItem(item.itemId, name, price, image)

src/components/ItemType.js

@@ -91,17 +91,19 @@ export default function ItemType({
           </div>
         )}
       </div>
-      <input
+      {(rectangular || !blank) && (
-        ref={inputRef}
+        <input
-        className={`${styles["item-type-name"]} ${styles.noborder}`}
+          ref={inputRef}
-        value={name}
+          className={`${styles["item-type-name"]} ${styles.noborder}`}
-        onChange={handleNameChange}
+          value={name}
-        disabled={true}
+          onChange={handleNameChange}
-        style={{
+          disabled={true}
-          top: selected ? "-5px" : "initial",
+          style={{
-          borderBottom: selected ? "1px solid #000" : "none",
+            top: selected ? "-5px" : "initial",
-        }}
+            borderBottom: selected ? "1px solid #000" : "none",
-      />
+          }}
+        />
+      )}
       {/* {blank && (
         <button className={styles["item-type-create"]} onClick={handleCreate}>
           create

src/components/ItemType.module.css

@@ -73,6 +73,7 @@
   opacity: 0;
   position: absolute;
   top: 0;
+  right: 0;
   width: 100%;
   height: 100%;
 }

src/components/ItemTypeLister.css

@@ -52,3 +52,13 @@
   bottom: 0;
   align-self: center; /* Center the button horizontally */
 }
+.item-type-name {
+  font-family: "Poppins", sans-serif;
+  font-style: normal;
+  height: 20vw;
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: black;
+  text-transform: capitalize;
+  z-index: 301;
+}

src/components/ItemTypeLister.js

@@ -5,7 +5,6 @@ import ItemType from "./ItemType";
 import { createItemType } from "../helpers/itemHelper.js";
 import { getImageUrl } from "../helpers/itemHelper";
 import ItemLister from "./ItemLister";
-
 const ItemTypeLister = ({
   shopId,
   shopOwnerId,
@@ -18,6 +17,8 @@ const ItemTypeLister = ({
   const [isAddingNewItem, setIsAddingNewItem] = useState(false);
   const newItemDivRef = useRef(null);
   const [items, setItems] = useState([]);
+  
+  const [itemTypeName, setItemTypeName] = useState('');
   const handleCreateItem = (name, price, selectedImage, previewUrl) => {
     console.log(previewUrl);
     const newItem = {
@@ -91,7 +92,7 @@ const ItemTypeLister = ({
       <div
         ref={newItemDivRef}
         className="item-type-list"
-        style={{ display: isAddingNewItem ? "block" : "inline-flex" }}
+        style={{ display: isAddingNewItem ? "inline-flex" : "inline-flex" }}
       >
         {isEditMode &&
           !isAddingNewItem &&
@@ -109,22 +110,30 @@ const ItemTypeLister = ({
           user.userId === shopOwnerId &&
           isAddingNewItem && (
             <>
-              <ItemType
+              <div style={{ display: "flex", alignItems: "center" }}>
-                blank={true}
+                <ItemType
-                imageUrl={previewUrl}
+                  blank={true}
-                name={"‎ "}
+                  imageUrl={previewUrl}
-                onCreate={handleCreate}
+                  name={"‎ "}
-              />
+                  onCreate={handleCreate}
+                />
+                <input
+                  className="item-type-name"
+                  value={itemTypeName}
+                  onChange={(e)=>setItemTypeName(e.target.value)}
+                  placeholder="type name"
+                  style={{ marginLeft: "10px" }} // Adjust spacing as needed
+                />
+              </div>
               <div className="rect-creator">
                 <div
                   className="inline-container"
-                  style={{ visibility: "hidden" }}
+                  style={{ overflowX: "hidden", visibility: "hidden" }}
                 >
                   <ItemType
                     onClick={() => onFilterChange(0)}
                     imageUrl={getImageUrl("uploads/1718732420960.png")}
                   />
-                  <input></input>
                   {/* <ItemType
                     onClick={() => onFilterChange(0)}
                     imageUrl={getImageUrl("uploads/1718732420960.png")}

src/pages/CafePage.js

@@ -59,6 +59,8 @@ function CafePage({
 
   const [config, setConfig] = useState({});
 
+  const [beingEditedType, setBeingEditedType] = useState(0);
+
   const checkWelcomePageConfig = () => {
     const parsedConfig = JSON.parse(welcomePageConfig);
     if (parsedConfig.isWelcomePageActive == "true") {
@@ -213,6 +215,8 @@ function CafePage({
                       typeName={itemType.name}
                       itemList={itemType.itemList}
                       isEditMode={isEditMode}
+                      beingEditedType={beingEditedType}
+                      setBeingEditedType={setBeingEditedType}
                       raw={isEditMode || filterId == 0 ? false : true}
                       handleCreateItem={(name, price, selectedImage) =>
                         createItem(