gg

src/components/Header.js

@@ -332,6 +332,12 @@ const Header = ({
                   </Child>
                 </>
               )}
+              {user.username !== undefined &&
+                (user.roleId === 1 || user.roleId === 2) && (
+                  <Child onClick={() => setModal("update_stock")}>
+                    update stock
+                  </Child>
+                )}
               {user.username !== undefined && user.roleId === 2 && (
                 <Child hasChildren>
                   connected guest sides

src/components/Modal.js

@@ -24,6 +24,7 @@ const Modal = ({ shopId, isOpen, onClose, modalContent }) => {
           ×
         </button>
         {modalContent === "edit_tables" && <TableMaps shopId={shopId} />}
+        {modalContent === "new_transaction" && <TableMaps shopId={shopId} />}
       </div>
     </div>
   );

src/components/TableMaps.js

@@ -101,10 +101,10 @@ const TableCanvas = ({ shopId }) => {
       context.textBaseline = "middle";
       context.fillText(
         table.tableId === (selectedTable?.tableId || newTable?.tableId)
-          ? tableNo == 0
+          ? tableNo === 0
             ? "clerk"
             : tableNo
-          : table.tableNo == 0
+          : table.tableNo === 0
           ? "clerk"
           : table.tableNo,
         table.xposition + rectWidth / 2,
@@ -257,9 +257,9 @@ const TableCanvas = ({ shopId }) => {
   const handleSetTableNo = (event) => {
     const newValue = event.target.value;
     // Prevent setting value to '0' or starting with '0'
-    // if (newValue === "" || /^[1-9][0-9]*$/.test(newValue)) {
-    setTableNo(newValue);
-    // }
+    if (newValue === "" || /^[1-9][0-9]*$/.test(newValue)) {
+      setTableNo(newValue);
+    }
   };
 
   return (
@@ -333,6 +333,7 @@ const TableCanvas = ({ shopId }) => {
                 type="text"
                 placeholder="Table No"
                 value={tableNo}
+                disabled={tableNo === 0 ? "disabled" : ""}
                 onChange={handleSetTableNo}
                 style={{
                   marginRight: "10px",
@@ -376,8 +377,12 @@ const TableCanvas = ({ shopId }) => {
                 }}
                 onClick={() => handleSelect(table)}
               >
-                Table {table.tableNo} - Position: ({table.xposition},{" "}
-                {table.yposition})
+                {
+                  table.tableNo === 0
+                    ? "Clerk" // Display "Clerk" if tableNo is 0
+                    : `Table ${table.tableNo}` // Display "Table {tableNo}" otherwise
+                }{" "}
+                - Position: ({table.xposition}, {table.yposition})
               </li>
             ))}
           </ul>

src/helpers/cafeHelpers.js

@@ -14,7 +14,55 @@ export async function getOwnedCafes(userId) {
           "Content-Type": "application/json",
           Authorization: `Bearer ${getAuthToken()}`,
         },
-      },
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch cart details");
+    }
+
+    const cafes = await response.json();
+    return cafes;
+  } catch (error) {
+    console.error("Error:", error);
+  }
+}
+
+export async function createCafe(userId) {
+  try {
+    const response = await fetch(
+      `${API_BASE_URL}/cafe/get-cafe-by-ownerId/` + userId,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${getAuthToken()}`,
+        },
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch cart details");
+    }
+
+    const cafes = await response.json();
+    return cafes;
+  } catch (error) {
+    console.error("Error:", error);
+  }
+}
+
+export async function updateCafe(userId) {
+  try {
+    const response = await fetch(
+      `${API_BASE_URL}/cafe/get-cafe-by-ownerId/` + userId,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${getAuthToken()}`,
+        },
+      }
     );
 
     if (!response.ok) {

src/helpers/userHelpers.js

@@ -78,7 +78,7 @@ export async function removeConnectedGuestSides(guestSideSessionId) {
           body: JSON.stringify({
             guestSideSessionId,
           }),
-        },
+        }
       );
       if (response.status === 200) {
         const { message, guestSideList } = await response.json();
@@ -168,6 +168,66 @@ export const getAllCafeOwner = async (formData) => {
   }
 };
 
