@moontra/moonui-pro 2.0.22 → 2.1.0

package/src/components/dashboard/index.tsx

@@ -0,0 +1,334 @@
+"use client"
+
+import React from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
+import { Badge } from '../ui/badge'
+import { Button } from '../ui/button'
+import { 
+  TrendingUp, 
+  TrendingDown, 
+  Users, 
+  DollarSign, 
+  Activity, 
+  BarChart3,
+  Eye,
+  Download,
+  Star,
+  Clock,
+  Calendar,
+  ArrowUpRight,
+  ArrowDownRight,
+  Minus,
+  Lock,
+  Sparkles
+} from 'lucide-react'
+import { cn } from '@moontra/moonui'
+
+export 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[]
+}
+
+export interface DashboardWidget {
+  id: string
+  title: string
+  description?: string
+  content: React.ReactNode
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  loading?: boolean
+  error?: string
+}
+
+export interface DashboardProps {
+  metrics?: DashboardMetric[]
+  widgets?: DashboardWidget[]
+  onMetricClick?: (metric: DashboardMetric) => void
+  onWidgetAction?: (widgetId: string, action: string) => void
+  className?: string
+  showHeader?: boolean
+  title?: string
+  description?: string
+  refreshable?: boolean
+  onRefresh?: () => void
+  loading?: boolean
+}
+
+const METRIC_COLORS = {
+  primary: 'text-blue-600',
+  success: 'text-green-600',
+  warning: 'text-yellow-600',
+  danger: 'text-red-600',
+  info: 'text-purple-600'
+}
+
+const WIDGET_SIZES = {
+  sm: 'col-span-1',
+  md: 'col-span-2',
+  lg: 'col-span-3',
+  xl: 'col-span-4'
+}
+
+export function Dashboard({
+  metrics = [],
+  widgets = [],
+  onMetricClick,
+  onWidgetAction,
+  className,
+  showHeader = true,
+  title = 'Dashboard',
+  description = 'Overview of your key metrics and performance',
+  refreshable = true,
+  onRefresh,
+  loading = false
+}: DashboardProps) {
+  const [refreshing, setRefreshing] = React.useState(false)
+
+  const handleRefresh = async () => {
+    if (onRefresh) {
+      setRefreshing(true)
+      try {
+        await onRefresh()
+      } finally {
+        setRefreshing(false)
+      }
+    }
+  }
+
+  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()
+    }
+    return value.toString()
+  }
+
+  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" />
+    }
+  }
+
+  const getChangeColor = (type: 'increase' | 'decrease' | 'neutral') => {
+    switch (type) {
+      case 'increase':
+        return 'text-green-600'
+      case 'decrease':
+        return 'text-red-600'
+      case 'neutral':
+        return 'text-gray-600'
+    }
+  }
+
+  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}
+          </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>
+            </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>
+    )
+  }
+
+  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'
+    }
+  ]
+
+  const displayMetrics = metrics.length > 0 ? metrics : defaultMetrics
+
+  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>
+    )
+  }
+
+  return (
+    <div className={cn("w-full space-y-6", className)}>
+      {/* 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>
+          )}
+        </div>
+      )}
+
+      {/* Metrics Grid */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {displayMetrics.map(renderMetricCard)}
+      </div>
+
+      {/* Widgets Grid */}
+      {widgets.length > 0 && (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          {widgets.map(renderWidget)}
+        </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>
+      </div>
+    </div>
+  )
+}
+
+export default Dashboard

package/src/components/data-table/data-table.test.tsx

@@ -0,0 +1,187 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { DataTable } from './index'
+
+// Mock data for testing
+const mockData = [
+  { id: 1, name: 'John Doe', email: 'john@example.com', status: 'active' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'inactive' },
+  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', status: 'active' }
+]
+
+const mockColumns = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email',
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+  }
+]
+
+describe('DataTable', () => {
+  it('renders without crashing', () => {
+    render(
+      <DataTable
+        columns={mockColumns}
+        data={mockData}
+      />
+    )
+    
+    expect(screen.getByText('Name')).toBeInTheDocument()
+    expect(screen.getByText('Email')).toBeInTheDocument()
+    expect(screen.getByText('Status')).toBeInTheDocument()
+  })
+
+  it('displays data correctly', () => {
+    render(
+      <DataTable
+        columns={mockColumns}
+        data={mockData}
+      />
+    )
+    
+    expect(screen.getByText('John Doe')).toBeInTheDocument()
+    expect(screen.getByText('jane@example.com')).toBeInTheDocument()
+    expect(screen.getByText('active')).toBeInTheDocument()
+  })
+
+  it('shows search input when searchable is true', () => {
+    render(
+      <DataTable
+        columns={mockColumns}
+        data={mockData}
+        searchable
+      />
+    )
+    
+    expect(screen.getByPlaceholderText('Search all columns...')).toBeInTheDocument()
+  })
+
+  it('shows filter button when filterable is true', () => {
+    render(
+      <DataTable
+        columns={mockColumns}
+        data={mockData}
+        filterable
+      />
+    )
+    
+    expect(screen.getByText('Filters')).toBeInTheDocument()
+  })
+
+  it('shows export button when exportable is true', () => {
+    render(
+      <DataTable
+        columns={mockColumns}
+        data={mockData}
+        exportable
+      />
+    )
+    
+    expect(screen.getByText('Export')).toBeInTheDocument()
+  })
+
+  it('handles search functionality', () => {
+    render(
+      <DataTable
+        columns={mockColumns}
+        data={mockData}
+        searchable
+      />
+    )
+    
+    const searchInput = screen.getByPlaceholderText('Search all columns...')
+    fireEvent.change(searchInput, { target: { value: 'john' } })
+    
+    expect(screen.getByText('John Doe')).toBeInTheDocument()
+    // Jane Smith should be filtered out
+    expect(screen.queryByText('Jane Smith')).not.toBeInTheDocument()
+  })
+
+  it('handles pagination', () => {
+    // Create more data for pagination testing
+    const moreData = Array.from({ length: 20 }, (_, i) => ({
+      id: i + 1,
+      name: `User ${i + 1}`,
+      email: `user${i + 1}@example.com`,
+      status: i % 2 === 0 ? 'active' : 'inactive'
+    }))
+    
+    render(
+      <DataTable
+        columns={mockColumns}
+        data={moreData}
+        pagination
+        pageSize={10}
+      />
+    )
+    
+    expect(screen.getByText('Page 1 of 2')).toBeInTheDocument()
+    expect(screen.getByText('Rows per page')).toBeInTheDocument()
+  })
+
+  it('calls onRowSelect when row is selected', () => {
+    const mockOnRowSelect = jest.fn()
+    
+    render(
+      <DataTable
+        columns={mockColumns}
+        data={mockData}
+        selectable
+        onRowSelect={mockOnRowSelect}
+      />
+    )
+    
+    // This would require implementing selection in the component
+    // For now, just verify the component renders with selection enabled
+    expect(screen.getByRole('table')).toBeInTheDocument()
+  })
+
+  it('calls onExport when export button is clicked', () => {
+    const mockOnExport = jest.fn()
+    
+    render(
+      <DataTable
+        columns={mockColumns}
+        data={mockData}
+        exportable
+        onExport={mockOnExport}
+      />
+    )
+    
+    const exportButton = screen.getByText('Export')
+    fireEvent.click(exportButton)
+    
+    expect(mockOnExport).toHaveBeenCalledWith(mockData)
+  })
+
+  it('handles empty data state', () => {
+    render(
+      <DataTable
+        columns={mockColumns}
+        data={[]}
+      />
+    )
+    
+    expect(screen.getByText('No results found.')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    render(
+      <DataTable
+        columns={mockColumns}
+        data={mockData}
+        className="custom-table"
+      />
+    )
+    
+    const tableContainer = screen.getByRole('table').closest('div')
+    expect(tableContainer).toHaveClass('custom-table')
+  })
+})