claude/shared-date-range-filter-IAWME

src/components/logged-in/dashboard/dashboard-filters.tsx

@@ -1,94 +1,28 @@
 'use client'
 
-import { Button } from '@/components/ui/button'
-import { Calendar } from '@/components/ui/calendar'
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
-import { cn } from '@/lib/utils'
-import { format } from 'date-fns'
-import { CalendarIcon } from 'lucide-react'
-import { useMemo, useState } from 'react'
-import {
-  DATE_PRESETS,
   type DatePreset,
-  getPresetLabel,
-  useDashboardFilters,
-} from './search-params'
+  DateRangeFilter,
+} from '@/components/logged-in/shared/date-range-filter'
+import { useDashboardFilters } from './search-params'
 
 export function DashboardFilters() {
   const { filters, setFilters } = useDashboardFilters()
-  const [isCalendarOpen, setIsCalendarOpen] = useState(false)
-
-  const selectedRange = useMemo(
-    () => ({
-      from: filters.from ? new Date(filters.from) : undefined,
-      to: filters.to ? new Date(filters.to) : undefined,
-    }),
-    [filters.from, filters.to],
-  )
 
-  const handlePresetClick = (preset: DatePreset) => {
-    if (preset === 'custom') {
-      setIsCalendarOpen(true)
-      return
-    }
-    setFilters({ preset, from: null, to: null })
-  }
-
-  const handleDateSelect = (range: { from?: Date; to?: Date } | undefined) => {
-    if (range?.from) {
-      setFilters({ from: range.from, preset: 'custom' })
-    }
-    if (range?.to) {
-      setFilters({ to: range.to, preset: 'custom' })
-      setIsCalendarOpen(false)
-    }
+  const handleFilterChange = (updates: {
+    preset?: DatePreset
+    from?: Date | null
+    to?: Date | null
+  }) => {
+    setFilters(updates)
   }
 
   return (
-    <div className="flex flex-wrap items-center gap-2">
-      {DATE_PRESETS.filter((p) => p !== 'custom').map((preset) => (
-        <Button
-          key={preset}
-          variant={filters.preset === preset ? 'default' : 'outline'}
-          size="sm"
-          onClick={() => handlePresetClick(preset)}
-        >
-          {getPresetLabel(preset)}
-        </Button>
-      ))}
-
-      <Popover open={isCalendarOpen} onOpenChange={setIsCalendarOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            variant={filters.preset === 'custom' ? 'default' : 'outline'}
-            size="sm"
-            className={cn(
-              'min-w-[140px] justify-start text-left font-normal',
-              filters.preset !== 'custom' && 'text-muted-foreground',
-            )}
-          >
-            <CalendarIcon className="mr-2 size-4" />
-            {filters.preset === 'custom' && filters.from && filters.to ? (
-              `${format(filters.from, 'MMM d')} - ${format(filters.to, 'MMM d')}`
-            ) : (
-              <span>Pick a date range</span>
-            )}
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-auto p-0" align="start">
-          <Calendar
-            mode="range"
-            selected={selectedRange}
-            onSelect={handleDateSelect}
-            captionLayout="dropdown"
-            numberOfMonths={2}
-          />
-        </PopoverContent>
-      </Popover>
-    </div>
+    <DateRangeFilter
+      preset={filters.preset}
+      from={filters.from}
+      to={filters.to}
+      onFilterChange={handleFilterChange}
+    />
   )
 }

src/components/logged-in/dashboard/search-params.ts

@@ -1,10 +1,14 @@
+import {
+  DATE_PRESETS,
+  type DatePreset,
+} from '@/components/logged-in/shared/date-range-filter'
 import { parseAsLocalDate } from '@/lib/utils'
 import { startOfYear, subDays, subMonths } from 'date-fns'
 import { parseAsStringLiteral, useQueryStates } from 'nuqs'
 import { useCallback, useEffect, useRef } from 'react'
 
-export const DATE_PRESETS = ['7d', '30d', '3m', '6m', 'ytd', 'custom'] as const
-export type DatePreset = (typeof DATE_PRESETS)[number]
+export { DATE_PRESETS, type DatePreset }
+export { getPresetLabel } from '@/components/logged-in/shared/date-range-filter'
 
 const STORAGE_KEY = 'dashboard-date-preset'
 const DEFAULT_PRESET: DatePreset = '30d'
@@ -97,23 +101,6 @@ export function getDateRangeFromPreset(
   }
 }
 
-export function getPresetLabel(preset: DatePreset): string {
-  switch (preset) {
-    case '7d':
-      return 'Last 7 days'
-    case '30d':
-      return 'Last 30 days'
-    case '3m':
-      return 'Last 3 months'
-    case '6m':
-      return 'Last 6 months'
-    case 'ytd':
-      return 'Year to date'
-    case 'custom':
-      return 'Custom'
-  }
-}
-
 export function getGroupByFromPreset(
   preset: DatePreset,
 ): 'day' | 'week' | 'month' {

src/components/logged-in/shared/date-range-filter.tsx

@@ -0,0 +1,123 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { cn } from '@/lib/utils'
+import { format } from 'date-fns'
+import { CalendarIcon } from 'lucide-react'
+import { useMemo, useState } from 'react'
+
+export const DATE_PRESETS = ['7d', '30d', '3m', '6m', 'ytd', 'custom'] as const
+export type DatePreset = (typeof DATE_PRESETS)[number]
+
+export function getPresetLabel(preset: DatePreset): string {
+  switch (preset) {
+    case '7d':
+      return 'Last 7 days'
+    case '30d':
+      return 'Last 30 days'
+    case '3m':
+      return 'Last 3 months'
+    case '6m':
+      return 'Last 6 months'
+    case 'ytd':
+      return 'Year to date'
+    case 'custom':
+      return 'Custom'
+  }
+}
+
+interface DateRangeFilterProps {
+  preset: DatePreset
+  from: Date | null
+  to: Date | null
+  onFilterChange: (updates: {
+    preset?: DatePreset
+    from?: Date | null
+    to?: Date | null
+  }) => void
+}
+
+export function DateRangeFilter({
+  preset,
+  from,
+  to,
+  onFilterChange,
+}: DateRangeFilterProps) {
+  const [isCalendarOpen, setIsCalendarOpen] = useState(false)
+
+  const selectedRange = useMemo(
+    () => ({
+      from: from ? new Date(from) : undefined,
+      to: to ? new Date(to) : undefined,
+    }),
+    [from, to],
+  )
+
+  const handlePresetClick = (selectedPreset: DatePreset) => {
+    if (selectedPreset === 'custom') {
+      setIsCalendarOpen(true)
+      return
+    }
+    onFilterChange({ preset: selectedPreset, from: null, to: null })
+  }
+
+  const handleDateSelect = (range: { from?: Date; to?: Date } | undefined) => {
+    if (range?.from) {
+      onFilterChange({ from: range.from, preset: 'custom' })
+    }
+    if (range?.to) {
+      onFilterChange({ to: range.to, preset: 'custom' })
+      setIsCalendarOpen(false)
+    }
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      {DATE_PRESETS.filter((p) => p !== 'custom').map((presetOption) => (
+        <Button
+          key={presetOption}
+          variant={preset === presetOption ? 'default' : 'outline'}
+          size="sm"
+          onClick={() => handlePresetClick(presetOption)}
+        >
+          {getPresetLabel(presetOption)}
+        </Button>
+      ))}
+
+      <Popover open={isCalendarOpen} onOpenChange={setIsCalendarOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant={preset === 'custom' ? 'default' : 'outline'}
+            size="sm"
+            className={cn(
+              'min-w-[140px] justify-start text-left font-normal',
+              preset !== 'custom' && 'text-muted-foreground',
+            )}
+          >
+            <CalendarIcon className="mr-2 size-4" />
+            {preset === 'custom' && from && to ? (
+              `${format(from, 'MMM d')} - ${format(to, 'MMM d')}`
+            ) : (
+              <span>Pick a date range</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            mode="range"
+            selected={selectedRange}
+            onSelect={handleDateSelect}
+            captionLayout="dropdown"
+            numberOfMonths={2}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}