feat: add Today / Next week / Next month quick selectors to date picker

src/components/date-time-picker.tsx

@@ -1,6 +1,14 @@
 "use client";
 
-import { format, isValid, parse, parseISO } from "date-fns";
+import {
+	addMonths,
+	addWeeks,
+	format,
+	isValid,
+	parse,
+	parseISO,
+	startOfDay,
+} from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import * as React from "react";
 import { Calendar } from "@/components/ui/calendar";
@@ -97,6 +105,17 @@ export function DateTimePicker({
 		onChange(buildValue(base, currentHour, Number(m), allDay));
 	};
 
+	const handleQuickSelect = (day: Date) => {
+		onChange(buildValue(day, currentHour, snappedMinute, allDay));
+		setOpen(false);
+	};
+
+	const quickOptions: { label: string; date: Date }[] = [
+		{ label: "Today", date: startOfDay(new Date()) },
+		{ label: "Next week", date: startOfDay(addWeeks(new Date(), 1)) },
+		{ label: "Next month", date: startOfDay(addMonths(new Date(), 1)) },
+	];
+
 	const displayLabel = parsed
 		? allDay
 			? format(parsed, "MMM d, yyyy")
@@ -124,6 +143,18 @@ export function DateTimePicker({
 					</button>
 				</PopoverTrigger>
 				<PopoverContent className="w-auto p-0" align="start" sideOffset={8}>
+					<div className="flex gap-1 border-b border-border px-3 py-2">
+						{quickOptions.map(({ label, date }) => (
+							<button
+								key={label}
+								type="button"
+								onClick={() => handleQuickSelect(date)}
+								className="rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+							>
+								{label}
+							</button>
+						))}
+					</div>
 					<Calendar
 						mode="single"
 						selected={parsed}