Added saves state of dashboard and reloads it now

client/src/pages/home/tabs/MyDashboard.jsx

@@ -2,23 +2,50 @@ import { Box, Text, Flex, IconButton, Spinner } from "@chakra-ui/react";
 import { X } from "lucide-react";
 import { Responsive, WidthProvider } from "react-grid-layout";
 import { useDashboardStore } from "@/store/useDashboardStore.jsx";
-import { Suspense } from 'react';
+import { Suspense, useEffect, useRef } from 'react';
 
-// 2. Import registry!
+// 1. Import database messenger
+import useAuthStore from "@/store/authStore";
+
+// 2. Import registry
 import { WIDGET_REGISTRY } from '@/constants/widgetRegistry.jsx';
 
 // React-Grid-Layout requires this wrapper to automatically calculate screen width
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
 export default function MyDashboard() {
-    // 1. ☁️ Connect to the Cloud (Zustand)
+    // ☁️ Database Connection
+    const { user } = useAuthStore();
+
+    // ☁️ Local UI Connections
     const widgets = useDashboardStore(state => state.widgets);
     const isEditing = useDashboardStore(state => state.isEditing);
     const updateLayoutPositions = useDashboardStore(state => state.updateLayoutPositions);
     const removeWidget = useDashboardStore(state => state.removeWidget);
+    const setWidgets = useDashboardStore(state => state.setWidgets); // The injection action
 
-    // 2. 🛠️ Format the data for RGL
-    // RGL expects a very specific array format for its layout prop
+    // 🔒 Safety lock to prevent infinite re-renders
+    const hasHydrated = useRef(false);
+
+    // ==========================================
+    // INITIAL LOAD: Grab data from Django
+    // ==========================================
+    useEffect(() => {
+        if (user?.preferences?.dashboard_layout && !hasHydrated.current) {
+            const savedLayout = user.preferences.dashboard_layout;
+
+            // Safety check: Only inject if it's actually an array of widgets.
+            // (Prevents a crash if MariaDB returns a default empty object {})
+            if (Array.isArray(savedLayout)) {
+                setWidgets(savedLayout);
+            }
+
+            hasHydrated.current = true;
+        }
+    }, [user, setWidgets]);
+
+
+    // 🛠️ Format the data for RGL
     const rglLayout = widgets.map(w => ({
         i: w.id,
         x: w.x,
@@ -82,7 +109,7 @@ export default function MyDashboard() {
                 breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
                 cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }} // Our 12-column master grid
                 rowHeight={30}
-                isDraggable={isEditing}     // Only allows dragging when your Settings tools toggle this
+                isDraggable={isEditing}     // Only allows dragging when Settings tools toggle this
                 isResizable={false}         // Double lock-down
                 onLayoutChange={(newLayout) => updateLayoutPositions(newLayout)} // Fires when user drops a widget
                 compactType="vertical"      // Auto-packs widgets to the top