From d2c2e0aeefe33179cf7c44e3181774e473a1a544 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Thu, 11 Dec 2025 13:26:59 -0800
Subject: [PATCH] feat(layout): Add Tiers input to Section Dialog - Added Tiers
 configuration to AddSectionDialog - Updated capacity calculations - Updates
 saves to include tier count

---
 .../components/AddSectionDialog.tsx             | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/src/features/layout-designer/components/AddSectionDialog.tsx b/frontend/src/features/layout-designer/components/AddSectionDialog.tsx
index aaf0c57..8686f68 100644
--- a/frontend/src/features/layout-designer/components/AddSectionDialog.tsx
+++ b/frontend/src/features/layout-designer/components/AddSectionDialog.tsx
@@ -21,6 +21,7 @@ export function AddSectionDialog({ room, isOpen, onClose, onSave, editSection }:
     const [type, setType] = useState<LayoutSection['type']>('TABLE');
     const [rows, setRows] = useState(1);
     const [columns, setColumns] = useState(1);
+    const [tiers, setTiers] = useState(1);
     const [width, setWidth] = useState(4); // feet
     const [height, setHeight] = useState(8); // feet
     const [spacing, setSpacing] = useState(12); // inches
@@ -34,6 +35,7 @@ export function AddSectionDialog({ room, isOpen, onClose, onSave, editSection }:
                 setType(editSection.type);
                 setRows(editSection.rows);
                 setColumns(editSection.columns);
+                setTiers(editSection.tiers || 1);
                 setWidth(Math.round(editSection.size.width / PIXELS_PER_FOOT));
                 setHeight(Math.round(editSection.size.height / PIXELS_PER_FOOT));
                 setSpacing(editSection.spacing);
@@ -43,6 +45,7 @@ export function AddSectionDialog({ room, isOpen, onClose, onSave, editSection }:
                 setType('TABLE');
                 setRows(1);
                 setColumns(5);
+                setTiers(1);
                 setWidth(4);
                 setHeight(10);
                 setSpacing(12);
@@ -59,6 +62,7 @@ export function AddSectionDialog({ room, isOpen, onClose, onSave, editSection }:
             type,
             rows,
             columns,
+            tiers,
             spacing,
             size: {
                 width: width * PIXELS_PER_FOOT,
@@ -176,6 +180,16 @@ export function AddSectionDialog({ room, isOpen, onClose, onSave, editSection }:
                                     min="1"
                                 />
                             </div>
+                            <div>
+                                <label className="block text-xs text-slate-500 mb-1">Tiers (Z)</label>
+                                <input
+                                    type="number"
+                                    value={tiers}
+                                    onChange={e => setTiers(Number(e.target.value))}
+                                    className="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-white outline-none"
+                                    min="1"
+                                />
+                            </div>
                             <div>
                                 <label className="block text-xs text-slate-500 mb-1">Spacing (in)</label>
                                 <input
@@ -189,7 +203,8 @@ export function AddSectionDialog({ room, isOpen, onClose, onSave, editSection }:
                         </div>
                         <div className="mt-2 text-xs text-slate-400 flex items-center gap-1">
                             <ArrowRight size={12} />
-                            Total Capacity: <span className="text-white font-bold">{rows * columns}</span> positions
+                            Total Capacity: <span className="text-white font-bold">{rows * columns * tiers}</span> positions
+                            {tiers > 1 && <span className="text-slate-500 ml-1">({rows * columns} per tier)</span>}
                         </div>
                     </div>