+export const createCafeOwner = async (shopId, email, username, password) => {
+  const token = getLocalStorage("auth");
+  if (token) {
+    try {
+      const response = await fetch(
+        API_BASE_URL + "/user/create-clerk/" + shopId,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify({
+            email: email,
+            username: username,
+            password: password,
+          }),
+        }
+      );
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      return data;
+    } catch (error) {
+      console.error("Error getting clerk:", error);
+    }
+  }
+};
+
+export const deleteCafeOwner = async (shopId, email, username, password) => {
+  const token = getLocalStorage("auth");
+  if (token) {
+    try {
+      const response = await fetch(
+        API_BASE_URL + "/user/create-clerk/" + shopId,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify({
+            email: email,
+            username: username,
+            password: password,
+          }),
+        }
+      );
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      return data;
+    } catch (error) {
+      console.error("Error getting clerk:", error);
+    }
+  }
+};
+
 export const createClerks = async (shopId, email, username, password) => {
   const token = getLocalStorage("auth");
   if (token) {
@@ -185,7 +245,7 @@ export const createClerks = async (shopId, email, username, password) => {
             username: username,
             password: password,
           }),
-        },
+        }
       );
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);

src/pages/Dashboard.js

@@ -4,8 +4,8 @@ import Header from "../components/Header";
 import { useNavigate } from "react-router-dom";
 import AccountUpdateModal from "../components/AccountUpdateModal";
 import { updateLocalStorage } from "../helpers/localStorageHelpers";
-import { getAllCafeOwner } from "../helpers/userHelpers";
-import { getOwnedCafes } from "../helpers/cafeHelpers";
+import { getAllCafeOwner, createCafeOwner } from "../helpers/userHelpers";
+import { getOwnedCafes, createCafe, updateCafe } from "../helpers/cafeHelpers";
 
 import { ThreeDots } from "react-loader-spinner";
 
@@ -14,30 +14,32 @@ const Dashboard = ({ user, setModal }) => {
   const [loading, setLoading] = useState(true);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [items, setItems] = useState([]);
+  const [isCreating, setIsCreating] = useState(false);
+  const [newItem, setNewItem] = useState({ name: "", type: "" });
 
   useEffect(() => {
     if (user && user.roleId === 0) {
       setLoading(true);
-      // Example of calling getAllCafeOwner if roleId is 0
       getAllCafeOwner()
         .then((data) => {
-          setItems(data); // Assuming getAllCafeOwners returns an array of cafe owners
+          setItems(data);
           setLoading(false);
         })
         .catch((error) => {
           console.error("Error fetching cafe owners:", error);
+          setLoading(false);
         });
     }
     if (user && user.roleId === 1) {
-      // Example of calling getAllCafeOwner if roleId is 0
       setLoading(true);
       getOwnedCafes(user.userId)
         .then((data) => {
-          setItems(data); // Assuming getAllCafeOwners returns an array of cafe owners
+          setItems(data);
           setLoading(false);
         })
         .catch((error) => {
-          console.error("Error fetching cafe owners:", error);
+          console.error("Error fetching owned cafes:", error);
+          setLoading(false);
         });
     }
   }, [user]);
@@ -51,6 +53,32 @@ const Dashboard = ({ user, setModal }) => {
     navigate(0);
   };
 
+  const handleCreateItem = () => {
+    if (user.roleId < 1) {
+      // Create admin functionality
+      createCafeOwner(newItem.name)
+        .then(() => {
+          setItems([...items, { name: newItem.name }]);
+          setIsCreating(false);
+          setNewItem({ name: "", type: "" });
+        })
+        .catch((error) => {
+          console.error("Error creating admin:", error);
+        });
+    } else {
+      // Create cafe functionality
+      createCafe(newItem.name)
+        .then(() => {
+          setItems([...items, { name: newItem.name }]);
+          setIsCreating(false);
+          setNewItem({ name: "", type: "" });
+        })
+        .catch((error) => {
+          console.error("Error creating cafe:", error);
+        });
+    }
+  };
+
   return (
     <>
       <Header
@@ -74,9 +102,19 @@ const Dashboard = ({ user, setModal }) => {
             </div>
           ))}
           {user && user.roleId < 1 ? (
-            <div className={styles.rectangle}>Create Admin</div>
+            <div
+              className={styles.rectangle}
+              onClick={() => setIsCreating(true)}
+            >
+              Create Admin
+            </div>
           ) : (
-            <div className={styles.rectangle}>Create Cafe</div>
+            <div
+              className={styles.rectangle}
+              onClick={() => setIsCreating(true)}
+            >
+              Create Cafe
+            </div>
           )}
         </div>
       )}
@@ -88,6 +126,20 @@ const Dashboard = ({ user, setModal }) => {
           onClose={handleModalClose}
         />
       )}
+
+      {isCreating && (
+        <div className={styles.createModal}>
+          <h2>Create New {user.roleId < 1 ? "Admin" : "Cafe"}</h2>
+          <input
+            type="text"
+            value={newItem.name}
+            onChange={(e) => setNewItem({ ...newItem, name: e.target.value })}
+            placeholder="Name"
+          />
+          <button onClick={handleCreateItem}>Create</button>
+          <button onClick={() => setIsCreating(false)}>Cancel</button>
+        </div>
+      )}
     </>
   );
 };