ok

2024-10-01 09:49:22 +00:00
parent 088b63a4a2
commit a86aaef4f6
20 changed files with 902 additions and 207 deletions
--- a/src/pages/CafePage.js
+++ b/src/pages/CafePage.js
@@ -24,6 +24,7 @@ import {
  updateLocalStorage,
 } from "../helpers/localStorageHelpers";
 import { unsubscribeUser } from "../helpers/subscribeHelpers.js";
+import WelcomePage from "./WelcomePage.js";

 function CafePage({
  table,
@@ -55,7 +56,29 @@ function CafePage({

  const [isEditMode, setIsEditMode] = useState(false);
  const [filterId, setFilterId] = useState(0);
+  const [isStarted, setIsStarted] = useState(false);

+  useEffect(() => {
+    // Check sessionStorage for 'getStartedClicked' on mount
+    const clicked = sessionStorage.getItem("getStartedClicked");
+    if (clicked) setIsStarted(true);
+    else document.body.style.overflow = "hidden";
+
+    // Define a custom event
+    const handleStorageChange = (event) => {
+      if (event.detail === "getStartedClicked") {
+        setIsStarted(true);
+      }
+    };
+
+    // Listen for custom events
+    window.addEventListener("storageChange", handleStorageChange);
+
+    // Cleanup the event listener
+    return () => {
+      window.removeEventListener("storageChange", handleStorageChange);
+    };
+  }, []);
  useEffect(() => {
    if (user.cafeId != null && user.cafeId !== shopId) {
      // Preserve existing query parameters
@@ -108,79 +131,82 @@ function CafePage({
    );
  else
    return (
-      <div className="App">
-        <body className="App-header">
-          <Header
-            HeaderText={"Menu"}
-            showProfile={true}
-            setModal={setModal}
-            isLogout={handleLogout}
-            shopId={shopId}
-            shopName={shopName}
-            shopOwnerId={shopOwnerId}
-            shopClerks={shopClerks}
-            tableCode={table.tableCode}
-            user={user}
-            guestSides={guestSides}
-            guestSideOfClerk={guestSideOfClerk}
-            removeConnectedGuestSides={removeConnectedGuestSides}
-            setIsEditMode={(e) => setIsEditMode(e)}
-            isEditMode={isEditMode}
-          />
-          <div style={{ marginTop: "5px" }}></div>
-          <SearchInput shopId={shopId} tableCode={table.tableCode} />
-          <div style={{ marginTop: "15px" }}></div>
-          <ItemTypeLister
-            user={user}
-            shopOwnerId={shopOwnerId}
-            shopId={shopId}
-            itemTypes={shopItems}
-            isEditMode={isEditMode}
-            onFilterChange={(e) => setFilterId(e)}
-            filterId={filterId}
-          />
-          <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>
-          )}
+      <>
+        {!isStarted && <WelcomePage></WelcomePage>}
+        <div className="App">
+          <body className="App-header">
+            <Header
+              HeaderText={"Menu"}
+              showProfile={true}
+              setModal={setModal}
+              isLogout={handleLogout}
+              shopId={shopId}
+              shopName={shopName}
+              shopOwnerId={shopOwnerId}
+              shopClerks={shopClerks}
+              tableCode={table.tableCode}
+              user={user}
+              guestSides={guestSides}
+              guestSideOfClerk={guestSideOfClerk}
+              removeConnectedGuestSides={removeConnectedGuestSides}
+              setIsEditMode={(e) => setIsEditMode(e)}
+              isEditMode={isEditMode}
+            />
+            <div style={{ marginTop: "5px" }}></div>
+            <SearchInput shopId={shopId} tableCode={table.tableCode} />
+            <div style={{ marginTop: "15px" }}></div>
+            <ItemTypeLister
+              user={user}
+              shopOwnerId={shopOwnerId}
+              shopId={shopId}
+              itemTypes={shopItems}
+              isEditMode={isEditMode}
+              onFilterChange={(e) => setFilterId(e)}
+              filterId={filterId}
+            />
+            <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>
-          {shopItems
-            .filter(
-              (itemType) => filterId == 0 || itemType.itemTypeId === filterId
-            )
-            .map((itemType) => (
-              <ItemLister
-                shopId={shopId}
-                shopOwnerId={shopOwnerId}
-                user={user}
-                key={itemType.itemTypeId}
-                itemTypeId={itemType.itemTypeId}
-                typeName={itemType.name}
-                itemList={itemType.itemList}
-                isEditMode={isEditMode}
-                raw={isEditMode || filterId == 0 ? false : true}
-              />
-            ))}
-        </body>
-        {user.username && (
-          <AccountUpdateModal
-            user={user}
-            isOpen={isModalOpen}
-            onClose={handleModalClose}
-          />
-        )}
-      </div>
+            <div style={{ marginTop: "-15px" }}></div>
+            {shopItems
+              .filter(
+                (itemType) => filterId == 0 || itemType.itemTypeId === filterId
+              )
+              .map((itemType) => (
+                <ItemLister
+                  shopId={shopId}
+                  shopOwnerId={shopOwnerId}
+                  user={user}
+                  key={itemType.itemTypeId}
+                  itemTypeId={itemType.itemTypeId}
+                  typeName={itemType.name}
+                  itemList={itemType.itemList}
+                  isEditMode={isEditMode}
+                  raw={isEditMode || filterId == 0 ? false : true}
+                />
+              ))}
+          </body>
+          {user.username && (
+            <AccountUpdateModal
+              user={user}
+              isOpen={isModalOpen}
+              onClose={handleModalClose}
+            />
+          )}
+        </div>
+      </>
    );
 }

--- a/src/pages/MaterialList.js
+++ b/src/pages/MaterialList.js
@@ -84,7 +84,7 @@ const MaterialList = ({ cafeId }) => {
    ? mutations.filter((mutation) => mutation.materialId === selectedMaterialId)
    : [];

-    const sortedMutations = filteredMutations
+  const sortedMutations = filteredMutations
    .filter((mutation) => mutation.materialId === selectedMaterialId)
    .sort((a, b) => {
      if (sortOrder === "asc") {
@@ -206,7 +206,7 @@ const MaterialList = ({ cafeId }) => {
    const date = new Date(timestamp);
    return date.toLocaleString();
  };
-  
+
  return (
    <div style={styles.container}>
      <h1 style={styles.heading}>Materials List</h1>
@@ -317,7 +317,7 @@ const MaterialList = ({ cafeId }) => {
                    -
                  </button>
                  <button style={styles.quantityDisplay}>
-                  {currentQuantity + quantityChange}
+                    {currentQuantity + quantityChange}
                  </button>
                  <button
                    onClick={() => handleQuantityChange(1)}
@@ -372,7 +372,7 @@ const MaterialList = ({ cafeId }) => {
          onChange={handleSortChange}
          style={styles.sortSelect}
        >
-        <option value="desc">latest</option>
+          <option value="desc">latest</option>
          <option value="asc">oldest</option>
        </select>
      </div>
@@ -382,7 +382,9 @@ const MaterialList = ({ cafeId }) => {
          {sortedMutations.length > 0 ? (
            sortedMutations.map((mutation) => (
              <div key={mutation.id} style={styles.mutationCard}>
-                <h4 style={styles.mutationTitle}>{formatDate(mutation.createdAt)}</h4>
+                <h4 style={styles.mutationTitle}>
+                  {formatDate(mutation.createdAt)}
+                </h4>
                <p>Details: {mutation.reason}</p>
                <p>stok {mutation.newStock}</p>
              </div>
@@ -404,6 +406,7 @@ const styles = {
    margin: "0 auto",
    height: "100%", // Adjust height based on your needs
    overflowY: "auto", // Enables vertical scrolling
+    backgroundColor: "white",
  },
  heading: {
    textAlign: "center",
--- a/src/pages/Transaction.js
+++ b/src/pages/Transaction.js
@@ -192,7 +192,7 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
                )}
              </button>
            </div>
-            {transaction.confirmed < 2 && (
+            {transaction.confirmed >= 0 && transaction.confirmed < 2 && (
              <h5
                className={styles.DeclineButton}
                onClick={() => handleDecline(transaction.transactionId)}
--- a/src/pages/Transaction_confirmed.js
+++ b/src/pages/Transaction_confirmed.js
@@ -123,14 +123,8 @@ export default function Transactions({
            onClick={() =>
              setSelectedTable(transaction.Table || { tableId: 0 })
            }
-            style={{ overflow: isPaymentOpen ? "hidden" : "" }}
+            style={{ overflow: "hidden" }}
          >
-            {transaction.paymentClaimed && transaction.confirmed < 2 && (
-              <div className={styles.RibbonBanner}>
-                <img src={"https://i.imgur.com/yt6osgL.png"}></img>
-                <h1>payment claimed</h1>
-              </div>
-            )}
            <h2 className={styles["Transactions-detail"]}>
              Transaction ID: {transaction.transactionId}
            </h2>
@@ -138,13 +132,17 @@ export default function Transactions({
              Payment Type: {transaction.payment_type}
            </h2>
            <ul>
-              {transaction.DetailedTransactions.map((detail) => (
+              {(isPaymentOpen
+                ? transaction.DetailedTransactions.slice(0, 2)
+                : transaction.DetailedTransactions
+              ).map((detail) => (
                <li key={detail.detailedTransactionId}>
                  <span>{detail.Item.name}</span> - {detail.qty} x Rp{" "}
                  {detail.Item.price}
                </li>
              ))}
            </ul>
+
            <h2 className={styles["Transactions-detail"]}>
              {transaction.serving_type === "pickup"
                ? "Self pickup"
--- a/src/pages/Transactions.js
+++ b/src/pages/Transactions.js
@@ -3,6 +3,7 @@ import styles from "./Transactions.module.css";
 import { useParams } from "react-router-dom";
 import { ColorRing } from "react-loader-spinner";
 import {
+  getMyTransactions,
  getTransactions,
  confirmTransaction,
  declineTransaction,
@@ -22,7 +23,11 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
  useEffect(() => {
    const fetchTransactions = async () => {
      try {
-        const response = await getTransactions(shopId || propsShopId, 5);
+        let response;
+        if (deviceType == "clerk")
+          response = await getTransactions(shopId || propsShopId, 5);
+        else if (deviceType == "guestDevice")
+          response = await getMyTransactions(shopId || propsShopId, 5);
        setTransactions(response);
      } catch (error) {
        console.error("Error fetching transactions:", error);
@@ -147,25 +152,53 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
                  className={styles.PayButton}
                  onClick={() => handleConfirm(transaction.transactionId)}
                  disabled={
-                    transaction.confirmed === -1 ||
-                    transaction.confirmed === 3 ||
-                    isPaymentLoading
-                  } // Disable button if confirmed (1) or declined (-1) or loading
+                    isPaymentLoading || // Disable if loading
+                    (deviceType === "clerk" &&
+                      transaction.confirmed !== 1 &&
+                      transaction.confirmed !== 2 &&
+                      transaction.confirmed !== 0) || // Disable for clerk when not Confirm has paid, Confirm item is ready, or Confirm availability
+                    (deviceType !== "clerk" &&
+                      transaction.confirmed !== 1 &&
+                      transaction.paymentClaimed) || // Disable for buyer when not Claim has paid
+                    transaction.confirmed === 3 || // Disable if Transaction success
+                    transaction.confirmed === -1 || // Disable if Declined
+                    transaction.confirmed === -2 || // Disable if Canceled
+                    transaction.confirmed === 2 || // Disable if In process
+                    (transaction.confirmed === 1 && transaction.paymentClaimed) // Disable if verifying payment
+                  }
                >
-                  {isPaymentLoading ? (
+                  {deviceType === "clerk" ? (
+                    isPaymentLoading ? (
+                      <ColorRing height="50" width="50" color="white" />
+                    ) : transaction.confirmed === 1 ? (
+                      "Confirm has paid"
+                    ) : transaction.confirmed === -1 ? (
+                      "Declined"
+                    ) : transaction.confirmed === -2 ? (
+                      "Canceled"
+                    ) : transaction.confirmed === 2 ? (
+                      "Confirm item is ready"
+                    ) : transaction.confirmed === 3 ? (
+                      "Transaction success"
+                    ) : (
+                      "Confirm availability"
+                    )
+                  ) : isPaymentLoading ? (
                    <ColorRing height="50" width="50" color="white" />
-                  ) : transaction.confirmed === 1 ? (
-                    "Confirm has paid" // Display "Confirm has paid" if the transaction is confirmed (1)
+                  ) : transaction.confirmed === 1 &&
+                    !transaction.paymentClaimed ? (
+                    "Claim has paid"
+                  ) : transaction.confirmed === 1 &&
+                    transaction.paymentClaimed ? (
+                    "Verifying your payment"
                  ) : transaction.confirmed === -1 ? (
-                    "Declined" // Display "Declined" if the transaction is declined (-1)
+                    "Declined"
                  ) : transaction.confirmed === -2 ? (
-                    "Canceled" // Display "Declined" if the transaction is declined (-1)
+                    "Canceled"
                  ) : transaction.confirmed === 2 ? (
-                    "Confirm item has ready" // Display "Item ready" if the transaction is ready (2)
-                  ) : transaction.confirmed === 3 ? (
-                    "Transaction success" // Display "Item ready" if the transaction is ready (2)
+                    "In process"
                  ) : (
-                    "Confirm availability" // Display "Confirm availability" if the transaction is not confirmed (0)
+                    "Transaction success"
                  )}
                </button>
              </div>
--- a/src/pages/WelcomePage.css
+++ b/src/pages/WelcomePage.css
@@ -0,0 +1,56 @@
+/* WelcomePage.css */
+.welcome-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+.image-container {
+  width: 150px; /* Adjust as needed */
+  height: 150px; /* Adjust as needed */
+  overflow: hidden;
+  border-radius: 50%;
+  margin-bottom: 20px;
+}
+
+.circular-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.welcoming-text {
+  font-size: 24px;
+  margin-bottom: 20px;
+  font-family: poppins;
+}
+
+.get-started-button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 25px;
+  background-color: #007bff; /* Bootstrap primary color */
+  color: white;
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.3s;
+  font-family: poppins;
+}
+
+.get-started-button:hover {
+  background-color: #0056b3; /* Darker shade on hover */
+}
+
+/* Fullscreen styles */
+.fullscreen {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100vw;
+  height: 100vh;
+  transform: translate(-50%, -50%);
+}
--- a/src/pages/WelcomePage.js
+++ b/src/pages/WelcomePage.js
@@ -0,0 +1,168 @@
+// WelcomePageEditor.js
+import React, { useState } from "react";
+import WelcomePage from "./WelcomePage";
+import { saveWelcomePageConfig } from "../helpers/cafeHelpers"; // Import the API function
+import Switch from "react-switch"; // Import react-switch
+import "./WelcomePageEditor.css";
+
+const WelcomePageEditor = () => {
+  const [image, setImage] = useState("");
+  const [welcomingText, setWelcomingText] = useState("Enjoy your coffee!");
+  const [backgroundColor, setBackgroundColor] = useState("#ffffff");
+  const [textColor, setTextColor] = useState("#000000");
+  const [loading, setLoading] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [isWelcomingPageEnabled, setIsWelcomingPageEnabled] = useState(true); // State for toggle switch
+
+  const handleImageChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setImage(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleTextChange = (e) => {
+    setWelcomingText(e.target.value);
+  };
+
+  const handleColorChange = (e) => {
+    setBackgroundColor(e.target.value);
+  };
+
+  const handleTextColorChange = (e) => {
+    setTextColor(e.target.value);
+  };
+
+  const handleSave = async () => {
+    setLoading(true);
+
+    const details = {
+      image,
+      welcomingText,
+      backgroundColor,
+      textColor,
+      isWelcomingPageEnabled, // Include the toggle state
+    };
+
+    try {
+      const result = await saveWelcomePageConfig(details);
+      console.log("Configuration saved:", result);
+    } catch (error) {
+      console.error("Error saving configuration:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (isFullscreen)
+    return (
+      <WelcomePage
+        image={image}
+        welcomingText={welcomingText}
+        backgroundColor={backgroundColor}
+        textColor={textColor}
+        isFullscreen={true}
+        onGetStarted={() => setIsFullscreen(false)}
+      />
+    );
+
+  return (
+    <div
+      className="welcome-page-editor"
+      style={{ width: "80vw", height: "80vh" }}
+    >
+      <h2>Edit Welcome Page</h2>
+      <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+        <input type="file" accept="image/*" onChange={handleImageChange} />
+        <textarea
+          value={welcomingText}
+          onChange={handleTextChange}
+          placeholder="Enter welcoming text..."
+          style={{ height: "40px", resize: "none" }}
+        />
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+        >
+          <label>
+            Background Color:
+            <input
+              type="color"
+              value={backgroundColor}
+              onChange={handleColorChange}
+            />
+          </label>
+          <label>
+            Text Color:
+            <input
+              type="color"
+              value={textColor}
+              onChange={handleTextColorChange}
+            />
+          </label>
+          <div style={{ display: "flex", alignItems: "center" }}>
+            <span>Enable Welcoming Page:</span>
+            <Switch
+              onChange={() =>
+                setIsWelcomingPageEnabled(!isWelcomingPageEnabled)
+              }
+              checked={isWelcomingPageEnabled}
+              offColor="#888"
+              onColor="#0a74da"
+              uncheckedIcon={false}
+              checkedIcon={false}
+              height={20}
+              width={48}
+            />
+          </div>
+        </div>
+        <button onClick={handleSave} disabled={loading}>
+          {loading ? "Saving..." : "Save Configuration"}
+        </button>
+      </div>
+      <div
+        style={{ width: "100%", height: "100%", position: "relative", flex: 1 }}
+      >
+        {isWelcomingPageEnabled && (
+          <WelcomePage
+            image={image}
+            welcomingText={welcomingText}
+            backgroundColor={backgroundColor}
+            textColor={textColor}
+          />
+        )}
+        <div style={{ position: "absolute", bottom: 0, right: 0 }}>
+          <svg
+            width="100"
+            height="100"
+            style={{ position: "absolute", bottom: 0, right: 0 }}
+            onClick={() => setIsFullscreen(true)}
+          >
+            <g transform="rotate(45 50 50)">
+              <circle cx="50" cy="50" r="40" fill="rgba(0, 0, 0, 0.5)" />
+              <text
+                x="50"
+                y="50"
+                textAnchor="middle"
+                dominantBaseline="middle"
+                fontSize="24"
+                fill="white"
+              >
+                &lt;&gt;
+              </text>
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WelcomePageEditor;
--- a/src/pages/WelcomePageEditor.css
+++ b/src/pages/WelcomePageEditor.css
@@ -0,0 +1,56 @@
+/* WelcomePageEditor.css */
+.welcome-page-editor {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+h2 {
+  margin-bottom: 20px;
+  font-size: 24px;
+  color: #333;
+}
+
+input[type="file"] {
+  margin-bottom: 20px;
+}
+
+textarea {
+  width: 100%;
+  height: 100px; /* Adjust as needed */
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  resize: none;
+  margin-bottom: 20px;
+  font-size: 16px;
+}
+
+textarea:focus {
+  border-color: #007bff; /* Highlight border color on focus */
+  outline: none;
+}
+
+label {
+  margin-bottom: 20px;
+  font-size: 16px;
+}
+
+.welcome-preview {
+  width: 100%;
+  height: 100%;
+  border: 1px dashed #ccc; /* Preview border style */
+  border-radius: 8px;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #ffffff; /* Background for preview area */
+}
--- a/src/pages/WelcomePageEditor.js
+++ b/src/pages/WelcomePageEditor.js
@@ -0,0 +1,142 @@
+// WelcomePageEditor.js
+import React, { useState } from "react";
+import WelcomePage from "./WelcomePage";
+import { saveWelcomePageConfig } from "../helpers/cafeHelpers"; // Import the API function
+import "./WelcomePageEditor.css";
+
+const WelcomePageEditor = () => {
+  const [image, setImage] = useState("");
+  const [welcomingText, setWelcomingText] = useState("Enjoy your coffee!");
+  const [backgroundColor, setBackgroundColor] = useState("#ffffff");
+  const [textColor, setTextColor] = useState("#000000");
+  const [loading, setLoading] = useState(false); // Loading state
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  const handleImageChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setImage(reader.result); // Store the base64 image
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleTextChange = (e) => {
+    setWelcomingText(e.target.value);
+  };
+
+  const handleColorChange = (e) => {
+    setBackgroundColor(e.target.value);
+  };
+
+  const handleTextColorChange = (e) => {
+    setTextColor(e.target.value);
+  };
+
+  const handleSave = async () => {
+    setLoading(true);
+
+    const details = {
+      image,
+      welcomingText,
+      backgroundColor,
+      textColor,
+    };
+
+    try {
+      const result = await saveWelcomePageConfig(details);
+      console.log("Configuration saved:", result);
+    } catch (error) {
+      console.error("Error saving configuration:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (isFullscreen)
+    return (
+      <WelcomePage
+        image={image}
+        welcomingText={welcomingText}
+        backgroundColor={backgroundColor}
+        textColor={textColor}
+        isFullscreen={true}
+        onGetStarted={() => setIsFullscreen(false)}
+      />
+    );
+
+  return (
+    <div
+      className="welcome-page-editor"
+      style={{ width: "80vw", height: "80vh" }}
+    >
+      <h2>Edit Welcome Page</h2>
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        <input type="file" accept="image/*" onChange={handleImageChange} />
+        <textarea
+          value={welcomingText}
+          onChange={handleTextChange}
+          placeholder="Enter welcoming text..."
+          style={{ height: "20px", resize: "none" }} // Reduced height
+        />
+        <div style={{ display: "flex", justifyContent: "space-between" }}>
+          <label>
+            Background Color:
+            <input
+              type="color"
+              value={backgroundColor}
+              onChange={handleColorChange}
+            />
+          </label>
+          <label>
+            Text Color:
+            <input
+              type="color"
+              value={textColor}
+              onChange={handleTextColorChange}
+            />
+          </label>
+        </div>
+        <button onClick={handleSave} disabled={loading}>
+          {loading ? "Saving..." : "Save Configuration"}
+        </button>
+      </div>
+      <div
+        style={{ width: "100%", height: "100%", position: "relative", flex: 1 }}
+      >
+        <WelcomePage
+          image={image}
+          welcomingText={welcomingText}
+          backgroundColor={backgroundColor}
+          textColor={textColor}
+        />
+        <div style={{ position: "absolute", bottom: 0, right: 0 }}>
+          <svg
+            width="100" // Adjust size as needed
+            height="100" // Adjust size as needed
+            style={{ position: "absolute", bottom: 0, right: 0 }}
+            onClick={() => setIsFullscreen(true)}
+          >
+            <g transform="rotate(45 50 50)">
+              <circle cx="50" cy="50" r="40" fill="rgba(0, 0, 0, 0.5)" />
+              <text
+                x="50"
+                y="50"
+                textAnchor="middle"
+                dominantBaseline="middle"
+                fontSize="24"
+                fill="white" // Adjust text color as needed
+              >
+                &lt;&gt;
+              </text>
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WelcomePageEditor;
--- a/src/pages/WelcomePageEditorr.js
+++ b/src/pages/WelcomePageEditorr.js
@@ -0,0 +1,130 @@
+import React, { useRef, useEffect, useState } from "react";
+import styles from "./Cart.module.css";
+import ItemLister from "../components/ItemLister";
+import { ThreeDots, ColorRing } from "react-loader-spinner";
+import { useParams } from "react-router-dom";
+import { useNavigationHelpers } from "../helpers/navigationHelpers";
+import { getTable } from "../helpers/tableHelper.js";
+import { getCartDetails } from "../helpers/itemHelper.js";
+import { getItemsByCafeId } from "../helpers/cartHelpers"; // Import getItemsByCafeId
+import Modal from "../components/Modal"; // Import the reusable Modal component
+
+export default function Cart({}) {
+  const [cartItems, setCartItems] = useState([]);
+  const [totalPrice, setTotalPrice] = useState(0);
+  const [orderType, setOrderType] = useState("serve");
+  const [loading, setLoading] = useState(true);
+  const [isCheckoutLoading, setIsCheckoutLoading] = useState(false); // State for checkout button loading animation
+  const [email, setEmail] = useState("");
+
+  const textareaRef = useRef(null);
+
+  useEffect(() => {
+    const fetchCartItems = async () => {
+      try {
+        setLoading(true);
+        const items = await getCartDetails("8");
+        setLoading(false);
+        console.log(items);
+        if (items) setCartItems(items);
+
+        const initialTotalPrice = items.reduce((total, itemType) => {
+          return (
+            total +
+            itemType.itemList.reduce((subtotal, item) => {
+              return subtotal + item.qty * item.price;
+            }, 0)
+          );
+        }, 0);
+        setTotalPrice(initialTotalPrice);
+      } catch (error) {
+        console.error("Error fetching cart items:", error);
+      }
+    };
+
+    fetchCartItems();
+
+    const textarea = textareaRef.current;
+    if (textarea) {
+      const handleResize = () => {
+        textarea.style.height = "auto";
+        textarea.style.height = `${textarea.scrollHeight}px`;
+      };
+      textarea.addEventListener("input", handleResize);
+      handleResize();
+      return () => textarea.removeEventListener("input", handleResize);
+    }
+  }, []);
+
+  const refreshTotal = async () => {
+    try {
+      const items = await getItemsByCafeId("8");
+      const updatedTotalPrice = items.reduce((total, localItem) => {
+        const cartItem = cartItems.find((itemType) =>
+          itemType.itemList.some((item) => item.itemId === localItem.itemId)
+        );
+
+        if (cartItem) {
+          const itemDetails = cartItem.itemList.find(
+            (item) => item.itemId === localItem.itemId
+          );
+          return total + localItem.qty * itemDetails.price;
+        }
+        return total;
+      }, 0);
+
+      setTotalPrice(updatedTotalPrice);
+    } catch (error) {
+      console.error("Error refreshing total price:", error);
+    }
+  };
+  return (
+    <div className={styles.Cart}>
+      <div style={{ marginTop: "30px" }}></div>
+      <h2 className={styles["Cart-title"]}></h2>
+      <div style={{ marginTop: "-45px" }}></div>
+      {cartItems.map((itemType) => (
+        <ItemLister
+          key={itemType.itemTypeId}
+          refreshTotal={refreshTotal}
+          forCart={true}
+          typeName={itemType.typeName}
+          itemList={itemType.itemList}
+        />
+      ))}
+      <div className={styles.OrderTypeContainer}>
+        {orderType === "serve" && (
+          <input
+            type="text"
+            placeholder="Table Number"
+            className={styles.TableNumberInput}
+          />
+        )}
+      </div>
+
+      <div className={styles.NoteContainer}>
+        <span>Note</span>
+        <span></span>
+      </div>
+
+      <textarea
+        ref={textareaRef}
+        className={styles.NoteInput}
+        placeholder="Add a note..."
+      />
+
+      <div className={styles.TotalContainer}>
+        <span>Total:</span>
+        <span>Rp {totalPrice}</span>
+      </div>
+      <button className={styles.CheckoutButton}>
+        {isCheckoutLoading ? (
+          <ColorRing height="50" width="50" color="white" />
+        ) : (
+          "Checkout"
+        )}
+      </button>
+      <div className={styles.BackToMenu}>Back to menu</div>
+    </div>
+  );
+}