g
This commit is contained in:
zadit frontend
@@ -8,10 +8,8 @@ export default function Footer({
|
||||
cartItemsLength,
|
||||
selectedPage,
|
||||
}) {
|
||||
const { goToShop, goToSearch, goToCart } = useNavigationHelpers(
|
||||
shopId,
|
||||
tableId,
|
||||
);
|
||||
const { goToShop, goToSearch, goToCart, goToTransactions } =
|
||||
useNavigationHelpers(shopId, tableId);
|
||||
|
||||
return (
|
||||
<div className={styles.item}>
|
||||
@@ -50,7 +48,7 @@ export default function Footer({
|
||||
</div>
|
||||
|
||||
{/* Profile Icon */}
|
||||
<div className={styles["footer-icon"]}>
|
||||
<div onClick={goToTransactions} className={styles["footer-icon"]}>
|
||||
<svg
|
||||
viewBox="0 0 34 34"
|
||||
style={{ fill: selectedPage === 3 ? "black" : "#8F8787" }}
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import React from "react";
|
||||
import styles from "./Modal.module.css";
|
||||
import TablesPage from "./TablesPage.js";
|
||||
import TableMaps from "../components/TableMaps";
|
||||
import Transactions from "../pages/Transactions";
|
||||
|
||||
const Modal = ({ shopId, isOpen, onClose, modalContent }) => {
|
||||
if (!isOpen) return null;
|
||||
@@ -23,8 +25,10 @@ const Modal = ({ shopId, isOpen, onClose, modalContent }) => {
|
||||
<button onClick={onClose} className={styles.closeButton}>
|
||||
×
|
||||
</button>
|
||||
{modalContent === "edit_tables" && <TableMaps shopId={shopId} />}
|
||||
{modalContent === "new_transaction" && <TableMaps shopId={shopId} />}
|
||||
{modalContent === "edit_tables" && <TablesPage shopId={shopId} />}
|
||||
{modalContent === "new_transaction" && (
|
||||
<Transactions propsShopId={shopId} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
/* src/components/Modal.module.css */
|
||||
|
||||
.modalOverlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -21,9 +19,9 @@
|
||||
height: 80%;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
overflow: auto; /* Add this line to enable scrolling */
|
||||
}
|
||||
|
||||
/* Style the close button as an "X" */
|
||||
.closeButton {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
@@ -36,7 +34,6 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Optional: Add a hover effect */
|
||||
.closeButton:hover {
|
||||
color: #f44336; /* Change color on hover for better UX */
|
||||
}
|
||||
|
||||
159
src/components/NewTransactionMessage.js
Normal file
159
src/components/NewTransactionMessage.js
Normal file
@@ -0,0 +1,159 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { getTables, updateTable, createTable } from "../helpers/tableHelper";
|
||||
import { getTransactions } from "../helpers/transactionHelpers";
|
||||
import TableCanvas from "./TableCanvas";
|
||||
import TableList from "./TableList";
|
||||
|
||||
const TablesPage = ({ shopId }) => {
|
||||
const [transactions, setTransactions] = useState([]);
|
||||
const [tables, setTables] = useState([]);
|
||||
const [selectedTable, setSelectedTable] = useState(null);
|
||||
const [newTable, setNewTable] = useState(null);
|
||||
const [originalTables, setOriginalTables] = useState([]);
|
||||
const [tableNo, setTableNo] = useState(""); // State for table name
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const fetchedTables = await getTables(shopId);
|
||||
setTables(fetchedTables);
|
||||
setOriginalTables(fetchedTables);
|
||||
} catch (error) {
|
||||
console.error("Error fetching tables:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [shopId]);
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const fetchedTransactions = await getTransactions(shopId);
|
||||
// setTransactions(fetchedTransactions);
|
||||
console.log(fetchedTransactions);
|
||||
} catch (error) {
|
||||
console.error("Error fetching transactions:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [shopId]);
|
||||
|
||||
const handleAddTable = () => {
|
||||
const nextId = Math.random().toString(36).substr(2, 11);
|
||||
|
||||
setTables(originalTables);
|
||||
setNewTable({
|
||||
tableId: nextId,
|
||||
xposition: 100,
|
||||
yposition: 100,
|
||||
tableNo: nextId,
|
||||
});
|
||||
setSelectedTable(null);
|
||||
setTableNo(""); // Reset table name
|
||||
};
|
||||
|
||||
const moveTable = (direction) => {
|
||||
if (!selectedTable && !newTable) return;
|
||||
|
||||
const moveAmount = 10;
|
||||
const { xposition, yposition } = selectedTable || newTable;
|
||||
let newX = xposition;
|
||||
let newY = yposition;
|
||||
|
||||
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 handleSelectTable = (event) => {
|
||||
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) => {
|
||||
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);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
|
||||
>
|
||||
<TableCanvas
|
||||
tables={tables}
|
||||
selectedTable={selectedTable}
|
||||
setTableNo={setTableNo}
|
||||
handleSelectTable={handleSelectTable}
|
||||
handleAddTable={handleAddTable}
|
||||
moveTable={moveTable}
|
||||
/>
|
||||
{/* <TableList
|
||||
tables={tables}
|
||||
onSelectTable={handleSelect}
|
||||
selectedTable={selectedTable}
|
||||
/> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TablesPage;
|
||||
226
src/components/TableCanvas.js
Normal file
226
src/components/TableCanvas.js
Normal file
@@ -0,0 +1,226 @@
|
||||
import React, { useRef, useState, useEffect } from "react";
|
||||
|
||||
const TableCanvas = ({
|
||||
tables,
|
||||
selectedTable,
|
||||
newTable,
|
||||
setTableNo,
|
||||
handleSelectTable,
|
||||
handleAddTable,
|
||||
moveTable,
|
||||
handleSave,
|
||||
handleCancel,
|
||||
handleSetTableNo,
|
||||
tableNo,
|
||||
}) => {
|
||||
const canvasRef = useRef(null);
|
||||
const containerRef = useRef(null);
|
||||
const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
|
||||
const padding = 50;
|
||||
const rectWidth = 40;
|
||||
const rectHeight = 30;
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
if (containerRef.current) {
|
||||
const { clientWidth, clientHeight } = containerRef.current;
|
||||
setCanvasSize({ width: clientWidth, height: clientHeight });
|
||||
}
|
||||
};
|
||||
|
||||
handleResize();
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
tables.length === 0 ||
|
||||
canvasSize.width === 0 ||
|
||||
canvasSize.height === 0
|
||||
)
|
||||
return;
|
||||
|
||||
const canvas = canvasRef.current;
|
||||
const context = canvas.getContext("2d");
|
||||
|
||||
canvas.width = canvasSize.width;
|
||||
canvas.height = canvasSize.height;
|
||||
|
||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
const allTables = newTable ? [...tables, newTable] : tables;
|
||||
const hasMultipleTables = allTables.length > 1;
|
||||
const minX = hasMultipleTables
|
||||
? Math.min(...allTables.map((table) => table.xposition))
|
||||
: 0;
|
||||
const minY = hasMultipleTables
|
||||
? Math.min(...allTables.map((table) => table.yposition))
|
||||
: 0;
|
||||
const maxX = hasMultipleTables
|
||||
? Math.max(...allTables.map((table) => table.xposition))
|
||||
: 1;
|
||||
const maxY = hasMultipleTables
|
||||
? Math.max(...allTables.map((table) => table.yposition))
|
||||
: 1;
|
||||
|
||||
const patternWidth = maxX - minX;
|
||||
const patternHeight = maxY - minY;
|
||||
const scaleX =
|
||||
patternWidth > 0 ? (canvas.width - 2 * padding) / patternWidth : 1;
|
||||
const scaleY =
|
||||
patternHeight > 0 ? (canvas.height - 2 * padding) / patternHeight : 1;
|
||||
const scale = Math.min(scaleX, scaleY);
|
||||
|
||||
const scaledTables = allTables.map((table) => ({
|
||||
...table,
|
||||
xposition: (table.xposition - minX) * scale + padding,
|
||||
yposition: (table.yposition - minY) * scale + padding,
|
||||
}));
|
||||
|
||||
scaledTables.forEach((table) => {
|
||||
context.beginPath();
|
||||
context.rect(table.xposition, table.yposition, rectWidth, rectHeight);
|
||||
context.fillStyle =
|
||||
table.tableId === (selectedTable?.tableId || newTable?.tableId)
|
||||
? "red"
|
||||
: "blue";
|
||||
context.fill();
|
||||
context.stroke();
|
||||
context.font = "12px Arial";
|
||||
context.fillStyle = "white";
|
||||
context.textAlign = "center";
|
||||
context.textBaseline = "middle";
|
||||
context.fillText(
|
||||
table.tableId === (selectedTable?.tableId || newTable?.tableId)
|
||||
? tableNo === 0
|
||||
? "clerk"
|
||||
: tableNo
|
||||
: table.tableNo === 0
|
||||
? "clerk"
|
||||
: table.tableNo,
|
||||
table.xposition + rectWidth / 2,
|
||||
table.yposition + rectHeight / 2
|
||||
);
|
||||
});
|
||||
}, [tables, canvasSize, newTable, selectedTable, tableNo]);
|
||||
|
||||
return (
|
||||
<div ref={containerRef} style={{ width: "100%", height: "100%" }}>
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
style={{
|
||||
display: "block",
|
||||
borderRadius: "5px",
|
||||
backgroundColor: "#e9e9e9",
|
||||
}}
|
||||
onClick={handleSelectTable}
|
||||
/>
|
||||
<div>
|
||||
{!selectedTable && !newTable && (
|
||||
<button
|
||||
onClick={handleAddTable}
|
||||
style={{
|
||||
display: "block",
|
||||
width: "100%",
|
||||
padding: "10px",
|
||||
backgroundColor: "#007bff",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
fontSize: "16px",
|
||||
cursor: "pointer",
|
||||
marginBottom: "10px",
|
||||
transition: "background-color 0.3s ease",
|
||||
}}
|
||||
>
|
||||
Add Table
|
||||
</button>
|
||||
)}
|
||||
{(selectedTable || newTable) && (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
marginBottom: "10px",
|
||||
}}
|
||||
>
|
||||
<button onClick={() => moveTable("left")} style={buttonStyle}>
|
||||
{"◄"}
|
||||
</button>
|
||||
<button onClick={() => moveTable("up")} style={buttonStyle}>
|
||||
{"▲"}
|
||||
</button>
|
||||
<button onClick={() => moveTable("down")} style={buttonStyle}>
|
||||
{"▼"}
|
||||
</button>
|
||||
<button onClick={() => moveTable("right")} style={buttonStyle}>
|
||||
{"►"}
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginBottom: "10px",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Table No"
|
||||
value={tableNo}
|
||||
disabled={tableNo === 0 ? "disabled" : ""}
|
||||
onChange={handleSetTableNo}
|
||||
style={{
|
||||
marginRight: "10px",
|
||||
padding: "10px",
|
||||
fontSize: "16px",
|
||||
borderRadius: "4px",
|
||||
border: "1px solid #ddd",
|
||||
boxShadow: "0 1px 2px rgba(0,0,0,0.1)",
|
||||
width: "100px",
|
||||
}}
|
||||
/>
|
||||
<button onClick={handleCancel} style={actionButtonStyle}>
|
||||
Cancel
|
||||
</button>
|
||||
{(newTable || selectedTable) && (
|
||||
<button onClick={handleSave} style={actionButtonStyle}>
|
||||
Save
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const buttonStyle = {
|
||||
padding: "10px",
|
||||
fontSize: "20px",
|
||||
border: "1px solid #ddd",
|
||||
borderRadius: "4px",
|
||||
cursor: "pointer",
|
||||
margin: "0 5px",
|
||||
};
|
||||
|
||||
const actionButtonStyle = {
|
||||
padding: "10px 20px",
|
||||
fontSize: "16px",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
cursor: "pointer",
|
||||
margin: "0 5px",
|
||||
transition: "background-color 0.3s ease, color 0.3s ease",
|
||||
};
|
||||
|
||||
export default TableCanvas;
|
||||
40
src/components/TableList.js
Normal file
40
src/components/TableList.js
Normal file
@@ -0,0 +1,40 @@
|
||||
import React from "react";
|
||||
|
||||
const TableList = ({ tables, onSelectTable, selectedTable }) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
marginTop: "20px",
|
||||
maxHeight: "400px",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
<ul style={{ listStyleType: "none", padding: 0, margin: 0 }}>
|
||||
{tables.map((table) => (
|
||||
<li
|
||||
key={table.tableId}
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
marginBottom: "10px",
|
||||
padding: "10px",
|
||||
borderRadius: "4px",
|
||||
boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
|
||||
cursor: "pointer",
|
||||
backgroundColor:
|
||||
table.tableId === selectedTable?.tableId
|
||||
? "lightblue"
|
||||
: "white",
|
||||
}}
|
||||
onClick={() => onSelectTable(table)}
|
||||
>
|
||||
{table.tableNo === 0 ? "Clerk" : `Table ${table.tableNo}`} -
|
||||
Position: ({table.xposition}, {table.yposition})
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableList;
|
||||
202
src/components/TablesPage.js
Normal file
202
src/components/TablesPage.js
Normal file
@@ -0,0 +1,202 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { getTables, updateTable, createTable } from "../helpers/tableHelper";
|
||||
import TableCanvas from "./TableCanvas";
|
||||
import TableList from "./TableList";
|
||||
|
||||
const TablesPage = ({ shopId }) => {
|
||||
const [tables, setTables] = useState([]);
|
||||
const [selectedTable, setSelectedTable] = useState(null);
|
||||
const [newTable, setNewTable] = useState(null);
|
||||
const [originalTables, setOriginalTables] = useState([]);
|
||||
const [tableNo, setTableNo] = useState(""); // State for table name
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const fetchedTables = await getTables(shopId);
|
||||
setTables(fetchedTables);
|
||||
setOriginalTables(fetchedTables);
|
||||
} catch (error) {
|
||||
console.error("Error fetching tables:", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, [shopId]);
|
||||
|
||||
const handleAddTable = () => {
|
||||
const nextId = Math.random().toString(36).substr(2, 11);
|
||||
|
||||
setTables(originalTables);
|
||||
setNewTable({
|
||||
tableId: nextId,
|
||||
xposition: 100,
|
||||
yposition: 100,
|
||||
tableNo: nextId,
|
||||
});
|
||||
setSelectedTable(null);
|
||||
setTableNo(""); // Reset table name
|
||||
};
|
||||
|
||||
const moveTable = (direction) => {
|
||||
if (!selectedTable && !newTable) return;
|
||||
|
||||
const moveAmount = 10;
|
||||
const { xposition, yposition } = selectedTable || newTable;
|
||||
let newX = xposition;
|
||||
let newY = yposition;
|
||||
|
||||
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 handleSelectTable = (event) => {
|
||||
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) => {
|
||||
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(shopId, {
|
||||
...newTable,
|
||||
tableNo,
|
||||
});
|
||||
setTables([...tables, createdTable]);
|
||||
setOriginalTables([...tables, createdTable]);
|
||||
setNewTable(null);
|
||||
setTableNo(""); // Reset table name
|
||||
} catch (error) {
|
||||
console.error("Error creating table:", error);
|
||||
}
|
||||
} else if (selectedTable) {
|
||||
try {
|
||||
const updatedTable = await updateTable(shopId, {
|
||||
...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);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
|
||||
>
|
||||
<TableCanvas
|
||||
tables={tables}
|
||||
selectedTable={selectedTable}
|
||||
newTable={newTable}
|
||||
setTableNo={setTableNo}
|
||||
handleSelectTable={handleSelectTable}
|
||||
handleAddTable={handleAddTable}
|
||||
moveTable={moveTable}
|
||||
handleSave={handleSave}
|
||||
handleCancel={handleCancel}
|
||||
handleSetTableNo={handleSetTableNo}
|
||||
tableNo={tableNo}
|
||||
/>
|
||||
<TableList
|
||||
tables={tables}
|
||||
onSelectTable={handleSelect}
|
||||
selectedTable={selectedTable}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TablesPage;
|
||||
Reference in New Issue
Block a user