Added saves state of dashboard and reloads it now

client/src/store/useDashboardStore.jsx

@@ -2,6 +2,9 @@ import { create } from 'zustand';
 import { v4 as uuid } from 'uuid';
 import { WIDGET_REGISTRY } from '../constants/widgetRegistry.jsx';
 
+// 1. Import your database messenger
+import useAuthStore from './authStore';
+
 export const useDashboardStore = create((set, get) => ({
     // ==========================================
     // 1. STATE (The Data)
@@ -25,18 +28,22 @@ export const useDashboardStore = create((set, get) => ({
     }),
 
     saveEdit: async () => {
-        const payload = get().widgets;
-
-        // 💾 This is perfectly formatted for your backend DB right now
-        console.log("Saving dashboard to API:", JSON.stringify(payload, null, 2));
-
-        // Example: await fetch('/api/user/dashboard', { method: 'POST', body: JSON.stringify(payload) });
+        // 1. Grab the exact current state of the grid
+        const currentLayout = get().widgets;
 
+        // 2. Lock the UI immediately so the user feels zero lag
         set({ isEditing: false, backupWidgets: [] });
+
+        // 3. Reach outside this store and trigger the Django API call!
+        try {
+            await useAuthStore.getState().saveDashboardLayout(currentLayout);
+        } catch (error) {
+            console.error("Failed to sync layout to MariaDB:", error);
+            // If the database save fails, you could technically revert the UI here if needed
+        }
     },
 
     addWidget: (widgetId, sizeKey) => {
-        // Look up the exact rules for this widget from your constant
         const registryEntry = WIDGET_REGISTRY[widgetId];
 
         if (!registryEntry || !registryEntry.allowedSizes[sizeKey]) {
@@ -47,21 +54,14 @@ export const useDashboardStore = create((set, get) => ({
         const dimensions = registryEntry.allowedSizes[sizeKey];
         const widgets = get().widgets;
 
-        // Default to spawning on the far left on a new row
         let startX = 0;
         let startY = Infinity;
 
         if (widgets.length > 0) {
-            // 1. Find the lowest 'y' value (the start of the bottom row)
             const bottomRowY = Math.max(...widgets.map(w => w.y));
-
-            // 2. Grab all the widgets that are sitting on that exact row
             const bottomRowWidgets = widgets.filter(w => w.y === bottomRowY);
-
-            // 3. Find the right-most edge of those widgets (x position + width)
             const rightmostEdge = Math.max(...bottomRowWidgets.map(w => w.x + w.w));
 
-            // 4. If the right-most edge PLUS the new widget's width fits in 12 columns...
             if (rightmostEdge + dimensions.w <= 12) {
                 startX = rightmostEdge; // ...tuck it right next to the last widget!
                 startY = bottomRowY;    // ...and keep it on the same row.
@@ -84,16 +84,15 @@ export const useDashboardStore = create((set, get) => ({
         widgets: state.widgets.filter(w => w.id !== id)
     })),
 
-    // Called automatically by React-Grid-Layout when the user lets go of the mouse
     updateLayoutPositions: (rglLayout) => {
         set((state) => ({
             widgets: state.widgets.map(widget => {
-                // Find where RGL says this widget currently is
                 const gridItem = rglLayout.find(l => l.i === widget.id);
-
-                // Only update X and Y. We completely ignore W and H so users can't resize!
                 return gridItem ? { ...widget, x: gridItem.x, y: gridItem.y } : widget;
             })
         }));
-    }
+    },
+
+    // NEW: Action to hydrate the store on initial page load
+    setWidgets: (savedWidgets) => set({ widgets: savedWidgets || [] })
 }));