318927cd0c
Some checks failed
Build Frontend / build (push) Failing after 7s
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.
102 lines
4.3 KiB
TypeScript
102 lines
4.3 KiB
TypeScript
"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>
|
|
)
|
|
}
|