@moontra/moonui-pro 2.4.5 → 2.5.0

package/src/components/dashboard/index.tsx

@@ -1,333 +1,741 @@
 "use client"
 
 import React from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
-import { MoonUIBadgePro as Badge } from '../ui/badge'
+import { motion, AnimatePresence } from 'framer-motion'
 import { Button } from '../ui/button'
+import { Badge } from '../ui/badge'
+import { Input } from '../ui/input'
+import { ScrollArea } from '../ui/scroll-area'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs'
 import { 
-  TrendingUp, 
-  TrendingDown, 
-  Users, 
-  DollarSign, 
-  Activity, 
-  BarChart3,
-  Eye,
+  Activity,
   Download,
-  Star,
-  Clock,
+  Upload,
+  Settings,
+  Edit3,
+  Save,
+  X,
+  Plus,
+  RefreshCw,
+  Share2,
+  Filter,
+  LayoutGrid,
+  Palette,
+  Search,
+  Bell,
+  Menu,
+  ChevronRight,
+  Sparkles,
+  BarChart3,
+  Users,
+  DollarSign,
+  TrendingUp,
   Calendar,
+  Map,
+  Table,
+  Clock,
+  Target,
   ArrowUpRight,
-  ArrowDownRight,
-  Minus,
-  Lock,
-  Sparkles
+  CheckCircle
 } from 'lucide-react'
 import { cn } from '../../lib/utils'
-
-interface DashboardMetric {
-  id: string
-  title: string
-  value: string | number
-  change?: {
-    value: number
-    type: 'increase' | 'decrease' | 'neutral'
-    period: string
-  }
-  icon?: React.ReactNode
-  color?: string
-  description?: string
-  trend?: number[]
-}
-
-interface DashboardWidget {
-  id: string
-  title: string
-  description?: string
-  content: React.ReactNode
-  size?: 'sm' | 'md' | 'lg' | 'xl'
-  loading?: boolean
-  error?: string
-}
+import { DashboardGrid } from './dashboard-grid'
+import { TimeRangePicker } from './time-range-picker'
+import { MetricCard } from './widgets/metric-card'
+import { ChartWidget } from './widgets/chart-widget'
+import { ActivityFeed } from './widgets/activity-feed'
+import {
+  Widget,
+  DashboardConfig,
+  DashboardTheme,
+  TimeRange,
+  MetricData,
+  ChartData,
+  ActivityItem,
+  DashboardTemplate,
+  WidgetType
+} from './types'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '../ui/dialog'
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '../ui/sheet'
 
 interface DashboardProps {
-  metrics?: DashboardMetric[]
-  widgets?: DashboardWidget[]
-  onMetricClick?: (metric: DashboardMetric) => void
-  onWidgetAction?: (widgetId: string, action: string) => void
+  config?: DashboardConfig
+  widgets?: Widget[]
+  templates?: DashboardTemplate[]
+  onConfigChange?: (config: DashboardConfig) => void
+  onWidgetAdd?: (widget: Omit<Widget, 'id'>) => void
+  onWidgetRemove?: (widgetId: string) => void
+  onWidgetUpdate?: (widgetId: string, updates: Partial<Widget>) => void
+  onExport?: (format: 'json' | 'pdf' | 'png') => void
+  onImport?: (file: File) => void
   className?: string
   showHeader?: boolean
   title?: string
   description?: string
-  refreshable?: boolean
-  onRefresh?: () => void
-  loading?: boolean
+  editable?: boolean
+  realtime?: boolean
+  glassmorphism?: boolean
 }
 
