Fix: Improve table layout functionality

2025-10-10 23:32:17 +00:00
parent 73f9b1ab95
commit b1030222f6
8 changed files with 867 additions and 2 deletions
--- a/src/components/restaurant/TableConfiguration.tsx
+++ b/src/components/restaurant/TableConfiguration.tsx
@@ -151,7 +151,22 @@ const TableConfiguration = () => {
            {tables.map((table) => (
              <div
                key={table.id}
-                className="absolute cursor-pointer hover:scale-110 transition-transform"
+                className="absolute cursor-move hover:scale-110 transition-transform"
+                draggable
+                onDragStart={(e) => {
+                  e.dataTransfer.effectAllowed = 'move';
+                  e.dataTransfer.setData('tableId', table.id);
+                }}
+                onDragEnd={(e) => {
+                  const rect = e.currentTarget.parentElement?.getBoundingClientRect();
+                  if (rect) {
+                    const x = Math.max(0, Math.min(e.clientX - rect.left - 40, rect.width - 80));
+                    const y = Math.max(0, Math.min(e.clientY - rect.top - 40, rect.height - 80));
+                    setTables(tables.map(t => 
+                      t.id === table.id ? { ...t, position: { x, y } } : t
+                    ));
+                  }
+                }}
                style={{
                  left: `${table.position.x}px`,
                  top: `${table.position.y}px`