ok

2025-01-11 11:13:04 +07:00
parent 73de85e295
commit da411bd3d2
7 changed files with 402 additions and 495 deletions
--- a/src/components/Carousel.js
+++ b/src/components/Carousel.js
@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import styles from "./Carousel.module.css"; // Import CSS module
+
+const Carousel = ({ items, onSelect }) => {
+  const [selectedIndex, setSelectedIndex] = useState(0); // Start at the first item
+
+  const moveToNext = () => {
+    console.log('aa')
+    if (selectedIndex < items.length - 1) {
+        console.log('bb')
+      setSelectedIndex(selectedIndex + 1);
+      onSelect(selectedIndex + 1); // Send the next index to the parent
+    }
+  };
+
+  const moveToPrev = () => {
+    if (selectedIndex > -1) {
+      setSelectedIndex(selectedIndex - 1);
+      onSelect(selectedIndex - 1); // Send the previous index to the parent
+    }
+  };
+
+  return (
+    <div className={styles.carouselContainer}>
+      <div className={styles.carousel}>
+        {/* Previous Item */}
+        <div
+          className={`${styles.carouselItem} ${styles.prev}`}
+          onClick={moveToPrev}
+          style={{ visibility: selectedIndex === -1 ? "hidden" : "visible" }}
+        >
+          {selectedIndex === -1 ? "+" : items[selectedIndex - 1]?.name || "+"}
+        </div>
+
+        {/* Current Item */}
+        <div className={`${styles.carouselItem} ${styles.center}`}>
+          {selectedIndex >= 0 ? items[selectedIndex]?.name : "+"}
+        </div>
+
+        {/* Next Item */}
+        <div
+          className={`${styles.carouselItem} ${styles.next}`}
+          onClick={moveToNext}
+          style={{
+            visibility: selectedIndex === items.length -1 ? "hidden" : "visible",
+          }}
+        >
+          {selectedIndex < items.length - 1 && items[selectedIndex + 1]?.name}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Carousel;
--- a/src/components/Carousel.module.css
+++ b/src/components/Carousel.module.css
@@ -0,0 +1,75 @@
+/* Carousel.module.css */
+.carouselContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.carousel {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: 600px;
+  overflow: hidden;
+  position: relative;
+}
+
+.carouselItem {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform 0.3s ease-in-out;
+  height: 200px;
+  background-color: #007bff;
+  color: white;
+  font-size: 24px;
+  width: 100%;
+  border-radius: 8px;
+}
+
+.carouselItem.prev,
+.carouselItem.next {
+  transform: scale(0.8);
+}
+
+.carouselItem.center {
+  transform: scale(1);
+  width: 134%;
+}
+
+.prevBtn,
+.nextBtn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: #007bff;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  font-size: 16px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.prevBtn {
+  left: 10px;
+}
+
+.nextBtn {
+  right: 10px;
+}
+
+@media (max-width: 600px) {
+  .carouselItem {
+    font-size: 18px;
+    height: 110px;
+  }
+
+  .prevBtn,
+  .nextBtn {
+    padding: 8px 15px;
+    font-size: 14px;
+  }
+}
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -34,10 +34,10 @@ const ProfileName = styled.h2`
  overflow: hidden;
  white-space: nowrap;
  animation: ${(props) => {
-      if (props.animate === "grow") return gg;
-      if (props.animate === "shrink") return ss;
-      return nn;
-    }}
+    if (props.animate === "grow") return gg;
+    if (props.animate === "shrink") return ss;
+    return nn;
+  }}
    0.5s forwards;
    text-align: left;
 `;
@@ -96,10 +96,10 @@ const ProfileImage = styled.img`
  cursor: pointer;
  z-index: 199;
  animation: ${(props) => {
-      if (props.animate === "grow") return g;
-      if (props.animate === "shrink") return s;
-      return "none";
-    }}
+    if (props.animate === "grow") return g;
+    if (props.animate === "shrink") return s;
+    return "none";
+  }}
    0.5s forwards;
 `;

@@ -219,7 +219,7 @@ const Child = styled.div`

 const Header = ({
  HeaderText,
-  HeaderSize='6vw',
+  HeaderSize = '6vw',
  shopId,
  shopName,
  shopImage,
@@ -235,7 +235,7 @@ const Header = ({
  removeConnectedGuestSides,
  setIsEditMode,
  isEditMode,
-  HeaderMargin='25px'
+  HeaderMargin = '25px'
 }) => {
  const { goToLogin, goToGuestSideLogin, goToAdminCafes } =
    useNavigationHelpers(shopId, tableCode);
@@ -316,9 +316,9 @@ const Header = ({
      </Title>
      <div style={{ visibility: showProfile ? "visible" : "hidden" }}>
        <ProfileImage
-          src={user.username == undefined? shopImage || 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s': "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s"}
+          src={user.username == undefined ? shopImage || 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s' : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s"}
          alt="Profile"
-          onClick={user.username !== undefined?handleImageClick: null}
+          onClick={user.username !== undefined ? handleImageClick : null}
          animate={showRectangle && animate}
        />
        <ProfileName animate={showRectangle && animate}>
@@ -338,7 +338,7 @@ const Header = ({
                </Child>
              )}
              {shopId && user.roleId == 1 && (
-                    <Child onClick={goToAdminCafes}>Dashboard</Child>)}
+                <Child onClick={goToAdminCafes}>Dashboard</Child>)}
              {shopId &&
                user.userId == shopOwnerId &&
                user.username !== undefined &&
@@ -346,25 +346,19 @@ const Header = ({
                  <>
                    <Child hasChildren>
                      {shopName}
-
                      <Child>
                        Mode edit &nbsp;
                        <Switch
-                        borderRadius={0}
+                          borderRadius={0}
                          checked={isEditMode}
                          onChange={() => setIsEditMode(!isEditMode)}
                        />
                      </Child>
-
-                      <Child onClick={() => setModal("welcome_config")}>
-                        Halaman sambutan
-                      </Child>
+                      <Child onClick={() => setModal("reports")}>Laporan</Child>
                      <Child onClick={() => setModal("add_material")}>
                        Stok
                      </Child>
-                      <Child onClick={() => setModal("edit_tables")}>
-                        Denah meja
-                      </Child>
+
                      <Child hasChildren>
                        Kasir
                        <Child onClick={() => setModal("create_clerk")}>
@@ -386,11 +380,18 @@ const Header = ({
                            </Child>
                          ))}
                      </Child>
-                      <Child onClick={() => setModal("payment_option")}>
-                        Opsi pembayaran
+                      <Child hasChildren>
+                        Konfigurasi
+                      <Child onClick={() => setModal("welcome_config")}>
+                        Desain kafe
+                      </Child>
+                      <Child onClick={() => setModal("edit_tables")}>
+                        Daftar meja
+                      </Child>
+                        <Child onClick={() => setModal("payment_option")}>
+                          Metode pembayaran
+                        </Child>
                      </Child>
-
-                      <Child onClick={() => setModal("reports")}>Laporan</Child>
                    </Child>
                  </>
                )}
@@ -400,14 +401,14 @@ const Header = ({
                  <Child hasChildren>
                    {shopName}

-                      <Child>
-                        Mode edit&nbsp;
-                        <Switch
+                    <Child>
+                      Mode edit&nbsp;
+                      <Switch
                        borderRadius={0}
-                          checked={isEditMode}
-                          onChange={() => setIsEditMode(!isEditMode)}
-                        />
-                      </Child>
+                        checked={isEditMode}
+                        onChange={() => setIsEditMode(!isEditMode)}
+                      />
+                    </Child>
                    <Child onClick={() => setModal("add_material")}>
                      stok
                    </Child>
--- a/src/components/PaymentOptions.js
+++ b/src/components/PaymentOptions.js
@@ -6,27 +6,27 @@ import {
  saveCafeDetails,
  setConfirmationStatus,
 } from "../helpers/cafeHelpers";
-import Switch from "react-switch";
+import Switch from "react-switch"; // Import the Switch component

-// 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 [isNeedConfirmationState, setIsNeedConfirmationState] = useState(0);
  const qrPaymentInputRef = useRef(null);
  const qrCodeContainerRef = useRef(null);
-  const [isNeedConfirmation, setIsNeedConfirmation] = useState(false);
  const [cafe, setCafe] = useState({});

-  // Fetch cafe details on mount or shopId change
  useEffect(() => {
    const fetchCafe = async () => {
      try {
        const response = await getCafe(shopId);
        setCafe(response);
        setQrPayment(getImageUrl(response.qrPayment));
-        setIsNeedConfirmation(response.needsConfirmation);
+        console.log(response.needsConfirmation);
+
+        setIsNeedConfirmationState(response.needsConfirmation === true ? 1 : 0); // Set state based on fetched data
        setQrPosition([response.xposition, response.yposition]);
        setQrSize(response.scale);
      } catch (error) {
@@ -88,28 +88,32 @@ const SetPaymentQr = ({ shopId }) => {
    } 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);
+      const response = await setConfirmationStatus(cafe.cafeId, isNeedConfirmationState === 1);
+      setIsNeedConfirmationState(response.needsConfirmation ? 1 : 0); // Update state after saving
    } catch (error) {
      console.error(error);
-      setIsNeedConfirmation(cafe.needsConfirmation);
+      setIsNeedConfirmationState(cafe.needsConfirmation ? 1 : 0); // Fallback to initial value
    }
  };

+  // Handle Switch toggle
+  const handleChange = (checked) => {
+    setIsNeedConfirmationState(checked ? 1 : 0); // Toggle state based on the switch
+  };
+
+  const handleError = () => {
+    setQrPayment('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPsNr0TPq8dHT3nBwDQ6OHQQTrqzVFoeBOmuWfgyErrLbJi6f6CnnYhpNHEvkJ_2X-kyI&usqp=CAU'); // Set your fallback image here
+  };
+
  return (
    <div style={styles.container}>
-      <h2 style={styles.title}>QR pembayaran</h2>
+      <h3 style={styles.title}>Konfigurasi pembayaran</h3>
      <div
        id="qr-code-container"
        ref={qrCodeContainerRef}
+        onClick={() => qrPaymentInputRef.current.click()}
        style={{
          ...styles.qrCodeContainer,
          backgroundImage: `url(${qrPayment})`,
@@ -118,12 +122,12 @@ const SetPaymentQr = ({ shopId }) => {
          backgroundSize: "contain",
        }}
      >
-        <div
-          style={styles.overlayText}
-          onClick={() => qrPaymentInputRef.current.click()}
-        >
-          Click To Change
-        </div>
+        <img
+          src={qrPayment}
+          onError={handleError}
+          alt="QR Payment"
+          style={{ maxWidth: '100%',visibility: 'hidden' }} // hide the img element
+        />
        <input
          type="file"
          accept="image/*"
@@ -132,20 +136,36 @@ const SetPaymentQr = ({ shopId }) => {
          onChange={handleFileChange}
        />
      </div>
-      <div style={styles.resultMessage}>
-        {qrCodeDetected ? <p>QR Code Detected</p> : <p>Tidak ada qr yang terdeteksi</p>}
+      <div style={styles.uploadMessage}>
+        <p>Klik untuk unggah QRIS</p>
      </div>
-      <div style={styles.buttonContainer}>
-        <button onClick={handleSave} style={styles.saveButton}>
-          Save
-        </button>
+      <div style={styles.resultMessage}>
+        {qrCodeDetected && qrPayment !== 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPsNr0TPq8dHT3nBwDQ6OHQQTrqzVFoeBOmuWfgyErrLbJi6f6CnnYhpNHEvkJ_2X-kyI&usqp=CAU' ? <p>QR terdeteksi</p> : <p>Tidak ada qr terdeteksi</p>}
+        {qrCodeDetected && qrPayment !== 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPsNr0TPq8dHT3nBwDQ6OHQQTrqzVFoeBOmuWfgyErrLbJi6f6CnnYhpNHEvkJ_2X-kyI&usqp=CAU' ? <div 
+          onClick={() => qrPaymentInputRef.current.click()} style={styles.uploadButton}>Ganti</div> : <div 
+          onClick={() => qrPaymentInputRef.current.click()} style={styles.uploadButton}>Unggah</div>}
      </div>
      <div style={styles.switchContainer}>
        <h3>Pengecekan ketersediaan ganda</h3>
        <p style={styles.description}>
-        Nyalakan agar kasir memeriksa kembali ketersediaan produk sebelum pelanggan membayar.
+          Nyalakan agar kasir memeriksa kembali ketersediaan produk sebelum pelanggan membayar.
        </p>
-        <Switch onChange={handleChange} checked={isNeedConfirmation} />
+        <Switch
+          onChange={handleChange}
+          checked={isNeedConfirmationState === 1} // Convert to boolean
+          offColor="#888"
+          onColor="#4CAF50"
+          uncheckedIcon={false}
+          checkedIcon={false}
+          height={25}
+          width={50}
+        />
+      </div>
+
+      <div style={styles.buttonContainer}>
+        <button onClick={handleSave} style={styles.saveButton}>
+          Simpan
+        </button>
      </div>
    </div>
  );
@@ -162,40 +182,42 @@ const styles = {
  },
  title: {
    marginBottom: "20px",
-    fontSize: "24px",
    fontWeight: "bold",
  },
  qrCodeContainer: {
+    backgroundColor: '#999999',
+    borderRadius: '20px',
    position: "relative",
-    width: "300px",
-    height: "300px",
+    width: "100%",
+    height: "200px",
    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%",
+  uploadMessage: {
+    fontWeight: 600,
    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",
+  },
+  uploadButton: {
+    paddingRight: '10px',
+    backgroundColor: 'green',
+    borderRadius: '30px',
+    color: 'white',
+    fontWeight: 700,
+    height: '36px',
+    lineHeight: '36px',
+    paddingLeft: '10px',
+    paddingHeight: '10px',
  },
  resultMessage: {
-    marginTop: "20px",
-    textAlign: "center",
+    marginTop: "-24px",
+    textAlign: "left",
+    display: 'flex',
+    justifyContent: 'space-between'
  },
  buttonContainer: {
    marginTop: "20px",
-    textAlign: "center",
+    textAlign: "left",
  },
  saveButton: {
    padding: "10px 20px",
@@ -203,13 +225,13 @@ const styles = {
    backgroundColor: "#28a745",
    color: "#fff",
    border: "none",
-    borderRadius: "4px",
+    borderRadius: "30px",
    cursor: "pointer",
    transition: "background-color 0.3s",
  },
  switchContainer: {
    marginTop: "20px",
-    textAlign: "center",
+    textAlign: "left",
  },
  description: {
    margin: "10px 0",