Add modular dashboard widgets and layout editor

Introduces a modular dashboard system with draggable, configurable widgets including revenue, low stock, recent customers, and pending chats. Adds a dashboard editor for layout customization, widget visibility, and settings. Refactors dashboard content to use the new widget system and improves UI consistency and interactivity.
2026-01-12 10:39:50 +00:00
parent a6b7286b45
commit 318927cd0c
23 changed files with 2435 additions and 317 deletions
--- a/components/dashboard/widget-settings.tsx
+++ b/components/dashboard/widget-settings.tsx
@@ -0,0 +1,101 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+    DropdownMenuCheckboxItem,
+} from "@/components/ui/dropdown-menu"
+import { Settings2, ChevronUp, ChevronDown, RotateCcw, Eye, EyeOff, Cog } from "lucide-react"
+import { WidgetConfig } from "@/hooks/useWidgetLayout"
+
+interface WidgetSettingsProps {
+    widgets: WidgetConfig[]
+    onToggle: (id: string) => void
+    onMove: (id: string, direction: "up" | "down") => void
+    onReset: () => void
+    onConfigure?: (widget: WidgetConfig) => void
+}
+
+export function WidgetSettings({ widgets, onToggle, onMove, onReset, onConfigure }: WidgetSettingsProps) {
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm" className="h-8 gap-2">
+                    <Settings2 className="h-4 w-4" />
+                    <span className="hidden sm:inline">Customize</span>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-64">
+                <DropdownMenuLabel className="flex items-center justify-between">
+                    Dashboard Widgets
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-6 px-2 text-xs"
+                        onClick={onReset}
+                    >
+                        <RotateCcw className="h-3 w-3 mr-1" />
+                        Reset
+                    </Button>
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                {widgets.map((widget, index) => (
+                    <div key={widget.id} className="flex items-center gap-1 px-2 py-1.5 hover:bg-muted/50 rounded-sm">
+                        <button
+                            onClick={() => onToggle(widget.id)}
+                            className="flex-1 flex items-center gap-2 text-sm hover:text-foreground transition-colors"
+                        >
+                            {widget.visible ? (
+                                <Eye className="h-4 w-4 text-primary" />
+                            ) : (
+                                <EyeOff className="h-4 w-4 text-muted-foreground" />
+                            )}
+                            <span className={widget.visible ? "" : "text-muted-foreground line-through"}>
+                                {widget.title}
+                            </span>
+                        </button>
+                        <div className="flex items-center gap-0.5">
+                            {widget.settings && onConfigure && (
+                                <Button
+                                    variant="ghost"
+                                    size="icon"
+                                    className="h-6 w-6"
+                                    onClick={(e) => {
+                                        e.stopPropagation()
+                                        onConfigure(widget)
+                                    }}
+                                    title="Configure widget"
+                                >
+                                    <Cog className="h-3 w-3" />
+                                </Button>
+                            )}
+                            <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-6 w-6"
+                                onClick={() => onMove(widget.id, "up")}
+                                disabled={index === 0}
+                            >
+                                <ChevronUp className="h-3 w-3" />
+                            </Button>
+                            <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-6 w-6"
+                                onClick={() => onMove(widget.id, "down")}
+                                disabled={index === widgets.length - 1}
+                            >
+                                <ChevronDown className="h-3 w-3" />
+                            </Button>
+                        </div>
+                    </div>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    )
+}