@moontra/moonui-pro 2.20.2 → 2.20.3

package/src/components/dashboard/dashboard-grid.tsx

@@ -1,480 +0,0 @@
-"use client"
-
-import React from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
-import { cn } from '../../lib/utils'
-import { Widget } from './types'
-import { MetricCard } from './widgets/metric-card'
-import { ChartWidget } from './widgets/chart-widget'
-import { ActivityFeed } from './widgets/activity-feed'
-import { ProgressWidget } from './widgets/progress-widget'
-import { ComparisonWidget } from './widgets/comparison-widget'
-import { Responsive, WidthProvider, Layout, Layouts } from 'react-grid-layout'
-const ResponsiveGridLayout = WidthProvider(Responsive)
-import 'react-grid-layout/css/styles.css'
-import 'react-resizable/css/styles.css'
-import { 
-  Grip, 
-  X, 
-  Maximize2, 
-  Minimize2,
-  Lock,
-  Unlock,
-  Settings
-} from 'lucide-react'
-import { Button } from '../ui/button'
-
-interface DashboardGridProps {
-  widgets: Widget[]
-  onLayoutChange?: (layout: Layout[]) => void
-  onWidgetRemove?: (widgetId: string) => void
-  onWidgetAction?: (widgetId: string, action: string, data?: any) => void
-  editMode?: boolean
-  className?: string
-  glassmorphism?: boolean
-  breakpoints?: { lg: number; md: number; sm: number; xs: number; xxs: number }
-  cols?: { lg: number; md: number; sm: number; xs: number; xxs: number }
-  rowHeight?: number
-  margin?: [number, number]
-  containerPadding?: [number, number]
-}
-
-export function DashboardGrid({
-  widgets,
-  onLayoutChange,
-  onWidgetRemove,
-  onWidgetAction,
-  editMode = false,
-  className,
-  glassmorphism = false,
-  breakpoints = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 },
-  cols = { lg: 12, md: 8, sm: 4, xs: 2, xxs: 1 },
-  rowHeight = 80,
-  margin = [16, 24],
-  containerPadding = [0, 0]
-}: DashboardGridProps) {
-  const [layouts, setLayouts] = React.useState<Layouts>({})
-  const [currentBreakpoint, setCurrentBreakpoint] = React.useState('lg')
-  const [lockedWidgets, setLockedWidgets] = React.useState<Set<string>>(new Set())
-  const [fullscreenWidget, setFullscreenWidget] = React.useState<string | null>(null)
-  const [containerWidth, setContainerWidth] = React.useState(1200)
-  const containerRef = React.useRef<HTMLDivElement>(null)
-  const [compactType, setCompactType] = React.useState<'vertical' | 'horizontal' | null>('vertical')
-
-  // Container genişliğini ölç ve breakpoint'i güncelle
-  React.useEffect(() => {
-    const updateWidth = () => {
-      if (containerRef.current) {
-        const width = containerRef.current.offsetWidth
-        setContainerWidth(width)
-        
-        // Breakpoint'i manuel olarak belirle
-        if (width < 480) {
-          setCurrentBreakpoint('xxs')
-        } else if (width < 768) {
-          setCurrentBreakpoint('xs')
-        } else if (width < 996) {
-          setCurrentBreakpoint('sm')
-        } else if (width < 1200) {
-          setCurrentBreakpoint('md')
-        } else {
-          setCurrentBreakpoint('lg')
-        }
-      }
-    }
-
-    updateWidth()
-    window.addEventListener('resize', updateWidth)
-    return () => window.removeEventListener('resize', updateWidth)
-  }, [])
-
-  // Responsive layout oluştur
-  const generateResponsiveLayouts = (): Layouts => {
-    const baseLayout = widgets.map((widget, index) => ({
-      i: widget.id,
-      x: widget.position?.x ?? (index * 3) % 12,
-      y: widget.position?.y ?? Math.floor((index * 3) / 12) * 3,
-      w: widget.size?.w ?? 3,
-      h: widget.size?.h ?? 3,
-      minW: widget.size?.minW || 2,
-      maxW: widget.size?.maxW || 12,
-      minH: widget.size?.minH || 2,
-      maxH: widget.size?.maxH || 8,
-      isDraggable: editMode && !lockedWidgets.has(widget.id) && widget.permissions?.canMove !== false,
-      isResizable: editMode && !lockedWidgets.has(widget.id) && widget.permissions?.canResize !== false,
-    }))
-
-    // Farklı breakpoint'ler için layout'ları ayarla
-    const sortedLayout = [...baseLayout].sort((a, b) => {
-      if (a.y === b.y) return a.x - b.x;
-      return a.y - b.y;
-    });
-
-    return {
-      lg: baseLayout,
-      md: sortedLayout.map((item, index) => {
-        const cols = 8;
-        const maxW = Math.min(item.w, 4);
-        const row = Math.floor(index / 2);
-        const col = (index % 2) * 4;
-        return {
-          ...item,
-          w: maxW,
-          x: col,
-          y: row * 3,
-          h: Math.min(item.h, 3)
-        };
-      }),
-      sm: sortedLayout.map((item, index) => {
-        const maxW = Math.min(item.w, 4);
-        return {
-          ...item,
-          w: maxW,
-          x: 0,
-          y: index * 3,
-          h: Math.min(item.h, 3)
-        };
-      }),
-      xs: sortedLayout.map((item, index) => ({
-        ...item,
-        w: 2, // Full width on mobile
-        x: 0,
-        y: index * 2,
-        h: Math.min(item.h, 2)
-      })),
-      xxs: sortedLayout.map((item, index) => ({
-        ...item,
-        w: 1, // Full width on extra small
-        x: 0,
-        y: index * 2,
-        h: Math.min(item.h, 2)
-      }))
-    }
-  }
-
-  // Layout oluştur (geriye uyumluluk için)
-  const generateLayout = (): Layout[] => {
-    const responsiveLayouts = generateResponsiveLayouts()
-    return responsiveLayouts[currentBreakpoint as keyof Layouts] || responsiveLayouts.lg
-  }
-
-  // Widget kilit durumunu değiştir
-  const toggleWidgetLock = (widgetId: string) => {
-    setLockedWidgets(prev => {
-      const newSet = new Set(prev)
-      if (newSet.has(widgetId)) {
-        newSet.delete(widgetId)
-      } else {
-        newSet.add(widgetId)
-      }
-      return newSet
-    })
-  }
-
-  // Widget'ı tam ekran yap
-  const toggleFullscreen = (widgetId: string) => {
-    if (fullscreenWidget === widgetId) {
-      setFullscreenWidget(null)
-    } else {
-      setFullscreenWidget(widgetId)
-    }
-  }
-
-  // Widget render
-  const renderWidget = (widget: Widget) => {
-    const isLocked = lockedWidgets.has(widget.id)
-    const isFullscreen = fullscreenWidget === widget.id
-
-    const widgetContent = () => {
-      switch (widget.type) {
-        case 'metric':
-          return (
-            <MetricCard
-              data={widget.data}
-              onAction={(action) => onWidgetAction?.(widget.id, action)}
-              glassmorphism={glassmorphism}
-            />
-          )
-        
-        case 'chart':
-          return (
-            <ChartWidget
-              id={widget.id}
-              title={widget.title}
-              description={widget.description}
-              data={widget.data}
-              loading={widget.loading}
-              glassmorphism={glassmorphism}
-              onAction={(action, data) => onWidgetAction?.(widget.id, action, data)}
-            />
-          )
-        
-        case 'activity':
-          return (
-            <ActivityFeed
-              items={widget.data?.items || []}
-              title={widget.title}
-              loading={widget.loading}
-              glassmorphism={glassmorphism}
-              realtime={widget.data?.realtime}
-              onAction={(action, data) => onWidgetAction?.(widget.id, action, data)}
-            />
-          )
-
-        case 'progress':
-          return (
-            <ProgressWidget
-              data={widget.data}
-              title={widget.title}
-              glassmorphism={glassmorphism}
-            />
-          )
-        
-        case 'comparison':
-          return (
-            <ComparisonWidget
-              data={widget.data}
-              title={widget.title}
-              glassmorphism={glassmorphism}
-            />
-          )
-
-        case 'table':
-        case 'map':
-        case 'calendar':
-          // Bu widget tipleri için geçici olarak basit bir görünüm
-          return (
-            <div className={cn(
-              "h-full p-4 rounded-lg border",
-              glassmorphism ? "bg-background/60 backdrop-blur-md border-white/10" : "bg-card"
-            )}>
-              <h3 className="font-semibold mb-2">{widget.title}</h3>
-              {widget.description && (
-                <p className="text-sm text-muted-foreground mb-4">{widget.description}</p>
-              )}
-              <div className="flex items-center justify-center h-32 text-muted-foreground">
-                <span className="text-sm">{widget.type} widget content</span>
-              </div>
-            </div>
-          )
-        
-        default:
-          return (
-            <div className="flex items-center justify-center h-full text-muted-foreground">
-              Widget type not supported: {widget.type}
-            </div>
-          )
-      }
-    }
-
-    return (
-      <motion.div
-        key={widget.id}
-        className={cn(
-          "relative group h-full",
-          isFullscreen && "!fixed !inset-4 !z-50 !h-auto !w-auto"
-        )}
-        layout={!isFullscreen}
-        transition={{ duration: 0.2 }}
-      >
-        {/* Widget içeriği */}
-        <div className="h-full dashboard-widget-container">
-          {widgetContent()}
-        </div>
-
-        {/* Edit mode kontrolleri */}
-        {editMode && !isFullscreen && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            className="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity"
-          >
-            <div className={cn(
-              "flex items-center gap-1 p-1 rounded-lg",
-              glassmorphism ? "bg-background/80 backdrop-blur-sm" : "bg-background/95",
-              "border shadow-sm"
-            )}>
-              {/* Drag handle */}
-              {!isLocked && (
-                <div className="drag-handle cursor-move p-1 hover:bg-muted rounded">
-                  <Grip className="h-4 w-4" />
-                </div>
-              )}
-
-              {/* Lock/Unlock */}
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-6 w-6 p-0"
-                onClick={() => toggleWidgetLock(widget.id)}
-              >
-                {isLocked ? (
-                  <Lock className="h-3 w-3" />
-                ) : (
-                  <Unlock className="h-3 w-3" />
-                )}
-              </Button>
-
-              {/* Fullscreen */}
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-6 w-6 p-0"
-                onClick={() => toggleFullscreen(widget.id)}
-              >
-                <Maximize2 className="h-3 w-3" />
-              </Button>
-
-              {/* Settings */}
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-6 w-6 p-0"
-                onClick={() => onWidgetAction?.(widget.id, 'settings')}
-              >
-                <Settings className="h-3 w-3" />
-              </Button>
-
-              {/* Remove */}
-              {widget.permissions?.canDelete !== false && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-6 w-6 p-0 text-destructive hover:text-destructive"
-                  onClick={() => onWidgetRemove?.(widget.id)}
-                >
-                  <X className="h-3 w-3" />
-                </Button>
-              )}
-            </div>
-          </motion.div>
-        )}
-
-        {/* Fullscreen kontrolleri */}
-        {isFullscreen && (
-          <motion.div
-            initial={{ opacity: 0, y: -10 }}
-            animate={{ opacity: 1, y: 0 }}
-            className="absolute top-4 right-4 z-10"
-          >
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => toggleFullscreen(widget.id)}
-            >
-              <Minimize2 className="h-4 w-4 mr-2" />
-              Exit Fullscreen
-            </Button>
-          </motion.div>
-        )}
-      </motion.div>
-    )
-  }
-
-  // Mobile kontrolü
-  const isMobile = currentBreakpoint === 'xs' || currentBreakpoint === 'xxs' || currentBreakpoint === 'sm';
-
-  return (
-    <div ref={containerRef} className={cn("w-full relative", className)}>
-      <AnimatePresence>
-        {fullscreenWidget ? (
-          // Fullscreen widget
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="fixed inset-0 z-40 bg-background"
-          >
-            {widgets
-              .filter(w => w.id === fullscreenWidget)
-              .map(renderWidget)}
-          </motion.div>
-        ) : isMobile ? (
-          // Mobile layout - Grid Layout yerine normal flex kullan
-          <div className="space-y-6">
-            {widgets.map(widget => (
-              <motion.div
-                key={widget.id}
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.3 }}
-                className="w-full"
-              >
-                {renderWidget(widget)}
-              </motion.div>
-            ))}
-          </div>
-        ) : (
-          // Desktop Grid layout
-          <ResponsiveGridLayout
-            className="layout"
-            layouts={layouts.lg ? layouts : generateResponsiveLayouts()}
-            breakpoints={breakpoints}
-            cols={cols}
-            rowHeight={currentBreakpoint === 'xs' || currentBreakpoint === 'xxs' ? 60 : currentBreakpoint === 'sm' ? 70 : rowHeight}
-            margin={currentBreakpoint === 'xs' || currentBreakpoint === 'xxs' ? [12, 20] : margin}
-            containerPadding={currentBreakpoint === 'xs' || currentBreakpoint === 'xxs' ? [8, 8] : containerPadding}
-            onLayoutChange={(layout, allLayouts) => {
-              setLayouts(allLayouts)
-              onLayoutChange?.(layout)
-            }}
-            onBreakpointChange={(breakpoint) => {
-              setCurrentBreakpoint(breakpoint)
-              // Dar alanlarda compact type'ı değiştir
-              if (breakpoint === 'xs' || breakpoint === 'xxs' || breakpoint === 'sm') {
-                setCompactType('vertical')
-              } else {
-                setCompactType('vertical')
-              }
-            }}
-            draggableHandle=".drag-handle"
-            isDraggable={editMode}
-            isResizable={editMode}
-            compactType={compactType}
-            preventCollision={false}
-            useCSSTransforms={true}
-            transformScale={1}
-            isDroppable={true}
-            autoSize={true}
-            verticalCompact={true}
-          >
-            {widgets.map(widget => (
-              <div key={widget.id}>
-                {renderWidget(widget)}
-              </div>
-            ))}
-          </ResponsiveGridLayout>
-        )}
-      </AnimatePresence>
-
-      {/* Grid çizgileri (edit mode) */}
-      {editMode && !fullscreenWidget && (
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 0.1 }}
-          className="absolute inset-0 pointer-events-none"
-          style={{
-            backgroundImage: `
-              repeating-linear-gradient(
-                0deg,
-                var(--border) 0px,
-                transparent 1px,
-                transparent ${rowHeight + margin[1]}px,
-                var(--border) ${rowHeight + margin[1]}px
-              ),
-              repeating-linear-gradient(
-                90deg,
-                var(--border) 0px,
-                transparent 1px,
-                transparent ${100 / cols[currentBreakpoint as keyof typeof cols]}%,
-                var(--border) ${100 / cols[currentBreakpoint as keyof typeof cols]}%
-              )
-            `
-          }}
-        />
-      )}
-    </div>
-  )
-}
-
-export default DashboardGrid