ok

src/pages/CafePage.js

@@ -20,7 +20,7 @@ import Header from "../components/Header";
 
 import { ThreeDots } from "react-loader-spinner";
 
-import { updateLocalStorage } from "../helpers/localStorageHelpers";
+import { updateLocalStorage, removeLocalStorage } from "../helpers/localStorageHelpers";
 import { unsubscribeUser } from "../helpers/subscribeHelpers.js";
 import WelcomePage from "./WelcomePage.js";
 
@@ -108,7 +108,7 @@ function CafePage({
   };
 
   const handleLogout = () => {
-    updateLocalStorage("auth", "");
+    removeLocalStorage("auth");
     unsubscribeUser();
     navigate(0);
   };
@@ -172,9 +172,12 @@ function CafePage({
                   setIsEditMode={(e) => setIsEditMode(e)}
                   isEditMode={isEditMode}
                 />
-                <div style={{ marginTop: "5px" }}></div>
-                <SearchInput shopId={shopId} tableCode={table.tableCode} />
-                <div style={{ marginTop: "15px" }}></div>
+                    <MusicPlayer
+                      socket={socket}
+                      shopId={shopId}
+                      user={user}
+                      isSpotifyNeedLogin={isSpotifyNeedLogin}
+                    />
                 <ItemTypeLister
                   user={user}
                   shopOwnerId={shopOwnerId}
@@ -186,22 +189,8 @@ function CafePage({
                   beingEditedType={beingEditedType}
                   setBeingEditedType={setBeingEditedType}
                 />
-                <div style={{ marginTop: "-13px" }}></div>
-                {filterId === 0 ? (
-                  <>
-                    <h2 className="title">Music Req.</h2>
-                    <MusicPlayer
-                      socket={socket}
-                      shopId={shopId}
-                      user={user}
-                      isSpotifyNeedLogin={isSpotifyNeedLogin}
-                    />
-                  </>
-                ) : (
-                  <div style={{ marginTop: "35px" }}></div>
-                )}
 
-                <div style={{ marginTop: "-15px" }}></div>
+                {/* <div style={{ marginTop: "15px" }}></div> */}
                 {shopItems
                   .filter(
                     (itemType) =>

src/pages/Cart.js

@@ -163,9 +163,10 @@ export default function Invoice({ table, sendParam, deviceType, socket }) {
           />
         ))}
 
+{table.tableNo != null && (
         <div className={styles.OrderTypeContainer}>
-          <span htmlFor="orderType">Order Type:</span>
-          <select
+            <span htmlFor="orderType">Serve to table {table.tableNo}</span>
+          {/* <select
             id="orderType"
             value={orderType}
             onChange={handleOrderTypeChange}
@@ -175,10 +176,9 @@ export default function Invoice({ table, sendParam, deviceType, socket }) {
             )}
             <option value="pickup">Pickup</option>
             {table == null && <option value="serve">Serve</option>}
-
-            {/* tableId harus di check terlebih dahulu untuk mendapatkan tableNo */}
-          </select>
+          </select> */}
         </div>
+          )}
         {orderType === "serve" && table.length < 1 && (
           <div className={styles.OrderTypeContainer}>
             <span htmlFor="orderType">Serve to:</span>

src/pages/CreateClerk.js

@@ -0,0 +1,111 @@
+import React, { useState } from 'react';
+import { createClerks } from '../helpers/userHelpers'; // Adjust the import path as needed
+
+const CreateClerk = ({ shopId }) => {
+  const [email, setEmail] = useState('');
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    setLoading(true);
+    setMessage('');
+
+    // Basic validation
+    if (!email || !username || !password) {
+      setMessage('All fields are required');
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const create = await createClerks(shopId, email, username, password);
+
+      if(create) setMessage('Clerk created successfully');
+      else setMessage('failed')
+    } catch (error) {
+      setMessage('Error creating clerk');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div style={styles.container}>
+      <h2 style={styles.header}>Create Clerk</h2>
+      <form onSubmit={handleSubmit} style={styles.form}>
+        <input
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          style={styles.input}
+        />
+        <input
+          type="text"
+          placeholder="Username"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          style={styles.input}
+        />
+        <input
+          type="password"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          style={styles.input}
+        />
+        <button type="submit" style={styles.button} disabled={loading}>
+          {loading ? 'Creating...' : 'Create Clerk'}
+        </button>
+        {message && <p style={styles.message}>{message}</p>}
+      </form>
+    </div>
+  );
+};
+
+// Basic styling to make it mobile-friendly
+const styles = {
+  container: {
+    width: '100%',
+    maxWidth: '400px',
+    margin: '0 auto',
+    padding: '20px',
+    boxSizing: 'border-box',
+  },
+  header: {
+    textAlign: 'center',
+    marginBottom: '20px',
+  },
+  form: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '15px',
+  },
+  input: {
+    padding: '10px',
+    fontSize: '16px',
+    borderRadius: '5px',
+    border: '1px solid #ccc',
+    width: '100%',
+    boxSizing: 'border-box',
+  },
+  button: {
+    padding: '10px',
+    fontSize: '16px',
+    borderRadius: '5px',
+    border: 'none',
+    backgroundColor: '#28a745',
+    color: 'white',
+    cursor: 'pointer',
+  },
+  message: {
+    textAlign: 'center',
+    color: 'red',
+    marginTop: '10px',
+  },
+};
+
+export default CreateClerk;

src/pages/Dashboard.js

@@ -3,7 +3,7 @@ import styles from "./Dashboard.module.css"; // Import module CSS for styling
 import Header from "../components/Header";
 import { useNavigate } from "react-router-dom";
 import AccountUpdateModal from "../components/AccountUpdateModal";
-import { updateLocalStorage } from "../helpers/localStorageHelpers";
+import { removeLocalStorage } from "../helpers/localStorageHelpers";
 import { getAllCafeOwner, createCafeOwner } from "../helpers/userHelpers";
 import { getOwnedCafes, createCafe, updateCafe } from "../helpers/cafeHelpers";
 
@@ -50,7 +50,7 @@ const Dashboard = ({ user, setModal }) => {
   };
 
   const handleLogout = () => {
-    updateLocalStorage("auth", "");
+    removeLocalStorage("auth");
     unsubscribeUser();
     navigate(0);
   };
@@ -58,9 +58,9 @@ const Dashboard = ({ user, setModal }) => {
   const handleCreateItem = () => {
     if (user.roleId < 1) {
       // Create admin functionality
-      createCafeOwner(newItem.name)
+      createCafeOwner(newItem.email, newItem.username, newItem.password)
         .then(() => {
-          setItems([...items, { name: newItem.name }]);
+          setItems([...items, { name: newItem.username }]);
           setIsCreating(false);
           setNewItem({ name: "", type: "" });
         })
@@ -84,7 +84,7 @@ const Dashboard = ({ user, setModal }) => {
   return (
     <>
       <Header
-        HeaderText={"GrooveBrew"}
+        HeaderText={"kedaimaster"}
         isEdit={() => setIsModalOpen(true)}
         isLogout={handleLogout}
         user={user}
@@ -132,12 +132,31 @@ const Dashboard = ({ user, setModal }) => {
       {isCreating && (
         <div className={styles.createModal}>
           <h2>Create New {user.roleId < 1 ? "Admin" : "Cafe"}</h2>
+          {user.roleId < 1 ?<>
+          <input
+            type="email"
+            value={newItem.email}
+            onChange={(e) => setNewItem({ ...newItem, email: e.target.value })}
+            placeholder="email"
+          />
+          <input
+            type="text"
+            value={newItem.username}
+            onChange={(e) => setNewItem({ ...newItem, username: e.target.value })}
+            placeholder="username"
+          />
+          <input
+            type="password"
+            value={newItem.password}
+            onChange={(e) => setNewItem({ ...newItem, password: e.target.value })}
+            placeholder="Password"
+          /></> : 
           <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>