@moontra/moonui-pro 2.20.2 → 2.20.3

package/src/components/dashboard/widgets/chart-widget.tsx

@@ -1,418 +0,0 @@
-"use client"
-
-import React from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
-import { Card, CardContent, CardHeader, CardTitle } from '../../ui/card'
-import { Button } from '../../ui/button'
-import { cn } from '../../../lib/utils'
-import {
-  LineChart,
-  Line,
-  BarChart,
-  Bar,
-  AreaChart,
-  Area,
-  PieChart,
-  Pie,
-  RadarChart,
-  PolarGrid,
-  PolarAngleAxis,
-  PolarRadiusAxis,
-  Radar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
-  Cell
-} from 'recharts'
-import {
-  MoreVertical,
-  Download,
-  Maximize2,
-  RefreshCw,
-  Palette,
-  Settings,
-  Filter
-} from 'lucide-react'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-} from '../../ui/dropdown-menu'
-import { ChartData } from '../types'
-
-interface ChartWidgetProps {
-  id: string
-  title: string
-  description?: string
-  data: ChartData
-  className?: string
-  height?: number
-  onAction?: (action: string, data?: any) => void
-  loading?: boolean
-  refreshing?: boolean
-  glassmorphism?: boolean
-  interactive?: boolean
-}
-
-// Renk paleti
-const CHART_COLORS = {
-  default: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899'],
-  pastel: ['#93c5fd', '#86efac', '#fcd34d', '#fca5a5', '#c4b5fd', '#fbcfe8'],
-  vibrant: ['#2563eb', '#059669', '#d97706', '#dc2626', '#7c3aed', '#db2777'],
-  monochrome: ['#1f2937', '#374151', '#4b5563', '#6b7280', '#9ca3af', '#d1d5db']
-}
-
-export function ChartWidget({
-  id,
-  title,
-  description,
-  data,
-  className,
-  height = 300,
-  onAction,
-  loading = false,
-  refreshing = false,
-  glassmorphism = false,
-  interactive = true
-}: ChartWidgetProps) {
-  const [colorScheme, setColorScheme] = React.useState<keyof typeof CHART_COLORS>('default')
-  const [isFullscreen, setIsFullscreen] = React.useState(false)
-  
-  const colors = CHART_COLORS[colorScheme]
-
-  // Custom tooltip
-  const CustomTooltip = ({ active, payload, label }: any) => {
-    if (!active || !payload) return null
-
-    return (
-      <motion.div
-        initial={{ opacity: 0, scale: 0.9 }}
-        animate={{ opacity: 1, scale: 1 }}
-        className={cn(
-          "p-3 rounded-lg shadow-lg",
-          glassmorphism 
-            ? "bg-background/80 backdrop-blur-md border border-white/10" 
-            : "bg-background border"
-        )}
-      >
-        <p className="text-sm font-medium">{label}</p>
-        {payload.map((entry: any, index: number) => (
-          <p key={index} className="text-sm mt-1">
-            <span 
-              className="inline-block w-3 h-3 rounded-full mr-2"
-              style={{ backgroundColor: entry.color }}
-            />
-            {entry.name}: {entry.value}
-          </p>
-        ))}
-      </motion.div>
-    )
-  }
-
-  // Chart renderer
-  const renderChart = () => {
-    if (!data.data || data.data.length === 0) {
-      return (
-        <div className="flex items-center justify-center h-full text-muted-foreground">
-          No data available
-        </div>
-      )
-    }
-
-    const chartProps = {
-      data: data.data,
-      margin: { top: 5, right: 30, left: 20, bottom: 5 }
-    }
-
-    switch (data.type) {
-      case 'line':
-        return (
-          <ResponsiveContainer width="100%" height={height}>
-            <LineChart {...chartProps}>
-              <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
-              <XAxis dataKey="name" />
-              <YAxis />
-              <Tooltip content={<CustomTooltip />} />
-              {interactive && <Legend />}
-              {Object.keys(data.data[0])
-                .filter(key => key !== 'name')
-                .map((key, index) => (
-                  <Line
-                    key={key}
-                    type="monotone"
-                    dataKey={key}
-                    stroke={colors[index % colors.length]}
-                    strokeWidth={2}
-                    dot={{ r: 4 }}
-                    activeDot={{ r: 6 }}
-                  />
-                ))}
-            </LineChart>
-          </ResponsiveContainer>
-        )
-
-      case 'bar':
-        return (
-          <ResponsiveContainer width="100%" height={height}>
-            <BarChart {...chartProps}>
-              <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
-              <XAxis dataKey="name" />
-              <YAxis />
-              <Tooltip content={<CustomTooltip />} />
-              {interactive && <Legend />}
-              {Object.keys(data.data[0])
-                .filter(key => key !== 'name')
-                .map((key, index) => (
-                  <Bar
-                    key={key}
-                    dataKey={key}
-                    fill={colors[index % colors.length]}
-                    radius={[4, 4, 0, 0]}
-                  />
-                ))}
-            </BarChart>
-          </ResponsiveContainer>
-        )
-
-      case 'area':
-        return (
-          <ResponsiveContainer width="100%" height={height}>
-            <AreaChart {...chartProps}>
-              <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
-              <XAxis dataKey="name" />
-              <YAxis />
-              <Tooltip content={<CustomTooltip />} />
-              {interactive && <Legend />}
-              {Object.keys(data.data[0])
-                .filter(key => key !== 'name')
-                .map((key, index) => (
-                  <Area
-                    key={key}
-                    type="monotone"
-                    dataKey={key}
-                    stroke={colors[index % colors.length]}
-                    fill={colors[index % colors.length]}
-                    fillOpacity={0.2}
-                  />
-                ))}
-            </AreaChart>
-          </ResponsiveContainer>
-        )
-
-      case 'pie':
-      case 'donut':
-        return (
-          <ResponsiveContainer width="100%" height={height}>
-            <PieChart>
-              <Pie
-                data={data.data}
-                cx="50%"
-                cy="50%"
-                labelLine={false}
-                label={interactive}
-                outerRadius={data.type === 'donut' ? 80 : 100}
-                innerRadius={data.type === 'donut' ? 50 : 0}
-                fill="#8884d8"
-                dataKey="value"
-              >
-                {data.data.map((entry: any, index: number) => (
-                  <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
-                ))}
-              </Pie>
-              <Tooltip content={<CustomTooltip />} />
-              {interactive && <Legend />}
-            </PieChart>
-          </ResponsiveContainer>
-        )
-
-      case 'radar':
-        return (
-          <ResponsiveContainer width="100%" height={height}>
-            <RadarChart data={data.data}>
-              <PolarGrid />
-              <PolarAngleAxis dataKey="subject" />
-              <PolarRadiusAxis />
-              {Object.keys(data.data[0])
-                .filter(key => key !== 'subject')
-                .map((key, index) => (
-                  <Radar
-                    key={key}
-                    name={key}
-                    dataKey={key}
-                    stroke={colors[index % colors.length]}
-                    fill={colors[index % colors.length]}
-                    fillOpacity={0.3}
-                  />
-                ))}
-              <Tooltip content={<CustomTooltip />} />
-              {interactive && <Legend />}
-            </RadarChart>
-          </ResponsiveContainer>
-        )
-
-      default:
-        return null
-    }
-  }
-
-  // Card variants
-  const cardVariants = {
-    initial: { opacity: 0, scale: 0.95 },
-    animate: { 
-      opacity: 1, 
-      scale: 1,
-      transition: { duration: 0.3, ease: "easeOut" }
-    }
-  }
-
-  return (
-    <motion.div
-      variants={cardVariants}
-      initial="initial"
-      animate="animate"
-      className={cn(isFullscreen && "fixed inset-4 z-50")}
-    >
-      <Card className={cn(
-        "relative overflow-hidden transition-all duration-300",
-        glassmorphism && "bg-background/60 backdrop-blur-md border-white/10",
-        isFullscreen && "h-full",
-        className
-      )}>
-        {/* Header */}
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <div>
-            <CardTitle className="text-base font-semibold">{title}</CardTitle>
-            {description && (
-              <p className="text-sm text-muted-foreground mt-1">{description}</p>
-            )}
-          </div>
-
-          {/* Actions */}
-          <div className="flex items-center gap-2">
-            {refreshing && (
-              <motion.div
-                animate={{ rotate: 360 }}
-                transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
-              >
-                <RefreshCw className="h-4 w-4 text-muted-foreground" />
-              </motion.div>
-            )}
-
-            {interactive && (
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
-                    <MoreVertical className="h-4 w-4" />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" className="w-48">
-                  <DropdownMenuItem onClick={() => {
-                    setIsFullscreen(!isFullscreen)
-                    onAction?.('fullscreen', { fullscreen: !isFullscreen })
-                  }}>
-                    <Maximize2 className="mr-2 h-4 w-4" />
-                    {isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
-                  </DropdownMenuItem>
-                  
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                      <Palette className="mr-2 h-4 w-4" />
-                      Color Scheme
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuSubContent>
-                      {Object.keys(CHART_COLORS).map((scheme) => (
-                        <DropdownMenuItem
-                          key={scheme}
-                          onClick={() => setColorScheme(scheme as keyof typeof CHART_COLORS)}
-                        >
-                          <div className="flex items-center gap-2">
-                            <div className="flex gap-1">
-                              {CHART_COLORS[scheme as keyof typeof CHART_COLORS].slice(0, 3).map((color, i) => (
-                                <div
-                                  key={i}
-                                  className="w-3 h-3 rounded-full"
-                                  style={{ backgroundColor: color }}
-                                />
-                              ))}
-                            </div>
-                            <span className="capitalize">{scheme}</span>
-                          </div>
-                        </DropdownMenuItem>
-                      ))}
-                    </DropdownMenuSubContent>
-                  </DropdownMenuSub>
-
-                  <DropdownMenuSeparator />
-                  
-                  <DropdownMenuItem onClick={() => onAction?.('export', { format: 'png' })}>
-                    <Download className="mr-2 h-4 w-4" />
-                    Export as PNG
-                  </DropdownMenuItem>
-                  
-                  <DropdownMenuItem onClick={() => onAction?.('export', { format: 'csv' })}>
-                    <Download className="mr-2 h-4 w-4" />
-                    Export Data
-                  </DropdownMenuItem>
-                  
-                  <DropdownMenuSeparator />
-                  
-                  <DropdownMenuItem onClick={() => onAction?.('filter')}>
-                    <Filter className="mr-2 h-4 w-4" />
-                    Filter Data
-                  </DropdownMenuItem>
-                  
-                  <DropdownMenuItem onClick={() => onAction?.('settings')}>
-                    <Settings className="mr-2 h-4 w-4" />
-                    Chart Settings
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            )}
-          </div>
-        </CardHeader>
-
-        {/* Chart Content */}
-        <CardContent className="p-0 px-4 pb-4">
-          <AnimatePresence mode="wait">
-            {loading ? (
-              <motion.div
-                key="loading"
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                className="flex items-center justify-center"
-                style={{ height }}
-              >
-                <div className="space-y-2">
-                  <div className="animate-pulse bg-muted h-4 w-32 rounded" />
-                  <div className="animate-pulse bg-muted h-4 w-24 rounded" />
-                  <div className="animate-pulse bg-muted h-4 w-28 rounded" />
-                </div>
-              </motion.div>
-            ) : (
-              <motion.div
-                key="chart"
-                initial={{ opacity: 0, y: 10 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: -10 }}
-                transition={{ duration: 0.3 }}
-              >
-                {renderChart()}
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </CardContent>
-      </Card>
-    </motion.div>
-  )
-}
-
-export default ChartWidget

package/src/components/dashboard/widgets/comparison-widget.tsx

@@ -1,177 +0,0 @@
-"use client"
-
-import React from 'react'
-import { motion } from 'framer-motion'
-import { Card, CardContent, CardHeader, CardTitle } from '../../ui/card'
-import { cn } from '../../../lib/utils'
-import { ComparisonData } from '../types'
-import { ArrowUpRight, ArrowDownRight, Minus, BarChart3 } from 'lucide-react'
-import { Badge } from '../../ui/badge'
-
-interface ComparisonWidgetProps {
-  data: ComparisonData
-  title?: string
-  className?: string
-  glassmorphism?: boolean
-}
-
-export function ComparisonWidget({
-  data,
-  title = "Comparison",
-  className,
-  glassmorphism = false
-}: ComparisonWidgetProps) {
-  const [isMounted, setIsMounted] = React.useState(false)
-
-  React.useEffect(() => {
-    setIsMounted(true)
-  }, [])
-
-  // En yüksek değeri bul
-  const maxValue = Math.max(...data.periods.map(p => p.value))
-  
-  // İlk iki period arasındaki değişimi hesapla
-  const change = data.periods.length >= 2 
-    ? ((data.periods[0].value - data.periods[1].value) / data.periods[1].value) * 100
-    : 0
-    
-  const changeType = change > 0 ? 'increase' : change < 0 ? 'decrease' : 'neutral'
-
-  // Değer formatla
-  const formatValue = (value: number) => {
-    if (!isMounted) return value.toString()
-    
-    if (value >= 1000000) {
-      return (value / 1000000).toFixed(1) + 'M'
-    } else if (value >= 1000) {
-      return (value / 1000).toFixed(0) + 'K'
-    }
-    return value.toLocaleString()
-  }
-
-  return (
-    <Card className={cn(
-      "h-full flex flex-col overflow-hidden",
-      glassmorphism && "bg-background/60 backdrop-blur-md border-white/10",
-      className
-    )}>
-      <CardHeader className="flex-shrink-0 pb-3 px-4">
-        <div className="flex items-start justify-between gap-2">
-          <div className="flex-1 min-w-0">
-            <CardTitle className="text-sm font-semibold flex items-center gap-2">
-              <BarChart3 className="h-4 w-4 text-muted-foreground flex-shrink-0" />
-              <span className="truncate">{title}</span>
-            </CardTitle>
-            {data.metric && (
-              <p className="text-xs text-muted-foreground mt-1 truncate">{data.metric}</p>
-            )}
-          </div>
-          {change !== 0 && (
-            <div 
-              className={cn(
-                "inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-medium flex-shrink-0",
-                changeType === 'increase' && "bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20",
-                changeType === 'decrease' && "bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/20",
-                changeType === 'neutral' && "bg-muted text-muted-foreground border border-border"
-              )}
-            >
-              {changeType === 'increase' ? <ArrowUpRight className="h-3 w-3" /> :
-               changeType === 'decrease' ? <ArrowDownRight className="h-3 w-3" /> :
-               <Minus className="h-3 w-3" />}
-              <span>
-                {Math.abs(change).toFixed(1)}%
-              </span>
-            </div>
-          )}
-        </div>
-      </CardHeader>
-      
-      <CardContent className="flex-1 px-4 pb-4 overflow-hidden flex flex-col gap-3">
-        {/* Bar list görünümü - scrollable area */}
-        <div className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden pr-2 -mr-2">
-          <div className="space-y-2.5">
-            {data.periods.map((period, index) => {
-              const percentage = (period.value / maxValue) * 100
-              const isHighest = period.value === maxValue
-              
-              return (
-                <motion.div
-                  key={period.label}
-                  initial={{ opacity: 0, x: -20 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  transition={{ delay: index * 0.05 }}
-                >
-                  {/* Label ve değer */}
-                  <div className="flex items-center justify-between gap-3 mb-1">
-                    <span className={cn(
-                      "text-xs font-medium truncate flex-1",
-                      isHighest ? "text-foreground" : "text-muted-foreground"
-                    )}>
-                      {period.label}
-                    </span>
-                    <span className={cn(
-                      "text-xs font-semibold tabular-nums flex-shrink-0",
-                      isHighest && "text-primary"
-                    )}>
-                      {formatValue(period.value)}
-                    </span>
-                  </div>
-                  
-                  {/* Progress bar */}
-                  <div className="w-full bg-muted rounded-full h-1.5 overflow-hidden">
-                    <motion.div
-                      className={cn(
-                        "h-full rounded-full transition-colors",
-                        isHighest ? "bg-primary" : "bg-primary/60"
-                      )}
-                      initial={{ width: 0 }}
-                      animate={{ width: `${Math.min(percentage, 100)}%` }}
-                      transition={{ duration: 0.5, delay: index * 0.05 }}
-                    />
-                  </div>
-                </motion.div>
-              )
-            })}
-          </div>
-        </div>
-        
-        {/* Compact chart view - fixed height */}
-        {data.showChart && (
-          <div className="flex-shrink-0 pt-3 border-t">
-            <div className="h-14 flex items-end justify-between gap-1">
-              {data.periods.slice(0, 5).map((period, index) => {
-                const height = (period.value / maxValue) * 100
-                const isHighest = period.value === maxValue
-                
-                return (
-                  <motion.div
-                    key={period.label}
-                    className="flex-1 flex flex-col items-center gap-0.5"
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    transition={{ delay: index * 0.05 }}
-                  >
-                    <div className="w-full h-10 flex items-end justify-center px-0.5">
-                      <motion.div
-                        className={cn(
-                          "w-full max-w-[20px] rounded-t transition-colors",
-                          isHighest ? "bg-primary" : "bg-primary/40"
-                        )}
-                        initial={{ height: 0 }}
-                        animate={{ height: `${height}%` }}
-                        transition={{ duration: 0.5, delay: index * 0.05 }}
-                      />
-                    </div>
-                    <span className="text-[9px] text-muted-foreground">
-                      {period.label.slice(0, 3)}
-                    </span>
-                  </motion.div>
-                )
-              })}
-            </div>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  )
-}

package/src/components/dashboard/widgets/index.ts

@@ -1,5 +0,0 @@
-export { MetricCard } from './metric-card'
-export { ChartWidget } from './chart-widget'
-export { ActivityFeed } from './activity-feed'
-export { ProgressWidget } from './progress-widget'
-export { ComparisonWidget } from './comparison-widget'