@moontra/moonui-pro 2.4.5 → 2.5.0

package/src/components/dashboard/time-range-picker.tsx

@@ -0,0 +1,267 @@
+"use client"
+
+import React from 'react'
+import { motion } from 'framer-motion'
+import { Button } from '../ui/button'
+import { Calendar } from '../ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
+import { cn } from '../../lib/utils'
+import { CalendarIcon, Clock, ChevronDown } from 'lucide-react'
+import { format, startOfDay, endOfDay, subDays, startOfWeek, endOfWeek, startOfMonth, endOfMonth } from 'date-fns'
+import { TimeRange } from './types'
+
+interface TimeRangePickerProps {
+  value?: TimeRange
+  onChange?: (range: TimeRange) => void
+  className?: string
+  showPresets?: boolean
+  showComparison?: boolean
+  glassmorphism?: boolean
+}
+
+const PRESET_RANGES = [
+  { 
+    label: 'Today', 
+    value: 'today',
+    getRange: () => ({
+      start: startOfDay(new Date()),
+      end: endOfDay(new Date()),
+      label: 'Today',
+      preset: 'today' as const
+    })
+  },
+  { 
+    label: 'Yesterday', 
+    value: 'yesterday',
+    getRange: () => ({
+      start: startOfDay(subDays(new Date(), 1)),
+      end: endOfDay(subDays(new Date(), 1)),
+      label: 'Yesterday',
+      preset: 'yesterday' as const
+    })
+  },
+  { 
+    label: 'Last 7 days', 
+    value: 'last7days',
+    getRange: () => ({
+      start: startOfDay(subDays(new Date(), 6)),
+      end: endOfDay(new Date()),
+      label: 'Last 7 days',
+      preset: 'last7days' as const
+    })
+  },
+  { 
+    label: 'Last 30 days', 
+    value: 'last30days',
+    getRange: () => ({
+      start: startOfDay(subDays(new Date(), 29)),
+      end: endOfDay(new Date()),
+      label: 'Last 30 days',
+      preset: 'last30days' as const
+    })
+  },
+  { 
+    label: 'This week', 
+    value: 'thisWeek',
+    getRange: () => ({
+      start: startOfWeek(new Date()),
+      end: endOfWeek(new Date()),
+      label: 'This week',
+      preset: 'custom' as const
+    })
+  },
+  { 
+    label: 'This month', 
+    value: 'thisMonth',
+    getRange: () => ({
+      start: startOfMonth(new Date()),
+      end: endOfMonth(new Date()),
+      label: 'This month',
+      preset: 'thisMonth' as const
+    })
+  },
+  { 
+    label: 'Last month', 
+    value: 'lastMonth',
+    getRange: () => {
+      const lastMonth = subDays(startOfMonth(new Date()), 1)
+      return {
+        start: startOfMonth(lastMonth),
+        end: endOfMonth(lastMonth),
+        label: 'Last month',
+        preset: 'lastMonth' as const
+      }
+    }
+  }
+]
+
+export function TimeRangePicker({
+  value,
+  onChange,
+  className,
+  showPresets = true,
+  showComparison = false,
+  glassmorphism = false
+}: TimeRangePickerProps) {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [customRange, setCustomRange] = React.useState<{ from?: Date; to?: Date }>({})
+  const [comparisonEnabled, setComparisonEnabled] = React.useState(false)
+
+  const currentRange = value || PRESET_RANGES[2].getRange() // Default: Last 7 days
+
+  // Format tarih aralığı
+  const formatRange = (range: TimeRange) => {
+    if (range.preset && range.preset !== 'custom') {
+      return range.label
+    }
+    return `${format(range.start, 'MMM d')} - ${format(range.end, 'MMM d, yyyy')}`
+  }
+
+  // Preset seçimi
+  const handlePresetSelect = (preset: typeof PRESET_RANGES[0]) => {
+    const range = preset.getRange()
+    onChange?.(range)
+    setIsOpen(false)
+  }
+
+  // Custom tarih seçimi
+  const handleCustomRangeSelect = () => {
+    if (customRange.from && customRange.to) {
+      onChange?.({
+        start: startOfDay(customRange.from),
+        end: endOfDay(customRange.to),
+        label: `${format(customRange.from, 'MMM d')} - ${format(customRange.to, 'MMM d, yyyy')}`,
+        preset: 'custom'
+      })
+      setIsOpen(false)
+    }
+  }
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn(
+            "justify-start text-left font-normal",
+            glassmorphism && "bg-background/60 backdrop-blur-sm border-white/10",
+            !value && "text-muted-foreground",
+            className
+          )}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {formatRange(currentRange)}
+          <ChevronDown className="ml-auto h-4 w-4 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent 
+        className={cn(
+          "w-auto p-0",
+          glassmorphism && "bg-background/95 backdrop-blur-md border-white/10"
+        )} 
+        align="start"
+      >
+        <motion.div
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.2 }}
+        >
+          <div className="flex">
+            {/* Preset'ler */}
+            {showPresets && (
+              <div className="border-r p-3">
+                <div className="flex items-center gap-2 px-2 pb-2">
+                  <Clock className="h-4 w-4 text-muted-foreground" />
+                  <h4 className="text-sm font-medium">Quick Select</h4>
+                </div>
+                <div className="space-y-1">
+                  {PRESET_RANGES.map((preset) => (
+                    <motion.button
+                      key={preset.value}
+                      whileHover={{ x: 2 }}
+                      whileTap={{ scale: 0.98 }}
+                      onClick={() => handlePresetSelect(preset)}
+                      className={cn(
+                        "w-full text-left px-2 py-1.5 text-sm rounded-md transition-colors",
+                        "hover:bg-muted",
+                        currentRange.preset === preset.value && "bg-primary text-primary-foreground"
+                      )}
+                    >
+                      {preset.label}
+                    </motion.button>
+                  ))}
+                </div>
+
+                {/* Karşılaştırma */}
+                {showComparison && (
+                  <div className="mt-4 pt-4 border-t">
+                    <label className="flex items-center gap-2 px-2 cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={comparisonEnabled}
+                        onChange={(e) => setComparisonEnabled(e.target.checked)}
+                        className="rounded"
+                      />
+                      <span className="text-sm">Compare to previous period</span>
+                    </label>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Custom tarih seçici */}
+            <div className="p-3">
+              <div className="flex items-center gap-2 px-2 pb-2">
+                <CalendarIcon className="h-4 w-4 text-muted-foreground" />
+                <h4 className="text-sm font-medium">Custom Range</h4>
+              </div>
+              
+              <Calendar
+                mode="range"
+                selected={{
+                  from: customRange.from,
+                  to: customRange.to
+                }}
+                onSelect={(range: any) => setCustomRange(range || {})}
+                numberOfMonths={2}
+                className="rounded-md"
+              />
+
+              <div className="flex items-center justify-between pt-3 px-2">
+                <div className="text-sm text-muted-foreground">
+                  {customRange.from && customRange.to && (
+                    <span>
+                      {Math.ceil((customRange.to.getTime() - customRange.from.getTime()) / (1000 * 60 * 60 * 24))} days selected
+                    </span>
+                  )}
+                </div>
+                <div className="flex gap-2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      setCustomRange({})
+                      setIsOpen(false)
+                    }}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    size="sm"
+                    onClick={handleCustomRangeSelect}
+                    disabled={!customRange.from || !customRange.to}
+                  >
+                    Apply
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default TimeRangePicker

package/src/components/dashboard/types.ts

@@ -0,0 +1,222 @@
+import { ReactNode } from 'react'
+
+// Widget tipleri
+export type WidgetType = 
+  | 'metric'
+  | 'chart'
+  | 'table'
+  | 'map'
+  | 'activity'
+  | 'calendar'
+  | 'progress'
+  | 'comparison'
+
+// Widget boyutları
+export interface WidgetSize {
+  w: number // Grid genişliği
+  h: number // Grid yüksekliği
+  minW?: number
+  maxW?: number
+  minH?: number
+  maxH?: number
+}
+
+// Widget pozisyonu
+export interface WidgetPosition {
+  x: number
+  y: number
+}
+
+// Tema tipleri
+export type DashboardTheme = 'analytics' | 'sales' | 'monitoring' | 'finance' | 'custom'
+
+// Zaman aralığı
+export interface TimeRange {
+  start: Date
+  end: Date
+  label: string
+  preset?: 'today' | 'yesterday' | 'last7days' | 'last30days' | 'thisMonth' | 'lastMonth' | 'custom'
+}
+
+// Metric widget
+export interface MetricData {
+  id: string
+  title: string
+  value: string | number
+  change?: {
+    value: number
+    type: 'increase' | 'decrease' | 'neutral'
+    period: string
+  }
+  icon?: ReactNode
+  color?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
+  sparkline?: number[]
+  forecast?: number
+  target?: number
+  unit?: string
+}
+
+// Chart widget
+export interface ChartData {
+  type: 'line' | 'bar' | 'area' | 'pie' | 'donut' | 'radar'
+  data: any
+  options?: any
+}
+
+// Table widget
+export interface TableData {
+  columns: Array<{
+    id: string
+    header: string
+    accessor: string
+    sortable?: boolean
+    filterable?: boolean
+  }>
+  data: any[]
+  pagination?: boolean
+  pageSize?: number
+}
+
+// Activity widget
+export interface ActivityItem {
+  id: string
+  type: 'info' | 'success' | 'warning' | 'error'
+  title: string
+  description?: string
+  timestamp: Date
+  user?: {
+    name: string
+    avatar?: string
+  }
+  icon?: ReactNode
+}
+
+// Progress widget
+export interface ProgressData {
+  id: string
+  title: string
+  current: number
+  target: number
+  unit?: string
+  color?: 'primary' | 'success' | 'warning' | 'danger'
+  deadline?: Date
+}
+
+// Comparison widget
+export interface ComparisonData {
+  periods: Array<{
+    label: string
+    value: number
+    data?: any[]
+  }>
+  metric: string
+  unit?: string
+  showChart?: boolean
+}
+
+// Widget base interface
+export interface Widget {
+  id: string
+  type: WidgetType
+  title: string
+  description?: string
+  size: WidgetSize
+  position: WidgetPosition
+  data?: any
+  config?: any
+  loading?: boolean
+  error?: string
+  refreshInterval?: number // ms
+  lastUpdated?: Date
+  permissions?: {
+    canEdit?: boolean
+    canDelete?: boolean
+    canResize?: boolean
+    canMove?: boolean
+  }
+}
+
+// Dashboard configuration
+export interface DashboardConfig {
+  id: string
+  name: string
+  description?: string
+  theme: DashboardTheme
+  layout: {
+    rowHeight: number
+    margin: [number, number]
+    containerPadding: [number, number]
+    breakpoints: {
+      lg: number
+      md: number
+      sm: number
+      xs: number
+      xxs: number
+    }
+    cols: {
+      lg: number
+      md: number
+      sm: number
+      xs: number
+      xxs: number
+    }
+  }
+  widgets: Widget[]
+  filters?: {
+    timeRange?: TimeRange
+    dimensions?: Record<string, any>
+  }
+  createdAt: Date
+  updatedAt: Date
+  createdBy?: string
+  shared?: boolean
+  tags?: string[]
+}
+
+// Dashboard template
+export interface DashboardTemplate {
+  id: string
+  name: string
+  description: string
+  thumbnail?: string
+  category: 'analytics' | 'sales' | 'operations' | 'finance' | 'marketing' | 'custom'
+  widgets: Omit<Widget, 'id'>[]
+  theme: DashboardTheme
+  popularity?: number
+  isPro?: boolean
+}
+
+// WebSocket message
+export interface DashboardUpdate {
+  type: 'widget-update' | 'notification' | 'alert' | 'refresh'
+  widgetId?: string
+  data?: any
+  timestamp: Date
+}
+
+// Export format
+export type ExportFormat = 'json' | 'csv' | 'pdf' | 'png'
+
+// Filter types
+export interface DashboardFilter {
+  id: string
+  type: 'select' | 'multiselect' | 'daterange' | 'search' | 'toggle'
+  label: string
+  field: string
+  options?: Array<{ value: any; label: string }>
+  defaultValue?: any
+}
+
+// Notification
+export interface DashboardNotification {
+  id: string
+  type: 'info' | 'success' | 'warning' | 'error'
+  title: string
+  message?: string
+  timestamp: Date
+  read?: boolean
+  action?: {
+    label: string
+    handler: () => void
+  }
+}