ok

src/components/QR.js

@@ -2,10 +2,13 @@ import React, { useState } from "react";
 import html2canvas from "html2canvas";
 
 const QRCodeWithBackground = ({
+  isConfigure,
   qrCodeUrl,
   backgroundUrl,
   initialQrPosition,
   initialQrSize,
+  setInitialPos,
+  setInitialSize,
   onBackgroundUrlChange,
 }) => {
   const [qrPosition, setQrPosition] = useState(initialQrPosition);
@@ -33,6 +36,12 @@ const QRCodeWithBackground = ({
     }
   };
 
+  const handleSave = () => {
+    setInitialPos(qrPosition);
+    setInitialSize(qrSize);
+    onBackgroundUrlChange(bgImage);
+  };
+
   const printQRCode = () => {
     const element = document.getElementById("qr-code-container");
     if (element) {
@@ -89,65 +98,165 @@ const QRCodeWithBackground = ({
           }}
         />
       </div>
-
+      {isConfigure ? (
         <div style={{ marginTop: "20px" }}>
-        <label>
+          <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={qrSize}
                   onChange={handleSizeChange}
-            style={{ marginLeft: "10px" }}
+                  style={styles.input}
                 />
-          {qrSize}%
+                <span style={styles.labelEnd}>100%</span>
+                <span style={styles.value}>{qrSize}%</span>
+              </div>
             </label>
-        <br />
+          </div>
-        <label>
+          <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={qrPosition.left}
                   onChange={handlePositionChange}
-            style={{ marginLeft: "10px" }}
+                  style={styles.input}
                 />
-          {qrPosition.left}%
+                <span style={styles.labelEnd}>100%</span>
+                <span style={styles.value}>{qrPosition.left}%</span>
+              </div>
             </label>
-        <br />
+          </div>
-        <label>
+          <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={qrPosition.top}
                   onChange={handlePositionChange}
-            style={{ marginLeft: "10px" }}
+                  style={styles.input}
                 />
-          {qrPosition.top}%
+                <span style={styles.labelEnd}>100%</span>
+                <span style={styles.value}>{qrPosition.top}%</span>
+              </div>
             </label>
-        <br />
+          </div>
-        <label>
+          <div style={{ marginTop: "20px" }}>
+            <label style={styles.label}>
               Background Image Upload:
               <input
                 type="file"
                 accept="image/*"
                 onChange={handleFileChange}
-            style={{ marginLeft: "10px" }}
+                style={styles.fileInput}
               />
             </label>
-        <br />
+          </div>
-        <button onClick={printQRCode} style={{ marginTop: "10px" }}>
+          <div style={{ marginTop: "20px" }}>
-          Print QR Code
+            <button
+              onClick={handleSave}
+              style={{
+                padding: "10px 20px",
+                fontSize: "16px",
+                backgroundColor: "#28a745",
+                color: "#fff",
+                border: "none",
+                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>
+      ) : (
+        <button
+          onClick={printQRCode}
+          style={{
+            marginTop: "10px",
+            padding: "10px 20px",
+            fontSize: "16px",
+            backgroundColor: "#007bff",
+            color: "#fff",
+            border: "none",
+            borderRadius: "4px",
+            cursor: "pointer",
+            transition: "background-color 0.3s",
+          }}
+          onMouseOver={(e) =>
+            (e.currentTarget.style.backgroundColor = "#0056b3")
+          }
+          onMouseOut={(e) =>
+            (e.currentTarget.style.backgroundColor = "#007bff")
+          }
+        >
+          Print QR Code
+        </button>
+      )}
+    </div>
   );
 };
 
+// Styles for the configuration labels and inputs
+const styles = {
+  label: {
+    display: "block",
+    fontSize: "16px",
+    fontWeight: "bold",
+    marginBottom: "5px",
+  },
+  sliderContainer: {
+    marginBottom: "20px",
+  },
+  sliderWrapper: {
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    marginTop: "5px",
+  },
+  input: {
+    flex: "1",
+    margin: "0 10px",
+  },
+  value: {
+    fontSize: "16px",
+    minWidth: "50px",
+    textAlign: "right",
+  },
+  labelStart: {
+    fontSize: "14px",
+  },
+  labelEnd: {
+    fontSize: "14px",
+  },
+  fileInput: {
+    marginLeft: "10px",
+  },
+};
+
 export default QRCodeWithBackground;

src/components/TableList.js

@@ -2,6 +2,8 @@ import React, { useState } from "react";
 import QRCodeWithBackground from "./QR"; // Adjust path as needed
 
 const TableList = ({ tables, onSelectTable, selectedTable }) => {
+  const [initialPos, setInitialPos] = useState({ left: 50, top: 50 });
+  const [initialSize, setInitialSize] = useState(20);
   const [bgImageUrl, setBgImageUrl] = useState(
     "https://example.com/your-background-image.png"
   );
@@ -25,6 +27,36 @@ const TableList = ({ tables, onSelectTable, selectedTable }) => {
       }}
     >
       <ul style={{ listStyleType: "none", padding: 0, margin: 0 }}>
+        <li
+          style={{
+            backgroundColor:
+              -1 === selectedTable?.tableId ? "lightblue" : "white",
+            marginBottom: "10px",
+            padding: "10px",
+            borderRadius: "4px",
+            boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+            cursor: "pointer",
+          }}
+          onClick={() =>
+            onSelectTable({
+              tableId: -1,
+            })
+          }
+        >
+          <div style={{ marginBottom: "10px" }}>configure</div>
+          {-1 == selectedTable?.tableId && (
+            <QRCodeWithBackground
+              isConfigure={true}
+              setInitialPos={setInitialPos}
+              setInitialSize={setInitialSize}
+              qrCodeUrl={generateQRCodeUrl("sample")}
+              backgroundUrl={bgImageUrl}
+              initialQrPosition={initialPos}
+              initialQrSize={initialSize}
+              onBackgroundUrlChange={handleBackgroundUrlChange}
+            />
+          )}
+        </li>
         {tables.map((table) => (
           <li
             key={table.tableId}
@@ -45,13 +77,17 @@ const TableList = ({ tables, onSelectTable, selectedTable }) => {
               {table.tableNo === 0 ? "Clerk" : `Table ${table.tableNo}`} -
               Position: ({table.xposition}, {table.yposition})
             </div>
+            {table.tableId == selectedTable?.tableId && (
               <QRCodeWithBackground
+                setInitialPos={setInitialPos}
+                setInitialSize={setInitialSize}
                 qrCodeUrl={generateQRCodeUrl(table.tableCode)}
                 backgroundUrl={bgImageUrl}
-              initialQrPosition={{ left: 50, top: 50 }}
+                initialQrPosition={initialPos}
-              initialQrSize={20}
+                initialQrSize={initialSize}
                 onBackgroundUrlChange={handleBackgroundUrlChange}
               />
+            )}
           </li>
         ))}
       </ul>

src/components/TablesPage.js

@@ -110,6 +110,7 @@ const TablesPage = ({ shopId }) => {
   };
 
   const handleSelect = (table) => {
+    console.log(table);
     setSelectedTable(null);
     setSelectedTable(table);
     setNewTable(null);