@moontra/moonui-pro 2.5.13 → 2.6.0

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

@@ -1,269 +1,336 @@
-"use client"
+"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'
+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
+    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
-      }
-    }
-  }
-]
+    {
+        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
+    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 [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
+    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')}`
-  }
+    // 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)
-  }
+    // 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)
-    }
-  }
+    // 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="end"
-        side="bottom"
-        sideOffset={4}
-      >
-        <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>
+    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"
                 )}
-              </div>
-            )}
+                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">
-              <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"
-              />
+                        {/* 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({})
-                      setIsOpen(false)
-                    }}
-                  >
-                    Cancel
-                  </Button>
-                  <Button
-                    size="sm"
-                    onClick={handleCustomRangeSelect}
-                    disabled={!customRange.from || !customRange.to}
-                  >
-                    Apply
-                  </Button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </motion.div>
-      </PopoverContent>
-    </Popover>
-  )
+                            <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
+export default TimeRangePicker;