@vendure/dashboard 3.4.1-master-202508070243 → 3.4.1-master-202508120233

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vendure/dashboard",
   "private": false,
-  "version": "3.4.1-master-202508070243",
+  "version": "3.4.1-master-202508120233",
   "type": "module",
   "repository": {
     "type": "git",
@@ -99,10 +99,9 @@
     "@tiptap/starter-kit": "^2.11.5",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "@types/react-grid-layout": "^1.3.5",
     "@uidotdev/usehooks": "^2.4.1",
-    "@vendure/common": "^3.4.1-master-202508070243",
-    "@vendure/core": "^3.4.1-master-202508070243",
+    "@vendure/common": "^3.4.1-master-202508120233",
+    "@vendure/core": "^3.4.1-master-202508120233",
     "@vitejs/plugin-react": "^4.3.4",
     "acorn": "^8.11.3",
     "acorn-walk": "^8.3.2",
@@ -126,7 +125,6 @@
     "react-day-picker": "^9.8.0",
     "react-dom": "^19.0.0",
     "react-dropzone": "^14.3.8",
-    "react-grid-layout": "^1.5.1",
     "react-hook-form": "^7.60.0",
     "react-resizable-panels": "^3.0.3",
     "recharts": "^2.15.4",
@@ -154,5 +152,5 @@
     "lightningcss-linux-arm64-musl": "^1.29.3",
     "lightningcss-linux-x64-musl": "^1.29.1"
   },
-  "gitHead": "46607c032b55593eedba7adb159940e8ea24bf97"
+  "gitHead": "050ab3e98d6054ea65ea01924f69dfd1a9c85306"
 }

package/src/app/routes/_authenticated/index.tsx

@@ -1,4 +1,6 @@
 import { Button } from '@/vdb/components/ui/button.js';
