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>
-
-      <div style={{ marginTop: "20px" }}>
-        <label>
-          QR Code Size:
-          <input
-            type="range"
-            min="10"
-            max="100"
-            value={qrSize}
-            onChange={handleSizeChange}
-            style={{ marginLeft: "10px" }}
-          />
-          {qrSize}%
-        </label>
-        <br />
-        <label>
-          QR Code Position X:
-          <input
-            type="range"
-            name="left"
-            min="0"
-            max="100"
-            value={qrPosition.left}
-            onChange={handlePositionChange}
-            style={{ marginLeft: "10px" }}
-          />
-          {qrPosition.left}%
-        </label>
-        <br />
-        <label>
-          QR Code Position Y:
-          <input
-            type="range"
-            name="top"
-            min="0"
-            max="100"
-            value={qrPosition.top}
-            onChange={handlePositionChange}
-            style={{ marginLeft: "10px" }}
-          />
-          {qrPosition.top}%
-        </label>
-        <br />
-        <label>
-          Background Image Upload:
-          <input
-            type="file"
-            accept="image/*"
-            onChange={handleFileChange}
-            style={{ marginLeft: "10px" }}
-          />
-        </label>
-        <br />
-        <button onClick={printQRCode} style={{ marginTop: "10px" }}>
+      {isConfigure ? (
+        <div style={{ marginTop: "20px" }}>
+          <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={styles.input}
+                />
+                <span style={styles.labelEnd}>100%</span>
+                <span style={styles.value}>{qrSize}%</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={qrPosition.left}
+                  onChange={handlePositionChange}
+                  style={styles.input}
+                />
+                <span style={styles.labelEnd}>100%</span>
+                <span style={styles.value}>{qrPosition.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={qrPosition.top}
+                  onChange={handlePositionChange}
+                  style={styles.input}
+                />
+                <span style={styles.labelEnd}>100%</span>
+                <span style={styles.value}>{qrPosition.top}%</span>
+              </div>
+            </label>
+          </div>
+          <div style={{ marginTop: "20px" }}>
+            <label style={styles.label}>
+              Background Image Upload:
+              <input
+                type="file"
+                accept="image/*"
+                onChange={handleFileChange}
+                style={styles.fileInput}
+              />
+            </label>
+          </div>
+          <div style={{ marginTop: "20px" }}>
+            <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>
+      )}
     </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>
-            <QRCodeWithBackground
-              qrCodeUrl={generateQRCodeUrl(table.tableCode)}
-              backgroundUrl={bgImageUrl}
-              initialQrPosition={{ left: 50, top: 50 }}
-              initialQrSize={20}
-              onBackgroundUrlChange={handleBackgroundUrlChange}
-            />
+            {table.tableId == selectedTable?.tableId && (
+              <QRCodeWithBackground
+                setInitialPos={setInitialPos}
+                setInitialSize={setInitialSize}
+                qrCodeUrl={generateQRCodeUrl(table.tableCode)}
+                backgroundUrl={bgImageUrl}
+                initialQrPosition={initialPos}
+                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);