@moontra/moonui-pro 2.4.6 → 2.5.1

package/src/components/dashboard/demo.tsx

@@ -0,0 +1,311 @@
+"use client"
+
+import React from 'react'
+import { Dashboard } from './index'
+import { Widget, MetricData, ChartData, ActivityItem } 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
+} 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
+    }
+  }
+]
+
+export function DashboardDemo() {
+  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}
+        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>
+  )
+}