+import type { GridLayout as GridLayoutType } from '@/vdb/components/ui/grid-layout.js';
+import { GridLayout } from '@/vdb/components/ui/grid-layout.js';
 import {
     getDashboardWidget,
     getDashboardWidgetRegistry,
@@ -12,12 +14,9 @@ import {
     PageLayout,
     PageTitle,
 } from '@/vdb/framework/layout-engine/page-layout.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { createFileRoute } from '@tanstack/react-router';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { Responsive as ResponsiveGridLayout } from 'react-grid-layout';
-
-import 'react-grid-layout/css/styles.css';
-import 'react-resizable/css/styles.css';
+import { useEffect, useState, useRef } from 'react';
 
 export const Route = createFileRoute('/_authenticated/')({
     component: DashboardPage,
@@ -27,13 +26,11 @@ const findNextPosition = (
     existingWidgets: DashboardWidgetInstance[],
     newWidgetSize: { w: number; h: number },
 ) => {
-    // Create a set of all occupied cells
     const occupied = new Set();
     let maxExistingRow = 0;
 
     existingWidgets.forEach(widget => {
         const { x, y, w, h } = widget.layout;
-        // Track the maximum row used by existing widgets
         maxExistingRow = Math.max(maxExistingRow, y + h);
 
         for (let i = x; i < x + w; i++) {
@@ -43,16 +40,13 @@ const findNextPosition = (
         }
     });
 
-    // Search up to 3 rows past the last occupied row
     const maxSearchRows = maxExistingRow + 3;
 
-    // Find first position where the widget fits
     for (let y = 0; y < maxSearchRows; y++) {
-        for (let x = 0; x < 12 - (newWidgetSize.w || 1); x++) {
+        for (let x = 0; x <= 12 - newWidgetSize.w; x++) {
             let fits = true;
-            // Check if all cells needed for this widget are free
-            for (let i = x; i < x + (newWidgetSize.w || 1); i++) {
-                for (let j = y; j < y + (newWidgetSize.h || 1); j++) {
+            for (let i = x; i < x + newWidgetSize.w; i++) {
+                for (let j = y; j < y + newWidgetSize.h; j++) {
                     if (occupied.has(`${i},${j}`)) {
                         fits = false;
                         break;
@@ -65,46 +59,52 @@ const findNextPosition = (
             }
         }
     }
-    // If no space found, place it in the next row after all existing widgets
     return { x: 0, y: maxExistingRow };
 };
 
 function DashboardPage() {
     const [widgets, setWidgets] = useState<DashboardWidgetInstance[]>([]);
     const [editMode, setEditMode] = useState(false);
-    const [layoutWidth, setLayoutWidth] = useState<number | undefined>(undefined);
-    const layoutRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        if (!layoutRef.current) return;
-
-        const resizeObserver = new ResizeObserver(entries => {
-            for (const entry of entries) {
-                setLayoutWidth(entry.contentRect.width);
-            }
-        });
-
-        resizeObserver.observe(layoutRef.current);
+    const [isInitialized, setIsInitialized] = useState(false);
+    const prevEditModeRef = useRef(editMode);
 
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, []);
+    const { settings, setWidgetLayout } = useUserSettings();
 
     useEffect(() => {
+        const savedLayouts = settings.widgetLayout || {};
+        
         const initialWidgets = Array.from(getDashboardWidgetRegistry().entries()).reduce(
             (acc: DashboardWidgetInstance[], [id, widget]) => {
+                const defaultSize = {
+                    w: widget.defaultSize.w ?? 4, // Default 4 columns
+                    h: widget.defaultSize.h ?? 3, // Default 3 rows
+                };
+
+                // Use minSize if specified, otherwise fall back to defaultSize
+                const minSize = {
+                    w: widget.minSize?.w ?? defaultSize.w,
+                    h: widget.minSize?.h ?? defaultSize.h,
+                };
+
+                // Check if we have a saved layout for this widget
+                const savedLayout = savedLayouts[id];
+                
                 const layout = {
-                    ...widget.defaultSize,
-                    x: widget.defaultSize.x ?? 0,
-                    y: widget.defaultSize.y ?? 0,
+                    w: savedLayout?.w ?? defaultSize.w,
+                    h: savedLayout?.h ?? defaultSize.h,
+                    x: savedLayout?.x ?? widget.defaultSize.x ?? 0,
+                    y: savedLayout?.y ?? widget.defaultSize.y ?? 0,
+                    minW: minSize.w,
+                    minH: minSize.h,
+                    maxW: widget.maxSize?.w,
+                    maxH: widget.maxSize?.h,
                 };
 
-                // If x or y is not set, find the next available position
-                if (widget.defaultSize.x === undefined || widget.defaultSize.y === undefined) {
+                // Only find next position if we don't have a saved layout
+                if (!savedLayout) {
                     const pos = findNextPosition(acc, {
-                        w: widget.defaultSize.w || 1,
-                        h: widget.defaultSize.h || 1,
+                        w: layout.w,
+                        h: layout.h,
                     });
                     layout.x = pos.x;
                     layout.y = pos.y;
@@ -123,69 +123,87 @@ function DashboardPage() {
         );
 
         setWidgets(initialWidgets);
-    }, []);
+        setIsInitialized(true);
+    }, [settings.widgetLayout]);
+    
+    // Save layout when edit mode is turned off
+    useEffect(() => {
+        // Only save when transitioning from edit mode ON to OFF
+        if (prevEditModeRef.current && !editMode && isInitialized && widgets.length > 0) {
+            const layoutConfig: Record<string, { x: number; y: number; w: number; h: number }> = {};
+            widgets.forEach(widget => {
+                layoutConfig[widget.widgetId] = {
+                    x: widget.layout.x,
+                    y: widget.layout.y,
+                    w: widget.layout.w,
+                    h: widget.layout.h,
+                };
+            });
+            setWidgetLayout(layoutConfig);
+        }
+        
+        // Update the ref for next render
+        prevEditModeRef.current = editMode;
+    }, [editMode, isInitialized, widgets, setWidgetLayout]);
 
-    const handleLayoutChange = (layout: ReactGridLayout.Layout[]) => {
+    const handleLayoutChange = (layouts: GridLayoutType[]) => {
         setWidgets(prev =>
             prev.map((widget, i) => ({
                 ...widget,
-                layout: layout[i],
+                layout: layouts[i] || widget.layout,
             })),
         );
     };
 
-    const memoizedLayoutGrid = useMemo(() => {
-        return (
-            layoutWidth && (
-                <ResponsiveGridLayout
-                    className="overflow-hidden"
-                    key={layoutWidth}
-                    width={layoutWidth}
-                    layouts={{ lg: widgets.map(w => ({ ...w.layout, i: w.id })) }}
-                    onLayoutChange={handleLayoutChange}
-                    cols={{ lg: 12, md: 12, sm: 6, xs: 4, xxs: 2 }}
-                    rowHeight={100}
-                    isDraggable={editMode}
-                    isResizable={editMode}
-                    autoSize={true}
-                    innerRef={layoutRef}
-                    transformScale={0.9}
-                >
-                    {widgets.map(widget => {
-                        const definition = getDashboardWidget(widget.widgetId);
-                        if (!definition) return null;
-                        const WidgetComponent = definition.component;
-
-                        return (
-                            <div key={widget.id}>
-                                <WidgetComponent id={widget.id} config={widget.config} />
-                            </div>
-                        );
-                    })}
-                </ResponsiveGridLayout>
-            )
-        );
-    }, [layoutWidth, editMode, widgets]);
+    const renderWidget = (widget: DashboardWidgetInstance) => {
+        const definition = getDashboardWidget(widget.widgetId);
+        if (!definition) return null;
+        const WidgetComponent = definition.component;
+
+        return <WidgetComponent key={widget.id} id={widget.id} config={widget.config} />;
+    };
 
     return (
         <Page pageId="insights">
             <PageTitle>Insights</PageTitle>
             <PageActionBar>
                 <PageActionBarRight>
-                    <Button variant="outline" onClick={() => setEditMode(prev => !prev)}>
-                        Edit Mode
-                        {editMode ? (
-                            <span className="text-xs text-destructive">ON</span>
-                        ) : (
-                            <span className="text-xs text-muted-foreground">OFF</span>
-                        )}
+                    <Button 
+                        variant={editMode ? "default" : "outline"} 
+                        onClick={() => setEditMode(prev => !prev)}
+                    >
+                        {editMode ? "Save Layout" : "Edit Layout"}
                     </Button>
                 </PageActionBarRight>
             </PageActionBar>
             <PageLayout>
                 <FullWidthPageBlock blockId="widgets">
-                    <div ref={layoutRef} className="h-full w-full">
-                        {memoizedLayoutGrid}
+                    <div className="w-full">
+                        {widgets.length > 0 ? (
+                            <GridLayout
+                                layouts={widgets.map(w => ({ ...w.layout, i: w.id }))}
+                                onLayoutChange={handleLayoutChange}
+                                cols={12}
+                                rowHeight={100}
+                                isDraggable={editMode}
+                                isResizable={editMode}
+                                className="min-h-[400px]"
+                                gutter={10}
+                            >
+                                {
+                                    widgets
+                                        .map(widget => renderWidget(widget))
+                                        .filter(Boolean) as React.ReactElement[]
+                                }
+                            </GridLayout>
+                        ) : (
+                            <div
+                                className="flex items-center justify-center text-muted-foreground"
+                                style={{ height: '400px' }}
+                            >
+                                No widgets available
+                            </div>
+                        )}
                     </div>
                 </FullWidthPageBlock>
             </PageLayout>

package/src/app/styles.css

@@ -94,7 +94,3 @@
     }
 }
 
-/* Overrides for the react-grid-layout library */
-.react-grid-item {
-    transition: none !important;
-}

package/src/lib/components/ui/grid-layout.tsx

@@ -0,0 +1,376 @@
+import * as React from "react";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { cn } from "@/vdb/lib/utils";
+
+export interface GridLayout {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    i: string;
+    minW?: number;
+    minH?: number;
+    maxW?: number;
+    maxH?: number;
+}
+
+export interface GridLayoutProps {
+    children: React.ReactElement[];
+    layouts: GridLayout[];
+    onLayoutChange?: (layouts: GridLayout[]) => void;
+    cols?: number;
+    rowHeight?: number;
+    isDraggable?: boolean;
+    isResizable?: boolean;
+    className?: string;
+    gutter?: number;
+}
+
+interface GridItemProps {
+    layout: GridLayout;
+    children: React.ReactNode;
+    isDraggable?: boolean;
+    isResizable?: boolean;
+    onLayoutChange?: (layout: GridLayout) => void;
+    onInteractionStart?: () => void;
+    onInteractionEnd?: () => void;
+    cols?: number;
+    rowHeight?: number;
+    gutter?: number;
+}
+
+function GridItem({
+    layout,
+    children,
+    isDraggable = false,
+    isResizable = false,
+    onLayoutChange,
+    onInteractionStart,
+    onInteractionEnd,
+    cols = 12,
+    rowHeight = 100,
+    gutter = 10,
+}: GridItemProps) {
+    const [isResizing, setIsResizing] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragStart, setDragStart] = useState({ x: 0, y: 0, mouseX: 0, mouseY: 0 });
+    const itemRef = useRef<HTMLDivElement>(null);
+
+    const handleMouseDown = useCallback((e: React.MouseEvent) => {
+        if (!isDraggable || isResizing) return;
+        e.preventDefault();
+        e.stopPropagation();
+        
+        const rect = itemRef.current?.getBoundingClientRect();
+        if (!rect) return;
+        
+        setIsDragging(true);
+        onInteractionStart?.();
+        setDragStart({
+            x: layout.x,
+            y: layout.y,
+            mouseX: e.clientX,
+            mouseY: e.clientY,
+        });
+    }, [isDraggable, isResizing, layout.x, layout.y, onInteractionStart]);
+
+    const handleResizeStart = useCallback((e: React.MouseEvent) => {
+        if (!isResizable) return;
+        e.preventDefault();
+        e.stopPropagation();
+        setIsResizing(true);
+        onInteractionStart?.();
+        setDragStart({
+            x: layout.w,
+            y: layout.h,
+            mouseX: e.clientX,
+            mouseY: e.clientY,
+        });
+    }, [isResizable, layout.w, layout.h, onInteractionStart]);
+
+    useEffect(() => {
+        const handleMouseMove = (e: MouseEvent) => {
+            if (!itemRef.current) return;
+            
+            const containerRect = itemRef.current.parentElement?.getBoundingClientRect();
+            if (!containerRect) return;
+            
+            const colWidth = (containerRect.width - gutter * (cols - 1)) / cols;
+            
+            if (isDragging && onLayoutChange) {
+                const deltaX = e.clientX - dragStart.mouseX;
+                const deltaY = e.clientY - dragStart.mouseY;
+                
+                const newX = Math.round(dragStart.x + deltaX / colWidth);
+                const newY = Math.round(dragStart.y + deltaY / rowHeight);
+                
+                onLayoutChange({
+                    ...layout,
+                    x: Math.max(0, Math.min(cols - layout.w, newX)),
+                    y: Math.max(0, newY),
+                });
+            } else if (isResizing && onLayoutChange) {
+                const deltaX = e.clientX - dragStart.mouseX;
+                const deltaY = e.clientY - dragStart.mouseY;
+                
+                const newW = Math.round(dragStart.x + deltaX / colWidth);
+                const newH = Math.round(dragStart.y + deltaY / rowHeight);
+                
+                // Apply min/max constraints
+                const minW = layout.minW ?? 1;
+                const minH = layout.minH ?? 1;
+                const maxW = layout.maxW ?? (cols - layout.x);
+                const maxH = layout.maxH ?? 999;
+                
+                onLayoutChange({
+                    ...layout,
+                    w: Math.max(minW, Math.min(maxW, Math.min(cols - layout.x, newW))),
+                    h: Math.max(minH, Math.min(maxH, newH)),
+                });
+            }
+        };
+
+        const handleMouseUp = () => {
+            if (isDragging || isResizing) {
+                onInteractionEnd?.();
+            }
+            setIsDragging(false);
+            setIsResizing(false);
+        };
+
+        if (isDragging || isResizing) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            return () => {
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+            };
+        }
+    }, [isDragging, isResizing, dragStart, layout, onLayoutChange, onInteractionEnd, cols, rowHeight]);
+
+    const colWidth = `calc((100% - ${gutter * (cols - 1)}px) / ${cols})`;
+    const style: React.CSSProperties = {
+        position: 'absolute',
+        left: `calc(${layout.x} * (${colWidth} + ${gutter}px))`,
+        top: `calc(${layout.y} * (${rowHeight}px + ${gutter}px))`,
+        width: `calc(${layout.w} * ${colWidth} + ${(layout.w - 1) * gutter}px)`,
+        height: `calc(${layout.h} * ${rowHeight}px + ${(layout.h - 1) * gutter}px)`,
+        zIndex: isDragging || isResizing ? 1000 : 10, // Normal widgets above grid (10), active widget much higher (1000)
+    };
+
+    return (
+        <div
+            ref={itemRef}
+            style={style}
+            className={cn(
+                "transition-shadow",
+                isDraggable && !isResizing && "cursor-move",
+                (isDragging || isResizing) && "shadow-lg",
+            )}
+            onMouseDown={handleMouseDown}
+        >
+            <div className="h-full w-full">
+                {children}
+            </div>
+            {isResizable && (
+                <div
+                    className="absolute bottom-0 right-0 w-4 h-4 cursor-se-resize bg-muted-foreground/20 hover:bg-muted-foreground/40 transition-colors"
+                    style={{
+                        clipPath: "polygon(100% 0%, 0% 100%, 100% 100%)",
+                    }}
+                    onMouseDown={handleResizeStart}
+                />
+            )}
+        </div>
+    );
+}
+
+export function GridLayout({
+    children,
+    layouts,
+    onLayoutChange,
+    cols = 12,
+    rowHeight = 100,
+    isDraggable = false,
+    isResizable = false,
+    className,
+    gutter = 10,
+}: GridLayoutProps) {
+    const [showGrid, setShowGrid] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
+    
+    // Detect mobile screen size
+    useEffect(() => {
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth < 768); // Tailwind's md breakpoint
+        };
+        
+        checkMobile();
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
+    
+    // Transform layouts for mobile - stack widgets vertically in full width
+    const mobileLayouts = React.useMemo(() => {
+        if (!isMobile) return layouts;
+        
+        return layouts.map((layout, index) => ({
+            ...layout,
+            x: 0,
+            y: layouts.slice(0, index).reduce((sum, l) => sum + l.h, 0),
+            w: cols, // Full width
+        }));
+    }, [layouts, isMobile, cols]);
+    
+    const effectiveLayouts = isMobile ? mobileLayouts : layouts;
+    const effectiveGutter = isMobile ? 5 : gutter; // Smaller gutter on mobile
+    const maxRow = Math.max(...effectiveLayouts.map(l => l.y + l.h), 4); // Minimum 4 rows
+    const containerHeight = maxRow * rowHeight + (maxRow - 1) * effectiveGutter;
+
+    // Helper function to check if two layouts overlap
+    const layoutsOverlap = (a: GridLayout, b: GridLayout): boolean => {
+        return !(
+            a.x + a.w <= b.x || // a is left of b
+            b.x + b.w <= a.x || // b is left of a
+            a.y + a.h <= b.y || // a is above b
+            b.y + b.h <= a.y    // b is above a
+        );
+    };
+
+    // Helper function to find the next available position for a widget
+    const findNextAvailablePosition = (
+        widget: GridLayout,
+        occupiedLayouts: GridLayout[],
+        draggedWidget?: GridLayout
+    ): GridLayout => {
+        const sortedLayouts = [...occupiedLayouts]
+            .filter(l => l.i !== widget.i && (!draggedWidget || l.i !== draggedWidget.i))
+            .sort((a, b) => a.y === b.y ? a.x - b.x : a.y - b.y);
+
+        // Try to place widget in rows, starting from its current position
+        for (let y = widget.y; y < 100; y++) { // Max 100 rows
+            for (let x = 0; x <= cols - widget.w; x++) {
+                const testLayout = { ...widget, x, y };
+                
+                // Check if this position overlaps with any other widget
+                const hasOverlap = sortedLayouts.some(layout => layoutsOverlap(testLayout, layout));
+                
+                // Also check overlap with dragged widget if provided
+                if (!hasOverlap && (!draggedWidget || !layoutsOverlap(testLayout, draggedWidget))) {
+                    return testLayout;
+                }
+            }
+        }
+        
+        // Fallback: place at the bottom
+        const maxY = Math.max(...sortedLayouts.map(l => l.y + l.h), 0);
+        return { ...widget, x: 0, y: maxY };
+    };
+
+    const handleItemLayoutChange = useCallback((newLayout: GridLayout) => {
+        if (onLayoutChange && !isMobile) { // Disable layout changes on mobile
+            const newLayouts = [...layouts];
+            const draggedIndex = layouts.findIndex(l => l.i === newLayout.i);
+            
+            if (draggedIndex === -1) return;
+            
+            // Update the dragged widget's position
+            newLayouts[draggedIndex] = newLayout;
+            
+            // Find widgets that overlap with the new position
+            const overlappingWidgets: number[] = [];
+            
+            for (let i = 0; i < newLayouts.length; i++) {
+                if (i !== draggedIndex && layoutsOverlap(newLayout, newLayouts[i])) {
+                    overlappingWidgets.push(i);
+                }
+            }
+            
+            // Move overlapping widgets to new positions
+            for (const index of overlappingWidgets) {
+                const widgetToMove = newLayouts[index];
+                const newPosition = findNextAvailablePosition(widgetToMove, newLayouts, newLayout);
+                newLayouts[index] = newPosition;
+            }
+            
+            onLayoutChange(newLayouts);
+        }
+    }, [layouts, onLayoutChange, cols, isMobile]);
+
+    const handleInteractionStart = useCallback(() => {
+        setShowGrid(true);
+    }, []);
+
+    const handleInteractionEnd = useCallback(() => {
+        setShowGrid(false);
+    }, []);
+
+    // Create grid overlay
+    const renderGridOverlay = () => {
+        if (!showGrid) return null;
+        
+        const gridCells = [];
+        for (let row = 0; row < maxRow; row++) {
+            for (let col = 0; col < cols; col++) {
+                const colWidth = `calc((100% - ${effectiveGutter * (cols - 1)}px) / ${cols})`;
+                const cellStyle: React.CSSProperties = {
+                    position: 'absolute',
+                    left: `calc(${col} * (${colWidth} + ${effectiveGutter}px))`,
+                    top: `calc(${row} * (${rowHeight}px + ${effectiveGutter}px))`,
+                    width: colWidth,
+                    height: `${rowHeight}px`,
+                    pointerEvents: 'none',
+                    zIndex: 0, // Behind widgets but above background
+                    boxSizing: 'border-box',
+                };
+                
+                gridCells.push(
+                    <div
+                        key={`grid-${row}-${col}`}
+                        style={cellStyle}
+                        className="transition-opacity duration-200 border-2 border-dashed border-primary bg-primary/10"
+                    />
+                );
+            }
+        }
+        
+        return gridCells;
+    };
+
+    return (
+        <div
+            className={cn("relative w-full bg-muted/10", className)}
+            style={{ 
+                height: `${containerHeight}px`,
+                backgroundImage: `
+                    linear-gradient(to right, hsl(var(--border)) 1px, transparent 1px),
+                    linear-gradient(to bottom, hsl(var(--border)) 1px, transparent 1px)
+                `,
+                backgroundSize: `${100 / cols}% ${rowHeight}px`,
+            }}
+        >
+            {children.map((child, index) => {
+                const layout = effectiveLayouts[index];
+                if (!layout) return null;
+
+                return (
+                    <GridItem
+                        key={layout.i}
+                        layout={layout}
+                        isDraggable={isDraggable && !isMobile} // Disable dragging on mobile
+                        isResizable={isResizable && !isMobile} // Disable resizing on mobile
+                        onLayoutChange={handleItemLayoutChange}
+                        onInteractionStart={handleInteractionStart}
+                        onInteractionEnd={handleInteractionEnd}
+                        cols={cols}
+                        rowHeight={rowHeight}
+                        gutter={effectiveGutter}
+                    >
+                        {child}
+                    </GridItem>
+                );
+            })}
+            {renderGridOverlay()}
+        </div>
+    );
+}

package/src/lib/framework/dashboard-widget/base-widget.tsx

@@ -69,7 +69,7 @@ export function DashboardBaseWidget({
                 <CardHeader
                     ref={headerRef}
                     className={cn(
-                        'flex flex-row items-center',
+                        'flex flex-col lg:flex-row  items-start lg:items-center',
                         actions ? 'justify-between' : 'justify-start',
                     )}
                 >

package/src/lib/framework/dashboard-widget/orders-summary/index.tsx

@@ -1,8 +1,6 @@
 import { AnimatedCurrency, AnimatedNumber } from '@/vdb/components/shared/animated-number.js';
 import { Tabs, TabsList, TabsTrigger } from '@/vdb/components/ui/tabs.js';
 import { api } from '@/vdb/graphql/api.js';
-import { useChannel } from '@/vdb/hooks/use-channel.js';
-import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { useQuery } from '@tanstack/react-query';
 import { endOfDay, endOfMonth, startOfDay, startOfMonth, subDays, subMonths } from 'date-fns';
 import { useMemo, useState } from 'react';
@@ -139,9 +137,9 @@ export function OrdersSummaryWidget() {
                 </Tabs>
             }
         >
-            <div className="flex flex-col gap-4 items-center justify-center text-center">
-                <div className="flex flex-col gap-2">
-                    <p className="text-lg text-muted-foreground">Total Orders</p>
+            <div className="flex flex-col lg:gap-4 items-center justify-center text-center">
+                <div className="flex flex-col lg:gap-2">
+                    <p className="lg:text-lg text-muted-foreground">Total Orders</p>
                     <p className="text-3xl font-semibold">
                         <AnimatedNumber
                             animationConfig={{ mass: 0.5, stiffness: 90, damping: 10 }}
@@ -150,8 +148,8 @@ export function OrdersSummaryWidget() {
                     </p>
                     <PercentageChange value={orderChange} />
                 </div>
-                <div className="flex flex-col gap-2">
-                    <p className="text-lg text-muted-foreground">Total Revenue</p>
+                <div className="flex flex-col lg:gap-2">
+                    <p className="lg:text-lg text-muted-foreground">Total Revenue</p>
                     <p className="text-3xl font-semibold">
                         <AnimatedCurrency
                             animationConfig={{ mass: 0.2, stiffness: 90, damping: 10 }}

package/src/lib/framework/defaults.ts

@@ -231,6 +231,7 @@ export function registerDefaults() {
         name: 'Metrics Widget',
         component: MetricsWidget,
         defaultSize: { w: 12, h: 6, x: 0, y: 0 },
+        minSize: { w: 6, h: 4 },
     });
 
     registerDashboardWidget({

package/src/lib/framework/extension-api/types/widgets.ts

@@ -42,6 +42,10 @@ export type DashboardWidgetInstance = {
         y: number;
         w: number;
         h: number;
+        minW?: number;
+        minH?: number;
+        maxW?: number;
+        maxH?: number;
     };
     /**
      * @description

package/src/lib/providers/user-settings.tsx

@@ -26,6 +26,7 @@ export interface UserSettings {
     devMode: boolean;
     hasSeenOnboarding: boolean;
     tableSettings?: Record<string, TableSettings>;
+    widgetLayout?: Record<string, { x: number; y: number; w: number; h: number }>;
 }
 
 const defaultSettings: UserSettings = {
@@ -57,6 +58,7 @@ export interface UserSettingsContextType {
         key: K,
         value: TableSettings[K],
     ) => void;
+    setWidgetLayout: (layoutConfig: Record<string, { x: number; y: number; w: number; h: number }>) => void;
 }
 
 export const UserSettingsContext = createContext<UserSettingsContextType | undefined>(undefined);
@@ -87,6 +89,7 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
     const [serverSettings, setServerSettings] = useState<UserSettings | null>(null);
     const [isReady, setIsReady] = useState(false);
     const previousContentLanguage = useRef(settings.contentLanguage);
+    const saveInProgressRef = useRef(false);
 
     // Load settings from server on mount
     const { data: serverSettingsResponse, isSuccess: serverSettingsLoaded } = useQuery({
@@ -102,8 +105,14 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
             api.mutate(setSettingsStoreValueDocument, {
                 input: { key: SETTINGS_STORE_KEY, value: settingsToSave },
             }),
+        onSuccess: (_, settingsSaved) => {
+            // Only update serverSettings after successful save
+            setServerSettings(settingsSaved);
+            saveInProgressRef.current = false;
+        },
         onError: error => {
             console.error('Failed to save user settings to server:', error);
+            saveInProgressRef.current = false;
         },
     });
 
@@ -119,6 +128,10 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
                     setSettings(mergedSettings);
                     setServerSettings(mergedSettings);
                     setIsReady(true);
+                } else {
+                    // Server has no settings, use local settings
+                    setServerSettings(settings);
+                    setIsReady(true);
                 }
             } catch (e) {
                 console.error('Failed to parse server settings:', e);
@@ -139,12 +152,13 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
 
     // Save to server when settings differ from server state
     useEffect(() => {
-        if (isReady && serverSettings) {
+        if (isReady && serverSettings && !saveInProgressRef.current) {
             const serverDiffers = JSON.stringify(serverSettings) !== JSON.stringify(settings);
 
             if (serverDiffers) {
+                saveInProgressRef.current = true;
                 saveToServerMutation.mutate(settings);
-                setServerSettings(settings);
+                // Don't update serverSettings here - wait for mutation success
             }
         }
     }, [settings, serverSettings, isReady, saveToServerMutation]);
@@ -182,6 +196,7 @@ export const UserSettingsProvider: React.FC<UserSettingsProviderProps> = ({ quer
                 },
             }));
         },
+        setWidgetLayout: layoutConfig => updateSetting('widgetLayout', layoutConfig),
     };
 
     return <UserSettingsContext.Provider value={contextValue}>{children}</UserSettingsContext.Provider>;