-const METRIC_COLORS = {
-  primary: 'text-blue-600',
-  success: 'text-green-600',
-  warning: 'text-yellow-600',
-  danger: 'text-red-600',
-  info: 'text-purple-600'
+// Dashboard template'leri
+const DASHBOARD_TEMPLATES: DashboardTemplate[] = [
+  {
+    id: 'analytics',
+    name: 'Analytics Dashboard',
+    description: 'Comprehensive analytics with metrics and charts',
+    category: 'analytics',
+    theme: 'analytics',
+    widgets: [
+      {
+        type: 'metric',
+        title: 'Total Revenue',
+        size: { w: 3, h: 2 },
+        position: { x: 0, y: 0 },
+        data: {
+          id: 'revenue',
+          title: 'Total Revenue',
+          value: 125430,
+          change: { value: 12, type: 'increase', period: 'last month' },
+          color: 'success',
+          icon: <DollarSign className="h-4 w-4" />,
+          sparkline: [100, 120, 115, 125, 130, 128, 132],
+          unit: '$'
+        }
+      },
+      {
+        type: 'metric',
+        title: 'Active Users',
+        size: { w: 3, h: 2 },
+        position: { x: 3, y: 0 },
+        data: {
+          id: 'users',
+          title: 'Active Users',
+          value: 2543,
+          change: { value: 8, type: 'increase', period: 'last week' },
+          color: 'primary',
+          icon: <Users className="h-4 w-4" />,
+          sparkline: [200, 220, 210, 230, 225, 240, 254]
+        }
+      },
+      {
+        type: 'chart',
+        title: 'Revenue Trend',
+        size: { w: 6, h: 4 },
+        position: { x: 0, y: 2 },
+        data: {
+          type: 'area',
+          data: [
+            { name: 'Jan', revenue: 4000, profit: 2400 },
+            { name: 'Feb', revenue: 3000, profit: 1398 },
+            { name: 'Mar', revenue: 5000, profit: 3200 },
+            { name: 'Apr', revenue: 4500, profit: 2900 },
+            { name: 'May', revenue: 6000, profit: 3800 },
+            { name: 'Jun', revenue: 5500, profit: 3400 }
+          ]
+        }
+      },
+      {
+        type: 'activity',
+        title: 'Recent Activity',
+        size: { w: 3, h: 6 },
+        position: { x: 9, y: 0 },
+        data: {
+          realtime: true,
+          items: [
+            {
+              id: '1',
+              type: 'success',
+              title: 'completed a purchase',
+              description: 'Order #12345 - $250.00',
+              timestamp: new Date(Date.now() - 1000 * 60 * 5),
+              user: { name: 'John Doe' }
+            },
+            {
+              id: '2',
+              type: 'info',
+              title: 'signed up',
+              description: 'New user registration',
+              timestamp: new Date(Date.now() - 1000 * 60 * 15),
+              user: { name: 'Jane Smith' }
+            }
+          ]
+        }
+      }
+    ]
+  },
+  {
+    id: 'sales',
+    name: 'Sales Dashboard',
+    description: 'Track sales performance and targets',
+    category: 'sales',
+    theme: 'sales',
+    widgets: [
+      // Sales-specific widgets
+    ]
+  },
+  {
+    id: 'monitoring',
+    name: 'System Monitoring',
+    description: 'Monitor system health and performance',
+    category: 'operations',
+    theme: 'monitoring',
+    widgets: [
+      // Monitoring widgets
+    ]
+  }
+]
+
+// Widget türleri için ikonlar
+const WIDGET_TYPE_ICONS: Record<WidgetType, React.ReactNode> = {
+  metric: <BarChart3 className="h-4 w-4" />,
+  chart: <Activity className="h-4 w-4" />,
+  table: <Table className="h-4 w-4" />,
+  map: <Map className="h-4 w-4" />,
+  activity: <Clock className="h-4 w-4" />,
+  calendar: <Calendar className="h-4 w-4" />,
+  progress: <Target className="h-4 w-4" />,
+  comparison: <TrendingUp className="h-4 w-4" />
 }
 
-const WIDGET_SIZES = {
-  sm: 'col-span-1',
-  md: 'col-span-2',
-  lg: 'col-span-3',
-  xl: 'col-span-4'
+// Tema renkleri
+const THEME_COLORS: Record<DashboardTheme, string> = {
+  analytics: 'from-blue-500/10 to-purple-500/10',
+  sales: 'from-green-500/10 to-emerald-500/10',
+  monitoring: 'from-orange-500/10 to-red-500/10',
+  finance: 'from-indigo-500/10 to-blue-500/10',
+  custom: 'from-gray-500/10 to-gray-600/10'
 }
 
 export function Dashboard({
-  metrics = [],
-  widgets = [],
-  onMetricClick,
-  onWidgetAction,
+  config,
+  widgets: initialWidgets = [],
+  templates = DASHBOARD_TEMPLATES,
+  onConfigChange,
+  onWidgetAdd,
+  onWidgetRemove,
+  onWidgetUpdate,
+  onExport,
+  onImport,
   className,
   showHeader = true,
   title = 'Dashboard',
-  description = 'Overview of your key metrics and performance',
-  refreshable = true,
-  onRefresh,
-  loading = false
+  description = 'Real-time analytics and insights',
+  editable = true,
+  realtime = false,
+  glassmorphism = true
 }: DashboardProps) {
+  // State yönetimi
+  const [editMode, setEditMode] = React.useState(false)
+  const [widgets, setWidgets] = React.useState<Widget[]>(initialWidgets)
+  const [selectedTheme, setSelectedTheme] = React.useState<DashboardTheme>('analytics')
+  const [timeRange, setTimeRange] = React.useState<TimeRange>()
+  const [searchQuery, setSearchQuery] = React.useState('')
+  const [showWidgetLibrary, setShowWidgetLibrary] = React.useState(false)
+  const [showTemplates, setShowTemplates] = React.useState(false)
   const [refreshing, setRefreshing] = React.useState(false)
+  const [notifications, setNotifications] = React.useState<number>(3)
 
-  const handleRefresh = async () => {
-    if (onRefresh) {
-      setRefreshing(true)
-      try {
-        await onRefresh()
-      } finally {
-        setRefreshing(false)
-      }
-    }
-  }
+  // WebSocket bağlantısı (real-time için)
+  React.useEffect(() => {
+    if (!realtime) return
 
-  const formatValue = (value: string | number): string => {
-    if (typeof value === 'number') {
-      if (value >= 1000000) {
-        return (value / 1000000).toFixed(1) + 'M'
-      } else if (value >= 1000) {
-        return (value / 1000).toFixed(1) + 'K'
-      }
-      return value.toLocaleString()
+    // Simüle edilmiş WebSocket bağlantısı
+    const interval = setInterval(() => {
+      // Widget'ları güncelle
+      setWidgets(prev => prev.map(widget => {
+        if (widget.type === 'metric' && widget.data) {
+          const newValue = typeof widget.data.value === 'number' 
+            ? widget.data.value + Math.floor(Math.random() * 10 - 5)
+            : widget.data.value
+          
+          return {
+            ...widget,
+            data: {
+              ...widget.data,
+              value: newValue,
+              lastUpdated: new Date()
+            }
+          }
+        }
+        return widget
+      }))
+    }, 5000)
+
+    return () => clearInterval(interval)
+  }, [realtime])
+
+  // Widget ekle
+  const handleAddWidget = (type: WidgetType) => {
+    const newWidget: Widget = {
+      id: `widget-${Date.now()}`,
+      type,
+      title: `New ${type} Widget`,
+      size: { w: 3, h: 3 },
+      position: { x: 0, y: 0 },
+      data: generateDefaultData(type)
     }
-    return value.toString()
+
+    setWidgets(prev => [...prev, newWidget])
+    onWidgetAdd?.(newWidget)
+    setShowWidgetLibrary(false)
   }
 
-  const getChangeIcon = (type: 'increase' | 'decrease' | 'neutral') => {
-    switch (type) {
-      case 'increase':
-        return <ArrowUpRight className="h-4 w-4" />
-      case 'decrease':
-        return <ArrowDownRight className="h-4 w-4" />
-      case 'neutral':
-        return <Minus className="h-4 w-4" />
-    }
+  // Template uygula
+  const applyTemplate = (template: DashboardTemplate) => {
+    const newWidgets = template.widgets.map((w, index) => ({
+      ...w,
+      id: `widget-${Date.now()}-${index}`
+    }))
+    
+    setWidgets(newWidgets as Widget[])
+    setSelectedTheme(template.theme)
+    setShowTemplates(false)
   }
 
-  const getChangeColor = (type: 'increase' | 'decrease' | 'neutral') => {
+  // Varsayılan widget verisi oluştur
+  const generateDefaultData = (type: WidgetType): any => {
     switch (type) {
-      case 'increase':
-        return 'text-green-600'
-      case 'decrease':
-        return 'text-red-600'
-      case 'neutral':
-        return 'text-gray-600'
+      case 'metric':
+        return {
+          id: 'new-metric',
+          title: 'New Metric',
+          value: 0,
+          icon: <BarChart3 className="h-4 w-4" />,
+          color: 'primary'
+        }
+      case 'chart':
+        return {
+          type: 'line',
+          data: [
+            { name: 'Mon', value: 100 },
+            { name: 'Tue', value: 120 },
+            { name: 'Wed', value: 110 },
+            { name: 'Thu', value: 130 },
+            { name: 'Fri', value: 125 }
+          ]
+        }
+      case 'activity':
+        return {
+          items: [],
+          realtime: true
+        }
+      default:
+        return {}
     }
   }
 
-  const renderMetricCard = (metric: DashboardMetric) => {
-    const colorClass = metric.color ? METRIC_COLORS[metric.color as keyof typeof METRIC_COLORS] : 'text-foreground'
-    
-    return (
-      <Card 
-        key={metric.id} 
-        className={cn(
-          "cursor-pointer hover:shadow-md transition-shadow",
-          onMetricClick && "hover:bg-muted/50"
-        )}
-        onClick={() => onMetricClick?.(metric)}
-      >
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium">
-            {metric.title}
-          </CardTitle>
-          <div className={cn("h-4 w-4", colorClass)}>
-            {metric.icon}
+  // Widget kütüphanesi
+  const WidgetLibrary = () => (
+    <Sheet open={showWidgetLibrary} onOpenChange={setShowWidgetLibrary}>
+      <SheetContent className={cn(
+        "w-[400px] sm:w-[540px]",
+        glassmorphism && "bg-background/95 backdrop-blur-md"
+      )}>
+        <SheetHeader>
+          <SheetTitle>Widget Library</SheetTitle>
+          <SheetDescription>
+            Add widgets to customize your dashboard
+          </SheetDescription>
+        </SheetHeader>
+        
+        <div className="mt-6 space-y-4">
+          <div className="relative">
+            <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Search widgets..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-10"
+            />
           </div>
-        </CardHeader>
-        <CardContent>
-          <div className="text-2xl font-bold">{formatValue(metric.value)}</div>
-          {metric.change && (
-            <div className={cn(
-              "flex items-center text-xs mt-1",
-              getChangeColor(metric.change.type)
-            )}>
-              {getChangeIcon(metric.change.type)}
-              <span className="ml-1">
-                {Math.abs(metric.change.value)}% from {metric.change.period}
-              </span>
-            </div>
-          )}
-          {metric.description && (
-            <p className="text-xs text-muted-foreground mt-1">
-              {metric.description}
-            </p>
-          )}
-        </CardContent>
-      </Card>
-    )
-  }
 
-  const renderWidget = (widget: DashboardWidget) => {
-    const sizeClass = WIDGET_SIZES[widget.size || 'md']
-    
-    return (
-      <Card key={widget.id} className={cn("h-fit", sizeClass)}>
-        <CardHeader>
-          <div className="flex items-center justify-between">
-            <div>
-              <CardTitle className="text-base">{widget.title}</CardTitle>
-              {widget.description && (
-                <CardDescription className="mt-1">
-                  {widget.description}
-                </CardDescription>
-              )}
-            </div>
-            <Button 
-              variant="ghost" 
-              size="sm"
-              onClick={() => onWidgetAction?.(widget.id, 'menu')}
-            >
-              <BarChart3 className="h-4 w-4" />
-            </Button>
-          </div>
-        </CardHeader>
-        <CardContent>
-          {widget.loading ? (
-            <div className="flex items-center justify-center h-32">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+          <ScrollArea className="h-[calc(100vh-200px)]">
+            <div className="grid grid-cols-2 gap-4">
+              {Object.entries(WIDGET_TYPE_ICONS)
+                .filter(([type]) => type.toLowerCase().includes(searchQuery.toLowerCase()))
+                .map(([type, icon]) => (
+                  <motion.div
+                    key={type}
+                    whileHover={{ scale: 1.02 }}
+                    whileTap={{ scale: 0.98 }}
+                  >
+                    <Button
+                      variant="outline"
+                      className="w-full h-24 flex-col gap-2"
+                      onClick={() => handleAddWidget(type as WidgetType)}
+                    >
+                      <div className="p-2 rounded-lg bg-muted">
+                        {icon}
+                      </div>
+                      <span className="capitalize text-sm">{type}</span>
+                    </Button>
+                  </motion.div>
+                ))}
             </div>
-          ) : widget.error ? (
-            <div className="flex items-center justify-center h-32 text-destructive">
-              <p className="text-sm">{widget.error}</p>
-            </div>
-          ) : (
-            widget.content
-          )}
-        </CardContent>
-      </Card>
-    )
-  }
+          </ScrollArea>
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
 
-  const defaultMetrics: DashboardMetric[] = [
-    {
-      id: 'total-users',
-      title: 'Total Users',
-      value: 2543,
-      change: { value: 12, type: 'increase', period: 'last month' },
-      icon: <Users className="h-4 w-4" />,
-      color: 'primary'
-    },
-    {
-      id: 'revenue',
-      title: 'Revenue',
-      value: '$12,345',
-      change: { value: 8, type: 'increase', period: 'last month' },
-      icon: <DollarSign className="h-4 w-4" />,
-      color: 'success'
-    },
-    {
-      id: 'active-sessions',
-      title: 'Active Sessions',
-      value: 1234,
-      change: { value: 2, type: 'decrease', period: 'last hour' },
-      icon: <Activity className="h-4 w-4" />,
-      color: 'warning'
-    },
-    {
-      id: 'conversion-rate',
-      title: 'Conversion Rate',
-      value: '3.2%',
-      change: { value: 0.3, type: 'increase', period: 'last week' },
-      icon: <TrendingUp className="h-4 w-4" />,
-      color: 'info'
-    }
-  ]
+  // Template galerisi
+  const TemplateGallery = () => (
+    <Dialog open={showTemplates} onOpenChange={setShowTemplates}>
+      <DialogContent className={cn(
+        "max-w-4xl",
+        glassmorphism && "bg-background/95 backdrop-blur-md"
+      )}>
+        <DialogHeader>
+          <DialogTitle>Dashboard Templates</DialogTitle>
+          <DialogDescription>
+            Start with a pre-built template or create your own
+          </DialogDescription>
+        </DialogHeader>
 
-  const displayMetrics = metrics.length > 0 ? metrics : defaultMetrics
+        <Tabs defaultValue="all" className="mt-4">
+          <TabsList>
+            <TabsTrigger value="all">All Templates</TabsTrigger>
+            <TabsTrigger value="analytics">Analytics</TabsTrigger>
+            <TabsTrigger value="sales">Sales</TabsTrigger>
+            <TabsTrigger value="operations">Operations</TabsTrigger>
+          </TabsList>
 
-  if (loading) {
-    return (
-      <div className={cn("w-full", className)}>
-        <div className="animate-pulse space-y-4">
-          <div className="h-8 bg-muted rounded w-1/4"></div>
-          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-            {[...Array(4)].map((_, i) => (
-              <div key={i} className="h-32 bg-muted rounded"></div>
-            ))}
-          </div>
-        </div>
-      </div>
-    )
-  }
+          <TabsContent value="all" className="mt-4">
+            <div className="grid grid-cols-3 gap-4">
+              {templates.map((template) => (
+                <motion.div
+                  key={template.id}
+                  whileHover={{ y: -4 }}
+                  className="cursor-pointer"
+                  onClick={() => applyTemplate(template)}
+                >
+                  <div className={cn(
+                    "relative overflow-hidden rounded-lg border p-4 hover:shadow-lg transition-all",
+                    "bg-gradient-to-br", THEME_COLORS[template.theme]
+                  )}>
+                    {template.isPro && (
+                      <Badge className="absolute top-2 right-2" variant="secondary">
+                        PRO
+                      </Badge>
+                    )}
+                    <h3 className="font-semibold mb-1">{template.name}</h3>
+                    <p className="text-sm text-muted-foreground">
+                      {template.description}
+                    </p>
+                    <div className="mt-3 flex items-center gap-2 text-xs text-muted-foreground">
+                      <span>{template.widgets.length} widgets</span>
+                      <span>•</span>
+                      <span className="capitalize">{template.category}</span>
+                    </div>
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+          </TabsContent>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  )
 
   return (
-    <div className={cn("w-full space-y-6", className)}>
+    <motion.div 
+      className={cn(
+        "w-full min-h-screen",
+        glassmorphism && "bg-gradient-to-br", 
+        glassmorphism && THEME_COLORS[selectedTheme],
+        className
+      )}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.5 }}
+    >
       {/* Header */}
       {showHeader && (
-        <div className="flex items-center justify-between">
-          <div>
-            <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
-            <p className="text-muted-foreground">{description}</p>
-          </div>
-          {refreshable && (
-            <Button 
-              variant="outline" 
-              onClick={handleRefresh}
-              disabled={refreshing}
-            >
-              {refreshing ? (
-                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary mr-2"></div>
-              ) : (
-                <Activity className="h-4 w-4 mr-2" />
-              )}
-              Refresh
-            </Button>
+        <motion.div 
+          className={cn(
+            "sticky top-0 z-30 border-b",
+            glassmorphism ? "bg-background/80 backdrop-blur-md" : "bg-background"
           )}
-        </div>
-      )}
+          initial={{ y: -50 }}
+          animate={{ y: 0 }}
+          transition={{ type: "spring", stiffness: 300, damping: 30 }}
+        >
+          <div className="px-6 py-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-4">
+                <motion.div
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                >
+                  <Button variant="ghost" size="sm" className="lg:hidden">
+                    <Menu className="h-5 w-5" />
+                  </Button>
+                </motion.div>
+                
+                <div>
+                  <div className="flex items-center gap-2">
+                    <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
+                    {realtime && (
+                      <Badge variant="secondary" className="animate-pulse">
+                        <span className="mr-1 h-1.5 w-1.5 rounded-full bg-green-500" />
+                        Real-time
+                      </Badge>
+                    )}
+                  </div>
+                  <p className="text-sm text-muted-foreground">{description}</p>
+                </div>
+              </div>
 
-      {/* Metrics Grid */}
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        {displayMetrics.map(renderMetricCard)}
-      </div>
+              {/* Header actions */}
+              <div className="flex items-center gap-2">
+                {/* Time range picker */}
+                <TimeRangePicker
+                  value={timeRange}
+                  onChange={setTimeRange}
+                  glassmorphism={glassmorphism}
+                />
 
-      {/* Widgets Grid */}
-      {widgets.length > 0 && (
-        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-          {widgets.map(renderWidget)}
-        </div>
+                {/* Notifications */}
+                <div className="relative">
+                  <Button variant="ghost" size="sm" className="relative">
+                    <Bell className="h-4 w-4" />
+                    {notifications > 0 && (
+                      <span className="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-destructive text-[10px] font-medium text-destructive-foreground flex items-center justify-center">
+                        {notifications}
+                      </span>
+                    )}
+                  </Button>
+                </div>
+
+                {/* Theme selector */}
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="sm">
+                      <Palette className="h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={() => setSelectedTheme('analytics')}>
+                      <div className="flex items-center gap-2">
+                        <div className="h-4 w-4 rounded bg-gradient-to-br from-blue-500 to-purple-500" />
+                        Analytics
+                      </div>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => setSelectedTheme('sales')}>
+                      <div className="flex items-center gap-2">
+                        <div className="h-4 w-4 rounded bg-gradient-to-br from-green-500 to-emerald-500" />
+                        Sales
+                      </div>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => setSelectedTheme('monitoring')}>
+                      <div className="flex items-center gap-2">
+                        <div className="h-4 w-4 rounded bg-gradient-to-br from-orange-500 to-red-500" />
+                        Monitoring
+                      </div>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+
+                {/* More actions */}
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="sm">
+                      <Settings className="h-4 w-4 mr-2" />
+                      Actions
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" className="w-48">
+                    {editable && (
+                      <>
+                        <DropdownMenuItem onClick={() => setEditMode(!editMode)}>
+                          <Edit3 className="mr-2 h-4 w-4" />
+                          {editMode ? 'Exit Edit Mode' : 'Edit Layout'}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => setShowWidgetLibrary(true)}>
+                          <Plus className="mr-2 h-4 w-4" />
+                          Add Widget
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => setShowTemplates(true)}>
+                          <LayoutGrid className="mr-2 h-4 w-4" />
+                          Templates
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                      </>
+                    )}
+                    
+                    <DropdownMenuSub>
+                      <DropdownMenuSubTrigger>
+                        <Download className="mr-2 h-4 w-4" />
+                        Export
+                      </DropdownMenuSubTrigger>
+                      <DropdownMenuSubContent>
+                        <DropdownMenuItem onClick={() => onExport?.('json')}>
+                          As JSON
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => onExport?.('pdf')}>
+                          As PDF
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => onExport?.('png')}>
+                          As Image
+                        </DropdownMenuItem>
+                      </DropdownMenuSubContent>
+                    </DropdownMenuSub>
+                    
+                    <DropdownMenuItem>
+                      <Upload className="mr-2 h-4 w-4" />
+                      Import
+                    </DropdownMenuItem>
+                    
+                    <DropdownMenuSeparator />
+                    
+                    <DropdownMenuItem onClick={() => setRefreshing(true)}>
+                      <RefreshCw className="mr-2 h-4 w-4" />
+                      Refresh Data
+                    </DropdownMenuItem>
+                    
+                    <DropdownMenuItem>
+                      <Share2 className="mr-2 h-4 w-4" />
+                      Share Dashboard
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </div>
+          </div>
+
+          {/* Edit mode banner */}
+          <AnimatePresence>
+            {editMode && (
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: "auto", opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                className="bg-primary/10 border-t border-primary/20"
+              >
+                <div className="px-6 py-2 flex items-center justify-between">
+                  <div className="flex items-center gap-2 text-sm">
+                    <Sparkles className="h-4 w-4 text-primary" />
+                    <span>Edit mode enabled - Drag widgets to rearrange</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => setEditMode(false)}
+                    >
+                      <X className="h-4 w-4 mr-1" />
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="primary"
+                      size="sm"
+                      onClick={() => {
+                        setEditMode(false)
+                        // Save layout changes
+                      }}
+                    >
+                      <Save className="h-4 w-4 mr-1" />
+                      Save Changes
+                    </Button>
+                  </div>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </motion.div>
       )}
 
-      {/* Quick Actions */}
-      <div className="flex items-center gap-2 pt-4 border-t">
-        <Button variant="outline" size="sm">
-          <Download className="h-4 w-4 mr-2" />
-          Export Data
-        </Button>
-        <Button variant="outline" size="sm">
-          <Calendar className="h-4 w-4 mr-2" />
-          Schedule Report
-        </Button>
-        <Button variant="outline" size="sm">
-          <Star className="h-4 w-4 mr-2" />
-          Save View
-        </Button>
+      {/* Main content */}
+      <div className="p-6">
+        {widgets.length === 0 ? (
+          // Empty state
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            className="flex flex-col items-center justify-center min-h-[400px] text-center"
+          >
+            <div className={cn(
+              "p-4 rounded-full mb-4",
+              glassmorphism ? "bg-background/60 backdrop-blur-sm" : "bg-muted"
+            )}>
+              <LayoutGrid className="h-8 w-8 text-muted-foreground" />
+            </div>
+            <h3 className="text-lg font-semibold mb-2">No widgets added yet</h3>
+            <p className="text-muted-foreground mb-4">
+              Start by adding widgets or choosing a template
+            </p>
+            <div className="flex gap-2">
+              <Button onClick={() => setShowWidgetLibrary(true)}>
+                <Plus className="h-4 w-4 mr-2" />
+                Add Widget
+              </Button>
+              <Button variant="outline" onClick={() => setShowTemplates(true)}>
+                <LayoutGrid className="h-4 w-4 mr-2" />
+                Browse Templates
+              </Button>
+            </div>
+          </motion.div>
+        ) : (
+          // Dashboard grid
+          <DashboardGrid
+            widgets={widgets}
+            onLayoutChange={(layout) => {
+              // Update widget positions
+              const updatedWidgets = widgets.map(widget => {
+                const layoutItem = layout.find(l => l.i === widget.id)
+                if (layoutItem) {
+                  return {
+                    ...widget,
+                    position: { x: layoutItem.x, y: layoutItem.y },
+                    size: { ...widget.size, w: layoutItem.w, h: layoutItem.h }
+                  }
+                }
+                return widget
+              })
+              setWidgets(updatedWidgets)
+            }}
+            onWidgetRemove={(widgetId) => {
+              setWidgets(prev => prev.filter(w => w.id !== widgetId))
+              onWidgetRemove?.(widgetId)
+            }}
+            onWidgetAction={(widgetId, action, data) => {
+              console.log('Widget action:', widgetId, action, data)
+              // Handle widget actions
+            }}
+            editMode={editMode}
+            glassmorphism={glassmorphism}
+          />
+        )}
       </div>
-    </div>
+
+      {/* Modals */}
+      <WidgetLibrary />
+      <TemplateGallery />
+    </motion.div>
   )
 }