ok

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>