From a6e6cd07571f684132f2cf91b1a1c8177ccc5573 Mon Sep 17 00:00:00 2001
From: g <g@paki.email>
Date: Mon, 12 Jan 2026 11:13:25 +0000
Subject: [PATCH] Remove widget resizing and edit mode from dashboard

Eliminated the ability to resize dashboard widgets by removing colSpan from WidgetConfig, related UI, and logic. Removed edit mode functionality and the EditDashboardButton, simplifying the dashboard layout and widget management. Updated drag-and-drop strategy to vertical list and incremented the storage key version.
---
 components/dashboard/content.tsx              | 30 +++++------------
 components/dashboard/dashboard-editor.tsx     | 33 ++-----------------
 components/dashboard/draggable-widget.tsx     | 11 +------
 .../dashboard/widget-settings-modal.tsx       | 27 ++-------------
 hooks/useWidgetLayout.ts                      | 25 +++++---------
 5 files changed, 23 insertions(+), 103 deletions(-)

diff --git a/components/dashboard/content.tsx b/components/dashboard/content.tsx
index 7681540..9f4d906 100644
--- a/components/dashboard/content.tsx
+++ b/components/dashboard/content.tsx
@@ -6,7 +6,7 @@ import QuickActions from "./quick-actions"
 import RecentActivity from "./recent-activity"
 import { WidgetSettings } from "./widget-settings"
 import { WidgetSettingsModal } from "./widget-settings-modal"
-import { DashboardEditor, EditDashboardButton } from "./dashboard-editor"
+import { DashboardEditor } from "./dashboard-editor"
 import { DraggableWidget } from "./draggable-widget"
 import RevenueWidget from "./revenue-widget"
 import LowStockWidget from "./low-stock-widget"
