@moontra/moonui-pro 2.20.1 → 2.20.3

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

@@ -1,336 +0,0 @@
-"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 { cn } from "../../lib/utils";
-import { CalendarIcon, 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;
-    }>({
-        from: undefined,
-        to: undefined,
-    });
-    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(
-                    "time-range-popover w-auto max-w-[95vw] sm:max-w-4xl p-0 overflow-hidden",
-                    glassmorphism &&
-                        "bg-background/95 backdrop-blur-md border-white/10"
-                )}
-                align="end"
-                side="bottom"
-                sideOffset={4}
-                collisionPadding={16}
-            >
-                <motion.div
-                    initial={{ opacity: 0, y: -10 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.2 }}
-                    className="min-w-0"
-                >
-                    {/* Mobile: Stacked Layout */}
-                    <div className="sm:hidden">
-                        {/* Custom tarih seçici */}
-                        <div className="p-3">
-                            {/* Karşılaştırma */}
-                            {showComparison && (
-                                <div className="mt-3 pt-3 border-t">
-                                    <label className="flex items-center gap-2 cursor-pointer">
-                                        <input
-                                            type="checkbox"
-                                            checked={comparisonEnabled}
-                                            onChange={(e) =>
-                                                setComparisonEnabled(
-                                                    e.target.checked
-                                                )
-                                            }
-                                            className="rounded w-3 h-3"
-                                        />
-                                        <span className="text-xs">
-                                            Compare to previous
-                                        </span>
-                                    </label>
-                                </div>
-                            )}
-                        </div>
-                    </div>
-
-                    {/* Desktop: Side by Side Layout */}
-                    <div className="hidden sm:flex">
-                        {/* Preset'ler */}
-                        {showPresets && (
-                            <div className="preset-column border-r p-3 min-w-[140px]">
-                                <div className="grid grid-cols-1 gap-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 whitespace-nowrap",
-                                                "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 w-4 h-4"
-                                            />
-                                            <span className="text-sm">
-                                                Compare to previous period
-                                            </span>
-                                        </label>
-                                    </div>
-                                )}
-                            </div>
-                        )}
-
-                        {/* Custom tarih seçici */}
-                        <div className="p-3 flex-1">
-                            <div className="overflow-x-auto">
-                                <Calendar
-                                    mode="range"
-                                    selected={{
-                                        from: customRange.from,
-                                        to: customRange.to,
-                                    }}
-                                    onSelect={(range: any) =>
-                                        setCustomRange(
-                                            range || {
-                                                from: undefined,
-                                                to: undefined,
-                                            }
-                                        )
-                                    }
-                                    numberOfMonths={2}
-                                    showOutsideDays={true}
-                                    className="rounded-md"
-                                />
-                            </div>
-
-                            <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({
-                                                from: undefined,
-                                                to: undefined,
-                                            });
-                                            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

@@ -1,222 +0,0 @@
-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
-  }
-}