ok

package-lock.json

@@ -10268,8 +10268,7 @@
     "node_modules/html-to-image": {
       "version": "1.11.11",
       "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.11.tgz",
-      "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==",
+      "integrity": "sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA=="
-      "license": "MIT"
     },
     "node_modules/html-webpack-plugin": {
       "version": "5.6.0",

src/components/PaymentOptions.js

@@ -1,440 +1,167 @@
 import React, { useState, useRef, useEffect } from "react";
 import jsQR from "jsqr";
 import { getImageUrl } from "../helpers/itemHelper";
-import { getTables, updateTable, createTable } from "../helpers/tableHelper";
 import {
   getCafe,
   saveCafeDetails,
   setConfirmationStatus,
 } from "../helpers/cafeHelpers";
+import Switch from "react-switch"; // Import the Switch component
 
-import { toPng } from 'html-to-image';
+const SetPaymentQr = ({ shopId, 
-
+  qrCodeUrl }) => {
-const SetPaymentQr = ({ shop }) => {
+  const [qrPosition, setQrPosition] = useState([50, 50]);
-  const [initialPos, setInitialPos] = useState({
+  const [qrSize, setQrSize] = useState(50);
-    left: shop.xposition,
+  const [qrPayment, setQrPayment] = useState();
-    top: shop.yposition,
+  const [qrCodeDetected, setQrCodeDetected] = useState(false);
-  });
+  const [isNeedConfirmationState, setIsNeedConfirmationState] = useState(0);
-
+  const qrPaymentInputRef = useRef(null);
-  const [isViewingQR, setIsViewingQR] = useState(false);
+  const qrCodeContainerRef = useRef(null);
-  const [isConfigFont, setIsConfigFont] = useState(false);
+  const [cafe, setCafe] = useState({});
-  const [fontsize, setfontsize] = useState(shop.fontsize);
-  const [fontcolor, setfontcolor] = useState(shop.fontcolor);
-  const [initialFontPos, setInitialFontPos] = useState({
-    left: shop.fontxposition,
-    top: shop.fontyposition,
-  });
-
-  const [initialSize, setInitialSize] = useState(shop.scale);
-  const [bgImageUrl, setBgImageUrl] = useState(getImageUrl(shop.qrBackground));
-  const qrBackgroundInputRef = useRef(null);
-  const shopUrl = window.location.hostname + "/" + shop.cafeId;
-
-  const generateQRCodeUrl = (tableCode) => {
-    if (tableCode != null) {
-      return `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
-        shopUrl + "/" + tableCode
-      )}`;
-    } else {
-      return `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
-        shopUrl
-      )}`;
-    }
-  };
-
   const [isConfig, setIsConfig] = useState(false);
-  const [isConfigQR, setIsConfigQR] = useState(false);
-  const [isViewTables, setIsViewTables] = useState(false);
-
-  const [tables, setTables] = useState([]);
-
-  const [selectedTable, setSelectedTable] = useState(null);
-
-  const [tableNo, setTableNo] = useState(null);
 
   useEffect(() => {
-    const fetchData = async () => {
+    const fetchCafe = async () => {
       try {
-        console.log(shop);
+        const response = await getCafe(shopId);
-        const fetchedTables = await getTables(shop.cafeId);
+        setCafe(response);
-        setTables(fetchedTables);
+        setQrPayment(getImageUrl(response.qrPayment));
+        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) {
-        console.error("Error fetching tables:", error);
+        console.error("Error fetching cafe:", error);
       }
     };
+    fetchCafe();
+  }, [shopId]);
 
-    fetchData();
+  // Detect QR code when qrPayment updates
-  }, [shop.cafeId]);
+  useEffect(() => {
-
+    if (qrPayment) {
-  const handleSave = () => {
+      detectQRCodeFromContainer();
-    const qrBackgroundFile = qrBackgroundInputRef.current.files[0]; // Get the selected file for qrBackground
+    }
-
+  }, [qrPayment]);
-    // Prepare the details object
-    const details = {
-      qrSize: initialSize,
-      qrPosition: initialPos,
-      qrBackgroundFile,
-      fontsize,
-      fontcolor,
-      fontPosition: initialFontPos,
-    };
-
-    // Call saveCafeDetails function with the updated details object
-    saveCafeDetails(shop.cafeId, details)
-      .then((response) => {
-        console.log("Cafe details saved:", response);
-      })
-      .catch((error) => {
-        console.error("Error saving cafe details:", error);
-      });
-  };
-
-
-  const handlePositionChange = (e) => {
-    const { name, value } = e.target;
-    setInitialPos((prevPosition) => ({
-      ...prevPosition,
-      [name]: parseFloat(value).toFixed(2),
-    }));
-  };
-
-  const handleFontPositionChange = (e) => {
-    const { name, value } = e.target;
-    setInitialFontPos((prevPosition) => ({
-      ...prevPosition,
-      [name]: parseFloat(value).toFixed(2),
-    }));
-  };
-
-  const handleSizeChange = (e) => {
-    setInitialSize(parseFloat(e.target.value).toFixed(2));
-  };
-
-  const handleFontSizeChange = (e) => {
-    setfontsize(parseFloat(e.target.value).toFixed(2));
-  };
 
+  // Handle file input change
   const handleFileChange = (e) => {
     const file = e.target.files[0];
     if (file) {
-      const newBgImage = URL.createObjectURL(file); // Create a temporary URL for display
+      const newqrPayment = URL.createObjectURL(file);
-      setBgImageUrl(newBgImage);
+      setQrPayment(newqrPayment);
     }
   };
 
-  const handleCreate = async () => {
+  // Detect QR code from the container
-    // if (newTable) {
+  const detectQRCodeFromContainer = () => {
-      try {
+    const container = qrCodeContainerRef.current;
-        const createdTable = await createTable(shop.cafeId, {
+    const canvas = document.createElement("canvas");
-          // ...newTable,
+    const context = canvas.getContext("2d");
-          tableNo,
+    const img = new Image();
-        });
+    img.crossOrigin = "Anonymous";
-        setTables([...tables, createdTable]);
+    img.onload = () => {
-        setTableNo("");
+      canvas.width = container.offsetWidth;
-      } catch (error) {
+      canvas.height = container.offsetHeight;
-        console.error("Error creating table:", error);
+      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) {
+        console.log("QR Code detected:", qrCode.data);
       }
+    };
+    img.src = qrPayment;
+  };
+
+  // Save cafe details
+  const handleSave = async () => {
+    const qrPaymentFile = qrPaymentInputRef.current.files[0];
+    const details = {
+      qrPosition,
+      qrSize,
+      qrPaymentFile,
+    };
+
+    try {
+      const response = await saveCafeDetails(cafe.cafeId, details);
+      console.log("Cafe details saved:", response);
+    } catch (error) {
+      console.error("Error saving cafe details:", error);
+    }
+
+    try {
+      const response = await setConfirmationStatus(cafe.cafeId, isNeedConfirmationState === 1);
+      setIsNeedConfirmationState(response.needsConfirmation ? 1 : 0); // Update state after saving
+    } catch (error) {
+      console.error(error);
+      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
   };
 
-  function downloadQrCodeContainer({ selectedTable, shop }) {
-    const node = document.getElementById('qr-code-container');
-  
-    if (!node) return;
-  
-    const isTableSelected = selectedTable != null;
-  
-    toPng(node, { pixelRatio: 2 }) // Adjust pixel ratio for higher resolution
-      .then((dataUrl) => {
-        const link = document.createElement('a');
-        link.href = dataUrl;
-  
-        // Set the file name based on whether selectedTable exists
-        link.download = isTableSelected 
-          ? `QR Meja (${selectedTable.tableNo}).png` 
-          : `QR ${shop.name}.png`;
-  
-        link.click();
-      })
-      .catch((err) => {
-        console.error('Could not download the image', err);
-      })
-  }
-  
-  
   return (
     <div style={styles.container}>
-      <h3 style={styles.title}>QR kedai dan meja</h3>
+      <h3 style={styles.title}>Konfigurasi pembayaran</h3>
-
       <div
         id="qr-code-container"
+        ref={qrCodeContainerRef}
+        onClick={() => qrPaymentInputRef.current.click()}
         style={{
-          background: `center center / contain no-repeat url(${bgImageUrl})`,
-          backgroundSize: "contain",
-          border: "1px solid #ddd",
-
           ...styles.qrCodeContainer,
-          backgroundImage: `url(${bgImageUrl})`,
+          backgroundImage: `url(${qrPayment})`,
           backgroundPosition: "center",
           backgroundRepeat: "no-repeat",
           backgroundSize: "contain",
         }}
       >
-        <img
-          src={generateQRCodeUrl(selectedTable?.tableCode || null)}
-          alt="QR Code"
-          style={{
-            position: "absolute",
-            width: `${initialSize}%`,
-            left: `${initialPos.left}%`,
-            top: `${initialPos.top}%`,
-            transform: "translate(-50%, -50%)",
-          }} />
-        <div style={{
-          transformOrigin: 'left',
-          transform: `scaleX(${initialFontPos.left > 50 ? -1 : 1})`,
-          position: "absolute",
-          fontSize: `${fontsize * 3}%`,
-          left: `${initialFontPos.left}%`,
-          top: `${initialFontPos.top}%`,
-          textAlign: initialFontPos.left > 50 ? 'right' : 'left'
-        }}>
-          <h1 style={{
-            visibility: !selectedTable && isViewingQR ? 'hidden' : 'visible',
-            transform: `scaleX(${initialFontPos.left > 50 ? -1 : 1})`,
-            width: '200%',
-            lineHeight: 0,
-            fontFamily: 'Plus Jakarta Sans',
-            color: fontcolor
-          }} >{selectedTable == null ? (isConfigFont ? 'Nomor meja' : '') : selectedTable.tableNo}</h1>
-        </div>
         <input
           type="file"
           accept="image/*"
-          ref={qrBackgroundInputRef}
+          ref={qrPaymentInputRef}
           style={{ display: "none" }}
           onChange={handleFileChange}
         />
       </div>
-      {!isViewingQR ?
-      <>
       <div style={styles.uploadMessage}>
         <p>Klik untuk ganti background</p>
       </div>
       <div style={styles.resultMessage}>
-        <p onClick={() => {setIsConfig(!isConfig); setIsConfigQR(false); setIsConfigFont(false)}}> {isConfig ? '˅' : '˃'} Konfigurasi</p>
+        {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>}
-        <div
+        {qrCodeDetected && qrPayment !== 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPsNr0TPq8dHT3nBwDQ6OHQQTrqzVFoeBOmuWfgyErrLbJi6f6CnnYhpNHEvkJ_2X-kyI&usqp=CAU' ? <div
-          onClick={() => qrBackgroundInputRef.current.click()} style={styles.uploadButton}>Ganti</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}>
-        {isConfig &&
+        <p style={styles.description}>
-          <div style={{ marginLeft: '15px' }}>
+          Nyalakan agar kasir memeriksa kembali ketersediaan produk sebelum pelanggan membayar.
-            <p style={styles.description} onClick={() => { setIsConfigQR(!isConfigQR); setIsConfigFont(false) }}>
-              {isConfigQR ? '˅' : '˃'} Konfigurasi QR
-            </p>
-            {isConfigQR && <>
-              <div style={styles.sliderContainer}>
-                <label style={styles.label}>
-                  QR Code Size:
-                  <div style={styles.sliderWrapper}>
-                    <span style={styles.labelStart}>10%</span>
-                    <input
-                      type="range"
-                      step="0.25"
-                      min="10"
-                      max="100"
-                      value={initialSize}
-                      onChange={handleSizeChange}
-                      style={styles.input}
-                    />
-                    <span style={styles.value}>{initialSize}%</span>
-                  </div>
-                </label>
-              </div>
-              <div style={styles.sliderContainer}>
-                <label style={styles.label}>
-                  QR Code Position X:
-                  <div style={styles.sliderWrapper}>
-                    <span style={styles.labelStart}>0%</span>
-                    <input
-                      type="range"
-                      step="0.25"
-                      name="left"
-                      min="0"
-                      max="100"
-                      value={initialPos.left}
-                      onChange={handlePositionChange}
-                      style={styles.input}
-                    />
-                    <span style={styles.value}>{initialPos.left}%</span>
-                  </div>
-                </label>
-              </div>
-              <div style={styles.sliderContainer}>
-                <label style={styles.label}>
-                  QR Code Position Y:
-                  <div style={styles.sliderWrapper}>
-                    <span style={styles.labelStart}>0%</span>
-                    <input
-                      type="range"
-                      step="0.25"
-                      name="top"
-                      min="0"
-                      max="100"
-                      value={initialPos.top}
-                      onChange={handlePositionChange}
-                      style={styles.input}
-                    />
-                    <span style={styles.value}>{initialPos.top}%</span>
-                  </div>
-                </label>
-              </div>
-            </>}
-
-            <p style={styles.description} onClick={() => { setIsConfigFont(!isConfigFont); setIsConfigQR(false) }}>
-              {isConfigFont ? '˅' : '˃'} Konfigurasi nomor
-            </p>
-            {isConfigFont && (
-              <>
-                <div style={styles.sliderContainer}>
-                  <label style={styles.label}>
-                    Ukuran nomor meja:
-                    <div style={styles.sliderWrapper}>
-                      <span style={styles.labelStart}>10%</span>
-                      <input
-                        type="range"
-                        step="0.25"
-                        min="10"
-                        max="100"
-                        value={fontsize}
-                        onChange={handleFontSizeChange}
-                        style={styles.input}
-                      />
-                      <span style={styles.value}>{fontsize}%</span>
-                    </div>
-                  </label>
-                </div>
-                <div style={styles.sliderContainer}>
-                  <label style={styles.label}>
-                    Posisi nomor meja - horizontal:
-                    <div style={styles.sliderWrapper}>
-                      <span style={styles.labelStart}>0%</span>
-                      <input
-                        type="range"
-                        step="0.25"
-                        name="left"
-                        min="0"
-                        max="100"
-                        value={initialFontPos.left}
-                        onChange={handleFontPositionChange}
-                        style={styles.input}
-                      />
-                      <span style={styles.value}>{initialFontPos.left}%</span>
-                    </div>
-                  </label>
-                </div>
-                <div style={styles.sliderContainer}>
-                  <label style={styles.label}>
-                    Posisi nomor meja - vertikal:
-                    <div style={styles.sliderWrapper}>
-                      <span style={styles.labelStart}>0%</span>
-                      <input
-                        type="range"
-                        step="0.25"
-                        name="top"
-                        min="0"
-                        max="100"
-                        value={initialFontPos.top}
-                        onChange={handleFontPositionChange}
-                        style={styles.input}
-                      />
-                      <span style={styles.value}>{initialFontPos.top}%</span>
-                    </div>
-                  </label>
-                </div>
-                <div style={styles.sliderContainer}>
-                  <label style={styles.label}>
-                    Warna nomor meja:
-                    <div style={styles.sliderWrapper}>
-                      <input
-                        type="color"
-                        value='#FFFFFF' // This should be the state holding the selected font color
-                        onChange={(e) => setfontcolor(e.target.value)} // Update the font color state
-                        style={styles.colorInput} // Add your styles for the color input if needed
-                      />
-                      <span style={styles.value}>{fontcolor}</span> {/* Display the selected color value */}
-                    </div>
-                  </label>
-                </div>
-              </>
-            )}
-
-
-          </div>
-        }
-        <p style={styles.description} onClick={() => setIsViewTables(!isViewTables)}>
-          {isViewTables ? '˅' : '˃'} Daftar meja
         </p>
-
+        <Switch
-        {isViewTables &&
+          onChange={handleChange}
-          <div style={{marginTop: '34px', marginLeft: '15px'}}>
+          checked={isNeedConfirmationState === 1} // Convert to boolean
-            <div style={styles.resultMessage}>
+          offColor="#888"
-              <input style={{borderRadius: '12px', paddingLeft: '13px', marginRight: '10px'}} placeholder="Meja A1" onChange={(e) => setTableNo(e.target.value)} value={tableNo}/>
+          onColor="#4CAF50"
-              <div
+          uncheckedIcon={false}
-                onClick={handleCreate} style={styles.uploadButton}>Buat meja</div>
+          checkedIcon={false}
-            </div>
+          height={25}
-            {tables && tables
+          width={50}
-              .filter((table) => table.tableNo !== 0)
+        />
-              .map((table) => (
-                <li
-                  key={table.tableId}
-                  style={{
-                    backgroundColor:
-                      table.tableId === selectedTable?.tableId
-                        ? "lightblue"
-                        : "white",
-                    marginBottom: "10px",
-                    padding: "10px",
-                    borderRadius: "4px",
-                    boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
-                    cursor: "pointer",
-                    listStyle: 'square'
-                  }}
-                  onClick={() => setSelectedTable(selectedTable == table ? null : table)}
-                >
-                  <div style={{ marginBottom: "10px" }}>
-                    {table.tableNo}
-                  </div>
-                </li>
-              ))
-            }
-          </div>
-        }
       </div>
+
       <div style={styles.buttonContainer}>
         <button onClick={handleSave} style={styles.saveButton}>
           Simpan
         </button>
-        <button onClick={()=>setIsViewingQR(true)} style={styles.saveButton}>
-          Download QR {selectedTable? 'meja' : 'kedai'}
-        </button>
       </div>
-      </> :
-      <>
-      <div style={styles.uploadMessage}>
-        <p>QR ini akan menjadi identifikasi bahwa pelanggan memesan dari {selectedTable? `(${selectedTable?.tableNo})` : 'link kafe ini. Untuk mengantarkan pelanggan ke meja yang teridentifikasi, anda perlu membuat meja.'}</p>
-      </div>
-      <div style={styles.buttonContainer}>
-        <button onClick={()=>downloadQrCodeContainer({selectedTable, shop})} style={styles.saveButton}>
-          Download QR {selectedTable? 'meja' : 'kedai'}
-        </button>
-      </div>
-      <div style={styles.backButtonContainer}>
-        <p onClick={()=>setIsViewingQR(false)} >
-          Kembali
-        </p>
-      </div>
-      </>
-      }
     </div>
   );
 };
@@ -442,10 +169,6 @@ const SetPaymentQr = ({ shop }) => {
 // Styles
 const styles = {
   container: {
-    overflowY: 'auto',
-    overflowX: 'hidden',
-    maxHeight: '100%',
-    width: '100%',
     backgroundColor: "white",
     padding: "20px",
     borderRadius: "8px",
@@ -469,7 +192,6 @@ const styles = {
   uploadMessage: {
     fontWeight: 600,
     textAlign: "left",
-    fontSize: "15px"
   },
   uploadButton: {
     paddingRight: '10px',
@@ -484,7 +206,6 @@ const styles = {
   },
   resultMessage: {
     marginTop: "-24px",
-    marginBottom: "10px",
     textAlign: "left",
     display: 'flex',
     justifyContent: 'space-between'
@@ -492,18 +213,9 @@ const styles = {
   buttonContainer: {
     marginTop: "20px",
     textAlign: "left",
-    display: 'flex',
-    justifyContent: 'space-evenly'
-  },
-  backButtonContainer: {
-    marginTop: "2px",
-    marginBottom: "-10px",
-    textAlign: "left",
-    display: 'flex',
-    justifyContent: 'space-evenly'
   },
   saveButton: {
-    padding: "10px 15px",
+    padding: "10px 20px",
     fontSize: "16px",
     backgroundColor: "#28a745",
     color: "#fff",
@@ -514,10 +226,11 @@ const styles = {
   },
   switchContainer: {
     textAlign: "left",
-    marginTop: '-15px'
   },
   description: {
     margin: "10px 0",
+    fontSize: "14px",
+    color: "#666",
   },
   sliderContainer: {
     marginBottom: "20px",

src/components/TablesPage.js

@@ -1,14 +1,56 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useRef, useEffect } from "react";
+import jsQR from "jsqr";
+import { getImageUrl } from "../helpers/itemHelper";
 import { getTables, updateTable, createTable } from "../helpers/tableHelper";
-import TableCanvas from "./TableCanvas";
+import {
-import TableList from "./TableList";
+  getCafe,
+  saveCafeDetails,
+  setConfirmationStatus,
+} from "../helpers/cafeHelpers";
+
+import { toPng } from 'html-to-image';
+
+const SetPaymentQr = ({ shop }) => {
+  const [initialPos, setInitialPos] = useState({
+    left: shop.xposition,
+    top: shop.yposition,
+  });
+
+  const [isViewingQR, setIsViewingQR] = useState(false);
+  const [isConfigFont, setIsConfigFont] = useState(false);
+  const [fontsize, setfontsize] = useState(shop.fontsize);
+  const [fontcolor, setfontcolor] = useState(shop.fontcolor);
+  const [initialFontPos, setInitialFontPos] = useState({
+    left: shop.fontxposition,
+    top: shop.fontyposition,
+  });
+
+  const [initialSize, setInitialSize] = useState(shop.scale);
+  const [bgImageUrl, setBgImageUrl] = useState(getImageUrl(shop.qrBackground));
+  const qrBackgroundInputRef = useRef(null);
+  const shopUrl = window.location.hostname + "/" + shop.cafeId;
+
+  const generateQRCodeUrl = (tableCode) => {
+    if (tableCode != null) {
+      return `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
+        shopUrl + "/" + tableCode
+      )}`;
+    } else {
+      return `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(
+        shopUrl
+      )}`;
+    }
+  };
+
+  const [isConfig, setIsConfig] = useState(false);
+  const [isConfigQR, setIsConfigQR] = useState(false);
+  const [isViewTables, setIsViewTables] = useState(false);
 
-const TablesPage = ({ shop }) => {
   const [tables, setTables] = useState([]);
+
   const [selectedTable, setSelectedTable] = useState(null);
-  const [newTable, setNewTable] = useState(null);
+
-  const [originalTables, setOriginalTables] = useState([]);
+  const [tableNo, setTableNo] = useState(null);
-  const [tableNo, setTableNo] = useState(""); // State for table name
 
   useEffect(() => {
     const fetchData = async () => {
@@ -16,7 +58,6 @@ const TablesPage = ({ shop }) => {
         console.log(shop);
         const fetchedTables = await getTables(shop.cafeId);
         setTables(fetchedTables);
-        setOriginalTables(fetchedTables);
       } catch (error) {
         console.error("Error fetching tables:", error);
       }
@@ -25,111 +66,63 @@ const TablesPage = ({ shop }) => {
     fetchData();
   }, [shop.cafeId]);
 
-  const handleAddTable = () => {
+  const handleSave = () => {
-    const nextId = Math.random().toString(36).substr(2, 11);
+    const qrBackgroundFile = qrBackgroundInputRef.current.files[0]; // Get the selected file for qrBackground
 
-    setTables(originalTables);
+    // Prepare the details object
-    setNewTable({
+    const details = {
-      tableId: nextId,
+      qrSize: initialSize,
-      xposition: 100,
+      qrPosition: initialPos,
-      yposition: 100,
+      qrBackgroundFile,
-      tableNo: nextId,
+      fontsize,
-    });
+      fontcolor,
-    setSelectedTable(null);
+      fontPosition: initialFontPos,
-    setTableNo(""); // Reset table name
+    };
-  };
 
-  const moveTable = (direction) => {
+    // Call saveCafeDetails function with the updated details object
-    if (!selectedTable && !newTable) return;
+    saveCafeDetails(shop.cafeId, details)
-
+      .then((response) => {
-    const moveAmount = 10;
+        console.log("Cafe details saved:", response);
-    const { xposition, yposition } = selectedTable || newTable;
+      })
-    let newX = xposition;
+      .catch((error) => {
-    let newY = yposition;
+        console.error("Error saving cafe details:", error);
-
-    switch (direction) {
-      case "left":
-        newX = xposition - moveAmount;
-        break;
-      case "right":
-        newX = xposition + moveAmount;
-        break;
-      case "up":
-        newY = yposition - moveAmount;
-        break;
-      case "down":
-        newY = yposition + moveAmount;
-        break;
-      default:
-        break;
-    }
-
-    if (newTable) {
-      setNewTable({
-        ...newTable,
-        xposition: newX,
-        yposition: newY,
-      });
-    } else if (selectedTable) {
-      setTables(
-        tables.map((table) =>
-          table.tableId === selectedTable.tableId
-            ? { ...table, xposition: newX, yposition: newY }
-            : table
-        )
-      );
-      setSelectedTable({
-        ...selectedTable,
-        xposition: newX,
-        yposition: newY,
       });
+  };
+
+
+  const handlePositionChange = (e) => {
+    const { name, value } = e.target;
+    setInitialPos((prevPosition) => ({
+      ...prevPosition,
+      [name]: parseFloat(value).toFixed(2),
+    }));
+  };
+
+  const handleFontPositionChange = (e) => {
+    const { name, value } = e.target;
+    setInitialFontPos((prevPosition) => ({
+      ...prevPosition,
+      [name]: parseFloat(value).toFixed(2),
+    }));
+  };
+
+  const handleSizeChange = (e) => {
+    setInitialSize(parseFloat(e.target.value).toFixed(2));
+  };
+
+  const handleFontSizeChange = (e) => {
+    setfontsize(parseFloat(e.target.value).toFixed(2));
+  };
+
+  const handleFileChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      const newBgImage = URL.createObjectURL(file); // Create a temporary URL for display
+      setBgImageUrl(newBgImage);
     }
   };
 
-  const handleSelectTable = (event) => {
+  const handleCreate = async () => {
-    const canvas = event.target;
-    const rect = canvas.getBoundingClientRect();
-    const x = event.clientX - rect.left;
-    const y = event.clientY - rect.top;
-
-    const clickedTable = tables.find(
-      (table) =>
-        x >= table.xposition &&
-        x <= table.xposition + 40 &&
-        y >= table.yposition &&
-        y <= table.yposition + 30
-    );
-
-    if (clickedTable) {
-      setSelectedTable(clickedTable);
-      setNewTable(null);
-      setTableNo(clickedTable.tableNo || ""); // Set table name if exists
-    } else if (newTable) {
-      setSelectedTable(newTable);
-      setTableNo(newTable.tableNo || ""); // Set table name if exists
-    }
-  };
-
-  const handleSelect = (table) => {
-    console.log(table);
-    setSelectedTable(null);
-    setSelectedTable(table);
-    setNewTable(null);
-    setTables(originalTables);
-    if (table.tableNo != 0)
-      setTableNo(table.tableNo || ""); // Set table name if exists
-    else setTableNo(0);
-    console.log(table.tableNo);
-  };
-
-  const handleCancel = () => {
-    setSelectedTable(null);
-    setNewTable(null);
-    setTables(originalTables);
-    setTableNo(""); // Reset table name
-  };
-
-  const handleSave = async () => {
     // if (newTable) {
       try {
         const createdTable = await createTable(shop.cafeId, {
@@ -137,81 +130,423 @@ const TablesPage = ({ shop }) => {
           tableNo,
         });
         setTables([...tables, createdTable]);
-        setOriginalTables([...tables, createdTable]);
+        setTableNo("");
-        setNewTable(null);
-        setTableNo(""); // Reset table name
       } catch (error) {
         console.error("Error creating table:", error);
       }
-    // } else if (selectedTable) {
-    //   try {
-    //     const updatedTable = await updateTable(shop.cafeId, {
-    //       ...selectedTable,
-    //       tableNo,
-    //     });
-    //     setTables(
-    //       tables.map((table) =>
-    //         table.tableId === updatedTable.tableId ? updatedTable : table
-    //       )
-    //     );
-    //     setOriginalTables(
-    //       tables.map((table) =>
-    //         table.tableId === updatedTable.tableId ? updatedTable : table
-    //       )
-    //     );
-    //     setSelectedTable(null);
-    //     setTableNo(""); // Reset table name
-    //   } catch (error) {
-    //     console.error("Error updating table:", error);
-    //   }
-    // }
-  };
-
-  const handleSetTableNo = (event) => {
-    const newValue = event.target.value;
-    // Prevent setting value to '0' or starting with '0'
-    if (newValue === "" || /^[1-9][0-9]*$/.test(newValue)) {
-      setTableNo(newValue);
-    }
   };
 
+  function downloadQrCodeContainer({ selectedTable, shop }) {
+    const node = document.getElementById('qr-code-container');
+  
+    if (!node) return;
+  
+    const isTableSelected = selectedTable != null;
+  
+    toPng(node, { pixelRatio: 2 }) // Adjust pixel ratio for higher resolution
+      .then((dataUrl) => {
+        const link = document.createElement('a');
+        link.href = dataUrl;
+  
+        // Set the file name based on whether selectedTable exists
+        link.download = isTableSelected 
+          ? `QR Meja (${selectedTable.tableNo}).png` 
+          : `QR ${shop.name}.png`;
+  
+        link.click();
+      })
+      .catch((err) => {
+        console.error('Could not download the image', err);
+      })
+  }
+  
+  
   return (
-    <div
+    <div style={styles.container}>
-      style={{
+      <h3 style={styles.title}>QR kedai dan meja</h3>
-        overflowX: "hidden", // Correct property name for horizontal overflow
+
-        backgroundColor: "#e9e9e9", // Remove duplicate property
+      <div
-        display: "flex",
+        id="qr-code-container"
-        flexDirection: "column",
+        style={{
-        justifyContent: "center",
+          background: `center center / contain no-repeat url(${bgImageUrl})`,
-        fontSize: "calc(10px + 2vmin)",
+          backgroundSize: "contain",
-        color: "rgba(88, 55, 50, 1)",
+          border: "1px solid #ddd",
-        height: "100%",
+
-      }}
+          ...styles.qrCodeContainer,
-    >
+          backgroundImage: `url(${bgImageUrl})`,
-      {/* <TableCanvas
+          backgroundPosition: "center",
-        isAdmin={true}
+          backgroundRepeat: "no-repeat",
-        tables={tables}
+          backgroundSize: "contain",
-        selectedTable={selectedTable}
+        }}
-        newTable={newTable}
+      >
-        setTableNo={setTableNo}
+        <img
-        handleSelectTable={handleSelectTable}
+          src={generateQRCodeUrl(selectedTable?.tableCode || null)}
-        handleAddTable={handleAddTable}
+          alt="QR Code"
-        moveTable={moveTable}
+          style={{
-        handleSave={handleSave}
+            position: "absolute",
-        handleCancel={handleCancel}
+            width: `${initialSize}%`,
-        handleSetTableNo={handleSetTableNo}
+            left: `${initialPos.left}%`,
-        tableNo={tableNo}
+            top: `${initialPos.top}%`,
-      /> */}
+            transform: "translate(-50%, -50%)",
-      <TableList
+          }} />
-        shop={shop}
+        <div style={{
-        tables={tables}
+          transformOrigin: 'left',
-        onSelectTable={handleSelect}
+          transform: `scaleX(${initialFontPos.left > 50 ? -1 : 1})`,
-        selectedTable={selectedTable}
+          position: "absolute",
-        handleSetTableNo={handleSetTableNo}
+          fontSize: `${fontsize * 3}%`,
-        handleAddTable={handleSave}
+          left: `${initialFontPos.left}%`,
-      />
+          top: `${initialFontPos.top}%`,
+          textAlign: initialFontPos.left > 50 ? 'right' : 'left'
+        }}>
+          <h1 style={{
+            visibility: !selectedTable && isViewingQR ? 'hidden' : 'visible',
+            transform: `scaleX(${initialFontPos.left > 50 ? -1 : 1})`,
+            width: '200%',
+            lineHeight: 0,
+            fontFamily: 'Plus Jakarta Sans',
+            color: fontcolor
+          }} >{selectedTable == null ? (isConfigFont ? 'Nomor meja' : '') : selectedTable.tableNo}</h1>
+        </div>
+        <input
+          type="file"
+          accept="image/*"
+          ref={qrBackgroundInputRef}
+          style={{ display: "none" }}
+          onChange={handleFileChange}
+        />
+      </div>
+      {!isViewingQR ?
+      <>
+      <div style={styles.uploadMessage}>
+        <p>Klik untuk ganti background</p>
+      </div>
+      <div style={styles.resultMessage}>
+        <p onClick={() => {setIsConfig(!isConfig); setIsConfigQR(false); setIsConfigFont(false)}}> {isConfig ? '˅' : '˃'} Konfigurasi</p>
+        <div
+          onClick={() => qrBackgroundInputRef.current.click()} style={styles.changeButton}>Ganti</div>
+      </div>
+      <div style={styles.switchContainer}>
+        {isConfig &&
+          <div style={{ marginLeft: '15px' }}>
+            <p style={styles.description} onClick={() => { setIsConfigQR(!isConfigQR); setIsConfigFont(false) }}>
+              {isConfigQR ? '˅' : '˃'} Konfigurasi QR
+            </p>
+            {isConfigQR && <>
+              <div style={styles.sliderContainer}>
+                <label style={styles.label}>
+                  QR Code Size:
+                  <div style={styles.sliderWrapper}>
+                    <span style={styles.labelStart}>10%</span>
+                    <input
+                      type="range"
+                      step="0.25"
+                      min="10"
+                      max="100"
+                      value={initialSize}
+                      onChange={handleSizeChange}
+                      style={styles.input}
+                    />
+                    <span style={styles.value}>{initialSize}%</span>
+                  </div>
+                </label>
+              </div>
+              <div style={styles.sliderContainer}>
+                <label style={styles.label}>
+                  QR Code Position X:
+                  <div style={styles.sliderWrapper}>
+                    <span style={styles.labelStart}>0%</span>
+                    <input
+                      type="range"
+                      step="0.25"
+                      name="left"
+                      min="0"
+                      max="100"
+                      value={initialPos.left}
+                      onChange={handlePositionChange}
+                      style={styles.input}
+                    />
+                    <span style={styles.value}>{initialPos.left}%</span>
+                  </div>
+                </label>
+              </div>
+              <div style={styles.sliderContainer}>
+                <label style={styles.label}>
+                  QR Code Position Y:
+                  <div style={styles.sliderWrapper}>
+                    <span style={styles.labelStart}>0%</span>
+                    <input
+                      type="range"
+                      step="0.25"
+                      name="top"
+                      min="0"
+                      max="100"
+                      value={initialPos.top}
+                      onChange={handlePositionChange}
+                      style={styles.input}
+                    />
+                    <span style={styles.value}>{initialPos.top}%</span>
+                  </div>
+                </label>
+              </div>
+            </>}
+
+            <p style={styles.description} onClick={() => { setIsConfigFont(!isConfigFont); setIsConfigQR(false) }}>
+              {isConfigFont ? '˅' : '˃'} Konfigurasi nomor
+            </p>
+            {isConfigFont && (
+              <>
+                <div style={styles.sliderContainer}>
+                  <label style={styles.label}>
+                    Ukuran nomor meja:
+                    <div style={styles.sliderWrapper}>
+                      <span style={styles.labelStart}>10%</span>
+                      <input
+                        type="range"
+                        step="0.25"
+                        min="10"
+                        max="100"
+                        value={fontsize}
+                        onChange={handleFontSizeChange}
+                        style={styles.input}
+                      />
+                      <span style={styles.value}>{fontsize}%</span>
+                    </div>
+                  </label>
+                </div>
+                <div style={styles.sliderContainer}>
+                  <label style={styles.label}>
+                    Posisi nomor meja - horizontal:
+                    <div style={styles.sliderWrapper}>
+                      <span style={styles.labelStart}>0%</span>
+                      <input
+                        type="range"
+                        step="0.25"
+                        name="left"
+                        min="0"
+                        max="100"
+                        value={initialFontPos.left}
+                        onChange={handleFontPositionChange}
+                        style={styles.input}
+                      />
+                      <span style={styles.value}>{initialFontPos.left}%</span>
+                    </div>
+                  </label>
+                </div>
+                <div style={styles.sliderContainer}>
+                  <label style={styles.label}>
+                    Posisi nomor meja - vertikal:
+                    <div style={styles.sliderWrapper}>
+                      <span style={styles.labelStart}>0%</span>
+                      <input
+                        type="range"
+                        step="0.25"
+                        name="top"
+                        min="0"
+                        max="100"
+                        value={initialFontPos.top}
+                        onChange={handleFontPositionChange}
+                        style={styles.input}
+                      />
+                      <span style={styles.value}>{initialFontPos.top}%</span>
+                    </div>
+                  </label>
+                </div>
+                <div style={styles.sliderContainer}>
+                  <label style={styles.label}>
+                    Warna nomor meja:
+                    <div style={styles.sliderWrapper}>
+                      <input
+                        type="color"
+                        value='#FFFFFF' // This should be the state holding the selected font color
+                        onChange={(e) => setfontcolor(e.target.value)} // Update the font color state
+                        style={styles.colorInput} // Add your styles for the color input if needed
+                      />
+                      <span style={styles.value}>{fontcolor}</span> {/* Display the selected color value */}
+                    </div>
+                  </label>
+                </div>
+              </>
+            )}
+
+
+          </div>
+        }
+        <p style={styles.description} onClick={() => setIsViewTables(!isViewTables)}>
+          {isViewTables ? '˅' : '˃'} Daftar meja
+        </p>
+
+        {isViewTables &&
+          <div style={{marginTop: '34px', marginLeft: '15px'}}>
+            <div style={styles.resultMessage}>
+              <input style={{borderRadius: '12px', paddingLeft: '13px', marginRight: '10px', width: '48%'}} placeholder="Meja A1" onChange={(e) => setTableNo(e.target.value)} value={tableNo}/>
+              <div
+                onClick={handleCreate} style={styles.uploadButton}>Buat meja</div>
+            </div>
+            {tables && tables
+              .filter((table) => table.tableNo !== 0)
+              .map((table) => (
+                <li
+                  key={table.tableId}
+                  style={{
+                    backgroundColor:
+                      table.tableId === selectedTable?.tableId
+                        ? "lightblue"
+                        : "white",
+                    marginBottom: "10px",
+                    padding: "10px",
+                    borderRadius: "4px",
+                    boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+                    cursor: "pointer",
+                    listStyle: 'square'
+                  }}
+                  onClick={() => setSelectedTable(selectedTable == table ? null : table)}
+                >
+                  <div style={{ marginBottom: "10px" }}>
+                    {table.tableNo}
+                  </div>
+                </li>
+              ))
+            }
+          </div>
+        }
+      </div>
+      <div style={styles.buttonContainer}>
+        <button onClick={handleSave} style={styles.saveButton}>
+          Simpan
+        </button>
+        <button onClick={()=>setIsViewingQR(true)} style={styles.saveButton}>
+          Download QR {selectedTable? 'meja' : 'kedai'}
+        </button>
+      </div>
+      </> :
+      <>
+      <div style={styles.uploadMessage}>
+        <p>QR ini akan menjadi identifikasi bahwa pelanggan memesan dari {selectedTable? `(${selectedTable?.tableNo})` : 'link kafe ini. Untuk mengantarkan pelanggan ke meja yang teridentifikasi, anda perlu membuat meja.'}</p>
+      </div>
+      <div style={styles.buttonContainer}>
+        <button onClick={()=>downloadQrCodeContainer({selectedTable, shop})} style={styles.saveButton}>
+          Download QR {selectedTable? 'meja' : 'kedai'}
+        </button>
+      </div>
+      <div style={styles.backButtonContainer}>
+        <p onClick={()=>setIsViewingQR(false)} >
+          Kembali
+        </p>
+      </div>
+      </>
+      }
     </div>
   );
 };
 
-export default TablesPage;
+// Styles
+const styles = {
+  container: {
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    maxHeight: '80vh',
+    width: '100%',
+    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",
+    fontWeight: "bold",
+  },
+  qrCodeContainer: {
+    backgroundColor: '#999999',
+    borderRadius: '20px',
+    position: "relative",
+    width: "100%",
+    height: "200px",
+    backgroundSize: "contain",
+    overflow: "hidden",
+    margin: "0 auto", // Center the QR code container
+  },
+  uploadMessage: {
+    fontWeight: 600,
+    textAlign: "left",
+    fontSize: "15px"
+  },
+  changeButton: {
+    paddingRight: '10px',
+    backgroundColor: 'green',
+    borderRadius: '30px',
+    color: 'white',
+    fontWeight: 700,
+    height: '36px',
+    lineHeight: '36px',
+    paddingLeft: '10px',
+    paddingHeight: '10px',
+  },
+  uploadButton: {
+    paddingRight: '10px',
+    backgroundColor: 'green',
+    borderRadius: '30px',
+    color: 'white',
+    fontWeight: 700,
+    height: '36px',
+    lineHeight: '36px',
+    paddingLeft: '10px',
+    paddingHeight: '10px',
+    width: '40%',
+    textAlign: 'center'
+  },
+  resultMessage: {
+    marginTop: "-24px",
+    marginBottom: "10px",
+    textAlign: "left",
+    display: 'flex',
+    justifyContent: 'space-between'
+  },
+  buttonContainer: {
+    marginTop: "20px",
+    textAlign: "left",
+    display: 'flex',
+    justifyContent: 'space-evenly'
+  },
+  backButtonContainer: {
+    marginTop: "2px",
+    marginBottom: "-10px",
+    textAlign: "left",
+    display: 'flex',
+    justifyContent: 'space-evenly'
+  },
+  saveButton: {
+    padding: "10px 15px",
+    fontSize: "16px",
+    backgroundColor: "#28a745",
+    color: "#fff",
+    border: "none",
+    borderRadius: "30px",
+    cursor: "pointer",
+    transition: "background-color 0.3s",
+  },
+  switchContainer: {
+    textAlign: "left",
+    marginTop: '-15px'
+  },
+  description: {
+    margin: "10px 0",
+  },
+  sliderContainer: {
+    marginBottom: "20px",
+  },
+  label: {
+    display: "block",
+    marginBottom: "10px",
+  },
+  sliderWrapper: {
+    display: "flex",
+    alignItems: "center",
+  },
+  input: {
+    flex: "1",
+    margin: "0 10px",
+  },
+};
+
+export default SetPaymentQr;