@@ -46,9 +46,8 @@ export default function Content({ username, orderStats }: ContentProps) {
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const { toast } = useToast();
-  const { widgets, toggleWidget, moveWidget, reorderWidgets, resetLayout, isWidgetVisible, updateWidgetSettings, updateWidgetColSpan } = useWidgetLayout();
+  const { widgets, toggleWidget, moveWidget, reorderWidgets, resetLayout, isWidgetVisible, updateWidgetSettings } = useWidgetLayout();
   const [configuredWidget, setConfiguredWidget] = useState<WidgetConfig | null>(null);
-  const [isEditMode, setIsEditMode] = useState(false);
 
   // Initialize with a default quote to match server-side rendering, then randomize on client
   const [randomQuote, setRandomQuote] = useState({ text: "Loading wisdom...", author: "..." });
@@ -232,10 +231,6 @@ export default function Content({ username, orderStats }: ContentProps) {
           </p>
         </div>
         <div className="flex items-center gap-2">
-          <EditDashboardButton
-            isEditMode={isEditMode}
-            onToggle={() => setIsEditMode(!isEditMode)}
-          />
           <WidgetSettings
             widgets={widgets}
             onToggle={toggleWidget}
@@ -248,30 +243,24 @@ export default function Content({ username, orderStats }: ContentProps) {
 
       <DashboardEditor
         widgets={widgets}
-        isEditMode={isEditMode}
-        onToggleEditMode={() => setIsEditMode(false)}
+        isEditMode={false}
+        onToggleEditMode={() => { }}
         onReorder={reorderWidgets}
         onReset={resetLayout}
       >
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 auto-rows-min">
+        <div className="space-y-10">
           {widgets.map((widget) => {
-            if (!widget.visible && !isEditMode) return null;
+            if (!widget.visible) return null;
 
             return (
               <DraggableWidget
                 key={widget.id}
                 widget={widget}
-                isEditMode={isEditMode}
+                isEditMode={false}
                 onConfigure={() => setConfiguredWidget(widget)}
                 onToggleVisibility={() => toggleWidget(widget.id)}
               >
-                {!widget.visible && isEditMode ? (
-                  <div className="opacity-40 grayscale pointer-events-none h-full">
-                    {renderWidget(widget)}
-                  </div>
-                ) : (
-                  renderWidget(widget)
-                )}
+                {renderWidget(widget)}
               </DraggableWidget>
             );
           })}
@@ -283,9 +272,8 @@ export default function Content({ username, orderStats }: ContentProps) {
         widget={configuredWidget}
         open={!!configuredWidget}
         onOpenChange={(open) => !open && setConfiguredWidget(null)}
-        onSave={(widgetId, settings, colSpan) => {
+        onSave={(widgetId, settings) => {
           updateWidgetSettings(widgetId, settings);
-          if (colSpan !== undefined) updateWidgetColSpan(widgetId, colSpan);
         }}
       />
     </div>
diff --git a/components/dashboard/dashboard-editor.tsx b/components/dashboard/dashboard-editor.tsx
index bdd6765..063bfe0 100644
--- a/components/dashboard/dashboard-editor.tsx
+++ b/components/dashboard/dashboard-editor.tsx
@@ -15,7 +15,7 @@ import {
 import {
     SortableContext,
     sortableKeyboardCoordinates,
-    rectSortingStrategy,
+    verticalListSortingStrategy,
     arrayMove,
 } from "@dnd-kit/sortable"
 import { Button } from "@/components/ui/button"
@@ -81,7 +81,7 @@ export function DashboardEditor({
         >
             <SortableContext
                 items={widgets.map(w => w.id)}
-                strategy={rectSortingStrategy}
+                strategy={verticalListSortingStrategy}
             >
                 {children}
             </SortableContext>
@@ -126,32 +126,3 @@ export function DashboardEditor({
     )
 }
 
-// Edit button component to add to the header
-export function EditDashboardButton({
-    isEditMode,
-    onToggle
-}: {
-    isEditMode: boolean
-    onToggle: () => void
-}) {
-    return (
-        <Button
-            variant={isEditMode ? "default" : "outline"}
-            size="sm"
-            className="h-8 gap-2"
-            onClick={onToggle}
-        >
-            {isEditMode ? (
-                <>
-                    <X className="h-4 w-4" />
-                    <span className="hidden sm:inline">Cancel</span>
-                </>
-            ) : (
-                <>
-                    <Edit3 className="h-4 w-4" />
-                    <span className="hidden sm:inline">Edit Layout</span>
-                </>
-            )}
-        </Button>
-    )
-}
diff --git a/components/dashboard/draggable-widget.tsx b/components/dashboard/draggable-widget.tsx
index e4291b5..b404471 100644
--- a/components/dashboard/draggable-widget.tsx
+++ b/components/dashboard/draggable-widget.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import React from "react"
+import React, { useState, useEffect, useRef } from "react"
 import { useSortable } from "@dnd-kit/sortable"
 import { CSS } from "@dnd-kit/utilities"
 import { GripVertical, Settings, X, Eye, EyeOff } from "lucide-react"
@@ -41,21 +41,12 @@ export function DraggableWidget({
         zIndex: isDragging ? 1000 : 1,
     }
 
-    const colSpanClasses = {
-        1: "lg:col-span-1",
-        2: "lg:col-span-2",
-        3: "lg:col-span-3",
-        4: "lg:col-span-4",
-    }[widget.colSpan || 4] || "lg:col-span-4"
-
     return (
         <div
             ref={setNodeRef}
             style={style}
             className={cn(
                 "relative group",
-                colSpanClasses,
-                "md:col-span-2", // Default to 2 columns on tablet
                 isEditMode && "ring-2 ring-primary ring-offset-2 ring-offset-background rounded-lg",
                 isDragging && "z-50 shadow-2xl"
             )}
diff --git a/components/dashboard/widget-settings-modal.tsx b/components/dashboard/widget-settings-modal.tsx
index cc6646a..37b645e 100644
--- a/components/dashboard/widget-settings-modal.tsx
+++ b/components/dashboard/widget-settings-modal.tsx
@@ -28,25 +28,23 @@ interface WidgetSettingsModalProps {
     widget: WidgetConfig | null
     open: boolean
     onOpenChange: (open: boolean) => void
-    onSave: (widgetId: string, settings: Record<string, any>, colSpan: number) => void
+    onSave: (widgetId: string, settings: Record<string, any>) => void
 }
 
 export function WidgetSettingsModal({ widget, open, onOpenChange, onSave }: WidgetSettingsModalProps) {
     const [localSettings, setLocalSettings] = useState<Record<string, any>>({})
-    const [localColSpan, setLocalColSpan] = useState<number>(4)
 
     // Initialize local settings when widget changes
     const handleOpenChange = (isOpen: boolean) => {
         if (isOpen && widget) {
             setLocalSettings({ ...widget.settings })
-            setLocalColSpan(widget.colSpan || 4)
         }
         onOpenChange(isOpen)
     }
 
     const handleSave = () => {
         if (widget) {
-            onSave(widget.id, localSettings, localColSpan)
+            onSave(widget.id, localSettings)
             onOpenChange(false)
         }
     }
@@ -72,27 +70,6 @@ export function WidgetSettingsModal({ widget, open, onOpenChange, onSave }: Widg
 
                 <ScrollArea className="max-h-[60vh] -mr-4 pr-4">
                     <div className="space-y-6 py-4">
-                        {/* Resize Selection */}
-                        <div className="space-y-3 pb-6 border-b border-border/40">
-                            <Label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Widget Display</Label>
-                            <div className="flex items-center justify-between">
-                                <Label htmlFor="colSpan" className="text-sm font-medium">Widget Width</Label>
-                                <Select
-                                    value={String(localColSpan)}
-                                    onValueChange={(v) => setLocalColSpan(parseInt(v))}
-                                >
-                                    <SelectTrigger className="w-40">
-                                        <SelectValue />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem value="1">Small (1/4)</SelectItem>
-                                        <SelectItem value="2">Medium (1/2)</SelectItem>
-                                        <SelectItem value="3">Large (3/4)</SelectItem>
-                                        <SelectItem value="4">Full Width</SelectItem>
-                                    </SelectContent>
-                                </Select>
-                            </div>
-                        </div>
 
                         <div className="space-y-4">
                             {/* Recent Activity Settings */}
diff --git a/hooks/useWidgetLayout.ts b/hooks/useWidgetLayout.ts
index b2b0b22..51be753 100644
--- a/hooks/useWidgetLayout.ts
+++ b/hooks/useWidgetLayout.ts
@@ -50,22 +50,21 @@ export interface WidgetConfig {
     title: string
     visible: boolean
     order: number
-    colSpan: number // 1, 2, 3, 4 (full)
     settings?: Record<string, any>
 }
 
 const DEFAULT_WIDGETS: WidgetConfig[] = [
-    { id: "quick-actions", title: "Quick Actions", visible: true, order: 0, colSpan: 4 },
-    { id: "overview", title: "Overview", visible: true, order: 1, colSpan: 4, settings: { showChange: false } },
-    { id: "recent-activity", title: "Recent Activity", visible: true, order: 2, colSpan: 2, settings: { itemCount: 10 } },
-    { id: "top-products", title: "Top Products", visible: true, order: 3, colSpan: 2, settings: { itemCount: 5, showRevenue: true } },
-    { id: "revenue-chart", title: "Revenue Chart", visible: false, order: 4, colSpan: 2, settings: { days: 7, showComparison: false } },
-    { id: "low-stock", title: "Low Stock Alerts", visible: false, order: 5, colSpan: 2, settings: { threshold: 5, itemCount: 5 } },
-    { id: "recent-customers", title: "Recent Customers", visible: false, order: 6, colSpan: 2, settings: { itemCount: 5, showSpent: true } },
-    { id: "pending-chats", title: "Pending Chats", visible: false, order: 7, colSpan: 2, settings: { showPreview: true } },
+    { id: "quick-actions", title: "Quick Actions", visible: true, order: 0 },
+    { id: "overview", title: "Overview", visible: true, order: 1, settings: { showChange: false } },
+    { id: "recent-activity", title: "Recent Activity", visible: true, order: 2, settings: { itemCount: 10 } },
+    { id: "top-products", title: "Top Products", visible: true, order: 3, settings: { itemCount: 5, showRevenue: true } },
+    { id: "revenue-chart", title: "Revenue Chart", visible: false, order: 4, settings: { days: 7, showComparison: false } },
+    { id: "low-stock", title: "Low Stock Alerts", visible: false, order: 5, settings: { threshold: 5, itemCount: 5 } },
+    { id: "recent-customers", title: "Recent Customers", visible: false, order: 6, settings: { itemCount: 5, showSpent: true } },
+    { id: "pending-chats", title: "Pending Chats", visible: false, order: 7, settings: { showPreview: true } },
 ]
 
-const STORAGE_KEY = "dashboard-widget-layout-v3"
+const STORAGE_KEY = "dashboard-widget-layout-v4"
 
 /**
  * useWidgetLayout - Persist and manage dashboard widget visibility, order, and settings
@@ -140,11 +139,6 @@ export function useWidgetLayout() {
         )
     }, [])
 
-    const updateWidgetColSpan = useCallback((widgetId: string, colSpan: number) => {
-        setWidgets(prev =>
-            prev.map(w => w.id === widgetId ? { ...w, colSpan } : w)
-        )
-    }, [])
 
     const getWidgetSettings = useCallback(<T extends Record<string, any>>(widgetId: string): T | undefined => {
         return widgets.find(w => w.id === widgetId)?.settings as T | undefined
@@ -185,7 +179,6 @@ export function useWidgetLayout() {
         moveWidget,
         reorderWidgets,
         updateWidgetSettings,
-        updateWidgetColSpan,
         getWidgetSettings,
         resetLayout,
         getVisibleWidgets,