From a13d6f6907a02074bc75307d9210f905e9991d03 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Thu, 1 Jan 2026 22:45:51 -0800
Subject: [PATCH] fix(layout): add missing deps and fix variable references

---
 frontend/package-lock.json                    | 22 +++++++++++++++++++
 frontend/package.json                         |  2 ++
 .../components/layout-editor/LayoutEditor.tsx | 15 ++++++++++---
 3 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d592bb9..99ec10f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,6 +19,7 @@
                 "browser-image-compression": "^2.0.2",
                 "class-variance-authority": "^0.7.1",
                 "clsx": "^2.1.1",
+                "date-fns": "^4.1.0",
                 "framer-motion": "^12.23.26",
                 "i18next": "^25.7.2",
                 "i18next-browser-languagedetector": "^8.2.0",
@@ -32,6 +33,7 @@
                 "react-i18next": "^16.4.1",
                 "react-konva": "^18.2.10",
                 "react-router-dom": "^7.10.1",
+                "sonner": "^2.0.7",
                 "tailwind-merge": "^3.4.0",
                 "three": "0.165.0",
                 "zod": "^4.3.4",
@@ -4389,6 +4391,16 @@
                 "node": ">=18"
             }
         },
+        "node_modules/date-fns": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+            "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/kossnocorp"
+            }
+        },
         "node_modules/debug": {
             "version": "4.4.3",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -8075,6 +8087,16 @@
                 "node": ">=8"
             }
         },
+        "node_modules/sonner": {
+            "version": "2.0.7",
+            "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
+            "integrity": "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+                "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+            }
+        },
         "node_modules/source-map-js": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 861f419..ed8876e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,6 +22,7 @@
         "browser-image-compression": "^2.0.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "date-fns": "^4.1.0",
         "framer-motion": "^12.23.26",
         "i18next": "^25.7.2",
         "i18next-browser-languagedetector": "^8.2.0",
@@ -35,6 +36,7 @@
         "react-i18next": "^16.4.1",
         "react-konva": "^18.2.10",
         "react-router-dom": "^7.10.1",
+        "sonner": "^2.0.7",
         "tailwind-merge": "^3.4.0",
         "three": "0.165.0",
         "zod": "^4.3.4",
diff --git a/frontend/src/components/layout-editor/LayoutEditor.tsx b/frontend/src/components/layout-editor/LayoutEditor.tsx
index cd2360c..7205eb6 100644
--- a/frontend/src/components/layout-editor/LayoutEditor.tsx
+++ b/frontend/src/components/layout-editor/LayoutEditor.tsx
@@ -28,6 +28,15 @@ export function LayoutEditor({ floorId, className }: LayoutEditorProps) {
     const [configRack, setConfigRack] = useState<RackData | null>(null);
 
     // Load floor data and plant types
+    const reloadFloorData = useCallback(async () => {
+        try {
+            const floor = await layoutApi.getFloor3D(floorId);
+            setFloorData(floor);
+        } catch (e) {
+            console.error('Failed to reload floor:', e);
+        }
+    }, [floorId]);
+
     useEffect(() => {
         async function load() {
             try {
@@ -228,7 +237,7 @@ export function LayoutEditor({ floorId, className }: LayoutEditorProps) {
                                                     layoutApi.updatePlant(selectedSlot.plant!.id, { tagNumber: newTag })
                                                         .then(() => {
                                                             toast({ title: 'Tag Updated', description: newTag });
-                                                            loadFloor(selectedFloor.id);
+                                                            reloadFloorData();
                                                             setSelectedSlot(prev => prev ? ({ ...prev, plant: { ...prev.plant!, tagNumber: newTag } }) : null);
                                                         });
                                                 }
@@ -324,7 +333,7 @@ export function LayoutEditor({ floorId, className }: LayoutEditorProps) {
                                                     layoutApi.harvestPlant(selectedSlot.plant.id, { weight: parseFloat(weight), unit: 'g' })
                                                         .then(() => {
                                                             toast.success('Plant Harvested');
-                                                            loadFloor(selectedFloor.id);
+                                                            reloadFloorData();
                                                             setSelectedSlot(null);
                                                         });
                                                 }
@@ -341,7 +350,7 @@ export function LayoutEditor({ floorId, className }: LayoutEditorProps) {
                                                     layoutApi.destroyPlant(selectedSlot.plant.id, 'Manual Destruction')
                                                         .then(() => {
                                                             toast.error('Plant Destroyed');
-                                                            loadFloor(selectedFloor.id);
+                                                            reloadFloorData();
                                                             setSelectedSlot(null);
                                                         });
                                                 }