ok

src/components/TableList.js

@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from "react";
+import React, {useState} from "react";
 import QRCodeWithBackground from "./QR"; // Adjust path as needed
-const TableList = ({ shop, tables, onSelectTable, selectedTable }) => {
+
+const TableList = ({ shop, tables, onSelectTable, selectedTable, handleSetTableNo, handleAddTable }) => {
   const [initialPos, setInitialPos] = useState({
     left: shop.xposition,
     top: shop.yposition,
@@ -21,16 +22,16 @@ const TableList = ({ shop, tables, onSelectTable, selectedTable }) => {
     }
   };
 
-  const handleBackgroundUrlChange = (newUrl) => {
-    setBgImageUrl(newUrl);
-  };
-
   const handleQrSave = (qrPosition, qrSize, bgImage) => {
     setInitialPos(qrPosition);
     setInitialSize(qrSize);
     setBgImageUrl(bgImage);
   };
 
+  const handleCreateTable = () => {
+    handleAddTable();
+  };
+
   return (
     <div
       style={{
@@ -71,6 +72,43 @@ const TableList = ({ shop, tables, onSelectTable, selectedTable }) => {
             />
           )}
         </li>
+        {/* Add new table input */}
+        <li
+          style={{
+            backgroundColor: "lightgreen",
+            marginBottom: "10px",
+            padding: "10px",
+            borderRadius: "4px",
+            boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+          }}
+        >
+          <input
+            type="text"
+            placeholder="Enter table number"
+            onChange={handleSetTableNo} // Directly using the parent function
+            style={{
+              width: "100%",
+              padding: "8px",
+              marginBottom: "10px",
+              borderRadius: "4px",
+              border: "1px solid #ccc",
+            }}
+          />
+          <button
+            onClick={handleCreateTable}
+            style={{
+              width: "100%",
+              padding: "10px",
+              backgroundColor: "#28a745",
+              color: "white",
+              borderRadius: "4px",
+              border: "none",
+              cursor: "pointer",
+            }}
+          >
+            Add Table
+          </button>
+        </li>
         {tables &&
           tables
             .filter((table) => table.tableNo !== 0)