@moontra/moonui-pro 2.20.1 → 2.20.3

package/src/components/dashboard/demo.tsx

@@ -1,425 +0,0 @@
-"use client"
-
-import React from 'react'
-import { Dashboard } from './index'
-import { Widget, MetricData, ChartData, ActivityItem, DashboardNotification } from './types'
-import { MetricCard } from './widgets/metric-card'
-import { ChartWidget } from './widgets/chart-widget'
-import { ActivityFeed } from './widgets/activity-feed'
-import { 
-  Users, 
-  DollarSign, 
-  ShoppingCart, 
-  TrendingUp,
-  Package,
-  CreditCard,
-  Activity,
-  AlertCircle,
-  User,
-  Settings2,
-  LogOut,
-  HelpCircle
-} from 'lucide-react'
-
-// Örnek metrik verileri
-const sampleMetrics: MetricData[] = [
-  {
-    id: 'revenue',
-    title: 'Total Revenue',
-    value: 54234,
-    unit: '$',
-    change: { value: 12.5, type: 'increase', period: 'last month' },
-    icon: <DollarSign className="h-4 w-4" />,
-    color: 'success',
-    sparkline: [30, 40, 35, 50, 49, 60, 70, 91, 125],
-    target: 60000,
-    forecast: 58500
-  },
-  {
-    id: 'users',
-    title: 'Active Users',
-    value: 2453,
-    change: { value: 8.2, type: 'increase', period: 'last week' },
-    icon: <Users className="h-4 w-4" />,
-    color: 'primary',
-    sparkline: [200, 220, 210, 230, 225, 240, 254, 260, 245]
-  },
-  {
-    id: 'orders',
-    title: 'New Orders',
-    value: 846,
-    change: { value: 3.1, type: 'decrease', period: 'yesterday' },
-    icon: <ShoppingCart className="h-4 w-4" />,
-    color: 'warning',
-    sparkline: [80, 85, 90, 88, 85, 82, 84, 86, 84]
-  },
-  {
-    id: 'conversion',
-    title: 'Conversion Rate',
-    value: '3.24%',
-    change: { value: 0.5, type: 'increase', period: 'last month' },
-    icon: <TrendingUp className="h-4 w-4" />,
-    color: 'info',
-    sparkline: [2.8, 2.9, 3.0, 2.95, 3.1, 3.15, 3.2, 3.22, 3.24]
-  }
-]
-
-// Örnek chart verileri
-const revenueChartData: ChartData = {
-  type: 'area',
-  data: [
-    { name: 'Jan', revenue: 4000, profit: 2400, expenses: 1600 },
-    { name: 'Feb', revenue: 3000, profit: 1398, expenses: 1602 },
-    { name: 'Mar', revenue: 5000, profit: 3200, expenses: 1800 },
-    { name: 'Apr', revenue: 4500, profit: 2900, expenses: 1600 },
-    { name: 'May', revenue: 6000, profit: 3800, expenses: 2200 },
-    { name: 'Jun', revenue: 5500, profit: 3400, expenses: 2100 },
-    { name: 'Jul', revenue: 7000, profit: 4200, expenses: 2800 }
-  ]
-}
-
-const salesByProductData: ChartData = {
-  type: 'pie',
-  data: [
-    { name: 'Product A', value: 35 },
-    { name: 'Product B', value: 25 },
-    { name: 'Product C', value: 20 },
-    { name: 'Product D', value: 15 },
-    { name: 'Product E', value: 5 }
-  ]
-}
-
-const performanceData: ChartData = {
-  type: 'radar',
-  data: [
-    { subject: 'Sales', A: 120, B: 110, fullMark: 150 },
-    { subject: 'Marketing', A: 98, B: 130, fullMark: 150 },
-    { subject: 'Development', A: 86, B: 130, fullMark: 150 },
-    { subject: 'Customer Support', A: 99, B: 100, fullMark: 150 },
-    { subject: 'Technology', A: 85, B: 90, fullMark: 150 },
-    { subject: 'HR', A: 65, B: 85, fullMark: 150 }
-  ]
-}
-
-// Örnek aktivite verileri
-const sampleActivities: ActivityItem[] = [
-  {
-    id: '1',
-    type: 'success',
-    title: 'completed a purchase',
-    description: 'Order #12345 - Premium Plan ($299)',
-    timestamp: new Date(Date.now() - 1000 * 60 * 5),
-    user: { name: 'John Doe', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=John' },
-    icon: <CreditCard className="h-4 w-4" />
-  },
-  {
-    id: '2',
-    type: 'info',
-    title: 'deployed new version',
-    description: 'v2.1.0 deployed to production',
-    timestamp: new Date(Date.now() - 1000 * 60 * 15),
-    user: { name: 'Sarah Chen' },
-    icon: <Package className="h-4 w-4" />
-  },
-  {
-    id: '3',
-    type: 'warning',
-    title: 'high server load detected',
-    description: 'CPU usage above 80% on server-02',
-    timestamp: new Date(Date.now() - 1000 * 60 * 30),
-    icon: <AlertCircle className="h-4 w-4" />
-  },
-  {
-    id: '4',
-    type: 'success',
-    title: 'new user registered',
-    description: 'Welcome email sent',
-    timestamp: new Date(Date.now() - 1000 * 60 * 45),
-    user: { name: 'Mike Johnson' }
-  },
-  {
-    id: '5',
-    type: 'error',
-    title: 'payment failed',
-    description: 'Card declined - Order #12346',
-    timestamp: new Date(Date.now() - 1000 * 60 * 60),
-    user: { name: 'Emma Wilson' }
-  }
-]
-
-// Örnek widget'lar
-const sampleWidgets: Widget[] = [
-  // Metrik widget'ları
-  {
-    id: 'metric-revenue',
-    type: 'metric',
-    title: 'Revenue',
-    size: { w: 3, h: 2 },
-    position: { x: 0, y: 0 },
-    data: sampleMetrics[0]
-  },
-  {
-    id: 'metric-users',
-    type: 'metric',
-    title: 'Users',
-    size: { w: 3, h: 2 },
-    position: { x: 3, y: 0 },
-    data: sampleMetrics[1]
-  },
-  {
-    id: 'metric-orders',
-    type: 'metric',
-    title: 'Orders',
-    size: { w: 3, h: 2 },
-    position: { x: 6, y: 0 },
-    data: sampleMetrics[2]
-  },
-  {
-    id: 'metric-conversion',
-    type: 'metric',
-    title: 'Conversion',
-    size: { w: 3, h: 2 },
-    position: { x: 9, y: 0 },
-    data: sampleMetrics[3]
-  },
-  // Chart widget'ları
-  {
-    id: 'chart-revenue-trend',
-    type: 'chart',
-    title: 'Revenue Trend',
-    description: 'Monthly revenue, profit and expenses',
-    size: { w: 8, h: 4 },
-    position: { x: 0, y: 2 },
-    data: revenueChartData
-  },
-  {
-    id: 'chart-sales-by-product',
-    type: 'chart',
-    title: 'Sales by Product',
-    description: 'Product distribution',
-    size: { w: 4, h: 4 },
-    position: { x: 8, y: 2 },
-    data: salesByProductData
-  },
-  {
-    id: 'chart-performance',
-    type: 'chart',
-    title: 'Team Performance',
-    description: 'Department comparison',
-    size: { w: 6, h: 4 },
-    position: { x: 0, y: 6 },
-    data: performanceData
-  },
-  // Activity feed
-  {
-    id: 'activity-feed',
-    type: 'activity',
-    title: 'Recent Activity',
-    size: { w: 6, h: 4 },
-    position: { x: 6, y: 6 },
-    data: {
-      items: sampleActivities,
-      realtime: true
-    }
-  }
-]
-
-// Örnek notification verileri
-const sampleNotifications: DashboardNotification[] = [
-  {
-    id: 'notif-1',
-    type: 'success',
-    title: 'Payment Received',
-    message: 'Payment of $1,250 has been processed successfully',
-    timestamp: new Date(Date.now() - 1000 * 60 * 5), // 5 dakika önce
-    read: false
-  },
-  {
-    id: 'notif-2',
-    type: 'warning',
-    title: 'Low Stock Alert',
-    message: 'Product "Premium Widget" is running low on stock',
-    timestamp: new Date(Date.now() - 1000 * 60 * 30), // 30 dakika önce
-    read: false
-  },
-  {
-    id: 'notif-3',
-    type: 'info',
-    title: 'New Feature Available',
-    message: 'Check out our new analytics dashboard features',
-    timestamp: new Date(Date.now() - 1000 * 60 * 60 * 2), // 2 saat önce
-    read: true
-  },
-  {
-    id: 'notif-4',
-    type: 'error',
-    title: 'Sync Failed',
-    message: 'Failed to sync data with external service',
-    timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24), // 1 gün önce
-    read: true
-  }
-]
-
-// Örnek user bilgileri
-const sampleUser = {
-  name: 'John Doe',
-  email: 'john@example.com',
-  avatar: 'https://github.com/shadcn.png',
-  role: 'Admin'
-}
-
-// Örnek custom user menu items
-const customUserMenuItems = [
-  {
-    id: 'profile',
-    label: 'My Profile',
-    icon: <User className="h-4 w-4" />,
-    onClick: () => console.log('Profile clicked')
-  },
-  {
-    id: 'billing',
-    label: 'Billing & Plans',
-    icon: <CreditCard className="h-4 w-4" />,
-    onClick: () => console.log('Billing clicked')
-  },
-  { id: 'sep1', label: '', separator: true },
-  {
-    id: 'settings',
-    label: 'Settings',
-    icon: <Settings2 className="h-4 w-4" />,
-    onClick: () => console.log('Settings clicked')
-  },
-  {
-    id: 'help',
-    label: 'Help & Support',
-    icon: <HelpCircle className="h-4 w-4" />,
-    onClick: () => console.log('Help clicked')
-  },
-  { id: 'sep2', label: '', separator: true },
-  {
-    id: 'logout',
-    label: 'Sign Out',
-    icon: <LogOut className="h-4 w-4" />,
-    onClick: () => console.log('Logout clicked')
-  }
-]
-
-export function DashboardDemo() {
-  const [notifications, setNotifications] = React.useState(sampleNotifications)
-
-  const handleNotificationMarkAsRead = (notificationId: string) => {
-    setNotifications(prev => 
-      prev.map(n => n.id === notificationId ? { ...n, read: true } : n)
-    )
-  }
-
-  const handleNotificationClear = (notificationId: string) => {
-    setNotifications(prev => prev.filter(n => n.id !== notificationId))
-  }
-
-  const handleNotificationMarkAllAsRead = () => {
-    setNotifications(prev => prev.map(n => ({ ...n, read: true })))
-  }
-
-  const handleNotificationClearAll = () => {
-    setNotifications([])
-  }
-
-  return (
-    <div className="min-h-screen bg-background">
-      <Dashboard
-        title="Analytics Dashboard"
-        description="Real-time insights and performance metrics"
-        widgets={sampleWidgets}
-        editable={true}
-        realtime={true}
-        glassmorphism={true}
-        user={sampleUser}
-        userMenuItems={customUserMenuItems}
-        notifications={notifications}
-        onNotificationClick={(notification) => {
-          console.log('Notification clicked:', notification)
-        }}
-        onNotificationMarkAsRead={handleNotificationMarkAsRead}
-        onNotificationMarkAllAsRead={handleNotificationMarkAllAsRead}
-        onNotificationClear={handleNotificationClear}
-        onNotificationClearAll={handleNotificationClearAll}
-        onWidgetAdd={(widget) => {
-          console.log('Widget added:', widget)
-        }}
-        onWidgetRemove={(widgetId) => {
-          console.log('Widget removed:', widgetId)
-        }}
-        onWidgetUpdate={(widgetId, updates) => {
-          console.log('Widget updated:', widgetId, updates)
-        }}
-        onExport={(format) => {
-          console.log('Export dashboard as:', format)
-        }}
-      />
-    </div>
-  )
-}
-
-// Standalone widget demos
-export function MetricCardDemo() {
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 p-6">
-      {sampleMetrics.map((metric) => (
-        <MetricCard
-          key={metric.id}
-          data={metric}
-          showSparkline={true}
-          showForecast={true}
-          interactive={true}
-          glassmorphism={true}
-          onAction={(action) => console.log('Metric action:', action)}
-        />
-      ))}
-    </div>
-  )
-}
-
-export function ChartWidgetDemo() {
-  return (
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 p-6">
-      <ChartWidget
-        id="demo-1"
-        title="Revenue Analysis"
-        description="Monthly revenue breakdown"
-        data={revenueChartData}
-        height={300}
-        interactive={true}
-        glassmorphism={true}
-        onAction={(action, data) => console.log('Chart action:', action, data)}
-      />
-      <ChartWidget
-        id="demo-2"
-        title="Product Sales"
-        description="Sales distribution by product"
-        data={salesByProductData}
-        height={300}
-        interactive={true}
-        glassmorphism={true}
-      />
-    </div>
-  )
-}
-
-export function ActivityFeedDemo() {
-  return (
-    <div className="max-w-2xl mx-auto p-6">
-      <ActivityFeed
-        items={sampleActivities}
-        title="System Activity"
-        height={400}
-        showFilters={true}
-        showNotifications={true}
-        glassmorphism={true}
-        realtime={true}
-        onItemClick={(item) => console.log('Activity clicked:', item)}
-        onAction={(action, data) => console.log('Feed action:', action, data)}
-      />
-    </div>
-  )
-}