ok

src/App.js

@@ -58,7 +58,6 @@ function App() {
   const [shopItems, setShopItems] = useState([]);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [modalContent, setModalContent] = useState(null);
-  const [nextModalContent, setNextModalContent] = useState(null);
 
   useEffect(() => {
     const calculateTotalsFromLocalStorage = () => {
@@ -213,6 +212,8 @@ function App() {
       console.log("transaction notification");
       setModal("new_transaction", data);
 
+      let permission = Notification.permission;
+      if (permission != "granted") return;
       navigator.serviceWorker.ready.then((registration) => {
         registration.showNotification("New Transaction", {
           body: `A new transaction was created: ${data.transactionDetails}`, // Customize as needed
@@ -289,10 +290,6 @@ function App() {
 
   // Function to open the modal
   const setModal = (content, params = {}) => {
-    if (modalContent) {
-      setNextModalContent(content);
-      return;
-    } // Prepare query parameters
     const queryParams = new URLSearchParams(location.search);
 
     // Update the modal and any additional params
@@ -329,9 +326,6 @@ function App() {
 
       // Update the URL without the 'modal' parameter
       navigate({ search: queryParams.toString() }, { replace: true });
-
-      if (nextModalContent) setModal(nextModalContent);
-      setNextModalContent("");
     }
   };
 
@@ -373,8 +367,11 @@ function App() {
       }
     };
     const handleLoad = async () => {
-      if (user != null && (user.roleId < 3 || user.roleId > 2)) {
+      const ses = sessionStorage.getItem("notifAsk");
+
+      if (!ses && user != null && (user.roleId < 3 || user.roleId > 2)) {
         await askNotificationPermission();
+        sessionStorage.setItem("notifAsk", true);
       }
     };
     handleLoad();

src/components/ButtonWithReplica.css

@@ -29,7 +29,7 @@
   width: 140px;
   border-radius: 30px;
   position: absolute;
-  background-color: rgb(146, 146, 146); /* Semi-transparent blue */
+  background-color: rgba(146, 146, 146, 0); /* Semi-transparent blue */
   border: none;
   transition: all 0.5s ease-in-out;
   top: 50%;

src/components/ButtonWithReplica.js

@@ -134,6 +134,7 @@ const ButtonWithReplica = ({
       >
         {children}
       </button>
+      <>
         <div className={`replica ${isActive ? "active" : ""}`}></div>
         <QRCodeSVG
           className={`bussinessQR ${isActive ? "active" : ""}`}
@@ -148,6 +149,7 @@ const ButtonWithReplica = ({
         <div className={`price ${isActive ? "active" : ""}`}>
           <h1>{price}</h1>
         </div>
+      </>
     </div>
   );
 };

src/components/ItemType.js

@@ -55,7 +55,9 @@ export default function ItemType({
       <div
         onClick={onClick}
         className={styles["item-type-rect"]}
-        style={{ top: selected ? "-10px" : "initial" }}
+        style={{
+          top: selected ? "-10px" : "initial",
+        }}
       >
         <img
           src={previewUrl}
@@ -89,7 +91,10 @@ export default function ItemType({
         value={name}
         onChange={handleNameChange}
         disabled={!blank}
-        style={{ top: selected ? "-5px" : "initial" }}
+        style={{
+          top: selected ? "-5px" : "initial",
+          borderBottom: selected ? "1px solid #000" : "none",
+        }}
       />
       {blank && (
         <button className={styles["item-type-create"]} onClick={handleCreate}>

src/components/Modal.js

@@ -14,7 +14,7 @@ import MaterialList from "../pages/MaterialList.js";
 import MaterialMutationsPage from "../pages/MaterialMutationsPage.js";
 import Reports from "../pages/Reports.js";
 import NotificationBlocked from "../pages/NotificationBlocked.js";
-
+import WelcomePageEditor from "../pages/WelcomePageEditor.js";
 const Modal = ({ shop, isOpen, onClose, modalContent }) => {
   if (!isOpen) return null;
 
@@ -63,6 +63,7 @@ const Modal = ({ shop, isOpen, onClose, modalContent }) => {
         {modalContent === "update_stock" && (
           <MaterialMutationsPage cafeId={shop.cafeId} />
         )}
+        {modalContent === "welcome_config" && <WelcomePageEditor />}
         {modalContent === "reports" && <Reports cafeId={shop.cafeId} />}
       </div>
     </div>

src/components/Modal.module.css

@@ -13,7 +13,7 @@
 
 .modalContent {
   width: 90%;
-  height: 80%;
+  /* height: 80%; */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   position: relative;
   overflow: visible; /* Add this line to enable scrolling */

src/components/PaymentOptions.js

@@ -1,25 +1,25 @@
 import React, { useState, useRef, useEffect } from "react";
-import jsQR from "jsqr"; // Import jsQR library
+import jsQR from "jsqr";
 import { getImageUrl } from "../helpers/itemHelper";
 import {
   getCafe,
   saveCafeDetails,
   setConfirmationStatus,
-} from "../helpers/cafeHelpers"; // Import the helper function
+} from "../helpers/cafeHelpers";
 import Switch from "react-switch";
 
+// Main Component
 const SetPaymentQr = ({ shopId }) => {
   const [qrPosition, setQrPosition] = useState([50, 50]);
   const [qrSize, setQrSize] = useState(50);
   const [qrPayment, setQrPayment] = useState();
   const [qrCodeDetected, setQrCodeDetected] = useState(false);
   const qrPaymentInputRef = useRef(null);
-  const overlayTextRef = useRef(null);
   const qrCodeContainerRef = useRef(null);
   const [isNeedConfirmation, setIsNeedConfirmation] = useState(false);
-  const [cafe, setCafe] = useState([]);
+  const [cafe, setCafe] = useState({});
 
-  // Use useEffect to detect QR code after qrPayment updates
+  // Fetch cafe details on mount or shopId change
   useEffect(() => {
     const fetchCafe = async () => {
       try {
@@ -29,119 +29,100 @@ const SetPaymentQr = ({ shopId }) => {
         setIsNeedConfirmation(response.needsConfirmation);
         setQrPosition([response.xposition, response.yposition]);
         setQrSize(response.scale);
-        console.log(response);
       } catch (error) {
         console.error("Error fetching cafe:", error);
       }
     };
-
     fetchCafe();
   }, [shopId]);
 
+  // Detect QR code when qrPayment updates
   useEffect(() => {
     if (qrPayment) {
       detectQRCodeFromContainer();
     }
   }, [qrPayment]);
 
+  // Handle file input change
   const handleFileChange = (e) => {
     const file = e.target.files[0];
     if (file) {
-      const newqrPayment = URL.createObjectURL(file); // Create a temporary URL for display
+      const newqrPayment = URL.createObjectURL(file);
       setQrPayment(newqrPayment);
     }
   };
 
+  // Detect QR code from the container
   const detectQRCodeFromContainer = () => {
     const container = qrCodeContainerRef.current;
     const canvas = document.createElement("canvas");
     const context = canvas.getContext("2d");
-
-    // Create an image element to load the background image
     const img = new Image();
-    img.crossOrigin = "Anonymous"; // Handle CORS if needed
+    img.crossOrigin = "Anonymous";
     img.onload = () => {
-      // Set canvas size
       canvas.width = container.offsetWidth;
       canvas.height = container.offsetHeight;
-
-      // Draw image on canvas
       context.drawImage(img, 0, 0, canvas.width, canvas.height);
-
       const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
       const qrCode = jsQR(imageData.data, canvas.width, canvas.height);
-
+      setQrCodeDetected(!!qrCode);
       if (qrCode) {
-        setQrCodeDetected(true);
         console.log("QR Code detected:", qrCode.data);
-      } else {
-        setQrCodeDetected(false);
-        console.log("No QR Code detected");
       }
     };
-    img.src = qrPayment; // Load the image URL
+    img.src = qrPayment;
   };
 
-  const handleSave = () => {
+  // Save cafe details
-    const qrPaymentFile = qrPaymentInputRef.current.files[0]; // Get the selected file for qrPayment
+  const handleSave = async () => {
-
+    const qrPaymentFile = qrPaymentInputRef.current.files[0];
-    // Prepare the details object
     const details = {
       qrPosition,
       qrSize,
-      qrPaymentFile, // Include qrPayment file
+      qrPaymentFile,
     };
 
-    // Call saveCafeDetails function with the updated details object
-    saveCafeDetails(cafe.cafeId, details)
-      .then((response) => {
-        console.log("Cafe details saved:", response);
-        // handleQrSave(qrPosition, qrSize, qrPayment);
-      })
-      .catch((error) => {
-        console.error("Error saving cafe details:", error);
-      });
-  };
-
-  const handleChange = async () => {
-    console.log(isNeedConfirmation);
-    setIsNeedConfirmation(!isNeedConfirmation);
-    console.log(!isNeedConfirmation);
     try {
-      // Wait for the updateItemAvailability response
+      const response = await saveCafeDetails(cafe.cafeId, details);
+      console.log("Cafe details saved:", response);
+    } catch (error) {
+      console.error("Error saving cafe details:", error);
+    }
+  };
+
+  // Toggle confirmation status
+  const handleChange = async () => {
+    try {
       const response = await setConfirmationStatus(
         cafe.cafeId,
         !isNeedConfirmation
       );
-
       setIsNeedConfirmation(response.needsConfirmation);
     } catch (error) {
-      console.log(error);
+      console.error(error);
       setIsNeedConfirmation(cafe.needsConfirmation);
     }
   };
 
   return (
-    <div>
+    <div style={styles.container}>
+      <h2 style={styles.title}>Payment QRIS</h2>
       <div
         id="qr-code-container"
         ref={qrCodeContainerRef}
         style={{
-          position: "relative",
+          ...styles.qrCodeContainer,
-          width: "300px",
+          backgroundImage: `url(${qrPayment})`,
-          height: "300px",
+          backgroundPosition: "center",
-          background: `center center / contain no-repeat url(${qrPayment})`,
+          backgroundRepeat: "no-repeat",
           backgroundSize: "contain",
-          overflow: "hidden",
-          border: "1px solid #ddd",
         }}
       >
         <div
-          ref={overlayTextRef}
           style={styles.overlayText}
           onClick={() => qrPaymentInputRef.current.click()}
         >
-          Click To Change Image
+          Click To Change
         </div>
         <input
           type="file"
@@ -151,12 +132,72 @@ const SetPaymentQr = ({ shopId }) => {
           onChange={handleFileChange}
         />
       </div>
-      <div style={{ marginTop: "20px" }}>
+      <div style={styles.resultMessage}>
         {qrCodeDetected ? <p>QR Code Detected</p> : <p>No QR Code Detected</p>}
-        <div style={{ marginTop: "20px" }}>
+      </div>
-          <button
+      <div style={styles.buttonContainer}>
-            onClick={handleSave}
+        <button onClick={handleSave} style={styles.saveButton}>
-            style={{
+          Save
+        </button>
+      </div>
+      <div style={styles.switchContainer}>
+        <h1>Double Check tem Availability</h1>
+        <p style={styles.description}>
+          Turn on the switch for the clerk to double check before customer pay.
+        </p>
+        <Switch onChange={handleChange} checked={isNeedConfirmation} />
+      </div>
+    </div>
+  );
+};
+
+// Styles
+const styles = {
+  container: {
+    backgroundColor: "white",
+    padding: "20px",
+    borderRadius: "8px",
+    boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
+    textAlign: "center", // Center text and children
+  },
+  title: {
+    marginBottom: "20px",
+    fontSize: "24px",
+    fontWeight: "bold",
+  },
+  qrCodeContainer: {
+    position: "relative",
+    width: "300px",
+    height: "300px",
+    backgroundSize: "contain",
+    border: "1px solid #ddd",
+    overflow: "hidden",
+    margin: "0 auto", // Center the QR code container
+  },
+  overlayText: {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    fontSize: "550%",
+    textAlign: "left",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    color: "rgba(256, 256, 256, 0.5)",
+    padding: "10px",
+    borderRadius: "5px",
+    cursor: "pointer",
+  },
+  resultMessage: {
+    marginTop: "20px",
+    textAlign: "center",
+  },
+  buttonContainer: {
+    marginTop: "20px",
+    textAlign: "center",
+  },
+  saveButton: {
     padding: "10px 20px",
     fontSize: "16px",
     backgroundColor: "#28a745",
@@ -165,37 +206,16 @@ const SetPaymentQr = ({ shopId }) => {
     borderRadius: "4px",
     cursor: "pointer",
     transition: "background-color 0.3s",
-            }}
-            onMouseOver={(e) =>
-              (e.currentTarget.style.backgroundColor = "#218838")
-            }
-            onMouseOut={(e) =>
-              (e.currentTarget.style.backgroundColor = "#28a745")
-            }
-          >
-            Save
-          </button>
-        </div>
-      </div>
-
-      <Switch onChange={() => handleChange()} checked={isNeedConfirmation} />
-    </div>
-  );
-};
-
-const styles = {
-  overlayText: {
-    position: "absolute",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    color: "#fff",
-    padding: "10px",
-    borderRadius: "5px",
-    cursor: "pointer",
   },
-  // Other styles omitted for brevity
+  switchContainer: {
+    marginTop: "20px",
+    textAlign: "center",
+  },
+  description: {
+    margin: "10px 0",
+    fontSize: "14px",
+    color: "#666",
+  },
 };
 
 export default SetPaymentQr;

src/config.js

@@ -1,5 +1,5 @@
 // src/config.js
 
-const API_BASE_URL = "https://2jtmkn-5000.csb.app"; // Replace with your actual backend URL
+const API_BASE_URL = "https://fmcf2m-5000.csb.app"; // Replace with your actual backend URL
 
 export default API_BASE_URL;

src/helpers/cafeHelpers.js

@@ -23,6 +23,40 @@ export async function getCafe(cafeId) {
     console.error("Error:", error);
   }
 }
+// api.js
+export const saveWelcomePageConfig = async (details) => {
+  const formData = new FormData();
+
+  // Append image file if it exists
+  if (details.image) {
+    const blob = await fetch(details.image).then((res) => res.blob());
+    formData.append("image", blob, "welcome-image.png"); // Specify filename if needed
+  }
+
+  // Append other form fields
+  formData.append("welcomingText", details.welcomingText);
+  formData.append("backgroundColor", details.backgroundColor);
+  formData.append("textColor", details.textColor);
+
+  try {
+    const response = await fetch(`${API_BASE_URL}/welcome-config`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${getAuthToken()}`, // Assuming you have an auth token
+      },
+      body: formData,
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to save welcome page configuration");
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.error("Error saving welcome page config:", error);
+    return null;
+  }
+};
 
 export async function getOwnedCafes(userId) {
   try {

src/helpers/transactionHelpers.js

@@ -149,6 +149,30 @@ export async function getTransaction(transactionId) {
   }
 }
 
+export async function getMyTransactions(shopId, demand) {
+  try {
+    const token = getLocalStorage("auth");
+    const response = await fetch(
+      `${API_BASE_URL}/transaction/get-my-transactions`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+
+    if (!response.ok) {
+      return false;
+    }
+
+    const transactions = await response.json();
+    return transactions;
+  } catch (error) {
+    console.error("Error:", error);
+  }
+}
 export async function getTransactions(shopId, demand) {
   try {
     const token = getLocalStorage("auth");

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,6 +131,8 @@ function CafePage({
     );
   else
     return (
+      <>
+        {!isStarted && <WelcomePage></WelcomePage>}
         <div className="App">
           <body className="App-header">
             <Header
@@ -181,6 +206,7 @@ function CafePage({
             />
           )}
         </div>
+      </>
     );
 }
 

src/pages/MaterialList.js

@@ -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",

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)}

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"

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 ||
+                    isPaymentLoading || // Disable if loading
-                    transaction.confirmed === 3 ||
+                    (deviceType === "clerk" &&
-                    isPaymentLoading
+                      transaction.confirmed !== 1 &&
-                  } // Disable button if confirmed (1) or declined (-1) or loading
+                      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" // Display "Confirm has paid" if the transaction is confirmed (1)
+                      "Confirm has paid"
                     ) : 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)
+                      "Confirm item is ready"
                     ) : transaction.confirmed === 3 ? (
-                    "Transaction success" // Display "Item ready" if the transaction is ready (2)
+                      "Transaction success"
                     ) : (
-                    "Confirm availability" // Display "Confirm availability" if the transaction is not confirmed (0)
+                      "Confirm availability"
+                    )
+                  ) : isPaymentLoading ? (
+                    <ColorRing height="50" width="50" color="white" />
+                  ) : transaction.confirmed === 1 &&
+                    !transaction.paymentClaimed ? (
+                    "Claim has paid"
+                  ) : transaction.confirmed === 1 &&
+                    transaction.paymentClaimed ? (
+                    "Verifying your payment"
+                  ) : transaction.confirmed === -1 ? (
+                    "Declined"
+                  ) : transaction.confirmed === -2 ? (
+                    "Canceled"
+                  ) : transaction.confirmed === 2 ? (
+                    "In process"
+                  ) : (
+                    "Transaction success"
                   )}
                 </button>
               </div>

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%);
+}

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;

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 */
+}

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;

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>
+  );
+}