mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-23 08:11:13 -05:00
Refactor: Implement app-wide DatePicker enhancements
This commit is contained in:
gpt-engineer-app[bot]
182
src/components/ui/date-range-picker.tsx
Normal file
182
src/components/ui/date-range-picker.tsx
Normal file
@@ -0,0 +1,182 @@
|
||||
import * as React from "react";
|
||||
import { format } from "date-fns";
|
||||
import { CalendarIcon, X } from "lucide-react";
|
||||
import type { DateRange as CalendarDateRange } from "react-day-picker";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Calendar } from "@/components/ui/calendar";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
export interface DateRange {
|
||||
from?: Date;
|
||||
to?: Date;
|
||||
}
|
||||
|
||||
export interface DateRangePickerProps {
|
||||
value?: DateRange;
|
||||
onChange?: (range: DateRange | undefined) => void;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
className?: string;
|
||||
disableFuture?: boolean;
|
||||
disablePast?: boolean;
|
||||
fromYear?: number;
|
||||
toYear?: number;
|
||||
presets?: Array<{
|
||||
label: string;
|
||||
range: DateRange;
|
||||
}>;
|
||||
}
|
||||
|
||||
const defaultPresets = [
|
||||
{
|
||||
label: "Today",
|
||||
range: {
|
||||
from: new Date(),
|
||||
to: new Date(),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Last 7 days",
|
||||
range: {
|
||||
from: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
|
||||
to: new Date(),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Last 30 days",
|
||||
range: {
|
||||
from: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
|
||||
to: new Date(),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "This year",
|
||||
range: {
|
||||
from: new Date(new Date().getFullYear(), 0, 1),
|
||||
to: new Date(),
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export function DateRangePicker({
|
||||
value,
|
||||
onChange,
|
||||
placeholder = "Pick a date range",
|
||||
disabled = false,
|
||||
className,
|
||||
disableFuture = false,
|
||||
disablePast = false,
|
||||
fromYear,
|
||||
toYear,
|
||||
presets = defaultPresets,
|
||||
}: DateRangePickerProps) {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const handleSelect = (range: DateRange | undefined) => {
|
||||
onChange?.(range);
|
||||
};
|
||||
|
||||
const handlePresetSelect = (preset: DateRange) => {
|
||||
handleSelect(preset);
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
handleSelect(undefined);
|
||||
};
|
||||
|
||||
const getDisabledDates = (date: Date) => {
|
||||
const now = new Date();
|
||||
if (disableFuture && date > now) return true;
|
||||
if (disablePast && date < now) return true;
|
||||
return false;
|
||||
};
|
||||
|
||||
const formatRange = (range: DateRange | undefined) => {
|
||||
if (!range?.from) return placeholder;
|
||||
if (!range.to) return format(range.from, "MMM dd, yyyy");
|
||||
if (range.from.getTime() === range.to.getTime()) {
|
||||
return format(range.from, "MMM dd, yyyy");
|
||||
}
|
||||
return `${format(range.from, "MMM dd, yyyy")} - ${format(range.to, "MMM dd, yyyy")}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn("grid gap-2", className)}>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full justify-start text-left font-normal",
|
||||
!value?.from && "text-muted-foreground"
|
||||
)}
|
||||
disabled={disabled}
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
<span className="truncate flex-1">
|
||||
{formatRange(value)}
|
||||
</span>
|
||||
{value?.from && (
|
||||
<X
|
||||
className="ml-2 h-4 w-4 hover:text-destructive"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleClear();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<div className="flex">
|
||||
<div className="flex flex-col sm:flex-row">
|
||||
<Calendar
|
||||
initialFocus
|
||||
mode="range"
|
||||
defaultMonth={value?.from}
|
||||
selected={value as CalendarDateRange}
|
||||
onSelect={handleSelect as (range: CalendarDateRange | undefined) => void}
|
||||
numberOfMonths={2}
|
||||
disabled={getDisabledDates}
|
||||
className="p-3 pointer-events-auto"
|
||||
fromYear={fromYear}
|
||||
toYear={toYear}
|
||||
/>
|
||||
</div>
|
||||
{presets.length > 0 && (
|
||||
<div className="flex flex-col gap-2 border-l p-3">
|
||||
<div className="text-sm font-medium text-foreground">Presets</div>
|
||||
<div className="grid gap-1">
|
||||
{presets.map((preset, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="justify-start text-left h-auto p-2"
|
||||
onClick={() => handlePresetSelect(preset.range)}
|
||||
>
|
||||
{preset.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
{value?.from && (
|
||||
<Badge variant="secondary" className="w-fit">
|
||||
{formatRange(value)}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
143
src/components/ui/month-year-picker.tsx
Normal file
143
src/components/ui/month-year-picker.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
import * as React from "react";
|
||||
import { format } from "date-fns";
|
||||
import { CalendarIcon, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
export interface MonthYearPickerProps {
|
||||
date?: Date;
|
||||
onSelect?: (date: Date | undefined) => void;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
className?: string;
|
||||
fromYear?: number;
|
||||
toYear?: number;
|
||||
}
|
||||
|
||||
export function MonthYearPicker({
|
||||
date,
|
||||
onSelect,
|
||||
placeholder = "Pick month and year",
|
||||
disabled = false,
|
||||
className,
|
||||
fromYear = 1800,
|
||||
toYear = new Date().getFullYear(),
|
||||
}: MonthYearPickerProps) {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [tempMonth, setTempMonth] = React.useState(date?.getMonth() ?? new Date().getMonth());
|
||||
const [tempYear, setTempYear] = React.useState(date?.getFullYear() ?? new Date().getFullYear());
|
||||
|
||||
const months = [
|
||||
"January", "February", "March", "April", "May", "June",
|
||||
"July", "August", "September", "October", "November", "December"
|
||||
];
|
||||
|
||||
const years = Array.from(
|
||||
{ length: toYear - fromYear + 1 },
|
||||
(_, i) => toYear - i
|
||||
);
|
||||
|
||||
const handleSelect = () => {
|
||||
const newDate = new Date(tempYear, tempMonth, 1);
|
||||
onSelect?.(newDate);
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
onSelect?.(undefined);
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
if (date) {
|
||||
setTempMonth(date.getMonth());
|
||||
setTempYear(date.getFullYear());
|
||||
}
|
||||
}, [date]);
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full justify-start text-left font-normal",
|
||||
!date && "text-muted-foreground",
|
||||
className
|
||||
)}
|
||||
disabled={disabled}
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
<span className="truncate">
|
||||
{date ? format(date, "MMMM yyyy") : placeholder}
|
||||
</span>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-4" align="start">
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Month</label>
|
||||
<Select
|
||||
value={tempMonth.toString()}
|
||||
onValueChange={(value) => setTempMonth(parseInt(value))}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{months.map((month, index) => (
|
||||
<SelectItem key={month} value={index.toString()}>
|
||||
{month}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Year</label>
|
||||
<Select
|
||||
value={tempYear.toString()}
|
||||
onValueChange={(value) => setTempYear(parseInt(value))}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="max-h-[200px]">
|
||||
{years.map((year) => (
|
||||
<SelectItem key={year} value={year.toString()}>
|
||||
{year}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" onClick={handleSelect} className="flex-1">
|
||||
Select
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" onClick={handleClear}>
|
||||
Clear
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user