today and upcoming tasks

web/components/ui/date-picker.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+import { format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+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"
+
+interface DatePickerProps {
+	date: Date | undefined
+	onDateChange: (date: Date | undefined) => void
+	className?: string
+}
+
+export function DatePicker({ date, onDateChange, className }: DatePickerProps) {
+	return (
+		<Popover>
+			<PopoverTrigger asChild>
+				<Button
+					variant={"outline"}
+					className={cn("w-[240px] justify-start text-left font-normal", !date && "text-muted-foreground", className)}
+				>
+					<CalendarIcon className="mr-2 h-4 w-4" />
+					{date ? format(date, "PPP") : <span>Pick a date</span>}
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-auto p-0" align="start">
+				<Calendar mode="single" selected={date} onSelect={onDateChange} initialFocus />
+			</PopoverContent>
+		</Popover>
+	)
+}